/* =====================================================================
   FASTAG MLFF — PREMIUM DESIGN SYSTEM
   Deep navy + highway green + restrained saffron accent.
   Built for: Admin login, Public/Command dashboard, Admin panel.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* --- brand palette --- */
  --navy-950:#060f24;
  --navy-900:#0a1830;
  --navy-800:#0f2247;
  --navy-700:#15305e;
  --navy-600:#1c3f7a;

  --green-700:#0b6b45;
  --green-600:#0f8a58;
  --green-500:#12a069;
  --green-soft:#e5f7ee;
  --green-soft-border:#bfe9d4;

  --saffron-600:#e07a1f;
  --saffron-soft:#fff2e2;
  --saffron-soft-border:#f6d9ae;

  --danger-600:#d92d20;
  --danger-soft:#fdecea;
  --danger-soft-border:#f6c6c1;

  --warning-700:#93500c;
  --warning-soft:#fff6e5;

  --ink-900:#0b1220;
  --ink-700:#28324a;
  --ink-500:#5b6577;
  --ink-300:#94a0b4;

  --surface:#ffffff;
  --surface-alt:#f4f6fb;
  --surface-muted:#eef1f8;
  --border:#e3e7f0;
  --border-strong:#d3d9e6;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(9,17,38,.06);
  --shadow-md:0 6px 18px rgba(9,17,38,.08);
  --shadow-lg:0 18px 44px rgba(9,17,38,.16);

  --sidebar-w:264px;
  --topbar-h:72px;

  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--surface-alt);
  color:var(--ink-900);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }

a{ color:inherit; }

::selection{ background:var(--green-soft-border); }

/* =====================================================================
   APP SHELL (sidebar + topbar + content) — used by admin.html & dashboard.html
   ===================================================================== */

.app-shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 100%);
  color:#eef2fb;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:40;
  transition:transform .25s ease;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-mark{
  width:40px; height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--green-500),var(--green-700));
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  box-shadow:0 4px 14px rgba(15,138,88,.45);
  flex-shrink:0;
}

.brand-text{ line-height:1.2; }
.brand-text .title{ font-size:15px; font-weight:800; color:#fff; letter-spacing:.01em; }
.brand-text .subtitle{ font-size:11px; color:#9db0d6; font-weight:500; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }

.sidebar-nav{
  flex:1;
  padding:18px 14px;
  overflow-y:auto;
}

.nav-section-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#6f83ac;
  padding:14px 12px 6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:10px;
  color:#c4d0ea;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  margin-bottom:2px;
  border:1px solid transparent;
  background:transparent;
  width:100%;
  text-align:left;
  transition:background .15s ease, color .15s ease;
}

.nav-item .nav-icon{ font-size:16px; width:20px; text-align:center; flex-shrink:0; }

.nav-item:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.nav-item.active{
  background:linear-gradient(90deg,rgba(15,138,88,.22),rgba(15,138,88,.06));
  color:#fff;
  border-color:rgba(18,160,105,.35);
}

.nav-item.active .nav-icon{ color:var(--green-500); }

.sidebar-footer{
  padding:16px 20px 22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:#bfe9d4;
  background:rgba(18,160,105,.14);
  border:1px solid rgba(18,160,105,.3);
  padding:6px 11px;
  border-radius:var(--radius-pill);
  font-weight:600;
}

.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 3px rgba(18,160,105,.25);
}

.sidebar-logout{
  display:block;
  margin-top:12px;
  font-size:13px;
  color:#8ea0c6;
  text-decoration:none;
  font-weight:600;
}
.sidebar-logout:hover{ color:#fff; }

.sidebar-toggle{
  display:none;
  position:fixed;
  top:16px; left:16px;
  z-index:50;
  background:var(--navy-900);
  color:#fff;
  border:none;
  border-radius:10px;
  width:42px; height:42px;
  font-size:18px;
  cursor:pointer;
  box-shadow:var(--shadow-md);
}

/* main column */
.main-col{
  flex:1;
  margin-left:var(--sidebar-w);
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  position:sticky;
  top:0;
  z-index:30;
}

.topbar-title{ font-size:19px; font-weight:800; color:var(--ink-900); }
.topbar-sub{ font-size:12.5px; color:var(--ink-500); margin-top:2px; font-weight:500; }

.topbar-right{ display:flex; align-items:center; gap:14px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  padding:7px 13px;
  border-radius:var(--radius-pill);
  background:var(--surface-muted);
  color:var(--ink-700);
  border:1px solid var(--border);
}

.content{
  padding:28px 32px 56px;
}

.page-section{ display:none; animation:fadeIn .25s ease; }
.page-section.active{ display:block; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:14px;
}

.section-head h2{ font-size:21px; color:var(--ink-900); }
.section-head .desc{ font-size:13.5px; color:var(--ink-500); margin-top:4px; font-weight:500; }

/* =====================================================================
   KPI CARDS
   ===================================================================== */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:28px;
}

.kpi-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}

.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.kpi-card .kpi-icon{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  margin-bottom:14px;
}

.kpi-card.i-revenue .kpi-icon{ background:var(--green-soft); color:var(--green-700); }
.kpi-card.i-vehicles .kpi-icon{ background:#e7edfb; color:var(--navy-700); }
.kpi-card.i-transactions .kpi-icon{ background:var(--saffron-soft); color:var(--saffron-600); }
.kpi-card.i-violations .kpi-icon{ background:var(--danger-soft); color:var(--danger-600); }

.kpi-card .kpi-label{ font-size:12.5px; font-weight:600; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
.kpi-card .kpi-value{ font-size:28px; font-weight:800; color:var(--ink-900); margin-top:6px; letter-spacing:-.02em; }

/* =====================================================================
   PANELS
   ===================================================================== */

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:24px;
  overflow:hidden;
}

.panel-header{
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.panel-header h3{ font-size:16px; color:var(--ink-900); }
.panel-header .desc{ font-size:12.5px; color:var(--ink-500); margin-top:3px; font-weight:500; }

.panel-body{ padding:24px; }
.panel-body.no-pad{ padding:0; }

.two-col{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
}

@media (max-width:1100px){
  .two-col{ grid-template-columns:1fr; }
}

/* =====================================================================
   BUTTONS / FORMS
   ===================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  padding:12px 20px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  text-decoration:none;
}

.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-primary{
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
  color:#fff;
  box-shadow:0 6px 16px rgba(15,34,71,.28);
}
.btn-primary:hover:not(:disabled){ box-shadow:0 8px 22px rgba(15,34,71,.35); }

.btn-accent{
  background:linear-gradient(135deg,var(--green-500),var(--green-700));
  color:#fff;
  box-shadow:0 6px 16px rgba(15,138,88,.28);
}
.btn-accent:hover:not(:disabled){ box-shadow:0 8px 22px rgba(15,138,88,.35); }

.btn-outline{
  background:var(--surface);
  color:var(--ink-700);
  border-color:var(--border-strong);
}
.btn-outline:hover:not(:disabled){ background:var(--surface-muted); }

.btn-danger-ghost{
  background:var(--danger-soft);
  color:var(--danger-600);
  border-color:var(--danger-soft-border);
}
.btn-danger-ghost:hover:not(:disabled){ background:#fbdcd9; }

.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:8px; }
.btn-block{ width:100%; }

label.field-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-700);
  margin-bottom:7px;
  letter-spacing:.01em;
}

input[type=text],
input[type=password],
input[type=number],
input[type=file]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-900);
  transition:border-color .15s ease, box-shadow .15s ease;
}

input::placeholder{ color:var(--ink-300); }

input:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(18,160,105,.12);
}

.field{ margin-bottom:16px; }

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width:640px){ .field-grid{ grid-template-columns:1fr; } }

.password-wrap{ position:relative; }
.password-toggle{
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  font-size:16px;
  color:var(--ink-500);
  padding:4px;
}

/* =====================================================================
   TABLES
   ===================================================================== */

.table-wrap{ overflow-x:auto; }

table.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}

.data-table thead th{
  background:var(--surface-muted);
  color:var(--ink-500);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.05em;
  text-align:left;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.data-table tbody td{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  color:var(--ink-700);
  vertical-align:middle;
}

.data-table tbody tr:hover{ background:var(--surface-alt); }
.data-table tbody tr:last-child td{ border-bottom:none; }

.plate-mono{
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.03em;
  color:var(--ink-900);
}

.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--ink-500);
}
.empty-state .icon{ font-size:30px; margin-bottom:10px; }
.empty-state .title{ font-weight:700; color:var(--ink-700); font-size:14px; margin-bottom:4px; }
.empty-state .sub{ font-size:12.5px; }

/* =====================================================================
   BADGES
   ===================================================================== */

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:700;
  padding:5px 11px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.badge-success{ background:var(--green-soft); color:var(--green-700); border-color:var(--green-soft-border); }
.badge-danger{ background:var(--danger-soft); color:var(--danger-600); border-color:var(--danger-soft-border); }
.badge-warning{ background:var(--warning-soft); color:var(--warning-700); border-color:var(--saffron-soft-border); }
.badge-neutral{ background:var(--surface-muted); color:var(--ink-500); border-color:var(--border); }

/* legacy .success / .danger spans used by dashboard.html inline result card */
span.success{ background:var(--green-600); color:#fff; padding:6px 14px; border-radius:var(--radius-pill); font-weight:700; font-size:12.5px; }
span.danger{ background:var(--danger-600); color:#fff; padding:6px 14px; border-radius:var(--radius-pill); font-weight:700; font-size:12.5px; }

/* =====================================================================
   UPLOAD / DROPZONE
   ===================================================================== */

.dropzone{
  border:2px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface-alt);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.dropzone:hover, .dropzone.drag-over{
  border-color:var(--green-500);
  background:var(--green-soft);
}

.dropzone .dz-icon{ font-size:30px; margin-bottom:10px; }
.dropzone .dz-title{ font-weight:700; font-size:14px; color:var(--ink-700); }
.dropzone .dz-sub{ font-size:12px; color:var(--ink-500); margin-top:4px; }
.dropzone input[type=file]{ display:none; }

.file-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--surface-muted);
  border:1px solid var(--border);
  padding:8px 13px;
  border-radius:var(--radius-pill);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-700);
  margin-top:12px;
}

/* =====================================================================
   PROCESSING / LOADING
   ===================================================================== */

.processing-panel{
  display:none;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800));
  color:#fff;
  padding:26px 26px 22px;
  margin-top:18px;
}
.processing-panel.active{ display:block; }

.processing-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }

.spinner-ring{
  width:34px; height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--green-500);
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.processing-title{ font-weight:700; font-size:15px; }
.processing-stage{ font-size:13px; color:#b9c6e5; margin-top:3px; transition:opacity .2s ease; }

.progress-track{
  height:6px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
}
.progress-track .bar{
  position:absolute; top:0; left:-40%;
  width:40%; height:100%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--green-500),var(--green-500),transparent);
  animation:indeterminate 1.4s ease-in-out infinite;
}
@keyframes indeterminate{
  0%{ left:-40%; }
  100%{ left:100%; }
}

.processing-note{ font-size:11.5px; color:#8ea0c6; margin-top:12px; }

/* =====================================================================
   RESULT CARD + NUMBER PLATE COMPONENT
   ===================================================================== */

.result-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:5px solid var(--green-600);
  border-radius:var(--radius-lg);
  padding:24px 26px;
  box-shadow:var(--shadow-sm);
}

.result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
  gap:16px;
}
.result-row:last-child{ border-bottom:none; }
.result-row .k{ color:var(--ink-500); font-weight:600; }
.result-row .v{ color:var(--ink-900); font-weight:700; text-align:right; }

.plate-badge{
  display:inline-flex;
  align-items:stretch;
  border:3px solid var(--ink-900);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-mono);
}
.plate-badge .plate-flag{
  background:var(--navy-800);
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  letter-spacing:.04em;
}
.plate-badge .plate-text{
  padding:9px 16px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-900);
}

/* =====================================================================
   IMAGE / VIDEO PREVIEW
   ===================================================================== */

.image-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:6px;
}
@media (max-width:800px){ .image-container{ grid-template-columns:1fr; } }

.preview-box{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-alt);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.preview-box img{ width:100%; display:block; border-radius:var(--radius-md); }
.preview-box .placeholder{ color:var(--ink-300); font-size:13px; font-weight:600; text-align:center; padding:20px; }

video#processedVideo{
  width:100%;
  border-radius:var(--radius-md);
  background:#000;
  box-shadow:var(--shadow-md);
  display:none;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin-top:18px;
}
.stat-tile{
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
}
.stat-tile .k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); }
.stat-tile .v{ font-size:19px; font-weight:800; color:var(--ink-900); margin-top:5px; }

/* =====================================================================
   TOASTS
   ===================================================================== */

.toast-container{
  position:fixed;
  top:20px; right:20px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toast{
  min-width:260px;
  max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--navy-700);
  border-radius:10px;
  padding:13px 16px;
  box-shadow:var(--shadow-lg);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-700);
  animation:toastIn .2s ease;
}
.toast.success{ border-left-color:var(--green-600); }
.toast.error{ border-left-color:var(--danger-600); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(16px);} to{ opacity:1; transform:translateX(0);} }

/* =====================================================================
   LOGIN PAGE
   ===================================================================== */

.login-shell{
  min-height:100vh;
  display:flex;
  background:var(--navy-950);
}

.login-side{
  flex:1.15;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:52px 56px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(18,160,105,.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(224,122,31,.18), transparent 45%),
    linear-gradient(160deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));
  overflow:hidden;
}

.login-side::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 64px);
  pointer-events:none;
}

.login-brand{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.login-brand .brand-mark{ width:48px; height:48px; font-size:22px; }
.login-brand .title{ font-size:19px; font-weight:800; }
.login-brand .subtitle{ font-size:12px; color:#a9bade; text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-top:2px; }

.login-pitch{ position:relative; z-index:1; max-width:460px; }
.login-pitch h2{ font-size:32px; line-height:1.25; font-weight:800; letter-spacing:-.01em; }
.login-pitch p{ font-size:14.5px; color:#b9c6e5; margin-top:14px; line-height:1.6; }

.login-feature-list{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
.login-feature-list li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#dbe4f7; font-weight:500; }
.login-feature-list .dot{ width:7px; height:7px; border-radius:50%; background:var(--green-500); flex-shrink:0; }

.login-footnote{ font-size:11.5px; color:#7c8fb8; position:relative; z-index:1; }

.login-form-side{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-alt);
  padding:40px 24px;
}

.login-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 34px 30px;
  box-shadow:var(--shadow-lg);
}

.login-card h1{ font-size:21px; color:var(--ink-900); }
.login-card .lead{ font-size:13px; color:var(--ink-500); margin-top:6px; margin-bottom:26px; font-weight:500; }

.login-error{
  background:var(--danger-soft);
  border:1px solid var(--danger-soft-border);
  color:var(--danger-600);
  font-size:13px;
  font-weight:600;
  padding:11px 14px;
  border-radius:10px;
  margin-bottom:18px;
}

.login-disclaimer{
  margin-top:22px;
  font-size:11.5px;
  color:var(--ink-500);
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 13px;
  line-height:1.5;
}

@media (max-width:900px){
  .login-side{ display:none; }
}

/* =====================================================================
   RESPONSIVE — SHELL COLLAPSE
   ===================================================================== */

@media (max-width:980px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main-col{ margin-left:0; }
  .sidebar-toggle{ display:flex; align-items:center; justify-content:center; }
  .topbar{ padding-left:70px; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  .kpi-grid{ grid-template-columns:1fr; }
  .content{ padding:20px 16px 40px; }
  .topbar{ padding:0 16px 0 70px; }
}