/* TaxiPilot Pro • Dispatcher workspace | Arabic first */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Cairo',Tahoma,Arial,sans-serif;font-size:16px;line-height:1.6;color:#e8f1fa;background:#091320;--bg:#091320;--surface:#101e30;--panel:#14243a;--panel-hover:#1b304a;--line:#2a425a;--muted:#9bb0c7;--text:#e8f1fa;--accent:#17bc9e;--accent-strong:#0c967f;--blue:#4c9cf0;--warning:#efae5c;--red:#d56a74;--radius:17px}
*{box-sizing:border-box}
body{margin:0;min-width:310px}button,input{font:inherit}button{cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .15s ease}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}
a{color:inherit}.hidden{display:none!important}.space{flex:1}.muted{color:var(--muted);line-height:1.75;font-size:14px}.light{color:var(--muted);font-size:14px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #5ad9c5;outline-offset:3px}
.primary{background:var(--accent);color:#03271f;font-weight:900}.primary:hover{background:#41dbc2}
.nav{border:1px solid #36516b;background:#1b3047;color:#e7f5ff;font-weight:700}.nav:hover{background:#284662}.danger{border:1px solid #873f4b;background:#602937;color:#ffe7ed;font-weight:800}.danger:hover{background:#7a3445}
.top{min-height:85px;background:#0e1d30;border-bottom:1px solid #273e55;display:flex;align-items:center;gap:12px;padding:15px 22px;box-shadow:0 8px 35px #020a156b;position:relative;z-index:1000;flex-wrap:wrap}
.brand-area{display:flex;gap:13px;align-items:center;min-width:220px}
.logo-mark{width:54px;height:54px;border:1px solid #3f857c;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#177c71 0%,#114448 70%);box-shadow:0 7px 20px #050e2288;font-size:27px;flex:none}
.brand{font-size:25px;font-weight:900;line-height:1.12;letter-spacing:.2px;color:#f8fdff}
.brand span{color:#41d8b8}
.brand-caption{font-size:12px;color:#8fbbbc;font-weight:700;margin-top:5px}
.connection{background:#152b3f;border:1px solid #28465b;color:#cfe1ed;font-weight:800;font-size:13px;padding:9px 13px;border-radius:40px;white-space:nowrap}
.header-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.header-actions button{font-size:14px;border-radius:11px;padding:10px 14px;min-height:43px}
#newDriver{background:var(--accent);color:#04261e;border-color:transparent}
#audioEnable{border:1px solid #39675f;background:#163c3a;color:#bdf9e9;font-weight:900}
#logout{padding-inline:12px}
.layout{display:grid;grid-template-columns:minmax(400px,455px) minmax(0,1fr);height:calc(100dvh - 85px);min-height:520px}
.side{background:linear-gradient(180deg,#112237 0%,#0c192a 100%);padding:19px 19px 25px;overflow-y:auto;border-left:1px solid #2b4058;overscroll-behavior:contain;scrollbar-color:#315371 #101e30;scrollbar-width:thin}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.section-head strong{font-size:20px;font-weight:900;letter-spacing:.1px}
#total{font-size:13px;background:#1e344c;border:1px solid #3a526b;border-radius:25px;padding:5px 12px;color:#cfdeed;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 19px}
.stat{min-height:96px;border:1px solid #2f4760;text-align:center;background:linear-gradient(150deg,#1c324b,#17283f);border-radius:15px;padding:10px 4px 9px;box-shadow:inset 0 1px 0 #ffffff0b}
.stat b{font-size:30px;line-height:1.35;font-weight:900;display:block;font-variant-numeric:tabular-nums}
.stat small{font-size:12px;display:block;color:#acc0d6;font-weight:700}
.stat.available{border-color:#2d685d}.stat.busy{border-color:#71523b}.stat.offline{border-color:#3f5469}
#availableCount{color:#41dfb0}#busyCount{color:#ffd18c}#offlineCount{color:#b4c9dc}
.radio-card{background:linear-gradient(150deg,#143b40,#12303b);border:1px solid #37746f;border-radius:18px;padding:16px 16px 15px;margin-bottom:19px}
.radio-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.radio-title{font-size:18px;font-weight:900;color:#f1fffb}
.radio-sublabel{font-size:12px;background:#0c4a46;border:1px solid #3c7771;color:#b7f2e3;padding:4px 9px;border-radius:30px}
button.talk,button.ptt-button{touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent!important;overscroll-behavior:contain;cursor:pointer}
.talk{width:100%;display:flex;gap:10px;align-items:center;justify-content:center;min-height:62px;font-size:17px;font-weight:900;color:#fff;background:linear-gradient(135deg,#d54b69,#b52e50);border:1px solid #ee8093;border-radius:12px;box-shadow:0 5px 13px #280b205e}
.talk:hover{background:#dc4968}.talk.on,button.ptt-button.on{background:linear-gradient(135deg,#08a68d,#087b6e)!important;border-color:#7ef4d8!important;color:#fff!important;box-shadow:0 0 0 3px #4bdabe43!important}
#talkState{min-height:25px;margin:12px 0 0;font-size:13px;font-weight:700;color:#b8e8dc;line-height:1.7}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.list-toolbar strong{font-size:17px;font-weight:900}.list-toolbar span{font-size:12px;color:#8ba4bc}
.search{display:block;border:1px solid #3c5571;border-radius:12px;padding:12px 16px;width:100%;font-size:15px;min-height:49px;background:#0b1728;color:#f1fbff;margin:8px 0 13px;outline:none}
.search:focus{border-color:#40c7b4;box-shadow:0 0 0 3px #2dbca122}.search::placeholder{color:#8a9eb5}
.drivers{display:flex;flex-direction:column;gap:13px}
.driver-card{border:1px solid #344d68;background:linear-gradient(150deg,#1b3049,#15273e);border-radius:17px;padding:15px;box-shadow:0 4px 16px #0000001b;transition:border-color .2s ease,background .2s ease}
.driver-card:hover{border-color:#527793;background:linear-gradient(150deg,#213851,#182b42)}
.driver-card.lost{border:1px solid #bc8249;background:linear-gradient(150deg,#41362e,#2a2933)}
.driver-card.offline{background:#172536;opacity:.88}
.driver-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.car-icon{height:45px;width:45px;flex:none;background:#163f45;border:1px solid #378479;border-radius:13px;display:grid;place-items:center;font-size:22px}
.driver-card.lost .car-icon{background:#563e26;border-color:#bb8849}
.driver-heading{flex:1;min-width:0}.driver-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:1.45;font-weight:900;color:#f2f9ff}
.driver-plate{display:block;font-size:12px;color:#a4bcd1;font-weight:700;margin-top:3px;direction:ltr;text-align:right;unicode-bidi:plaintext}
.status-pill{font-size:12px;font-weight:900;border-radius:20px;white-space:nowrap;padding:5px 10px;background:#145b48;color:#a5ffda;border:1px solid #287c65;max-width:175px;overflow:hidden;text-overflow:ellipsis}
.status-pill.busy{background:#694632;color:#ffdcaa;border-color:#886247}
.status-pill.offline{background:#293d50;color:#b8c8d7;border-color:#496076}
.status-pill.disconnected{background:#704c26;color:#ffdda2;border-color:#bd8741;white-space:normal;text-align:center;line-height:1.4;max-width:151px}
.driver-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;background:#0d1a2b80;border:1px solid #31475d;border-radius:12px;padding:11px 12px;margin-bottom:12px}
.driver-detail-grid .value{display:block;font-size:14px;font-weight:900;color:#edf7ff;line-height:1.4;overflow-wrap:anywhere}
.driver-detail-grid .detail-label{display:block;color:#9ab3c9;font-weight:600;font-size:11px;margin-bottom:3px}
.driver-detail-grid .status-value{color:#eac392}
.driver-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.driver-actions button{min-height:41px;font-size:13px;font-weight:800;padding:7px 5px;border-radius:10px;border:1px solid #446079;background:#233b54;color:#f2faff}
.driver-actions button:hover:not(:disabled){background:#305270}
.driver-actions .locate{background:#133f50;border-color:#2d7581;color:#b2f2f5}
.driver-actions .call{background:#15483e;border-color:#2e7865;color:#c4fce1}
.driver-manage{display:flex;justify-content:flex-end;gap:9px}
.driver-manage button{font-size:12px;color:#adbed1;font-weight:700;background:transparent;border:1px solid #354e67;padding:5px 10px;border-radius:8px}
.driver-manage .remove{border-color:#634855;color:#e6afb6}
.driver-manage button:hover{background:#283f54}
.empty-fleet{padding:34px 20px;text-align:center;color:#a4bcd0;background:#152940;border:1px dashed #3a5b73;border-radius:14px;font-size:14px;line-height:1.9}
.empty-fleet strong{font-size:17px;display:block;color:#edf7ff;margin-bottom:4px}
.mapzone{height:100%;min-width:0;position:relative;background:#d5e5e9}
#map{height:100%;width:100%;background:#dce9e7}
.maplibregl-map{direction:ltr}
.map-heading{position:absolute;z-index:650;top:18px;right:15px;max-width:calc(100% - 30px);background:#0e2037ed;color:#f1fafb;border:1px solid #345874;border-radius:14px;padding:13px 16px;box-shadow:0 7px 28px #07111d47;pointer-events:none}
.map-heading strong{display:block;font-size:17px;line-height:1.3;font-weight:900}.map-heading small{display:block;font-size:11px;font-weight:700;color:#a8c1d1;margin-top:3px}
#taxiMapAutoControls{position:absolute;z-index:650;right:15px;top:101px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100% - 30px);direction:rtl}
#taxiMapAutoControls button{border:1px solid #3e7a7e;border-radius:10px;background:#133c48ed;color:#e3fffc;font-size:13px;font-weight:900;padding:9px 12px;box-shadow:0 6px 13px #06131e47}
#taxiMapAutoControls button:hover{background:#166067}
#taxiMapAutoControls .map-pause{background:#1f334ded;border-color:#547189}
#mapFollowStatus{font-size:12px;color:#e8f5fa;background:#0e2039ee;border:1px solid #42647c;border-radius:9px;padding:9px 12px;box-shadow:0 6px 13px #06131e47}
.maplibregl-ctrl-top-left{top:10px!important;left:12px!important}
.vehicle-pin{display:flex;flex-direction:column;align-items:center;min-width:124px;max-width:180px;pointer-events:auto;cursor:pointer;direction:rtl}
.vehicle-label{color:#eff7ff;background:#10253ded;border:1px solid #6f9faf;border-radius:11px;padding:7px 10px;box-shadow:0 3px 11px #0018;text-align:center;line-height:1.5;white-space:nowrap}
.vehicle-label b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.vehicle-label .vehicle-speed{font-size:13px;font-weight:900;color:#74ffcf}
.vehicle-label .vehicle-state{font-size:11px;color:#d4e4fd;font-weight:700}
.vehicle-label.busy{border-color:#f3a054}
.vehicle-label.offline{opacity:.75;border-color:#8f99ad}
.vehicle-label.lost{border:2px solid #efae5c;background:#4b3331f3}
.vehicle-label.lost .vehicle-state{color:#ffe2a4}
.vehicle-symbol{font-size:25px;text-shadow:0 2px 4px #001b}
.vehicle-popup{font-family:'Cairo',Tahoma,Arial,sans-serif;direction:rtl;text-align:right;min-width:205px;color:#16304a}
.vehicle-popup .value{font-weight:800}.vehicle-popup .item{padding:5px 0;border-bottom:1px solid #d8e3e9}
.overlay{position:fixed;inset:0;background:#071024e8;z-index:3000;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{width:min(500px,100%);max-height:90dvh;overflow-y:auto;border:1px solid #3b5876;border-radius:22px;background:linear-gradient(155deg,#1b3049,#12243b);padding:28px;box-shadow:0 24px 70px #020813b8}
.modal h2{margin:0 0 14px;font-size:23px;font-weight:900}
.modal input{display:block;background:#0b1a2f;border:1px solid #45617e;color:white;border-radius:11px;padding:12px 15px;width:100%;margin:12px 0;min-height:50px;font-size:15px}
.modal .primary{width:100%;margin-top:11px;min-height:49px;border:0;border-radius:11px}
.modal .nav{border-radius:10px}
.modal-copy{background:#0b1529;padding:12px;word-break:break-all;color:#a7eecc;font:12px monospace;direction:ltr;display:block;border-radius:9px}
.toast{position:fixed;bottom:23px;right:23px;border:1px solid #4b8190;padding:14px 19px;border-radius:12px;background:#173c4b;z-index:3300;max-width:min(440px,90vw);display:none;color:#f4ffff;font-size:14px;font-weight:800;box-shadow:0 6px 24px #0009}
.video{position:fixed;z-index:2100;left:17px;bottom:17px;max-width:420px;width:38vw;background:#121e34;padding:14px;border:1px solid #497295;border-radius:15px;box-shadow:0 4px 25px #0008}
.video video{width:100%;background:#000;min-height:160px;border-radius:10px}.video button{background:#a83444;color:white;margin-top:5px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.data-row{padding:14px;margin-top:10px;border:1px solid #304f6b;border-radius:12px;background:#0b2036}.data-row strong{display:block;font-size:16px}.data-row p{margin:6px 0;line-height:1.8;color:#d3e2f5;white-space:pre-wrap;overflow-wrap:anywhere}.data-row small{color:#abc0d5}
.blank{color:#b5c9de;text-align:center;padding:27px}.grid-meta{display:flex;gap:12px;flex-wrap:wrap;color:#8edcc6;font-size:13px;margin:6px 0}
@media(min-width:1600px){.layout{grid-template-columns:505px minmax(0,1fr)}.side{padding:23px}.driver-name{font-size:18px}.driver-detail-grid .value{font-size:15px}.top{padding-inline:28px}}
@media(max-width:1120px){.layout{grid-template-columns:minmax(350px,405px) minmax(0,1fr)}.header-actions{gap:7px}.header-actions button{padding:9px 10px;font-size:12px}.brand{font-size:22px}.brand-area{min-width:195px}}
@media(max-width:870px){.top{min-height:80px;gap:10px}.layout{grid-template-columns:minmax(310px,380px) minmax(0,1fr);height:calc(100dvh - 80px)}.side{padding:13px}.driver-card{padding:12px}.header-actions button{padding:8px}.logo-mark{width:46px;height:46px}}
@media(max-width:740px){.top{position:static;padding:12px 13px;min-height:0}.brand-area{flex:1;min-width:190px}.header-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.header-actions button{font-size:12px;padding:9px 5px;min-height:41px}#newDriver{grid-column:span 1}.connection{font-size:11px}.layout{display:flex;flex-direction:column-reverse;height:auto;min-height:0}.mapzone{height:47dvh;min-height:305px}.side{height:auto;min-height:40vh;overflow:visible;border-left:0;border-top:1px solid var(--line);padding:17px 14px}.map-heading{top:12px;right:11px;padding:9px 12px}.map-heading strong{font-size:14px}.map-heading small{font-size:10px}#taxiMapAutoControls{top:83px;right:11px;gap:5px}#taxiMapAutoControls button,#mapFollowStatus{font-size:11px;padding:7px 9px}.modal{padding:19px}.video{width:calc(100vw - 32px);max-width:none}.stats{gap:7px}}
@media(max-width:400px){.brand{font-size:20px}.connection{font-size:10px}.driver-actions button{font-size:12px}.driver-top{gap:7px}.status-pill{font-size:10px;padding:5px 6px}.driver-plate{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* Keep the workspace exactly within the available desktop viewport,
   including toolbars that wrap at different screen zoom levels. */
@media(min-width:741px){
 body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .top{flex:0 0 auto}
 .layout{flex:1 1 auto;min-height:0;height:auto}
}