/* ============================================================
   SAATHI — neumorphic (soft-UI) design system
   Same soft surface everywhere; depth comes only from dual
   shadows: light from top-left, dark from bottom-right.
   Raised = outset shadows · Pressed/fields = inset shadows.
   ============================================================ */
:root{
  --base:#E5E7DF;              /* one khaki-tinted surface for everything */
  --lite:#FFFFFF;              /* highlight shadow */
  --dark:rgba(154,159,138,.60);/* depth shadow */
  --ink:#333828; --ink-soft:#6B7160;
  --olive:#5A6844; --amber:#C97B1B; --green:#4C7A4E; --red:#A63D2F;
  --amber-soft:#EFDFC5; --green-soft:#D9E6D2; --red-soft:#EFD6CE;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --out:7px 7px 14px var(--dark),-7px -7px 14px var(--lite);
  --out-sm:4px 4px 9px var(--dark),-4px -4px 9px var(--lite);
  --in:inset 4px 4px 8px var(--dark),inset -4px -4px 8px var(--lite);
  --in-sm:inset 2px 2px 5px var(--dark),inset -2px -2px 5px var(--lite);
  --mono:"Consolas","Courier New",ui-monospace,monospace;
  --disp:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --base:#23271D; --lite:rgba(255,255,255,.055); --dark:rgba(0,0,0,.55);
    --ink:#E2E3D4; --ink-soft:#9CA28C;
    --olive:#9FB07E; --amber:#E29A3C; --green:#8CBE85; --red:#DA8069;
    --amber-soft:#453619; --green-soft:#2C3E27; --red-soft:#452A22;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--body);line-height:1.5;}
.loading{padding:48px;text-align:center;font-family:var(--mono);color:var(--ink-soft);}

/* ---------- layout ---------- */
.shell{max-width:920px;margin:0 auto;padding:0 14px 90px;}
.topbar{position:sticky;top:0;z-index:500;background:var(--base);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;margin:0 -14px 18px;
  box-shadow:0 6px 12px var(--dark);}
.topbar .brand{font-family:var(--disp);font-weight:900;letter-spacing:.14em;font-size:1.2rem;
  color:var(--olive);display:flex;align-items:center;gap:9px;}
.topbar .brand svg{width:26px;height:26px;}
.topbar .who{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);text-align:right;line-height:1.35;}
.topbar button{background:var(--base);border:0;color:var(--ink);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.66rem;padding:6px 11px;cursor:pointer;box-shadow:var(--out-sm);margin-left:5px;}
.topbar button:active{box-shadow:var(--in-sm);}

h2.sec{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.05rem;margin:26px 0 12px;display:flex;align-items:center;gap:10px;color:var(--ink);}
h2.sec::after{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--dark),transparent);}

.card{background:var(--base);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;box-shadow:var(--out);}

/* ---------- forms ---------- */
.field{margin-bottom:13px;}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px 4px;}
.field label .req{color:var(--red);}
input,select,textarea{width:100%;border:0;background:var(--base);color:var(--ink);
  padding:13px 15px;font-size:1rem;font-family:var(--body);border-radius:var(--r-md);
  box-shadow:var(--in);outline:none;}
input:focus,select:focus,textarea:focus{box-shadow:var(--in),0 0 0 2px var(--amber);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.btn{display:block;width:100%;border:0;cursor:pointer;text-align:center;
  font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.09em;
  padding:15px;font-size:1.02rem;margin-top:10px;border-radius:var(--r-md);
  background:var(--base);color:var(--ink);box-shadow:var(--out);transition:box-shadow .12s;}
.btn:active{box-shadow:var(--in);}
.btn.amber{color:#fff;background:linear-gradient(145deg,#D98B26,#B96F13);}
.btn.green{color:#fff;background:linear-gradient(145deg,#558756,#3F6C41);}
.btn.olive{color:#fff;background:linear-gradient(145deg,#67774E,#4C593A);}
.btn.ghost{font-size:.86rem;padding:11px;}
.btn:disabled{opacity:.45;cursor:default;}
.btn.small{padding:9px 14px;font-size:.78rem;width:auto;display:inline-block;}

.err{background:var(--red-soft);color:var(--red);border-radius:var(--r-md);
  padding:11px 13px;font-size:.9rem;margin-bottom:12px;box-shadow:var(--in-sm);}
.okmsg{background:var(--green-soft);color:var(--green);border-radius:var(--r-md);
  padding:11px 13px;font-size:.9rem;margin-bottom:12px;box-shadow:var(--in-sm);}

/* ---------- pills & status ---------- */
.pill{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  padding:4px 12px;border-radius:99px;font-weight:700;white-space:nowrap;box-shadow:var(--out-sm);}
.pill.IN{color:var(--green);background:var(--green-soft);}
.pill.MOVING{color:var(--amber);background:var(--amber-soft);}
.pill.AT_DEST{color:var(--ink-soft);background:var(--base);box-shadow:var(--in-sm);}
.pill.HALTED{color:var(--red);background:var(--red-soft);}

.gps-strip{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.74rem;
  padding:11px 14px;color:var(--green);border-radius:var(--r-md);box-shadow:var(--in);margin-bottom:4px;}
.gps-strip.off{color:var(--ink-soft);}
.gps-strip.bad{color:var(--red);}
.dot{width:9px;height:9px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite;flex:none;}
@keyframes blink{50%{opacity:.2;}}
@media (prefers-reduced-motion: reduce){.dot{animation:none;}}
.speedo{margin-left:auto;font-family:var(--disp);font-weight:900;font-size:1.1rem;color:var(--ink);}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.93rem;}
.kv dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:4px;}
.kv dd{margin:0;font-variant-numeric:tabular-nums;}

.haltbox{background:var(--red-soft);border-radius:var(--r-lg);padding:16px;margin-bottom:16px;box-shadow:var(--out);}
.haltbox h3{margin:0 0 8px;color:var(--red);font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;}

/* ---------- admin tabs (segmented control) ---------- */
.tabs{display:flex;gap:4px;margin-bottom:18px;border-radius:var(--r-md);padding:5px;box-shadow:var(--in);}
.tabs button{flex:1;background:transparent;border:0;cursor:pointer;border-radius:var(--r-sm);
  font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  padding:10px 2px;font-size:.82rem;color:var(--ink-soft);}
.tabs button.on{background:var(--base);color:var(--olive);box-shadow:var(--out-sm);}
.tabs button .badge{display:inline-block;min-width:18px;background:var(--red);color:#fff;
  border-radius:99px;font-family:var(--mono);font-size:.62rem;padding:1px 5px;margin-left:4px;}
@media(max-width:620px){.tabs button{font-size:.62rem;padding:9px 1px;letter-spacing:.02em;}}

.vcard{display:flex;align-items:center;gap:12px;background:var(--base);border-radius:var(--r-md);
  padding:13px 16px;margin-bottom:10px;cursor:pointer;box-shadow:var(--out-sm);}
.vcard:active{box-shadow:var(--in-sm);}
.vcard .ba{font-family:var(--mono);font-weight:700;font-size:.98rem;}
.vcard .sub{font-size:.78rem;color:var(--ink-soft);}
.vcard .right{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.vcard .age{font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);}

.notif{background:var(--base);border-radius:var(--r-md);box-shadow:var(--out-sm);
  padding:12px 14px;margin-bottom:10px;font-size:.88rem;border-left:5px solid var(--olive);}
.notif.unseen{border-left-color:var(--amber);background:var(--amber-soft);}
.notif.HALT,.notif.SIGNAL_LOST,.notif.OVERSPEED{border-left-color:var(--red);}
.notif .t{font-weight:700;}
.notif .ts{font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);float:right;}
.notif .b{color:var(--ink-soft);font-size:.82rem;}

#map,#tripmap,#dmap{height:300px;border:0;border-radius:var(--r-lg);margin-bottom:16px;
  background:var(--base);position:relative;z-index:0;box-shadow:var(--in);overflow:hidden;}
#dmap{height:260px;}
canvas.trail{width:100%;height:220px;border-radius:var(--r-lg);background:var(--base);display:block;margin-bottom:10px;box-shadow:var(--in);}

/* ---------- veh state board ---------- */
.statehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap;}
.statsum{font-size:.92rem;}
.outcount{color:var(--red);font-weight:700;}
.statefilter{max-width:230px;}
.statefilter input{padding:10px 14px;font-size:.9rem;}
.chipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px;}
.vchip{border-radius:var(--r-md);background:var(--base);padding:10px 12px;
  display:flex;flex-direction:column;gap:2px;position:relative;box-shadow:var(--out-sm);}
.vchip .ba{font-family:var(--mono);font-weight:700;font-size:.8rem;}
.vchip .ty{font-size:.65rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vchip .st{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.06em;}
.vchip.in .st{color:var(--green);}
.vchip.out{background:var(--red-soft);cursor:pointer;box-shadow:var(--out-sm);}
.vchip.out .ba,.vchip.out .st{color:var(--red);}
.vchip .dur{position:absolute;bottom:8px;right:10px;font-family:var(--mono);font-size:.58rem;color:var(--red);}

/* ---------- daily updates ---------- */
.datebar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.datebar input[type=date]{width:auto;flex:1;max-width:200px;padding:9px 12px;font-family:var(--mono);}
.datebar .btn.small{margin-top:0;}

/* ---------- destination chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:-2px 0 14px;}
.chip{border:0;background:var(--base);color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:.78rem;padding:8px 15px;border-radius:99px;box-shadow:var(--out-sm);}
.chip.on{box-shadow:var(--in-sm);color:var(--amber);font-weight:700;}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(24,26,18,.45);z-index:10000;
  display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px);}
.modal{background:var(--base);width:100%;max-width:700px;max-height:92vh;overflow-y:auto;
  padding:20px;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--out);}
@media(min-width:700px){.modal-bg{align-items:center;}.modal{border-radius:var(--r-lg);}}
.modal .x{float:right;background:var(--base);border:0;color:var(--ink);border-radius:50%;
  width:34px;height:34px;font-size:.95rem;cursor:pointer;box-shadow:var(--out-sm);}
.modal .x:active{box-shadow:var(--in-sm);}

table.plain{width:100%;border-collapse:collapse;font-size:.85rem;}
table.plain th{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;padding:7px 9px;border-bottom:2px solid var(--dark);}
table.plain td{padding:8px 9px;border-bottom:1px solid var(--dark);font-variant-numeric:tabular-nums;}
.scroll{overflow-x:auto;}
.mono{font-family:var(--mono);}
.muted{color:var(--ink-soft);font-size:.85rem;}
pre.wamsg{font-family:var(--mono);font-size:.78rem;background:var(--base);border-radius:var(--r-md);
  padding:14px;white-space:pre-wrap;box-shadow:var(--in);}

/* ---------- login ---------- */
.login-wrap{max-width:380px;margin:7vh auto 0;padding:0 16px;}
.login-brand{text-align:center;margin-bottom:28px;}
.login-brand .crest{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--out);color:var(--olive);}
.login-brand .crest svg{width:62px;height:62px;}
.login-brand h1{font-family:var(--disp);font-weight:900;letter-spacing:.16em;font-size:2.3rem;margin:0;color:var(--olive);}
.login-brand p{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 0;}
.pwwrap{position:relative;}
.pwwrap input{padding-right:52px;}
.pwwrap .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;cursor:pointer;
  background:var(--base);border-radius:50%;width:34px;height:34px;box-shadow:var(--out-sm);font-size:.85rem;}
.pwwrap .eye:active{box-shadow:var(--in-sm);}

/* leaflet corners inside soft frames */
.leaflet-container{border-radius:var(--r-lg);}