/* ============================================================
   Toza Hudud — shared design system
   ============================================================ */

:root{
  /* Surface */
  --bg:        #f8f9fc;
  --panel:     #ffffff;
  --panel-2:   #f3f4f8;
  --line:      #e5e7f0;
  --line-2:    #edeef5;

  /* Ink */
  --ink:       #1a1b2e;
  --ink-2:     #3d3e54;
  --muted:     #6b6d82;
  --faint:     #9496a8;

  /* Brand — purple/indigo */
  --brand:     oklch(0.55 0.16 285);
  --brand-2:   oklch(0.45 0.16 285);
  --brand-ink: oklch(0.35 0.12 285);
  --brand-tint:oklch(0.96 0.03 285);

  /* Status */
  --warn:      oklch(0.66 0.13 75);
  --warn-tint: oklch(0.96 0.04 80);
  --warn-ink:  oklch(0.40 0.13 75);
  --danger:    oklch(0.58 0.16 30);
  --danger-tint:oklch(0.96 0.04 30);
  --danger-ink: oklch(0.45 0.15 30);
  --info:      oklch(0.55 0.10 240);
  --info-tint: oklch(0.96 0.03 240);
  --info-ink:  oklch(0.42 0.10 240);

  /* Fuel types */
  --fuel-d:    oklch(0.58 0.13 240);
  --fuel-g:    oklch(0.55 0.13 150);
  --fuel-b:    oklch(0.62 0.13 60);

  /* Sidebar — light */
  --side:      #ffffff;
  --side-2:    #f3f4f8;
  --side-ink:  #1a1b2e;
  --side-mute: #6b6d82;
  --side-line: #e5e7f0;

  --radius:    14px;
  --radius-sm: 8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
}
a{color:inherit}

/* ============== Layout ============== */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}

/* ============== Sidebar ============== */
.side{
  background:var(--side);
  color:var(--side-ink);
  padding:18px 14px 24px;
  border-right:1px solid var(--side-line);
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
  overflow-y:auto;
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}

.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 14px;
  margin-bottom:6px;
  border-bottom:1px solid var(--side-line);
}
.brand .mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(155deg, oklch(0.55 0.16 285), oklch(0.42 0.14 285));
  display:grid; place-items:center; color:#fff;
  box-shadow:0 2px 8px oklch(0.45 0.16 285 / .25);
}
.brand .t1{font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--ink)}
.brand .t2{font-size:11px; color:var(--side-mute); margin-top:1px; letter-spacing:.02em}

.group-label{
  font-size:10.5px; font-weight:600; letter-spacing:.11em;
  color:var(--faint); text-transform:uppercase;
  padding:14px 10px 6px;
}
.nav{display:flex; flex-direction:column; gap:1px}
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:8px;
  color:var(--side-mute); text-decoration:none;
  font-size:13.5px; font-weight:450;
  transition:background .12s;
}
.nav a:hover{ background:var(--side-2); color:var(--ink) }
.nav a.active{
  background:var(--brand-tint);
  color:var(--brand-2);
  font-weight:500;
}
.nav a .ic{ width:18px; height:18px; flex-shrink:0; color:var(--faint) }
.nav a:hover .ic{ color:var(--ink-2) }
.nav a.active .ic{ color:var(--brand-2) }
.nav a .count{
  margin-left:auto;
  font-size:11px;
  color:var(--side-mute);
  font-variant-numeric:tabular-nums;
}
.nav a.alert .count{ color:var(--warn); font-weight:600 }

.side-foot{
  margin-top:auto;
  border-top:1px solid var(--side-line);
  padding:12px 8px 4px;
  display:flex; flex-direction:column; gap:10px;
}
.side-foot .su-row{ display:flex; align-items:center; gap:10px; }
.side-foot .su-meta{ flex:1; min-width:0; }
.avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-2);
  display:grid;place-items:center;
  font-size:12px;font-weight:600;flex-shrink:0;
  border:1px solid var(--line);
}
.side-foot .u1{font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .u2{font-size:11px;color:var(--side-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-logout{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:7px 10px;
  background:transparent; border:1px solid var(--side-line); border-radius:8px;
  color:var(--side-mute); font-family:inherit; font-size:12.5px; font-weight:500;
  cursor:pointer; transition:background .15s,color .15s;
}
.side-logout:hover{ background:var(--side-2); color:var(--ink) }
.side-logout:disabled{ opacity:.6; cursor:default }
.side-logout .ic{ width:15px;height:15px }

/* ============== Main ============== */
.main{ padding:24px 32px 48px; min-width:0; }

.topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:22px; gap:24px;
}
.crumb{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.crumb .sep{color:var(--faint)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink-2)}
h1{
  font-size:22px; font-weight:600; margin:6px 0 4px;
  letter-spacing:-.015em;
}
.sub{
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:14px;
}
.sub .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px oklch(0.55 0.16 285 / .18); display:inline-block}
.sub .live{display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-weight:500}

.top-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.search{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:7px 11px;
  width:240px; color:var(--muted); font-size:13px;
}
.search input{
  border:0; background:transparent; outline:none;
  font:inherit; color:var(--ink); flex:1; min-width:0;
}
.kbd{
  font-family:'Geist Mono', ui-monospace, monospace;
  font-size:10.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; background:var(--panel-2);
}
.icon-btn{
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--line); background:var(--panel);
  display:grid;place-items:center; cursor:pointer; color:var(--ink-2);
  position:relative;
}
.icon-btn:hover{background:var(--panel-2)}
.icon-btn .bell-dot{
  position:absolute; top:7px; right:7px; width:7px;height:7px; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 2px var(--panel);
}

/* ============== Buttons ============== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-weight:500; font-size:13px;
  padding:8px 14px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; line-height:1;
  text-decoration:none; color:inherit;
}
.btn .ic{width:15px;height:15px}
.btn.primary{
  background:var(--brand-2); color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary:hover{background:oklch(0.40 0.16 285)}
.btn.ghost{
  background:var(--panel); color:var(--ink); border-color:var(--line);
}
.btn.ghost:hover{background:var(--panel-2)}
.btn.sm{padding:6px 10px; font-size:12.5px}
.btn.danger{background:var(--danger); color:#fff}
.btn.danger:hover{background:oklch(0.50 0.16 30)}

/* ============== Custom confirm dialog ============== */
.tz-ovl{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:oklch(0.2 0.02 285 / .45);
  opacity:0; transition:opacity .15s ease;
}
.tz-ovl.show{opacity:1}
.tz-dlg{
  width:100%; max-width:420px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 50px -12px oklch(0.2 0.05 285 / .35);
  padding:24px; text-align:center;
  transform:translateY(8px) scale(.98); transition:transform .15s ease;
}
.tz-ovl.show .tz-dlg{transform:none}
.tz-dlg-ic{
  width:48px; height:48px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--panel-2); color:var(--ink-2);
}
.tz-dlg-ic.danger{background:var(--danger-tint); color:var(--danger-ink)}
.tz-dlg-ic .ic{width:24px; height:24px}
.tz-dlg-title{font-size:16px; font-weight:600; color:var(--ink); margin-bottom:6px}
.tz-dlg-msg{font-size:13.5px; color:var(--muted); line-height:1.5; white-space:pre-line}
.tz-dlg-actions{display:flex; gap:10px; margin-top:22px}
.tz-dlg-actions .btn{flex:1; justify-content:center}

/* ============== Segment / tabs ============== */
.seg{
  display:inline-flex; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:2px;
}
.seg button, .seg a{
  font:inherit; font-size:12.5px; font-weight:500;
  border:0; background:transparent; color:var(--muted);
  padding:5px 11px; border-radius:6px; cursor:pointer;
  text-decoration:none;
}
.seg button.on, .seg a.on{background:var(--ink); color:#fff}

.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:18px;
}
.tabs a, .tabs button{
  padding:9px 16px;
  font:inherit; font-size:13px; font-weight:500; color:var(--muted);
  text-decoration:none; border:1px solid var(--line);
  background:var(--panel); border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; transition:all .15s ease;
}
.tabs a:hover, .tabs button:hover{color:var(--ink); background:var(--panel-2); border-color:var(--faint)}
.tabs a.active, .tabs button.active{
  background:var(--brand-tint); color:var(--brand-2);
  border-color:oklch(0.80 0.08 285); font-weight:600;
}
.tabs a .ic, .tabs button .ic{width:15px;height:15px}
.tabs a.active .ic, .tabs button.active .ic{color:var(--brand-2)}

/* ============== Cards ============== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow-x:auto;
}
.tbl th:last-child,
.tbl td:last-child{
  position:sticky; right:0;
  background:var(--panel);
  border-left:1px solid var(--line-2);
}
.tbl th:last-child{background:var(--panel-2)}
.tbl tbody tr:hover td:last-child{background:var(--panel-2)}
.card-h{
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line-2);
  gap:12px;
}
.card-h .title{font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px}
.card-h .title .badge{
  font-size:11px; font-weight:500;
  padding:2px 7px; border-radius:99px;
  background:var(--panel-2); color:var(--muted);
  border:1px solid var(--line-2);
}
.card-h .title .badge.alert{background:var(--danger-tint); color:var(--danger-ink); border:0}
.card-h .title .badge.warn{background:var(--warn-tint); color:var(--warn-ink); border:0}
.card-h .title .badge.ok{background:var(--brand-tint); color:var(--brand-ink); border:0}
.card-h .actions{display:flex; gap:6px; align-items:center; color:var(--muted)}
.card-h .link{font-size:12.5px; color:var(--brand-2); text-decoration:none; font-weight:500}
.card-h .link:hover{text-decoration:underline}

/* ============== Filter bar ============== */
.filterbar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  display:flex; flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.filterbar .grow{flex:1; min-width:0}
.filterbar .right{margin-left:auto; display:flex; gap:8px; align-items:center}

.field{ position:relative; }
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px;
  outline:none; width:100%;
  font-size:13px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px oklch(0.55 0.16 285 / .12);
}
.field input.icon-l{padding-left:32px}
.field .ic-l{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--muted); pointer-events:none;
}
.field select{
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376746c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:28px;
}
.field-row{display:flex; gap:10px}
.field-row > *{flex:1}
.field label, .lbl{
  display:flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--muted); font-weight:500;
  margin-bottom:5px;
}
.lbl .req{color:var(--danger)}
.field .auto{
  background:var(--brand-tint); border-color:transparent;
  color:var(--brand-ink); font-style:italic;
}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:5px}

/* Section in form */
.form-sect{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px 20px;
  margin-bottom:14px;
}
.form-sect h3{
  font-size:14px; font-weight:600;
  margin:0 0 16px;
  display:flex; align-items:center; gap:9px;
  color:var(--ink);
}
.form-sect h3 .ic-wrap{
  width:26px; height:26px; border-radius:6px;
  background:var(--brand-tint); color:var(--brand-ink);
  display:grid; place-items:center;
}
.form-sect h3 .ic-wrap.warn{background:var(--warn-tint); color:var(--warn-ink)}
.form-sect h3 .ic-wrap.danger{background:var(--danger-tint); color:var(--danger-ink)}
.form-sect h3 .ic-wrap.info{background:var(--info-tint); color:var(--info-ink)}
.form-sect h3 .ic-wrap .ic{width:14px; height:14px}
.form-sect h3 .muted{font-weight:400; font-size:12.5px; color:var(--muted)}
.form-grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.form-grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}
.form-grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}

/* ============== Table ============== */
.tbl{width:100%; border-collapse:collapse}
.tbl th{
  text-align:left; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  padding:10px 18px; border-bottom:1px solid var(--line-2);
  background:var(--panel-2);
  white-space:nowrap;
}
.tbl td{
  padding:11px 18px; border-bottom:1px solid var(--line-2);
  font-size:13px; color:var(--ink-2);
  vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--panel-2)}
.tbl tr.clickable{cursor:pointer}
.tbl .veh{display:flex; align-items:center; gap:10px}
.plate{
  font-family:'Geist Mono', monospace;
  font-size:11.5px; font-weight:600;
  padding:3px 7px; border-radius:5px;
  background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--ink); letter-spacing:.02em;
  white-space:nowrap;
}
.num-c{font-family:'Geist Mono', monospace; font-variant-numeric:tabular-nums}
.right{text-align:right}
.center{text-align:center}

/* ============== Pills / chips ============== */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:500;
  padding:3px 9px; border-radius:99px;
  background:var(--panel-2); color:var(--muted);
  border:1px solid var(--line-2);
  white-space:nowrap;
}
.pill::before{content:''; width:6px;height:6px;border-radius:50%; background:currentColor}
.pill.ok{background:var(--brand-tint); color:var(--brand-ink); border:0}
.pill.warn{background:var(--warn-tint); color:var(--warn-ink); border:0}
.pill.danger{background:var(--danger-tint); color:var(--danger-ink); border:0}
.pill.info{background:var(--info-tint); color:var(--info-ink); border:0}
.pill.no-dot::before{display:none}

/* Fuel chip */
.fuel{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:500;
}
.fuel::before{
  content:''; width:9px;height:9px;border-radius:50%;
  border:1.5px solid currentColor; background:transparent;
  display:inline-block;
}
.fuel.diesel{color:var(--fuel-d)}
.fuel.gas{color:var(--fuel-g)}
.fuel.benzin{color:var(--fuel-b)}
.fuel.diesel::before{background:var(--fuel-d); border-color:var(--fuel-d)}
.fuel.gas::before{background:var(--fuel-g); border-color:var(--fuel-g)}
.fuel.benzin::before{background:var(--fuel-b); border-color:var(--fuel-b)}

/* ============== Pagination ============== */
.pag{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--muted);
}
.pag .pages{display:flex; gap:4px; align-items:center}
.pag .pages a, .pag .pages span{
  min-width:28px; height:28px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid var(--line);
  text-decoration:none; color:var(--ink-2); font-weight:500;
  font-variant-numeric:tabular-nums;
}
.pag .pages a:hover{background:var(--panel-2)}
.pag .pages .on{background:var(--ink); color:#fff; border-color:var(--ink)}
.pag .pages .nav-btn{padding:0 10px}
.pag .pages .disabled{opacity:.4; pointer-events:none}

/* ============== Empty state ============== */
.empty{
  padding:56px 24px; text-align:center;
}
.empty .ic-wrap{
  width:56px; height:56px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--ink-2);
  margin:0 auto 14px;
}
.empty .ic-wrap .ic{width:24px; height:24px}
.empty h4{font-size:15px; margin:0 0 6px; font-weight:600}
.empty p{font-size:13px; color:var(--muted); margin:0 0 18px; max-width:380px; margin-left:auto; margin-right:auto}

/* ============== Alert list (used on dashboard etc) ============== */
.alert-list{padding:6px 0}
.alert-list .row-i{
  display:grid; grid-template-columns:34px 1fr auto auto; gap:14px;
  align-items:center;
  padding:11px 18px;
  border-bottom:1px solid var(--line-2);
}
.alert-list .row-i:last-child{border-bottom:0}
.ic-cell{
  width:34px;height:34px;border-radius:8px;
  display:grid; place-items:center; flex-shrink:0;
}
.ic-cell.danger{background:var(--danger-tint); color:var(--danger-ink)}
.ic-cell.warn{background:var(--warn-tint); color:var(--warn-ink)}
.ic-cell.ok{background:var(--brand-tint); color:var(--brand-ink)}
.ic-cell.info{background:var(--info-tint); color:var(--info-ink)}
.ic-cell.neut{background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line-2)}
.ic-cell .ic{width:16px;height:16px}

.alert-list .ttl{font-size:13.5px; font-weight:500; color:var(--ink)}
.alert-list .meta{font-size:12px; color:var(--muted); margin-top:1px}
.alert-list .num{
  font-family:'Geist Mono', monospace;
  font-size:12.5px; font-weight:500;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.alert-list .num.danger{color:var(--danger-ink)}
.alert-list .num.warn{color:var(--warn-ink)}
.alert-list .arrow{color:var(--faint)}

/* ============== KPI ============== */
.kpis{
  display:grid; gap:12px;
  margin-bottom:18px;
}
.kpis.k5{grid-template-columns:repeat(5,1fr)}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
}
.kpi .head{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:12.5px; font-weight:500;
  margin-bottom:14px;
}
.kpi .ic-wrap{
  width:28px;height:28px; border-radius:7px;
  display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--ink-2);
}
.kpi .ic-wrap.brand{background:var(--brand-tint); color:var(--brand-ink); border-color:transparent}
.kpi .ic-wrap.warn{background:var(--warn-tint); color:var(--warn-ink); border-color:transparent}
.kpi .ic-wrap.danger{background:var(--danger-tint); color:var(--danger-ink); border-color:transparent}
.kpi .ic-wrap.info{background:var(--info-tint); color:var(--info-ink); border-color:transparent}
.kpi .ic-wrap .ic{width:16px;height:16px}
.kpi .val{
  font-size:28px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1;
}
.kpi .val .unit{font-size:14px; font-weight:500; color:var(--muted); margin-left:4px}
.kpi .label{font-size:12.5px; color:var(--muted); margin-top:6px}
.kpi .trend{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line-2);
  font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:5px;
  font-variant-numeric:tabular-nums;
}
.trend .up{color:var(--brand-ink); display:inline-flex; align-items:center; gap:3px; font-weight:500}
.trend .dn{color:var(--danger-ink); display:inline-flex; align-items:center; gap:3px; font-weight:500}

/* ============== Utility ============== */
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.row{display:grid; gap:14px; margin-bottom:14px}
.row.r2{grid-template-columns:1fr 1fr}
.row.r3{grid-template-columns:1.6fr 1fr}

/* Mini bars in cell */
.minibar{
  width:90px; height:6px; border-radius:3px;
  background:var(--line-2); position:relative; display:inline-block;
}
.minibar i{
  position:absolute; left:0; top:0; bottom:0;
  border-radius:3px; background:var(--brand);
}
.minibar i.warn{background:var(--warn)}
.minibar i.danger{background:var(--danger)}

/* Chart svg helpers */
.chart-svg{width:100%; display:block}

/* Form footer */
.form-foot{
  display:flex; gap:8px; justify-content:flex-start;
  padding:18px 0 0;
}
.form-foot.between{justify-content:space-between}

/* Inline help / status banner */
.banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  font-size:12.5px; color:var(--ink-2);
  background:var(--info-tint);
  margin-bottom:14px;
}
.banner.ok{background:var(--brand-tint); color:var(--brand-ink)}
.banner.warn{background:var(--warn-tint); color:var(--warn-ink)}
.banner.danger{background:var(--danger-tint); color:var(--danger-ink)}
.banner .ic{width:15px; height:15px; flex-shrink:0}

/* ============================================================
   UI POLISH — transitions, animations, loading states
   ============================================================ */

/* --- Smooth transitions everywhere --- */
.btn{transition:background .15s ease, transform .1s ease, box-shadow .15s ease}
.btn:active{transform:scale(.96)}
.btn.primary:active{box-shadow:0 0 0 3px oklch(0.55 0.16 285 / .2)}
.btn.ghost:active{background:var(--line-2)}

.card{transition:box-shadow .2s ease}
.card:hover{box-shadow:0 2px 12px rgba(0,0,0,.04)}

.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover td{background:oklch(0.98 0.01 285)}

.pill{transition:transform .12s ease}
.pill:hover{transform:scale(1.03)}

.nav a{transition:background .15s ease, color .15s ease, box-shadow .15s ease}

/* --- Input/select focus animation --- */
.field input, .field select, .field textarea{
  transition:border-color .15s ease, box-shadow .2s ease, background .15s ease;
}
.field input:hover, .field select:hover{border-color:var(--faint)}

/* --- Filter bar subtle enhancement --- */
.filterbar{transition:box-shadow .2s ease}
.filterbar:focus-within{box-shadow:0 2px 12px rgba(0,0,0,.04)}

/* --- Banner slide-in animation --- */
@keyframes slideDown{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
.banner{animation:slideDown .25s ease-out}

/* --- Skeleton loading pulse --- */
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.skeleton{
  background:var(--line-2);
  border-radius:6px;
  animation:pulse 1.5s ease-in-out infinite;
}
.skeleton-row{
  display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-2);
}
.skeleton-row .sk{
  height:14px;border-radius:4px;
  background:var(--line-2);
  animation:pulse 1.5s ease-in-out infinite;
}
.skeleton-row .sk-w1{width:90px}
.skeleton-row .sk-w2{width:140px}
.skeleton-row .sk-w3{width:60px}
.skeleton-row .sk-w4{flex:1}

/* --- KPI card hover lift --- */
.kpi{transition:transform .15s ease, box-shadow .2s ease}
.kpi:hover{transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.06)}

/* --- Empty state fade-in --- */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
.empty{animation:fadeIn .3s ease-out}

/* --- Page content fade-in --- */
.main{animation:fadeIn .2s ease-out}

/* --- Table row stagger (subtle) --- */
.tbl tbody tr{animation:fadeIn .2s ease-out both}
.tbl tbody tr:nth-child(1){animation-delay:.02s}
.tbl tbody tr:nth-child(2){animation-delay:.04s}
.tbl tbody tr:nth-child(3){animation-delay:.06s}
.tbl tbody tr:nth-child(4){animation-delay:.08s}
.tbl tbody tr:nth-child(5){animation-delay:.1s}

/* --- Plate number hover --- */
.plate{transition:background .12s ease, border-color .12s ease}
.plate:hover{background:var(--brand-tint); border-color:var(--brand)}

/* --- Clickable row cursor hint --- */
.tbl tr.clickable td:first-child{position:relative}
.tbl tr.clickable:hover td:first-child::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brand); border-radius:0 2px 2px 0;
}

/* --- Smooth scrollbar --- */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* --- Focus visible (accessibility) --- */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible, a:focus-visible{border-radius:8px}

/* --- Modal animation --- */
.modal-bg{animation:fadeIn .2s ease-out}
@keyframes scaleIn{
  from{opacity:0; transform:scale(.95)}
  to{opacity:1; transform:scale(1)}
}
.modal-bg .modal{animation:scaleIn .2s ease-out}