/* ============================================================
   Nageshwar Fleet — modern UI theme
   Layered on top of Bootstrap 5 (class names unchanged)
   ============================================================ */
:root{
  --bg:#eef1f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text:#1c2233;
  --muted:#727a8c;
  --border:#e6e9f2;
  --brand:#4f46e5;
  --brand-2:#7c3aed;
  --brand-grad:linear-gradient(120deg,#4f46e5 0%,#7c3aed 100%);
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --info:#0ea5e9;
  --sidebar-w:250px;
  --topbar-h:62px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,28,52,.06), 0 1px 3px rgba(20,28,52,.05);
  --shadow:0 6px 22px rgba(20,28,52,.08);
  --shadow-lg:0 16px 40px rgba(20,28,52,.14);
}

*{ scrollbar-width:thin; scrollbar-color:#c7cde0 transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#c7cde0; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#aab2cc; background-clip:content-box; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:.92rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-weight:700; letter-spacing:-.01em; color:#161b2b; }
a{ color:var(--brand); }

/* ---------- Topbar ---------- */
.app-topbar{
  background:var(--brand-grad);
  min-height:var(--topbar-h);
  box-shadow:0 2px 18px rgba(79,70,229,.28);
  border:0;
}
.app-topbar .navbar-brand{
  font-weight:800; font-size:1.06rem; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.55rem; color:#fff;
}
.app-topbar .navbar-brand i{
  display:grid; place-items:center; width:34px; height:34px; font-size:1.05rem;
  background:rgba(255,255,255,.18); border-radius:10px; backdrop-filter:blur(4px);
}
.app-topbar .btn-outline-light{ border-color:rgba(255,255,255,.5); border-radius:9px; }
.app-topbar .btn-outline-light:hover{ background:rgba(255,255,255,.16); }

/* ---------- Sidebar ---------- */
.app-sidebar{
  position:fixed; top:var(--topbar-h); bottom:0; left:0; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  overflow-y:auto; padding:1rem .7rem; z-index:1020;
}
.app-sidebar .nav-link{
  display:flex; align-items:center; gap:.7rem;
  color:#4a5167; border-radius:12px; margin:.18rem 0; padding:.62rem .85rem;
  font-size:.92rem; font-weight:500; transition:all .15s ease;
}
.app-sidebar .nav-link i{ width:1.35rem; font-size:1.05rem; color:#98a0b6; transition:color .15s; }
.app-sidebar .nav-link:hover{ background:var(--surface-2); color:var(--brand); }
.app-sidebar .nav-link:hover i{ color:var(--brand); }
.app-sidebar .nav-link.active{
  background:var(--brand-grad); color:#fff; box-shadow:0 8px 18px rgba(79,70,229,.32);
}
.app-sidebar .nav-link.active i{ color:#fff; }

.content{ margin-left:var(--sidebar-w); min-height:calc(100vh - var(--topbar-h)); }
.app-footer{ margin-left:var(--sidebar-w); padding:1.1rem 1.5rem; }
.app-shell{ padding-top:.1rem; }
.flash-toast{ margin:.85rem 1rem 0 calc(var(--sidebar-w) + 1.25rem); border:0; box-shadow:var(--shadow); border-radius:12px; }

@media (max-width:767.98px){
  .app-sidebar{ transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
  .app-sidebar.show{ transform:translateX(0); }
  .content, .app-footer{ margin-left:0; }
  .flash-toast{ margin:.85rem 1rem 0; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.card-header{
  background:transparent; border-bottom:1px solid var(--border);
  font-weight:600; padding:.85rem 1.1rem;
}
.card-body{ padding:1.1rem; }

/* ---------- KPI cards ---------- */
.kpi-card{
  border:1px solid var(--border); border-left:0; border-radius:var(--radius);
  display:flex; align-items:center; gap:1rem; transition:transform .18s ease, box-shadow .18s ease;
}
.kpi-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.kpi-icon{
  flex:0 0 auto; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  font-size:1.4rem; color:var(--brand); background:rgba(79,70,229,.12);
}
.kpi-body{ min-width:0; }
.kpi-val{ font-size:1.7rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.kpi-label{ color:var(--muted); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.kpi-card.ok     .kpi-icon{ color:var(--ok);     background:rgba(16,185,129,.13); }
.kpi-card.warn   .kpi-icon{ color:var(--warn);   background:rgba(245,158,11,.15); }
.kpi-card.danger .kpi-icon{ color:var(--danger); background:rgba(239,68,68,.13); }

/* ---------- Tables ---------- */
.table{ --bs-table-bg:transparent; color:var(--text); margin-bottom:0; }
.table thead th{
  background:var(--surface-2); color:#7a8298; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); padding:.7rem .75rem;
}
.table tbody td{ border-color:#eef1f7; padding:.6rem .75rem; vertical-align:middle; }
.table-hover tbody tr:hover{ background:#f5f7fd; }
.table-sm td, .table-sm th{ padding:.45rem .6rem; }
.card > .table-wrap:last-child .table tbody tr:last-child td{ border-bottom:0; }
.table-wrap{ overflow-x:auto; border-radius:0 0 var(--radius) var(--radius); }
tfoot tr.table-light, tfoot tr.fw-bold{ background:var(--surface-2); }

/* ---------- Buttons ---------- */
.btn{ border-radius:10px; font-weight:600; font-size:.88rem; padding:.45rem .9rem; transition:all .15s ease; }
.btn-sm{ border-radius:8px; padding:.32rem .7rem; font-size:.82rem; }
.btn-primary{ background:var(--brand-grad); border:0; box-shadow:0 6px 16px rgba(79,70,229,.3); }
.btn-primary:hover,.btn-primary:focus{ filter:brightness(1.07); box-shadow:0 8px 20px rgba(79,70,229,.4); }
.btn-outline-primary{ border-color:#cfd2f3; color:var(--brand); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); }
.btn-success{ background:linear-gradient(120deg,#10b981,#059669); border:0; box-shadow:0 6px 16px rgba(16,185,129,.28); }
.btn-outline-secondary{ border-color:var(--border); color:#56607a; }
.btn-outline-secondary:hover{ background:var(--surface-2); color:var(--text); border-color:#cdd3e2; }
.btn:focus-visible{ outline:3px solid rgba(79,70,229,.35); outline-offset:1px; }

/* ---------- Forms ---------- */
.form-control,.form-select{
  border:1px solid #d8dceb; border-radius:10px; font-size:.9rem; color:var(--text); background:var(--surface);
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.16); }
.form-control-sm,.form-select-sm{ border-radius:8px; }
.form-label{ font-weight:600; font-size:.85rem; color:#414a61; margin-bottom:.3rem; }
.form-text{ color:var(--muted); }

/* ---------- Badges ---------- */
.badge{ font-weight:600; padding:.4em .7em; border-radius:999px; letter-spacing:.01em; }
.bg-success{ background:rgba(16,185,129,.15)!important; color:#0a7f5b!important; }
.bg-secondary{ background:rgba(107,114,128,.16)!important; color:#4b5263!important; }
.bg-info{ background:rgba(14,165,233,.16)!important; color:#0369a1!important; }
.bg-dark{ background:rgba(28,34,51,.9)!important; color:#fff!important; }
.badge-ok{ background:rgba(16,185,129,.16); color:#0a7f5b; }
.badge-warn{ background:rgba(245,158,11,.18); color:#a96a06; }
.badge-expired{ background:rgba(239,68,68,.16); color:#c0322b; }

/* ---------- Compliance status cells ---------- */
.status-ok{ background:rgba(16,185,129,.13); }
.status-warn{ background:rgba(245,158,11,.16); }
.status-expired{ background:rgba(239,68,68,.14); }
.status-none{ background:var(--surface-2); color:#9aa1b3; }
.status-ok a,.status-warn a,.status-expired a{ color:inherit; }

/* ---------- Tabs ---------- */
.nav-tabs{ border-bottom:1px solid var(--border); gap:.25rem; }
.nav-tabs .nav-link{ border:0; border-radius:10px 10px 0 0; color:var(--muted); font-weight:600; padding:.55rem .95rem; }
.nav-tabs .nav-link:hover{ color:var(--brand); background:var(--surface-2); }
.nav-tabs .nav-link.active{ color:var(--brand); background:transparent; border-bottom:2.5px solid var(--brand); }

/* ---------- Lists / misc ---------- */
.list-group-item{ border-color:#eef1f7; background:transparent; }
.alert{ border:0; border-radius:12px; }
.alert-info{ background:rgba(14,165,233,.12); color:#075985; }
.alert-success{ background:rgba(16,185,129,.14); color:#0a7f5b; }
.alert-danger{ background:rgba(239,68,68,.13); color:#b02a25; }
.alert-warning{ background:rgba(245,158,11,.15); color:#9a6207; }
.text-muted{ color:var(--muted)!important; }

/* ---------- Attendance grid ---------- */
.att-grid td{ text-align:center; padding:.15rem; }
.att-grid input,.att-grid select{ width:44px; text-align:center; padding:.12rem; border:1px solid #d8dceb; border-radius:7px; font-size:.8rem; }
.att-grid .name-col{ text-align:left; min-width:210px; position:sticky; left:0; background:var(--surface); font-weight:500; }
.att-grid select.p{ background:rgba(16,185,129,.16); border-color:transparent; }
.att-grid select.a{ background:rgba(239,68,68,.16); border-color:transparent; }
.att-grid thead th{ position:sticky; top:0; }

/* ---------- Login ---------- */
body.login-bg{ background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#9333ea 100%); }
.login-wrap{ max-width:400px; margin:9vh auto; padding:0 1rem; }
.login-card{ border:0; box-shadow:var(--shadow-lg); border-radius:20px; backdrop-filter:blur(6px); background:rgba(255,255,255,.98); }
.login-logo{
  width:62px; height:62px; border-radius:18px; background:var(--brand-grad); color:#fff;
  display:grid; place-items:center; font-size:1.7rem; margin:0 auto .7rem; box-shadow:0 10px 24px rgba(79,70,229,.4);
}
.login-wrap .text-muted code{ color:#fff; background:rgba(255,255,255,.18); padding:.1rem .4rem; border-radius:6px; }
.login-wrap > p.text-muted{ color:rgba(255,255,255,.85)!important; }