:root{
  --bg:#f3f4f6; --card:#fff; --ink:#111827; --muted:#4b5563; --line:#e5e7eb; --soft:#f9fafb;
  --brand:#1d4ed8; --brand-ink:#fff; --danger:#dc2626; --ok:#16a34a; --warn:#d97706;
  --st-new:#9ca3af; --st-open:#dc2626; --st-assigned:#2563eb; --st-picked:#7c3aed; --st-done:#16a34a; --st-cancelled:#6b7280;
  --zA:#0d9488; --zB:#ea580c; --zC:#7c3aed; --z0:#9ca3af;
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b1020; --card:#151b2e; --ink:#e5e7eb; --muted:#9aa3b5; --line:#263049; --soft:#1b2238; --brand:#2563eb; --danger:#f87171;
}}
:root[data-theme="dark"]{ --bg:#0b1020; --card:#151b2e; --ink:#e5e7eb; --muted:#9aa3b5; --line:#263049; --soft:#1b2238; --brand:#2563eb; --danger:#f87171; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Heebo,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
h1,h2,h3{margin:0 0 10px;line-height:1.2} h2{font-size:17px} h3{font-size:15px;margin-top:14px}
.hidden{display:none!important} .muted{color:var(--muted);font-weight:400} code{background:var(--soft);padding:1px 5px;border-radius:4px}
a{color:var(--brand)}
input,select,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);border-color:var(--brand)}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px} label>input,label>select,label>textarea,label>div{margin-top:3px;color:var(--ink);font-size:14px}
label.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:13.5px} label.check input{width:auto}
.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.btn:hover{background:var(--soft)} .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.btn.primary:hover{filter:brightness(1.08)} .btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.btn.big{padding:11px 16px;font-size:15.5px} .btn.sm{padding:3px 8px;font-size:12.5px;border-radius:6px} .btn:disabled{opacity:.5;cursor:default}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.err{color:var(--danger);margin-top:8px;min-height:1em}
.hint{font-size:12.5px;color:var(--muted);margin:-4px 0 8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .row3{display:flex;gap:8px;align-items:flex-end} .grow{flex:1} .w70{width:80px;flex:none}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* כותרת */
.top{position:sticky;top:0;z-index:1000;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:8px 14px;flex-wrap:wrap}
.brand{font-size:17px;white-space:nowrap}
#tabs{display:flex;gap:2px;flex-wrap:wrap;flex:1}
#tabs button{font:inherit;border:0;background:none;color:var(--muted);padding:7px 11px;border-radius:8px;cursor:pointer;font-weight:500}
#tabs button:hover{background:var(--soft);color:var(--ink)} #tabs button.on{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:700}
.top-left{display:flex;gap:10px;align-items:center} .clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px}
.pill{font-size:12.5px;padding:3px 10px;border-radius:99px;background:var(--soft);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:transparent}
.pill.bad{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);border-color:transparent}
main{padding:12px 14px}

/* כניסה */
.login{position:fixed;inset:0;z-index:5000;background:var(--bg);display:grid;place-items:center;padding:16px}
.login-card{width:min(360px,100%);text-align:center} .login-card input{margin:12px 0;font-size:16px} .login-card .btn{width:100%;justify-content:center}

/* מוקד */
.dispatch{display:grid;grid-template-columns:minmax(300px,360px) minmax(340px,1fr) minmax(320px,1.1fr);gap:12px;align-items:start}
@media (max-width:1250px){.dispatch{grid-template-columns:minmax(300px,360px) 1fr}.col-map{grid-column:1/-1}}
@media (max-width:760px){.dispatch{grid-template-columns:1fr}}
.col-form .card{position:sticky;top:64px}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:9px}
.seg label{flex:1;margin:0;cursor:pointer} .seg input{display:none}
.seg span{display:block;text-align:center;padding:8px 6px;color:var(--ink);font-size:14px;border-inline-start:1px solid var(--line)}
.seg label:first-child span{border:0} .seg input:checked+span{background:var(--brand);color:#fff;font-weight:700}
.seg.small span{padding:5px 6px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips label{margin:0;cursor:pointer} .chips input{display:none}
.chips span{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:99px;color:var(--ink);font-size:13.5px}
.chips input:checked+span{background:color-mix(in srgb,var(--warn) 18%,transparent);border-color:var(--warn);font-weight:700}
.zonebox{border:1px dashed var(--line);border-radius:9px;padding:9px;text-align:center;margin-bottom:10px;color:var(--muted);font-size:14px}
.zonebox.same{border-style:solid;border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.zonebox.cross{border-style:solid;border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);font-weight:700}
.zonebox .zbig{font-size:20px;font-weight:800;letter-spacing:.5px}

.z{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:6px;color:#fff;font-weight:800;font-size:12.5px;background:var(--z0)}
.z.A{background:var(--zA)} .z.B{background:var(--zB)} .z.C{background:var(--zC)}
.rides-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rides-head h2{margin:0} .rides-head input{max-width:280px}
.filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.filters button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:4px 10px;border-radius:99px;cursor:pointer}
.filters button.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.ride-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 210px);overflow:auto;padding-inline-end:2px}
.ride{border:1px solid var(--line);border-inline-start:5px solid var(--st-new);border-radius:9px;padding:9px 11px;background:var(--card)}
.ride.open{border-inline-start-color:var(--st-open)} .ride.assigned{border-inline-start-color:var(--st-assigned)} .ride.picked{border-inline-start-color:var(--st-picked)}
.ride.done{border-inline-start-color:var(--st-done);opacity:.85} .ride.cancelled{border-inline-start-color:var(--st-cancelled);opacity:.6}
.ride.late{animation:late 1.6s infinite;background:color-mix(in srgb,var(--danger) 7%,var(--card))}
@keyframes late{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 35%,transparent)}}
.ride-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ride-no{font-weight:800;font-size:16px} .ride-time{margin-inline-start:auto;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.badge{font-size:12px;padding:1px 8px;border-radius:99px;color:#fff;font-weight:700;background:var(--st-new)}
.badge.open{background:var(--st-open)} .badge.assigned{background:var(--st-assigned)} .badge.picked{background:var(--st-picked)} .badge.done{background:var(--st-done)} .badge.cancelled{background:var(--st-cancelled)}
.badge.cross{background:var(--warn)} .badge.warn{background:#dc2626}
.ride-line{margin-top:4px} .ride-tags{margin-top:3px;font-size:13px} .ride-driver{margin-top:4px;font-size:13px}
.ride-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.empty{color:var(--muted);text-align:center;padding:24px}

.map-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.legend{display:flex;gap:10px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:3px;vertical-align:-1px}
.dot.free{background:#16a34a} .dot.busy{background:#f59e0b} .dot.off{background:#9ca3af} .dot.stale{background:#fff;border:2px solid #6b7280} .dot.ride{background:#dc2626;border-radius:2px}
.map{height:430px;border-radius:8px;border:1px solid var(--line);z-index:1} .map.tall{height:calc(100vh - 170px);min-height:420px}
.drivers-now{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto}
.dn{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:7px;cursor:pointer;font-size:13.5px}
.dn:hover{background:var(--soft)} .dn .nm{font-weight:700} .dn .st{margin-inline-start:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}
.type{font-size:11.5px;padding:0 6px;border-radius:5px;background:var(--soft);border:1px solid var(--line);white-space:nowrap}
.type.paid{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:transparent;color:var(--warn);font-weight:700}
.drv-marker{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.ride-marker{background:#dc2626;color:#fff;font-weight:800;font-size:12px;border-radius:6px;padding:2px 5px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);white-space:nowrap;text-align:center}
.k-marker{font-size:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.leaflet-popup-content{direction:rtl;text-align:right;font-family:Heebo,system-ui,sans-serif}

/* סיכום */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.kpi .v{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums} .kpi .l{color:var(--muted);font-size:13px} .kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.hero{background:var(--brand);color:#fff;border-color:var(--brand)} .kpi.hero .l,.kpi.hero .s{color:rgba(255,255,255,.85)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:900px){.grid2{grid-template-columns:1fr}}
.grid-side{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:12px;align-items:start} .grid-side.wide-map{grid-template-columns:minmax(320px,440px) 1fr}
@media (max-width:900px){.grid-side,.grid-side.wide-map{grid-template-columns:1fr}}
.hchart{display:flex;align-items:flex-end;gap:4px;height:220px;padding-top:18px;direction:ltr}
.hbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.hbar .bars{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.hbar .b{width:45%;max-width:16px;border-radius:3px 3px 0 0;position:relative;min-height:1px}
.hbar .b.req{background:color-mix(in srgb,var(--brand) 35%,transparent)} .hbar .b.done{background:var(--st-done)}
.hbar .b span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--muted)}
.hbar .h{font-size:11px;color:var(--muted);margin-top:3px}
.hlegend{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:6px} .hlegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:4px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap} th{font-size:12.5px;color:var(--muted);font-weight:500;background:var(--soft);position:sticky;top:0}
tr.sub td{font-weight:800;background:var(--soft)} td.num{font-variant-numeric:tabular-nums}
.table-wrap{overflow:auto;max-height:70vh}
.matrix td,.matrix th{text-align:center} .matrix td.hot{font-weight:800} .matrix td.diag{background:color-mix(in srgb,var(--ok) 8%,transparent)} .matrix td.offd{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.paxtypes{display:flex;flex-wrap:wrap;gap:8px} .paxtypes div{background:var(--soft);border-radius:8px;padding:6px 10px} .paxtypes b{font-size:17px;margin-inline-start:4px}
.log{max-height:320px;overflow:auto;font-size:13px} .log div{padding:3px 0;border-bottom:1px solid var(--line)} .log time{color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-end:8px}

/* שעות */
.timeline{overflow-x:auto}
.tl{min-width:900px;direction:rtl}
.tl-row{display:grid;grid-template-columns:190px 1fr;align-items:center;border-bottom:1px solid var(--line);min-height:30px}
.tl-row.head{position:sticky;top:0;background:var(--card);z-index:2;font-size:12px;color:var(--muted)}
.tl-name{padding:3px 6px;font-size:13px;display:flex;gap:5px;align-items:center;overflow:hidden}
.tl-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-track{position:relative;height:28px;direction:ltr}
.tl-hours{display:flex;direction:ltr} .tl-hours div{flex:1;border-inline-start:1px solid var(--line);padding-left:3px}
.tl-grid{position:absolute;inset:0;display:flex;pointer-events:none} .tl-grid div{flex:1;border-left:1px solid var(--line);opacity:.6}
.tl-plan{position:absolute;top:5px;height:18px;border-radius:5px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--brand) 18%,transparent) 0 6px,color-mix(in srgb,var(--brand) 9%,transparent) 6px 12px);border:1px dashed color-mix(in srgb,var(--brand) 50%,transparent)}
.tl-act{position:absolute;top:9px;height:10px;border-radius:4px;background:var(--ok)}
.tl-act.paid{background:var(--warn)}
.tl-ride{position:absolute;top:10px;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translateX(-4px)}
.tl-now{position:absolute;top:0;bottom:0;width:2px;background:#dc2626;z-index:1}
.tl-row.cov .tl-track{display:flex;height:24px} .tl-row.cov .cell{flex:1;text-align:center;font-size:12px;font-weight:700;line-height:24px;border-left:1px solid var(--line)}
.tl-group{background:var(--soft);font-weight:800;padding:5px 6px;font-size:13px}
.alertbox{border-radius:9px;padding:9px 12px;margin-bottom:10px;background:color-mix(in srgb,var(--danger) 9%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}
.alertbox.ok{background:color-mix(in srgb,var(--ok) 9%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.shift-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sg{border:1px solid var(--line);border-radius:9px;padding:9px 11px} .sg h3{margin:0 0 6px;font-size:14.5px} .sg div{font-size:13.5px;padding:2px 0;display:flex;gap:6px;align-items:center}

/* רחובות */
.zone-counts{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap} .zone-counts span{background:var(--soft);border-radius:7px;padding:3px 9px;font-size:13px}
.street-list{max-height:calc(100vh - 420px);min-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.srow{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--line)} .srow:last-child{border:0}
.srow .sn{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srow .sn small{color:var(--muted)}
.zbtns{display:flex;gap:2px} .zbtns button{font:inherit;width:28px;height:26px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;cursor:pointer;font-weight:800;font-size:12.5px}
.zbtns button.on.A{background:var(--zA);color:#fff;border-color:var(--zA)} .zbtns button.on.B{background:var(--zB);color:#fff;border-color:var(--zB)} .zbtns button.on.C{background:var(--zC);color:#fff;border-color:var(--zC)}
.icon-btn{font:inherit;border:0;background:none;cursor:pointer;padding:3px 5px;border-radius:5px;color:var(--muted)} .icon-btn:hover{background:var(--soft);color:var(--ink)}
.add-row{margin-top:10px} .add-row select{width:80px}
.bulk{margin-top:10px} .bulk summary{cursor:pointer;font-weight:700;padding:4px 0} .bulk textarea{margin:6px 0;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.file-btn{margin:4px 0;color:var(--ink);font-size:14px}
.placing .leaflet-container{cursor:crosshair}
.unverified{color:var(--warn);font-weight:700}

dialog{border:0;border-radius:12px;padding:0;max-width:min(560px,94vw);width:100%;background:var(--card);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.4)} #dlgBody{padding:16px} #dlgBody h2{margin-bottom:12px}
.pick-list{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto;margin:8px 0}
.pick-list button{font:inherit;text-align:right;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:8px 10px;cursor:pointer;display:flex;gap:8px;align-items:center}
.pick-list button:hover{border-color:var(--brand);background:var(--soft)} .pick-list .dist{margin-inline-start:auto;color:var(--muted);font-size:12.5px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--card);padding:10px 18px;border-radius:10px;z-index:6000;transition:transform .25s;font-weight:500;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)} .toast.bad{background:#dc2626;color:#fff}
.wa-status{padding:8px 10px;border-radius:8px;background:var(--soft);margin-bottom:10px;font-size:13.5px}
.howto li{margin-bottom:6px}
