/* ════════════════════════════════════════════════════════════════════
   FLEETS UI — shared design system
   Used by the main panel (index.html), /login and the Telegram mini-app.
   Loaded after each page's own styles, so these rules are the last word
   for shared components. Colours come only from the tokens below.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens: dark (default) — command-center navy ── */
:root,[data-theme="ugl-dark"]{
  --bg:#060B14;
  --sidebar:#081120;
  --surface:#0D1726;
  --surface2:#112034;
  --well:#091321;
  --bdr:#1F2F48;
  --bdr2:#152339;
  --line:#1F2F48;
  --t1:#EAF1FA;
  --t2:#9DAFC6;
  --t3:#6A7C95;
  --t4:#152339;
  --a:#38BDF8;
  --a2:#0284C7;
  --blue:#2563EB;
  --brass:#CDA86B;
  --good:#22C55E;
  --good-soft:rgba(34,197,94,.14);
  --warn:#EF4444;
  --warn-soft:rgba(239,68,68,.14);
  --amber:#F5A524;
  --amber-soft:rgba(245,165,36,.14);
  --crit:#EF4444;
  --info:#38BDF8;
  --r-sm:6px;
  --r:8px;
  --r-lg:12px;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;
  --font-industrial:'Archivo',var(--font-display);
  --shadow-card:0 10px 28px rgba(0,0,0,.32);
  --shadow-pop:0 24px 60px rgba(0,0,0,.5);
  --shadow-side:1px 0 0 var(--bdr2);
  --card-grad:linear-gradient(180deg,rgba(17,32,52,.96),rgba(10,19,33,.96));
  --glass:rgba(9,17,30,.86);
  --hover:rgba(56,189,248,.06);
  --brand-glow-1:rgba(56,189,248,.45);
  --brand-glow-2:rgba(37,99,235,.3);
}
/* ── Tokens: light ── */
[data-theme="ugl-light"]{
  --bg:#EEF2F7;
  --sidebar:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#F6F8FB;
  --well:#F2F5F9;
  --bdr:#D2DBE7;
  --bdr2:#E2E8F0;
  --line:#D2DBE7;
  --t1:#0F1B2D;
  --t2:#475569;
  --t3:#64748B;
  --t4:#E2E8F0;
  --a:#0369A1;
  --a2:#0284C7;
  --blue:#1D4ED8;
  --good:#15803D;
  --good-soft:rgba(21,128,61,.1);
  --warn:#B91C1C;
  --warn-soft:rgba(185,28,28,.08);
  --amber:#B45309;
  --amber-soft:rgba(180,83,9,.1);
  --crit:#B91C1C;
  --info:#0369A1;
  --shadow-card:0 2px 10px rgba(15,27,45,.07);
  --shadow-pop:0 18px 50px rgba(15,27,45,.18);
  --card-grad:linear-gradient(180deg,#FFFFFF,#FBFCFE);
  --glass:rgba(255,255,255,.94);
  --hover:rgba(3,105,161,.05);
  --map-overlay:rgba(255,255,255,.96);
  --map-overlay-num:#0F1B2D;
  --brand-glow-1:rgba(3,105,161,.12);
  --brand-glow-2:rgba(29,78,216,.08);
}

/* ── Base ── */
html,body{font-size:14px}
::selection{background:color-mix(in srgb,var(--a) 30%,transparent)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--t3) 35%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--a) 55%,transparent);background-clip:padding-box}
*{scrollbar-color:color-mix(in srgb,var(--t3) 40%,transparent) transparent}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:var(--r-sm)}

/* ══ App shell ══════════════════════════════════════════════════════ */
.sidebar{width:176px;padding:16px 10px;gap:16px;background:linear-gradient(180deg,var(--sidebar),color-mix(in srgb,var(--sidebar) 70%,var(--bg)));border-right:1px solid var(--bdr2)}
.brand{justify-content:flex-start;padding:4px 8px 16px;gap:9px}
.brand-word{font-size:23px}
.sn{gap:3px}
.sni{height:38px;padding:0 12px;gap:11px;border-left:none;border-radius:var(--r);font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--t2)}
.sni svg{width:18px;height:18px;opacity:.9}
.sni.on{color:var(--t1);background:linear-gradient(90deg,color-mix(in srgb,var(--a) 18%,transparent),color-mix(in srgb,var(--a) 4%,transparent));box-shadow:inset 3px 0 0 var(--a)}
.sni.on svg{color:var(--a);opacity:1}
.sni:not(.on):hover{color:var(--t1);background:var(--hover);border-left-color:transparent}
.sni-badge{right:8px;min-width:18px;height:18px;border-radius:9px;font-size:9.5px;background:var(--crit)}
.topbar{height:52px;gap:16px;padding:0 20px;background:color-mix(in srgb,var(--sidebar) 92%,transparent);border-bottom:1px solid var(--bdr2)}
.tb-crumb{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--t3)}
.tb-crumb b{color:var(--t1);font-weight:700}
.tb-search{height:34px;max-width:460px;border-radius:var(--r);background:var(--well);border:1px solid var(--bdr);font-size:12.5px;padding:0 12px}
.tb-search:hover{border-color:var(--a)}
.tb-search kbd{border-radius:var(--r-sm);padding:2px 6px;background:var(--surface)}
.tb-leds{gap:6px}
.tb-led{padding:5px 9px;border:1px solid var(--bdr2);border-radius:999px;background:var(--well);font-size:9.5px;letter-spacing:.08em}
.tb-clock{font-size:12px;padding:5px 10px;border:1px solid var(--bdr2);border-radius:999px;background:var(--well)}
.sn-user{border:1px solid var(--bdr2);background:var(--well)}
.sn-ava{border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--a))}
@media(max-width:640px){
  .sidebar{width:100%;padding:0;background:var(--sidebar);border-top:1px solid var(--bdr2)}
  .sni{height:100%;border-radius:0;font-size:9.5px;font-weight:700;gap:3px;padding:6px 2px 4px}
  .sni.on{box-shadow:inset 0 2px 0 var(--a);background:color-mix(in srgb,var(--a) 10%,transparent)}
  .topbar{height:46px;padding:0 10px}
}

/* ══ Page structure ═════════════════════════════════════════════════ */
.pg-hdr{position:relative;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:22px 24px 16px;margin:0 0 6px;border-bottom:1px solid var(--bdr2);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 55%,transparent),transparent)}
.pg-hdr::after{content:'';position:absolute;left:24px;bottom:-1px;width:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--a))}
.pg-title{font-family:var(--font-industrial);font-size:22px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--t1);line-height:1.1}
.pg-sub{flex-basis:100%;order:3;font-family:var(--font-display);font-size:12.5px;color:var(--t3);letter-spacing:0;margin-top:4px}
.pg-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shdr{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--t2);padding:18px 24px 10px;gap:8px}
.shdr .cnt{color:var(--a)}
.page{max-width:1320px;margin:0 auto;padding:16px 24px 40px}
.page-narrow{max-width:860px;margin:0 auto}
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ui-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.ui-cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media(max-width:1100px){.ui-cols,.ui-cols-3{grid-template-columns:1fr}}
@media(max-width:640px){.pg-hdr{padding:14px 14px 12px}.pg-hdr::after{left:14px}.pg-title{font-size:18px}.page{padding:12px 12px 32px}.shdr{padding:14px 14px 8px}}

/* ══ Cards & surfaces ═══════════════════════════════════════════════ */
.ui-card,.stat-crd,.admin-section,.tr-hist,.ml-compose-panel,.repair-panel,.cprev{background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.ui-card{padding:16px}
.ui-card-h{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t1)}
.ui-card-h .ui-meta{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
.ui-card-flush{padding:0;overflow:hidden}
.ui-card-flush>.ui-card-h{margin:0;padding:12px 16px;border-bottom:1px solid var(--bdr2)}
.stat-crd{margin:0 24px 12px}
.stat-row,.top-row,.u-row{padding:12px 16px;border-bottom:1px solid var(--bdr2)}
.u-row:hover,.top-row:hover{background:var(--hover)}
.admin-section{margin:0 24px 16px;padding:16px}
.admin-section-title{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.02em}
.glass{background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg)}
.cprev{padding:14px 16px}
.sc-body{background:var(--well);border-color:var(--bdr2);border-radius:var(--r)}

/* ══ Forms ═════════════════════════════════════════════════════════ */
.flbl{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--t2);margin:2px 0 6px}
.finput,.sinput,.amount-inp,.ai-input,.dsp-search input,.ui-input{background:var(--well);border:1px solid var(--bdr);border-radius:var(--r);color:var(--t1);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.finput,.sinput{padding:10px 13px;font-size:13.5px;min-height:40px}
.sinput{font-size:14px}
.finput:hover,.sinput:hover,.amount-inp:hover,.ai-input:hover{border-color:color-mix(in srgb,var(--a) 40%,var(--bdr))}
.finput:focus,.sinput:focus,.amount-inp:focus,.ai-input:focus,.dsp-search input:focus,.ui-input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 18%,transparent)}
.finput::placeholder,.sinput::placeholder,.ai-input::placeholder{color:var(--t3)}
select.finput,.shop-sort{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.shop-sort{background-color:var(--well);border:1px solid var(--bdr);border-radius:var(--r);height:40px;font-weight:600;color:var(--t1)}
textarea.finput{min-height:64px;line-height:1.5}
.swrap{padding:16px 24px 12px}

/* ══ Buttons ═══════════════════════════════════════════════════════ */
.sbtn,.abtn,.g-orange,.amount-confirm,.ml-compose-btn,.ml-connect-btn,.ai-send,.ui-btn-primary{background:linear-gradient(90deg,var(--blue),var(--a2));color:#fff;border:none;border-radius:var(--r);font-weight:700;letter-spacing:.01em;box-shadow:0 6px 18px color-mix(in srgb,var(--blue) 28%,transparent);transition:filter .15s,transform .1s,box-shadow .15s}
.sbtn:not(:disabled):hover,.abtn:hover:not(:disabled),.g-orange:hover,.amount-confirm:hover,.ml-compose-btn:hover,.ml-connect-btn:hover,.ui-btn-primary:hover{opacity:1;filter:brightness(1.1);box-shadow:0 8px 24px color-mix(in srgb,var(--blue) 38%,transparent)}
.sbtn:disabled,.abtn:disabled{background:var(--well);color:var(--t3);box-shadow:none;border:1px solid var(--bdr)}
.sbtn{min-height:42px;font-size:14px}
.abtn{min-height:44px}
.amount-confirm{padding:9px 16px;font-size:13px;min-height:36px}
.rbtn{border-radius:var(--r);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);background:color-mix(in srgb,var(--a) 6%,transparent);color:var(--a);font-weight:700;min-height:42px}
.rbtn:not(:disabled):hover{background:color-mix(in srgb,var(--a) 14%,transparent);border-color:var(--a)}
.ghost-btn{width:calc(100% - 48px);margin:0 24px 10px;border-radius:var(--r);background:var(--well);border:1px solid var(--bdr);color:var(--t2);font-weight:600;transition:border-color .15s,color .15s,background .15s}
.ghost-btn:hover:not(:disabled){border-color:var(--a);color:var(--t1);background:var(--hover)}
.g-blue{color:var(--a);background:color-mix(in srgb,var(--a) 8%,transparent);border-color:color-mix(in srgb,var(--a) 35%,transparent)}
.g-blue:hover{color:var(--t1)!important;background:color-mix(in srgb,var(--a) 16%,transparent)!important;border-color:var(--a)!important}
.g-green{background:linear-gradient(90deg,#15803D,#16A34A);color:#fff;border:none;box-shadow:0 6px 16px rgba(22,163,74,.25)}
.g-red{color:var(--crit);background:var(--warn-soft);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.g-red:hover{color:var(--crit)!important;border-color:var(--crit)!important;background:color-mix(in srgb,var(--crit) 18%,transparent)!important}
.shop-new-btn{border-radius:var(--r);border:1px dashed color-mix(in srgb,var(--a) 45%,var(--bdr));background:color-mix(in srgb,var(--a) 5%,transparent);color:var(--a);font-weight:700;min-height:44px}
.fwrap{max-width:760px;margin:8px 24px 18px;padding:18px;background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
@media(max-width:640px){.fwrap{margin:8px 12px 16px;padding:14px}}
.shop-new-btn.open{background:color-mix(in srgb,var(--a) 10%,transparent)}
.tdr-btn,.tp-btn,.cal-nav-btn,.ml-icon-btn{border-radius:var(--r);border:1px solid var(--bdr);background:var(--well);color:var(--t1)}
.tdr-btn:hover,.tp-btn:hover,.cal-nav-btn:hover,.ml-icon-btn:hover{border-color:var(--a);color:var(--a)}
.tdr-btn.pri{background:linear-gradient(90deg,var(--blue),var(--a2));border:none;color:#fff}
/* compact buttons inside rows / toolbars */
.ui-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ui-acts .ghost-btn,.ui-acts .amount-confirm,.ui-btn-sm{width:auto!important;display:inline-flex!important;align-items:center;justify-content:center;gap:5px;margin:0!important;padding:6px 11px!important;font-size:11.5px!important;min-height:30px;white-space:nowrap}
.ui-icon-btn{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--bdr);background:var(--well);color:var(--t2);cursor:pointer;font-size:13px;padding:0}
.ui-icon-btn:hover{border-color:var(--a);color:var(--a)}
.ui-icon-btn.danger{color:var(--crit);background:var(--warn-soft);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.ui-icon-btn.danger:hover{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 22%,transparent)}

/* ══ Chips, pills, segmented controls ══════════════════════════════ */
.rpill,.team-pill,.recent-chip,.dsp-fchip,.ai-chip,.gbrand-pill,.ui-chip{border-radius:999px;border:1px solid var(--bdr);background:var(--well);color:var(--t2);font-weight:600;font-size:11.5px;padding:5px 12px;transition:border-color .15s,color .15s,background .15s}
.rpill:hover,.team-pill:hover,.recent-chip:hover,.dsp-fchip:hover,.ai-chip:hover,.ui-chip:hover{border-color:var(--a);color:var(--t1);background:var(--hover)}
.rpill.on,.team-pill.on,.dsp-fchip.on,.ui-chip.on{background:color-mix(in srgb,var(--a) 16%,transparent);border-color:var(--a);color:var(--a);box-shadow:none}
.rpill.on .pcnt{background:color-mix(in srgb,var(--a) 22%,transparent);color:var(--a)}
.pcnt{border-radius:999px;background:color-mix(in srgb,var(--t3) 18%,transparent);padding:0 6px}
.svc-btn,.pm-btn,.repair-cat-btn{border-radius:var(--r);border:1px solid var(--bdr);background:var(--well)}
.svc-btn.svc-on,.pm-on{background:color-mix(in srgb,var(--a) 14%,transparent)!important;border-color:var(--a)!important;color:var(--a)!important}
/* segmented control */
.cal-toggle,.lb-period-bar{display:inline-flex;gap:2px;padding:3px;margin:4px 24px 14px;border:1px solid var(--bdr);border-radius:var(--r);background:var(--well)}
.cal-btn,.lb-pBtn{flex:0 0 auto;border:none;border-radius:calc(var(--r) - 2px);background:transparent;color:var(--t2);font-size:12px;font-weight:600;padding:7px 16px;box-shadow:none;letter-spacing:.01em}
.cal-btn:hover,.lb-pBtn:hover{color:var(--t1)}
.cal-btn.on,.lb-pBtn.on{background:var(--surface2);color:var(--t1);box-shadow:0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.25);border:none}
[data-theme="ugl-light"] .cal-btn.on,[data-theme="ugl-light"] .lb-pBtn.on{background:#fff;box-shadow:0 1px 4px rgba(15,27,45,.12)}
.shop-stats{padding:12px 24px 8px;gap:8px}
.shop-stat{border-radius:999px;border:1px solid var(--bdr);background:var(--well);padding:7px 14px;font-weight:600}
.shop-stat.on{background:color-mix(in srgb,var(--a) 14%,transparent)}
.team-pills{padding:8px 24px 0}
.filter-lbl{font-size:10.5px;letter-spacing:.08em;color:var(--t3)}
.rem-filters{padding:10px 24px 0}

/* ══ Status badges ═════════════════════════════════════════════════ */
.ui-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;background:color-mix(in srgb,var(--t3) 16%,transparent);color:var(--t2)}
.ui-badge.ok{background:var(--good-soft);color:var(--good)}
.ui-badge.warn{background:var(--amber-soft);color:var(--amber)}
.ui-badge.crit{background:var(--warn-soft);color:var(--crit)}
.ui-badge.info{background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a)}
.ui-badge.blue{background:color-mix(in srgb,var(--blue) 18%,transparent);color:color-mix(in srgb,var(--blue) 60%,var(--t1))}
.ui-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.rbadge-red{background:var(--warn-soft);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 35%,transparent);border-radius:999px;padding:3px 10px}
.rbadge-yel{background:var(--amber-soft);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-radius:999px;padding:3px 10px}
.rbadge-yard{border-radius:999px}
.svc-badge,.tp-pill,.sh-timer,.r-fleetco{border-radius:999px}
.tp-green{background:var(--good-soft);color:var(--good)}
.tp-orange{background:var(--amber-soft);color:var(--amber)}
.tp-red{background:var(--warn-soft);color:var(--crit)}
.tp-purple{background:color-mix(in srgb,var(--blue) 16%,transparent);color:color-mix(in srgb,var(--blue) 55%,var(--t1))}

/* ══ Tables ════════════════════════════════════════════════════════ */
.ui-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ui-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:10px 14px;border-bottom:1px solid var(--bdr);background:color-mix(in srgb,var(--well) 70%,transparent);position:sticky;top:0}
.ui-table td{padding:10px 14px;border-bottom:1px solid var(--bdr2);color:var(--t1)}
.ui-table tr:hover td{background:var(--hover)}
.ui-table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ══ KPI tiles ═════════════════════════════════════════════════════ */
.ui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ui-kpi{background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-card);min-width:0}
.ui-kpi .n{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.ui-kpi .l{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:7px;color:var(--a)}
.ui-kpi .h{font-size:11.5px;color:var(--t3);margin-top:3px}
.ui-kpi.ok .l{color:var(--good)}.ui-kpi.warn .l{color:var(--amber)}.ui-kpi.crit .l{color:var(--crit)}.ui-kpi.blue .l{color:color-mix(in srgb,var(--blue) 60%,var(--t1))}

/* ══ States ════════════════════════════════════════════════════════ */
.empty{padding:44px 20px 40px}
.empty-ic{border-radius:var(--r-lg);background:color-mix(in srgb,var(--a) 8%,var(--well));border:1px solid color-mix(in srgb,var(--a) 25%,var(--bdr));color:var(--a)}
.empty p{color:var(--t2)}
.spin{border-color:var(--bdr);border-top-color:var(--a)}
.skel{background:linear-gradient(90deg,var(--well) 30%,var(--surface2) 50%,var(--well) 70%);background-size:200% 100%;border-radius:var(--r)}
.ui-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r);border:1px solid var(--bdr);background:var(--well);font-size:12.5px;color:var(--t2);line-height:1.5}
.ui-alert.warn{border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-soft)}
.ui-alert.crit{border-color:color-mix(in srgb,var(--crit) 40%,transparent);background:var(--warn-soft)}
.ui-alert.info{border-color:color-mix(in srgb,var(--a) 35%,transparent);background:color-mix(in srgb,var(--a) 7%,transparent)}
.toast{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--bdr);box-shadow:var(--shadow-pop)}

/* ══ Overlays: modal, palette, context menu, drawer ════════════════ */
.ui-modal-ov{position:fixed;inset:0;z-index:3000;background:rgba(3,7,14,.66);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.ui-modal{background:var(--surface);border:1px solid var(--bdr);border-radius:var(--r-lg);width:min(460px,100%);max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-pop)}
.ui-modal-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--bdr2);position:sticky;top:0;background:var(--surface);z-index:1}
.ui-modal-h b{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--t1)}
.ui-modal-b{padding:16px 18px 20px}
.ui-sec{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin:4px 0 12px}
.ui-field{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:8px}
.pal-backdrop{background:rgba(3,7,14,.6)}
.pal-wrap{border-radius:var(--r-lg);border:1px solid var(--bdr);box-shadow:var(--shadow-pop)}
.pal-item{border-radius:var(--r)}
.pal-item.on{background:color-mix(in srgb,var(--a) 14%,transparent)}
.pal-ic{border-radius:var(--r-sm)}
.ctx-menu{border-radius:var(--r);box-shadow:var(--shadow-pop)}
.ctx-item{border-radius:var(--r-sm)}
.tdrawer{background:var(--surface);border-left:1px solid var(--bdr);box-shadow:var(--shadow-pop)}
.tdr-head{background:linear-gradient(180deg,color-mix(in srgb,var(--a) 7%,transparent),transparent)}
.tdr-cell,.tdr-hrow{border-radius:var(--r);background:var(--well)}
.tdr-x{border-radius:var(--r)}

/* ══ Map workspace ═════════════════════════════════════════════════ */
.map-tools{position:absolute;top:12px;left:12px;z-index:999;width:316px;max-width:calc(100% - 24px);background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-pop)}
.map-tools-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.map-tools-h b{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t1)}
.map-tools-h span{margin-left:auto;font-size:10.5px;color:var(--t3);font-family:var(--mono)}
.map-filters{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.map-filters .ui-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px}
.map-filters .ui-chip i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.map-filters .ui-chip b{font-family:var(--mono);font-weight:600;color:var(--t1)}
.map-filters .ui-chip.on b{color:var(--a)}
.map-tools .gbrand-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--bdr2)}
.gbrand-pill{background:var(--well)!important;padding:4px 10px}
.map-selected-card{background:var(--well)!important;border:1px solid var(--bdr)!important;border-radius:var(--r);backdrop-filter:none}
.map-stats{top:12px;right:12px;width:150px;gap:8px}
.map-stat-crd{background:var(--glass)!important;border:1px solid var(--bdr)!important;border-radius:var(--r-lg);padding:10px 12px;backdrop-filter:none;box-shadow:var(--shadow-card)}
.map-stat-num{color:var(--t1)!important;font-family:var(--mono);font-weight:600;font-size:22px}
.map-stat-lbl{color:var(--t3)!important;letter-spacing:.08em}
.map-stat-ico{border-radius:var(--r);box-shadow:none}
.map-fitall{bottom:28px;left:12px}
.map-fitall-btn{width:36px;height:36px;border-radius:var(--r);background:var(--glass)!important;border:1px solid var(--bdr)!important;color:var(--t1)!important}
.map-fitall-btn:hover{border-color:var(--a)!important;color:var(--a)!important}
.leaflet-control-zoom{border:1px solid var(--bdr)!important;border-radius:var(--r)!important;overflow:hidden;box-shadow:var(--shadow-card)!important}
.leaflet-control-zoom a{background:var(--glass)!important;color:var(--t1)!important;border-color:var(--bdr2)!important;width:34px!important;height:34px!important;line-height:34px!important}
.leaflet-popup-content-wrapper{background:var(--surface)!important;color:var(--t1);border:1px solid var(--bdr);border-radius:var(--r)!important;box-shadow:var(--shadow-pop)}
.leaflet-popup-tip{background:var(--surface)!important}
.leaflet-control-attribution{background:var(--glass)!important;color:var(--t3)!important}
.cluster-mk{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 14%,transparent),0 4px 12px rgba(0,0,0,.35);font-family:var(--mono);font-weight:700}
/* truck panel */
.tp-panel{width:330px;right:174px;top:12px;bottom:auto;max-height:calc(100% - 24px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--bdr);box-shadow:var(--shadow-pop);backdrop-filter:none;padding:0;min-height:0}
.tp-panel .tp-head{padding:14px 16px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--a) 9%,transparent),transparent)}
.tp-panel .tp-pills{margin:0;padding:0 16px 10px}
.tp-panel .tp-body{padding:0 16px 14px}
.tp-unit{font-family:var(--mono);font-size:22px;font-weight:700}
.tp-co{font-size:11.5px;letter-spacing:.02em;color:var(--t2);font-weight:600}
.tp-model{font-size:12px;color:var(--t1);margin-top:3px}
.tp-x{width:30px;height:30px;border-radius:var(--r);border:1px solid var(--bdr);background:var(--well)}
.tp-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-fact{background:var(--well);border:1px solid var(--bdr2);border-radius:var(--r);padding:8px 10px;min-width:0}
.tp-fact.wide{grid-column:1 / -1}
.tp-fk{font-size:9.5px;letter-spacing:.08em}
.tp-fv{font-size:12px;overflow-wrap:anywhere}
.tp-sec{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--a)}
.tp-sec .ui-meta{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
.tp-fault{display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:6px;border:1px solid var(--bdr2);border-left:3px solid var(--amber);border-radius:var(--r);background:var(--well);color:inherit;font:inherit;cursor:pointer}
.tp-fault:hover{border-color:var(--a)}
.tp-fault b{font-family:var(--mono);font-size:11.5px;color:var(--t1)}
.tp-fault span{display:block;font-size:11.5px;color:var(--t2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-lamps{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.tp-actions .tp-btn.pri{grid-column:1 / -1;background:linear-gradient(90deg,var(--blue),var(--a2));border:none;color:#fff}
.tp-hist{border-top:1px solid var(--bdr2)}
@media(max-height:880px){.tp-panel{right:174px}}
@media(max-width:900px){.map-stats{display:none}.tp-panel{right:12px}}
@media(max-width:640px){.map-tools{width:auto;right:12px;padding:10px}.map-tools .gbrand-row{display:none}.tp-panel{top:auto;left:10px;right:10px!important;width:auto;bottom:calc(10px + env(safe-area-inset-bottom));max-height:52vh}}
.map-drawer{background:var(--surface);border-left:1px solid var(--bdr);box-shadow:var(--shadow-pop);padding:16px}
.repair-card{border-radius:var(--r);border:1px solid var(--bdr);background:var(--well)}
.repair-card:hover{border-color:var(--a);background:var(--hover)}
.repair-card-active{border-color:var(--a)!important;background:color-mix(in srgb,var(--a) 12%,transparent)!important}
.repair-card-icon{border-radius:var(--r-sm)}
.repair-pin-btn{border-radius:var(--r);background:linear-gradient(90deg,var(--blue),var(--a2))}
.rcat-hdr{font-size:10.5px;letter-spacing:.09em;color:var(--t2);padding:12px 2px 8px}
.route-info-card{border-radius:var(--r)}
.place-row:hover{background:var(--hover)}

/* ══ Trucks: unit card (server-rendered, class based) ══════════════ */
.tc{border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden;background:var(--card-grad);box-shadow:var(--shadow-card);font-family:var(--font-body,inherit)}
.tc-head{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 22%,transparent),color-mix(in srgb,var(--a) 6%,transparent) 70%);border-bottom:1px solid var(--bdr2)}
.tc-ic{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a) 14%,var(--well));border:1px solid color-mix(in srgb,var(--a) 35%,var(--bdr));color:var(--a);flex-shrink:0}
.tc-ic svg{width:24px;height:24px}
.tc-id{flex:1;min-width:0}
.tc-unit{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--t1);line-height:1.1}
.tc-model{font-size:13px;font-weight:600;color:var(--t1);margin-top:3px}
.tc-sub{font-size:12px;color:var(--t2);margin-top:2px}
.tc-vin{font-family:var(--mono);font-size:10.5px;color:var(--t3);margin-top:4px;letter-spacing:.04em}
.tc-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tc-loc{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--bdr2);font-size:12.5px;color:var(--t2);background:var(--well)}
.tc-loc span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.tc-loc .tc-ago{flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--t3)}
.tc-body{padding:14px 18px 16px}
.tc-sec{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--a)}
.tc-sec:first-child{margin-top:0}
.tc-sec .tc-n{margin-left:auto;font-weight:700;letter-spacing:0;color:var(--t3);text-transform:none}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.tc-stat{background:var(--well);border:1px solid var(--bdr2);border-radius:var(--r);padding:9px 11px;min-width:0}
.tc-stat .k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.tc-stat .v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--t1);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-levels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc-level .k{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);font-weight:600;margin-bottom:5px}
.tc-level .k b{font-family:var(--mono);color:var(--t1)}
.tc-bar{height:8px;border-radius:8px;background:var(--well);border:1px solid var(--bdr2);overflow:hidden}
.tc-bar i{display:block;height:100%;border-radius:8px}
.tc-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;margin-bottom:6px;border:1px solid var(--bdr2);border-left:3px solid var(--t3);border-radius:var(--r);background:var(--well)}
.tc-row.warn{border-left-color:var(--amber)}
.tc-row.crit{border-left-color:var(--crit)}
.tc-row.info{border-left-color:var(--a)}
.tc-row .m{flex:1;min-width:0}
.tc-row b{display:block;font-size:12.5px;color:var(--t1)}
.tc-row small{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
.tc-row .code{font-family:var(--mono)}
.tc-foot{display:flex;justify-content:space-between;gap:10px;padding:9px 18px;border-top:1px solid var(--bdr2);font-size:11px;color:var(--t3);background:var(--well)}
.tc-foot a{color:var(--a);text-decoration:none;font-weight:600}
.tc-sep{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--a);padding:6px 2px}
@media(max-width:520px){.tc-levels{grid-template-columns:1fr}.tc-head{padding:14px}.tc-body{padding:12px 14px}}

/* ══ Trucks tab layout ═════════════════════════════════════════════ */
.trucks-split{gap:0}
.trucks-right{border-left:1px solid var(--bdr2)}
.card-wrap{margin:0 24px 14px;border-radius:var(--r-lg);overflow:visible}
.tr-ghost-card{border-radius:var(--r-lg);border:1px dashed var(--bdr);background:var(--card-grad)}
.recent-chips{margin-top:12px}
.trucks-page .trucks-split{gap:20px}
.trucks-page .trucks-left{flex:1.25}
.trucks-page .swrap{padding:0 0 12px}
.trucks-page .card-wrap{margin:0 0 14px}
.trucks-page .ghost-btn{width:100%;margin:0 0 10px}
.trucks-page .trucks-right{border-left:none;padding:0;background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:4px 16px 16px;box-shadow:var(--shadow-card)}
.trucks-page .tr-ghost-wrap{padding:12px 0}
.trucks-page .tr-ghost-card{border:none;box-shadow:none;background:transparent}
@media(max-width:760px){.trucks-page .trucks-right{margin-top:0}}

/* ══ Lists: repairs, reminders, mail, dispatch rows ════════════════ */
.ritem{border-radius:var(--r-lg);background:var(--card-grad);border:1px solid var(--bdr);box-shadow:var(--shadow-card)}
.ritem::before{display:none}
.ritem-ic,.rrem-ic,.hm-row-ic,.fd-ic{border-radius:var(--r);background:var(--well);border-color:var(--bdr2)}
.ritem-ic svg{color:var(--a)}
.st-step{border-radius:var(--r-sm)}
.ritem-grid{padding:0 24px}
.rrem{border-radius:var(--r-lg);background:var(--card-grad);border:1px solid var(--bdr);margin:0 24px 8px}
.rrem::before{display:none}
.rrem.is-overdue{animation:card-in .32s ease both;background:linear-gradient(90deg,color-mix(in srgb,var(--crit) 8%,transparent),transparent 45%),var(--card-grad)}
.rrem.is-duesoon{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 7%,transparent),transparent 45%),var(--card-grad)}
.rrem-task{color:var(--a)}
.rem-header{padding:16px 24px;gap:16px}
.rem-stat-pill{border-radius:var(--r-lg)}
.cal-wrap{padding:12px 24px 16px}
.cal-cell{border-radius:var(--r-sm)}
.sticky-bar{padding:10px 24px;background:color-mix(in srgb,var(--bg) 92%,transparent)}
.ml-row:hover{background:var(--hover)}
.ml-ava{border-radius:50%}
.ml-connect-icon{border-radius:var(--r-lg);background:color-mix(in srgb,var(--a) 10%,transparent)}
.ml-detail-subject{border-radius:var(--r-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 8%,transparent),color-mix(in srgb,var(--blue) 5%,transparent));border-color:color-mix(in srgb,var(--a) 22%,transparent)}
.ml-toolbar,.ml-inbox-hdr,.ml-back-btn,.ml-detail-body,.ml-reply-area{padding-left:24px;padding-right:24px}
.dsp-row.on{background:color-mix(in srgb,var(--a) 10%,transparent)}

/* ══ Stats (leaderboard) ═══════════════════════════════════════════ */
.lb-hero{border-radius:var(--r-lg);margin:0;border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);background:linear-gradient(165deg,color-mix(in srgb,var(--amber) 12%,transparent),color-mix(in srgb,var(--blue) 8%,transparent) 60%,transparent),var(--card-grad)}
.lb-hero::before{animation:none;opacity:.5}
.lb-duel{margin:0;gap:12px}
.lb-duel-card{border-radius:var(--r-lg);background:var(--card-grad);border:1px solid var(--bdr)}
.lb-list{padding:6px;gap:2px;background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg)}
.lb-row{border-radius:var(--r)}
.lb-row:hover{background:var(--hover)}
.lb-bar-fill{background:linear-gradient(90deg,var(--blue),var(--a))}
.lb-divider{padding:16px 2px 8px}
.lb-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.lb-top .lb-duel{align-items:stretch}
@media(max-width:900px){.lb-top{grid-template-columns:1fr}}
.lb-empty{background:var(--card-grad);border:1px dashed var(--bdr);border-radius:var(--r-lg)}

/* ══ AI workspace ══════════════════════════════════════════════════ */
.ai-messages{padding:18px 24px;gap:14px}
.ai-avatar{border-radius:var(--r);background:linear-gradient(135deg,var(--blue),var(--a))}
.ai-bubble-user{background:linear-gradient(90deg,var(--blue),var(--a2));border-radius:14px 14px 4px 14px}
.ai-bubble-bot{background:var(--card-grad);border:1px solid var(--bdr);border-radius:4px 14px 14px 14px;max-width:min(760px,86%);line-height:1.6}
.ai-bubble-bot h1,.ai-bubble-bot h2,.ai-bubble-bot h3,.ai-bubble-bot h4{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--a);margin:12px 0 6px}
.ai-bubble-bot h1:first-child,.ai-bubble-bot h2:first-child,.ai-bubble-bot h3:first-child{margin-top:0}
.ai-bubble-bot table{border-collapse:collapse;margin:8px 0;font-size:12px;width:100%}
.ai-bubble-bot th,.ai-bubble-bot td{border:1px solid var(--bdr2);padding:6px 8px;text-align:left}
.ai-bubble-bot th{background:var(--well);color:var(--t2);font-weight:700}
.ai-bubble-bot code{background:var(--well);border:1px solid var(--bdr2);border-radius:var(--r-sm);color:var(--a)}
.ai-bubble-bot strong{color:var(--t1)}
.ai-bubble-bot blockquote{border-left:3px solid var(--amber);padding:4px 10px;margin:6px 0;color:var(--t2);background:var(--amber-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.ai-input-bar{padding:12px 24px 16px;background:color-mix(in srgb,var(--bg) 94%,transparent);gap:10px}
.ai-input{border-radius:var(--r-lg);padding:12px 14px}
.ai-send{border-radius:var(--r-lg)}
.ai-welcome-title{background:linear-gradient(90deg,var(--t1),var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-welcome-icon{animation:none}
.ai-suggests{padding:0 24px 16px;gap:8px;max-width:820px;margin:0 auto}
.ai-suggests-label{max-width:820px;margin:0 auto;padding:0 24px 8px}
.ai-suggest{border-radius:var(--r);background:var(--card-grad);border:1px solid var(--bdr);text-align:left;padding:11px 14px}
.ai-chips{padding:0 24px 10px}
.ai-ctx{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}

/* ══ Admin & Info ══════════════════════════════════════════════════ */
.adm-user{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adm-user .who{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.adm-user .ui-acts{margin-left:auto;justify-content:flex-end}
.adm-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--a));display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.adm-list{max-height:min(68vh,760px);overflow-y:auto}
.ui-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--bdr2)}
.ui-row:hover{background:var(--hover)}
.ui-row:last-child{border-bottom:none}
.info-card{background:var(--card-grad);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-card);min-width:0}
.info-val{font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--a);margin-top:5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;margin-left:-8px;border-radius:var(--r-sm)}
.info-val:hover{background:color-mix(in srgb,var(--a) 10%,transparent)}
.adm-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ui-card .shdr{position:static;background:none;backdrop-filter:none;padding:14px 16px 8px!important}
.ui-card .stat-crd{margin:0 16px 12px;box-shadow:none}
.ui-card .ghost-btn{width:calc(100% - 32px);margin:0 16px 10px}
.adm-page .ui-cols>section:first-child .stat-crd{max-height:min(70vh,820px);overflow-y:auto}
.ui-cols>.admin-section,.ui-cols-3>div{margin:0!important}
.ui-cols-3>div{border-radius:var(--r-lg)!important;border-color:var(--bdr)!important;background:var(--card-grad)!important;box-shadow:var(--shadow-card)}
.hm-heat-wrap{padding:4px 16px 16px}
.hm-cell{border-radius:3px}

/* ══ Home dashboard: same tokens as the rest of the app ════════════ */
:root .fx,[data-theme] .fx{--fx-card:var(--card-grad);--fx-bd:var(--bdr);--fx-cy:var(--a);--fx-bl:var(--blue);--fx-am:var(--amber);--fx-rd:var(--crit);--fx-gn:var(--good);--fx-mut:var(--t3);--fx-row:var(--hover)}

/* ══ Light theme fine-tuning ═══════════════════════════════════════ */
[data-theme="ugl-light"] .sni.on{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 12%,transparent),transparent)}
[data-theme="ugl-light"] .topbar{background:#fff}
[data-theme="ugl-light"] .pg-hdr{background:linear-gradient(180deg,#fff,transparent)}
[data-theme="ugl-light"] .map-stat-crd,[data-theme="ugl-light"] .map-tools{background:rgba(255,255,255,.96)!important}
[data-theme="ugl-light"] .tc-head{background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 10%,#fff),#fff 70%)}