/* ══ AutoChapeau Fleet Command — luxury automotive edition ══ */
:root{
  --plum:#4A1F3D; --plum2:#6b2f58; --gold:#c9a45c; --gold2:#e6c98a;
  --ok:#3fb37f; --warn:#d9a441; --bad:#cf4a5e; --info:#5b8ecf;
  --font:'Segoe UI',Tahoma,'Noto Kufi Arabic',Arial,sans-serif;
  --serif:'Didot','Playfair Display','Bodoni MT',Georgia,'Times New Roman',serif;
  --mono:'Cascadia Code','Consolas',monospace;
  --r:14px; --tr:.25s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#161114; --bg2:#1c1519; --panel:#221a1ff2; --panel2:#2a2027;
  --line:#4a3a44; --line2:#382c34; --hair:#c9a45c55;
  --tx:#f4ede7; --tx2:#c9bbb3; --tx3:#8d7d82;
  --accent:#c9a45c; --accent2:#e6c98a; --brand:#b06a97; --glow:#c9a45c26; --glow2:#b06a9726;
  --headfill:#2b2128; --inputbg:#191317;
  --btn1:#42203a; --btn2:#63305a;
}
[data-theme="light"]{
  --bg:#f6f3ee; --bg2:#efeae2; --panel:#fffefbf7; --panel2:#f8f5ef;
  --line:#d8cfc0; --line2:#e7e0d4; --hair:#b08d4a66;
  --tx:#241820; --tx2:#5a4a52; --tx3:#95868c;
  --accent:#9a7b3f; --accent2:#7a5f2c; --brand:#4A1F3D; --glow:#b08d4a1f; --glow2:#4a1f3d14;
  --headfill:#f1ece2; --inputbg:#ffffff;
  --btn1:#4A1F3D; --btn2:#6b2f58;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--tx);overflow-x:hidden;-webkit-tap-highlight-color:transparent;font-size:15px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--accent);color:#1c1519}

/* background — soft vignette + silk sheen */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bgfx .grid{position:absolute;inset:0;background:
  radial-gradient(1200px 700px at 78% -10%, var(--glow2), transparent 60%),
  radial-gradient(1000px 600px at 12% 110%, var(--glow), transparent 60%)}
#bgfx .scan{position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 46%,#ffffff07 50%,transparent 54%);animation:silk 14s ease-in-out infinite}
@keyframes silk{0%,100%{transform:translateX(-12%)}50%{transform:translateX(12%)}}
@media (prefers-reduced-motion:reduce){#bgfx .scan{animation:none}}

#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* gold hairline signature on panels */
.card,.kpi,.truckcard,.login-card,.tblwrap{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);box-shadow:0 10px 34px #00000030}
.card:before,.kpi:before,.truckcard:before,.login-card:before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--hair),transparent)}

/* ══ login ══ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:min(440px,94vw);backdrop-filter:blur(16px);padding:46px 40px;animation:rise .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1}}
.login-logo{display:block;margin:0 auto 12px;width:170px}
[data-theme="dark"] .login-logo{filter:brightness(1.5) drop-shadow(0 2px 16px #00000060)}
.login-title{text-align:center;font-size:26px;font-weight:600;letter-spacing:1px;color:var(--tx);font-family:var(--serif)}
.login-sub{text-align:center;font-size:10.5px;color:var(--accent);letter-spacing:4px;text-transform:uppercase;margin-bottom:28px}
.login-line{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:16px 10% 26px;position:relative;overflow:hidden}
.login-line:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffaa,transparent);width:34%;animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-150%)}100%{transform:translateX(390%)}}
.lang-fab{position:fixed;top:14px;inset-inline-end:14px;z-index:50}

/* ══ layout ══ */
header.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--panel);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
header.topbar:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.topbar .brand{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--tx)}
.topbar .brand img{height:38px}
[data-theme="dark"] .topbar .brand img{filter:brightness(1.5)}
.topbar .brand .t{font-size:17px;line-height:1.05;font-family:var(--serif);letter-spacing:.5px}
.topbar .brand .t small{display:block;font-size:8.5px;letter-spacing:3.5px;color:var(--accent);text-transform:uppercase;font-family:var(--font);font-weight:700}
.topbar .sp{flex:1}
.clock{font-family:var(--mono);font-size:12.5px;color:var(--tx2);border:1px solid var(--line);padding:6px 13px;border-radius:9px;background:var(--inputbg)}
.iconbtn{position:relative;background:var(--inputbg);border:1px solid var(--line);color:var(--tx2);width:40px;height:40px;border-radius:11px;cursor:pointer;font-size:16px;transition:var(--tr)}
.iconbtn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px #00000030}
.iconbtn .dot{position:absolute;top:6px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #cf4a5e66}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.shell{display:flex;flex:1;min-height:0}
nav.side{width:228px;flex-shrink:0;padding:18px 12px;border-inline-end:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:3px}
nav.side a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;color:var(--tx2);text-decoration:none;font-size:13.5px;font-weight:600;border:1px solid transparent;transition:var(--tr);position:relative;letter-spacing:.3px}
nav.side a .ic{width:20px;text-align:center;font-size:15px;opacity:.85}
nav.side a:hover{color:var(--tx);background:var(--panel2)}
nav.side a.on{color:var(--accent2);background:linear-gradient(90deg,var(--glow),transparent);border-color:var(--line2)}
nav.side a.on:before{content:'';position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:2.5px;border-radius:3px;background:linear-gradient(var(--accent),var(--brand))}
main.content{flex:1;min-width:0;padding:24px;overflow-y:auto}
.page{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
h1.pagetitle{font-size:24px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:12px;font-family:var(--serif);letter-spacing:.5px}
h1.pagetitle:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--hair),transparent)}
.pagesub{color:var(--tx3);font-size:12.5px;margin-bottom:20px;letter-spacing:.4px}

/* mobile */
.tabbar{display:none}
@media(max-width:860px){
  nav.side{display:none}
  main.content{padding:14px;padding-bottom:82px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--panel);backdrop-filter:blur(18px);border-top:1px solid var(--line);justify-content:space-around;padding:7px 2px calc(7px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--tx3);text-decoration:none;font-size:10px;padding:4px 9px;border-radius:10px;font-weight:600}
  .tabbar a .ic{font-size:19px}
  .tabbar a.on{color:var(--accent)}
}

/* ══ components ══ */
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:20px}
.kpi{padding:18px;overflow:hidden;transition:var(--tr)}
.kpi:hover{transform:translateY(-3px);box-shadow:0 16px 40px #00000040}
.kpi .lbl{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--tx3);font-weight:700}
.kpi .val{font-size:27px;font-weight:600;font-family:var(--serif);margin-top:8px;color:var(--tx)}
.kpi .val small{font-size:13px;color:var(--tx3);font-family:var(--font)}
.kpi.warn .val{color:var(--warn)} .kpi.bad .val{color:var(--bad)} .kpi.ok .val{color:var(--ok)}
.kpi .sub{font-size:11px;color:var(--tx3);margin-top:4px}

.card{padding:20px;backdrop-filter:blur(12px)}
.card h3{font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent);margin-bottom:15px;display:flex;align-items:center;gap:9px;font-weight:700}
.card h3:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}

/* truck card */
.truckcard{padding:18px;overflow:hidden;transition:var(--tr);cursor:pointer}
.truckcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px #00000045}
.truckcard .plate{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:1.5px;color:var(--tx)}
.truckcard .pv{font-size:12px;color:var(--tx3);margin-top:3px;letter-spacing:.3px}
.stbadge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:5px 12px;border-radius:20px;border:1px solid}
.stbadge .led{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
.st-available{color:var(--ok);border-color:#3fb37f55;background:#3fb37f10}
.st-assigned{color:var(--info);border-color:#5b8ecf55;background:#5b8ecf10}
.st-on_job{color:var(--warn);border-color:#d9a44155;background:#d9a44110}
.st-out_of_service{color:var(--bad);border-color:#cf4a5e55;background:#cf4a5e10}
.truckcard .jobline{margin-top:12px;font-size:13px;color:var(--tx2);border-top:1px solid var(--line2);padding-top:12px}
.routeline{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin-top:6px;color:var(--tx)}
.routeline .arrow{color:var(--accent);animation:arrowmove 1.6s ease-in-out infinite}
@keyframes arrowmove{50%{transform:translateX(4px)}}
[dir="rtl"] .routeline .arrow{animation:arrowmoveR 1.6s ease-in-out infinite}
@keyframes arrowmoveR{50%{transform:translateX(-4px)}}

/* job stages */
.stages{display:flex;align-items:center;gap:0;margin:18px 0;flex-wrap:wrap}
.stg{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:66px;position:relative;flex:1}
.stg .nd{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--bg2);color:var(--tx3);font-weight:700;transition:var(--tr);z-index:1;font-family:var(--serif)}
.stg .lb{font-size:9.5px;color:var(--tx3);text-align:center;letter-spacing:.4px;font-weight:600}
.stg:not(:first-child):before{content:'';position:absolute;top:15px;inset-inline-start:-50%;width:100%;height:1.5px;background:var(--line2)}
.stg.done .nd{border-color:var(--ok);color:var(--ok);background:#3fb37f14}
.stg.done:not(:first-child):before{background:var(--ok);opacity:.6}
.stg.now .nd{border-color:var(--accent);color:#1c1519;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 16px var(--glow);animation:pulse 2s infinite}
.stg.now .lb{color:var(--accent2);font-weight:800}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:11px;border:1px solid var(--hair);background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#f6efe8;font-weight:700;font-size:13.5px;cursor:pointer;transition:var(--tr);font-family:var(--font);letter-spacing:.6px;position:relative;overflow:hidden;text-decoration:none;box-shadow:0 6px 18px #00000035}
.btn:hover{box-shadow:0 10px 28px #00000045;transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,#ffffff26 50%,transparent 58%);transform:translateX(-130%);transition:transform .6s}
.btn:hover:after{transform:translateX(130%)}
.btn.ghost{background:transparent;color:var(--accent2);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent)}
.btn.ok{background:linear-gradient(135deg,#1d6b48,#2c8f63);border-color:#3fb37f77}
.btn.bad{background:linear-gradient(135deg,#83323f,#a84252);border-color:#cf4a5e77}
.btn.sm{padding:7px 14px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
label.f{display:block;margin-bottom:13px;font-size:12.5px;color:var(--tx2);font-weight:600}
label.f span{display:block;margin-bottom:6px;letter-spacing:.7px}
input,select,textarea{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--inputbg);color:var(--tx);font-family:var(--font);font-size:14.5px;transition:var(--tr)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:start;padding:12px 13px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--hair);background:var(--headfill);position:sticky;top:0;font-weight:700;white-space:nowrap}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--line2);color:var(--tx)}
.tbl tr{transition:background .15s}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl .num{font-family:var(--mono);font-size:12.5px}
.tblwrap{overflow-x:auto}
.pos{color:var(--ok)} .neg{color:var(--bad)} .wrn{color:var(--warn)}

/* badges & misc */
.badge{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:1.4px;padding:4px 11px;border-radius:14px;text-transform:uppercase;border:1px solid var(--line);color:var(--tx2)}
.badge.acc{color:var(--accent2);border-color:var(--hair);background:var(--glow)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:6px 12px;border-radius:18px;background:var(--panel2);border:1px solid var(--line2);color:var(--tx2);font-weight:600}
.toolrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolrow .sp{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--inputbg)}
.seg button{background:transparent;border:none;color:var(--tx2);padding:9px 17px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font);transition:var(--tr);letter-spacing:.4px}
.seg button.on{background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#f6efe8}

/* photos */
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:9px;margin-top:8px}
.phgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer;transition:var(--tr)}
.phgrid img:hover{transform:scale(1.05);border-color:var(--accent);box-shadow:0 8px 22px #00000040}
.phadd{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tx3);cursor:pointer;font-size:11.5px;gap:4px;transition:var(--tr);font-weight:600}
.phadd:hover{border-color:var(--accent);color:var(--accent2);background:var(--glow)}
.phadd .plus{font-size:24px}

/* timeline */
.tline{position:relative;padding-inline-start:24px}
.tline:before{content:'';position:absolute;inset-inline-start:8px;top:6px;bottom:6px;width:1.5px;background:linear-gradient(var(--accent),var(--line2))}
.tli{position:relative;padding:8px 0}
.tli:before{content:'';position:absolute;inset-inline-start:-20px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg2)}
.tli .tt{font-size:13.5px;font-weight:700;color:var(--tx)}
.tli .ts{font-size:11px;color:var(--tx3);font-family:var(--mono)}

/* issues list */
.issue{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line2);border-radius:11px;margin-bottom:8px;background:var(--panel2);cursor:pointer;transition:var(--tr);font-size:13px}
.issue:hover{border-color:var(--accent);transform:translateX(2px)}
[dir="rtl"] .issue:hover{transform:translateX(-2px)}
.issue .ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;border:1px solid}
.issue.warn .ico{color:var(--warn);border-color:#d9a44155;background:#d9a44112}
.issue.bad .ico{color:var(--bad);border-color:#cf4a5e55;background:#cf4a5e12}
.issue.info .ico{color:var(--info);border-color:#5b8ecf55;background:#5b8ecf12}
.issue .tx{flex:1;min-width:0}
.issue .tx b{display:block;font-size:13px;color:var(--tx)}
.issue .tx small{color:var(--tx3);font-size:11px}
.issue .go{color:var(--tx3);font-size:15px}

/* activity feed */
.act{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:12.5px;align-items:baseline}
.act .who{color:var(--accent2);font-weight:700;white-space:nowrap}
.act .what{color:var(--tx2);flex:1}
.act .ts{color:var(--tx3);font-size:10.5px;font-family:var(--mono);white-space:nowrap}

/* modal */
#modal-root .ovl{position:fixed;inset:0;background:#000a;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s;backdrop-filter:blur(6px)}
#modal-root .box{width:min(580px,96vw);max-height:92vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px;animation:rise .35s;box-shadow:0 40px 100px #000b}
#modal-root .box:before{content:'';display:block;height:1px;margin:-26px -26px 22px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
#modal-root .box.wide{width:min(880px,96vw)}
#modal-root h2{font-size:19px;margin-bottom:18px;color:var(--tx);display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);letter-spacing:.4px}
#modal-root h2 .x{cursor:pointer;color:var(--tx3);font-size:22px;transition:var(--tr);font-family:var(--font)}
#modal-root h2 .x:hover{color:var(--bad)}

/* toasts */
#toasts{position:fixed;bottom:18px;inset-inline-start:18px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg2);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:11px;padding:13px 18px;font-size:13.5px;font-weight:600;box-shadow:0 14px 40px #00000060;animation:rise .3s;max-width:330px;color:var(--tx)}
.toast.ok{border-inline-start-color:var(--ok)} .toast.bad{border-inline-start-color:var(--bad)} .toast.warn{border-inline-start-color:var(--warn)}

/* notifications */
.notif-pane{position:fixed;top:64px;inset-inline-end:14px;width:min(370px,92vw);max-height:70vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);border-radius:16px;z-index:55;padding:13px;box-shadow:0 30px 80px #000a;animation:rise .25s}
.notif{padding:11px;border-bottom:1px solid var(--line2);font-size:13px;cursor:pointer;border-radius:9px;color:var(--tx)}
.notif:hover{background:var(--panel2)}
.notif .ts{font-size:10.5px;color:var(--tx3);font-family:var(--mono)}
.notif.unread{border-inline-start:3px solid var(--accent);background:var(--glow)}

/* dropzone */
.dz{border:1.5px dashed var(--line);border-radius:16px;padding:40px;text-align:center;color:var(--tx2);cursor:pointer;transition:var(--tr);font-size:14px;font-weight:600;background:var(--panel)}
.dz:hover,.dz.over{border-color:var(--accent);color:var(--accent2);background:var(--glow)}

/* calendar heat */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .d{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--mono);font-weight:600;border:1px solid var(--line2);cursor:pointer;transition:var(--tr);color:var(--tx2);background:var(--inputbg)}
.cal .d:hover{transform:scale(1.1);border-color:var(--accent)}
.cal .d.worked{background:#3fb37f1c;border-color:#3fb37f66;color:var(--ok)}
.cal .d.down{background:#cf4a5e1c;border-color:#cf4a5e66;color:var(--bad)}
.cal .d.off{background:var(--panel2);color:var(--tx3)}
.cal .d.maintenance_down{background:#d9a4411c;border-color:#d9a44166;color:var(--warn)}
.cal .d.future{opacity:.3;cursor:default}
.cal .hd{aspect-ratio:auto;padding:4px 0;font-size:9px;color:var(--accent);border:none;background:none;text-transform:uppercase;letter-spacing:2px}

/* ══ tactical map ══ */
.mapwrap{position:relative;border-radius:12px;overflow:hidden;background:
  radial-gradient(900px 500px at 50% 40%, #14231c, #0b1410 75%);border:1px solid #2c4636}
[data-theme="light"] .mapwrap{background:radial-gradient(900px 500px at 50% 40%, #e8efe6, #d5e0d2 75%);border-color:#b7c9b2}
.mapwrap svg{display:block;width:100%;height:auto}
.map-land{fill:#1b2f24;stroke:#4f7a5e;stroke-width:1.6}
[data-theme="light"] .map-land{fill:#cfdcc9;stroke:#7a9a70}
.map-grid line{stroke:#3a5c48;stroke-width:.5;opacity:.35}
[data-theme="light"] .map-grid line{stroke:#8aa583}
.map-city{fill:#79a98c}
.map-citylbl{fill:#8fb9a0;font-size:11px;font-family:var(--mono);letter-spacing:1px}
[data-theme="light"] .map-citylbl{fill:#54705d}
.map-route{stroke:var(--warn);stroke-width:1.6;stroke-dasharray:6 5;fill:none;opacity:.85;animation:dashmove 1.4s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-22}}
.map-mk circle.core{fill:var(--ok)}
.map-mk.onjob circle.core{fill:var(--warn)}
.map-mk.oos circle.core{fill:var(--bad)}
.map-mk circle.ring{fill:none;stroke:currentColor;opacity:.7;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{r:5;opacity:.8}100%{r:17;opacity:0}}
.map-mk text{fill:#e8f3ec;font-size:10.5px;font-family:var(--mono);font-weight:700;letter-spacing:.8px;paint-order:stroke;stroke:#0b1410;stroke-width:3px}
[data-theme="light"] .map-mk text{fill:#1c2b21;stroke:#e8efe6}
.map-sweep{transform-origin:var(--cx) var(--cy);animation:sweep360 7s linear infinite;opacity:.5}
@keyframes sweep360{to{transform:rotate(360deg)}}
.map-hud{position:absolute;top:10px;inset-inline-start:12px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#79a98c;text-transform:uppercase}
.map-hud b{color:#a8d4b8}
[data-theme="light"] .map-hud{color:#54705d}
.map-legend{position:absolute;bottom:10px;inset-inline-end:12px;display:flex;gap:10px;font-size:10px;font-family:var(--mono);color:#8fb9a0;background:#0b141088;padding:5px 10px;border-radius:8px}
[data-theme="light"] .map-legend{background:#ffffffaa;color:#3c5244}
.map-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:4px}

/* charts */
.chartbox{height:250px;position:relative}
.chartbox.sm{height:210px}
canvas.chart{width:100%;height:100%}

/* damage diagram */
.dmg-wrap{margin:12px 0;padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2)}
.dmg-svg{width:100%;max-width:340px;display:block;margin:0 auto}
.dmg-svg.edit{cursor:crosshair}
.dmg-body{fill:var(--inputbg);stroke:var(--accent);stroke-width:2}
.dmg-glass{fill:var(--panel);stroke:var(--line);stroke-width:1.2}
.dmg-line{stroke:var(--line);stroke-width:1}
.dmg-mirror{fill:var(--line)}
.dmg-lbl{fill:var(--tx3);font-size:11px}
.dmg-pts circle{animation:pulse 2s infinite}

/* signature */
.sig-canvas{width:100%;border-radius:12px;border:1.5px dashed var(--line);background:#fff;touch-action:none;cursor:crosshair}

/* receipt */
.receipt{background:#fff;color:#1c1519;border-radius:14px;padding:28px;max-width:820px;margin:0 auto;box-shadow:0 14px 44px #00000040}
.receipt .tbl td,.receipt .tbl th{color:#1c1519;border-color:#ddd}
.receipt .tbl th{background:#f1ece2;color:#4A1F3D}
.receipt .cmp-head{color:#9a7b3f}
.rc-head{display:flex;align-items:center;gap:18px;border-bottom:2px solid #4A1F3D;padding-bottom:14px;margin-bottom:14px}
.rc-head img{height:52px}
.rc-title{flex:1}
.rc-title h1{font-family:var(--serif);font-size:20px;color:#4A1F3D;margin:0}
.rc-title div{font-size:12px;color:#777;font-family:var(--mono)}
.rc-status{font-weight:800;color:#2c8f63;font-size:14px;letter-spacing:1px}
.rc-route{font-size:16px;font-weight:700;text-align:center;padding:10px;background:#f7f3ec;border-radius:10px;margin-bottom:14px}
.rc-route small{color:#999;font-weight:600;margin-inline-start:10px}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:640px){.rc-grid{grid-template-columns:1fr}}
.rc-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
.rc-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rc-ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid #ddd}
.rc-disp{margin:10px 0;padding:12px;border-radius:10px;font-size:13px;border:1px solid}
.rc-disp.open{background:#fdeaea;border-color:#cf4a5e;color:#8a2432}
.rc-disp.resolved{background:#eaf6f0;border-color:#3fb37f;color:#1d6b48}
.receipt .dmg-wrap{background:#faf7f1;border-color:#e5dcc9}
.receipt .dmg-body{fill:#fff;stroke:#9a7b3f}
.receipt .dmg-glass{fill:#f3eee2;stroke:#ccc}
.rc-sigs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 8px}
.rc-sigs img{width:100%;max-height:90px;object-fit:contain;border:1px solid #ddd;border-radius:8px;background:#fff}
.rc-sigline{border-bottom:1.5px solid #999;height:56px}
.rc-legal{font-size:9px;color:#555;border:1px solid #ddd;border-radius:8px;padding:10px 12px;margin:10px 0;line-height:1.6;background:#faf9f6}
.rc-legal b{color:#4A1F3D;font-size:9.5px}
.rc-internal{font-size:11px;color:#777;border:1px dashed #ccc;border-radius:8px;padding:10px 12px;margin:10px 0;text-align:center}
.legalbox{font-size:10.5px;color:var(--tx2);border:1px solid var(--hair);border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.7;background:var(--glow);max-height:120px;overflow-y:auto}
.legalbox b{color:var(--accent2)}
.rc-foot{text-align:center;font-size:10px;color:#999;letter-spacing:2px;border-top:1px solid #ddd;padding-top:10px;margin-top:8px}
@media print{.receipt{box-shadow:none;padding:0;max-width:100%}}

.receipt.stmt{box-shadow:none;padding:10px}
.printhead{display:none}

/* ══ PRINT SYSTEM — statement-grade output everywhere ══ */
@page{margin:12mm}
@media print{
  /* base: white paper, black ink, no chrome, no fx */
  html,body{background:#fff!important;color:#111!important;font-size:12px}
  #bgfx,header.topbar,nav.side,.tabbar,#toasts,.toolrow,.noprint,.spin,.iconbtn,.herobtn,.actionbanner{display:none!important}
  #app,.shell{display:block!important;min-height:0!important;height:auto!important}
  main.content{padding:0!important;overflow:visible!important}
  .page{animation:none}
  *{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;animation:none!important;transition:none!important}

  /* light-ink panels regardless of theme */
  .card,.kpi,.tblwrap,.truckcard,.issue,.chip,.seg,.notif-pane,.dz{background:#fff!important;color:#111!important;border-color:#ccc!important}
  .card:before,.kpi:before,.truckcard:before,.login-card:before{display:none!important}
  .card h3,.pagetitle{color:#4A1F3D!important}
  .pagesub,.kpi .lbl{color:#666!important}
  .kpi .val,.tbl td,.tli .tt,.act .what{color:#111!important}
  .tbl th{background:#f1ece2!important;color:#4A1F3D!important;position:static!important;border-color:#c9a45c!important}
  .tbl td{border-color:#ddd!important}
  .badge,.stbadge{border-color:#999!important;color:#333!important;background:#fff!important}
  .pos{color:#1d6b48!important}.neg{color:#a11f36!important}.wrn{color:#8a6a2f!important}

  /* clean pagination */
  .card,.kpi,.tbl tr,.wiz-sumrow,.rc-grid,.rc-sigs,.rc-legal,.cmp-col,.dmg-wrap{page-break-inside:avoid}
  h1.pagetitle{page-break-after:avoid}
  .chartbox{height:200px}

  /* branded page header where provided */
  .printhead{display:flex;align-items:center;gap:14px;border-bottom:2px solid #4A1F3D;padding-bottom:10px;margin-bottom:16px}
  .printhead img{height:44px}
  .printhead div{font-size:13px;color:#333}
}

/* provider statement — print ONLY the statement, nothing else, no blank pages */
@media print{
  body.stmt-mode > *:not(#modal-root){display:none!important}
  body.stmt-mode #modal-root .ovl{position:static!important;inset:auto!important;display:block!important;background:#fff!important;padding:0!important;min-height:0!important;height:auto!important}
  body.stmt-mode #modal-root .box{position:static!important;width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible!important;background:#fff!important;border:none!important;border-radius:0!important;padding:0!important;margin:0!important}
  body.stmt-mode #modal-root .box:before,body.stmt-mode #modal-root h2{display:none!important}
  body.stmt-mode .receipt{box-shadow:none!important;padding:0!important;max-width:100%!important;border-radius:0!important}
}
/* ══ hero dispatch button ══ */
.herobtn{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:20px 26px;margin-bottom:20px;border-radius:18px;border:1px solid var(--hair);background:linear-gradient(135deg,var(--btn1),var(--btn2) 60%,var(--plum2));color:#f6efe8;font-family:var(--serif);font-size:21px;letter-spacing:1px;cursor:pointer;overflow:hidden;transition:var(--tr);box-shadow:0 14px 40px #00000045}
.herobtn:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 20px 54px #00000055,0 0 40px var(--glow)}
.herobtn .hb-ic{font-size:30px;animation:heroFloat 2.6s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.herobtn .hb-tx{flex:1;text-align:start}
.herobtn .hb-ar{font-size:26px;opacity:.7;animation:arrowmove 1.4s infinite}
.herobtn .hb-glow{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff22 50%,transparent 60%);animation:heroSweep 3.2s ease-in-out infinite}
@keyframes heroSweep{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}

/* ══ wizard ══ */
.wiz-prog{display:flex;align-items:center;margin-bottom:18px}
.wp{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:56px}
.wp .wpd{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--tx3);background:var(--bg2);transition:var(--tr);font-family:var(--serif)}
.wp span{font-size:9.5px;color:var(--tx3);font-weight:700;letter-spacing:.5px}
.wp.done .wpd{border-color:var(--ok);color:var(--ok);background:#3fb37f14}
.wp.now .wpd{border-color:var(--accent);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1c1519;box-shadow:0 4px 16px var(--glow);animation:pulse 2s infinite}
.wp.now span{color:var(--accent2)}
.wpl{flex:1;height:1.5px;background:var(--line2);margin:0 4px 18px;transition:var(--tr)}
.wpl.done{background:var(--ok);opacity:.6}
.wiz-body{min-height:220px}
.wiz-in{animation:wizSlide .38s cubic-bezier(.2,.8,.2,1)}
@keyframes wizSlide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
[dir="rtl"] @keyframes wizSlide{from{opacity:0;transform:translateX(-26px)}}
.wiz-trucks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wiz-tk{border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:var(--tr);background:var(--panel2);text-align:center}
.wiz-tk .plate{font-family:var(--serif);font-size:16px;font-weight:600}
.wiz-tk:hover:not(.dis){transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 26px #00000040}
.wiz-tk.sel{border-color:var(--accent);background:var(--glow);box-shadow:0 0 0 2px var(--accent),0 10px 26px #00000040;animation:pulse 2.2s infinite}
.wiz-tk.dis{opacity:.4;cursor:not-allowed}
.wiz-sum{display:flex;flex-direction:column;gap:10px}
.wiz-sumrow{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);animation:wizSlide .4s both}
.wiz-sumrow:nth-child(2){animation-delay:.06s}.wiz-sumrow:nth-child(3){animation-delay:.12s}.wiz-sumrow:nth-child(4){animation-delay:.18s}.wiz-sumrow:nth-child(5){animation-delay:.24s}.wiz-sumrow:nth-child(6){animation-delay:.3s}
.wiz-sumrow span{font-size:22px}
.wiz-sumrow small{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3)}
.wiz-sumrow b{font-size:14.5px}
.wiz-dispatch{background:linear-gradient(135deg,#8a6a2f,#c9a45c)!important;border-color:var(--gold2)!important;font-size:15px!important;animation:dispatchPulse 1.6s infinite}
@keyframes dispatchPulse{0%,100%{box-shadow:0 6px 18px #00000035}50%{box-shadow:0 6px 30px var(--glow),0 0 24px var(--glow)}}
.wiz-done{text-align:center;padding:30px 10px;animation:rise .5s}
.wd-ring{width:90px;height:90px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;border:2px solid var(--ok);background:#3fb37f14;animation:wdPop .6s cubic-bezier(.2,1.4,.3,1),pulse 2s .6s infinite}
@keyframes wdPop{from{transform:scale(.2);opacity:0}to{transform:scale(1)}}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{position:absolute;top:-4vh;display:block;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg);opacity:.4}}

/* big action buttons + photo slots (driver flow) */
.bigbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px;border-radius:14px;border:1px solid var(--hair);font-size:16.5px;font-weight:800;letter-spacing:.6px;cursor:pointer;color:#fff;font-family:var(--font);transition:var(--tr);margin-top:10px}
.bigbtn.ok{background:linear-gradient(135deg,#1d6b48,#2c8f63);animation:dispatchPulse 1.8s infinite}
.bigbtn.warn{background:linear-gradient(135deg,#8a6a2f,#b8903f)}
.bigbtn.wait{background:var(--panel2);color:var(--tx3);border-color:var(--line);animation:none;cursor:pointer}
.bigbtn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.slotgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:560px){.slotgrid{grid-template-columns:repeat(3,1fr)}}
.slot{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--tx3);font-size:11px;font-weight:700;transition:var(--tr);position:relative;overflow:hidden;background:var(--inputbg)}
.slot:hover{border-color:var(--accent);color:var(--accent2);box-shadow:inset 0 0 24px var(--glow);transform:scale(1.04)}
.slot .slot-cam{font-size:22px;animation:heroFloat 3s infinite}
.slot.filled{border-style:solid;border-color:var(--ok);color:var(--ok)}
.slot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.slot.filled span{position:relative;z-index:1;background:#0009;padding:2px 8px;border-radius:8px;color:#fff;font-size:10px}
.slot-count{text-align:center;font-size:12.5px;font-weight:700;color:var(--warn);margin-top:10px;letter-spacing:.4px}
.slot-count.ok{color:var(--ok)}
.drv-panel{border-color:var(--accent)}

/* receiving comparison */
.cmp-banner{background:linear-gradient(135deg,#8a6a2f22,#c9a45c22);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;font-weight:800;letter-spacing:1px;color:var(--accent2);margin-bottom:14px;animation:pulse 2.4s infinite}
.cmp-banner small{display:block;font-weight:600;letter-spacing:.2px;color:var(--tx2);margin-top:5px;font-size:12px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.compare-grid{grid-template-columns:1fr}}
.cmp-col{border:1px solid var(--line2);border-radius:12px;padding:12px;background:var(--panel2)}
.cmp-col.b{border-color:#d9a44166}
.cmp-head{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--tx3);margin-bottom:10px;text-transform:uppercase}
.cmp-col.b .cmp-head{color:var(--warn)}
.cmp-panel{border-color:var(--warn)}

/* animated route tracker */
.rt-wrap{padding:6px 4px}
.rt-ends{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:10px;color:var(--tx)}
.rt-line{position:relative;height:10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);overflow:visible}
.rt-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--ok),var(--accent));transition:width 1.2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.rt-fill:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff55,transparent);width:36%;animation:sweep 2.2s linear infinite}
.rt-truck{position:absolute;top:-21px;font-size:24px;transition:inset-inline-start 1.2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 3px 6px #0007)}
[dir="ltr"] .rt-truck{transform:scaleX(-1)}
.rt-truck.moving{animation:truckbob .55s ease-in-out infinite}
@keyframes truckbob{0%,100%{margin-top:0}50%{margin-top:-3px}}
.rt-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* red flashing action alerts */
.flashred{border-color:var(--bad)!important;color:var(--bad)!important;position:relative;animation:blinkR 1.1s ease-in-out infinite}
@keyframes blinkR{0%,100%{box-shadow:0 0 0 0 transparent;background:var(--inputbg)}50%{box-shadow:0 0 20px #cf4a5e99;background:#cf4a5e26}}
.actn{position:absolute;top:-7px;inset-inline-end:-7px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;border-radius:11px;padding:1px 6px;border:2px solid var(--bg)}
nav.side .adot,.tabbar .adot{width:9px;height:9px;border-radius:50%;background:var(--bad);margin-inline-start:auto;animation:blinkR 1.1s infinite;flex-shrink:0}
.tabbar .adot{position:absolute;top:4px;inset-inline-end:8px}
.tabbar a{position:relative}
.actionbanner{border-color:var(--bad)!important;animation:bannerpulse 1.6s ease-in-out infinite}
@keyframes bannerpulse{0%,100%{box-shadow:0 10px 34px #00000030}50%{box-shadow:0 10px 34px #00000030,0 0 26px #cf4a5e55}}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:rot .9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.empty{padding:36px;text-align:center;color:var(--tx3);font-size:13.5px;font-weight:600}
.empty .big{font-size:36px;margin-bottom:8px;opacity:.5}