/* شاشة تتبّع المندوبين (طراز الأسطول) — كل التنسيقات مُنعزَلة تحت .fleet */
.fleet{
  --rail-bg:#1B2430; --rail-icon:#8A93A3; --rail-icon-active:#FFFFFF;
  --panel-bg:#FFFFFF; --panel-shadow:0 8px 28px rgba(20,25,35,0.16);
  --fline:#EAECEF; --ink:#1B2430; --ink-soft:#7C8494;
  --moving:#2E9E5B; --moving-bg:#E4F6EB; --idling:#E58A1F; --idling-bg:#FCEBD3;
  --parking:#7C8494; --parking-bg:#EEF0F3; --faccent:#2E6BE6;
  --font-data: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace;
  position:relative; width:100%; height:calc(100vh - 40px); min-height:520px;
  overflow:hidden; border-radius:14px; background:#DCEFF3; color:var(--ink);
}
.fleet *{box-sizing:border-box;}
.fleet .fleet-map{position:absolute; inset:0; z-index:0;}

.fleet .rail{position:absolute; top:16px; bottom:16px; left:16px; width:56px;
  background:var(--rail-bg); border-radius:16px; display:flex; flex-direction:column; align-items:center;
  padding:14px 0; gap:6px; z-index:30; box-shadow:var(--panel-shadow);}
.fleet .icon-btn{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--rail-icon); cursor:pointer; transition:background .15s ease, color .15s ease;}
.fleet .icon-btn:hover{background:rgba(255,255,255,0.06); color:#fff;}
.fleet .icon-btn.active{background:rgba(255,255,255,0.12); color:var(--rail-icon-active);}
.fleet .rail .spacer{flex:1;}
.fleet .rail svg{width:18px; height:18px;}

.fleet .devices-panel{position:absolute; top:16px; bottom:16px; left:88px; width:340px; max-width:calc(100% - 120px);
  background:var(--panel-bg); border-radius:16px; box-shadow:var(--panel-shadow); z-index:25;
  display:flex; flex-direction:column; overflow:hidden; transition:transform .2s ease;}
.fleet .devices-panel.collapsed{transform:translateX(calc(-100% - 110px));}
.fleet .dp-header{padding:18px 18px 12px; border-bottom:1px solid var(--fline);}
.fleet .dp-header .row{display:flex; align-items:center; justify-content:space-between;}
.fleet .dp-header h2{margin:0; font-size:17px; font-weight:700;}
.fleet .dp-header p{margin:2px 0 0; font-size:12px; color:var(--ink-soft);}
.fleet .collapse-btn{width:28px; height:28px; border-radius:8px; border:1px solid var(--fline); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);}
.fleet .collapse-btn:hover{background:var(--fline);}
.fleet .dp-search{padding:12px 18px; display:flex; gap:8px; border-bottom:1px solid var(--fline);}
.fleet .dp-search input{flex:1; border:1px solid var(--fline); background:#F7F8FA; border-radius:10px;
  padding:9px 12px; font-size:13px; color:var(--ink);}
.fleet .dp-search input:focus{outline:2px solid var(--faccent); outline-offset:1px;}
.fleet .conn-bar{padding:10px 18px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--fline); font-size:12px;}
.fleet .conn-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-soft);}
.fleet .conn-dot.ok{background:var(--moving);}
.fleet .conn-dot.err{background:#D64545;}
.fleet .conn-bar .count{margin-inline-start:auto; color:var(--ink-soft); font-family:var(--font-data);}
.fleet .device-list{flex:1; overflow-y:auto; padding:8px 10px;}
.fleet .device-card{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; cursor:pointer; margin-bottom:2px;}
.fleet .device-card:hover{background:#F7F8FA;}
.fleet .device-card.active{background:#EEF3FF;}
.fleet .car-ic{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.fleet .car-ic.moving{background:var(--moving-bg); color:var(--moving);}
.fleet .car-ic.idling{background:var(--idling-bg); color:var(--idling);}
.fleet .car-ic.parking{background:var(--parking-bg); color:var(--parking);}
.fleet .car-ic svg{width:18px; height:18px;}
.fleet .device-card .info{min-width:0; flex:1;}
.fleet .device-card .name{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fleet .status-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px 2px 6px; border-radius:20px; margin-top:3px;}
.fleet .status-pill.moving{background:var(--moving-bg); color:var(--moving);}
.fleet .status-pill.idling{background:var(--idling-bg); color:var(--idling);}
.fleet .status-pill.parking{background:var(--parking-bg); color:var(--parking);}
.fleet .status-pill .d{width:6px; height:6px; border-radius:50%; background:currentColor;}
.fleet .empty-state{padding:36px 18px; text-align:center; color:var(--ink-soft); font-size:12.5px; line-height:1.7;}
.fleet .reopen-tab{position:absolute; top:16px; left:88px; background:var(--panel-bg); border-radius:12px;
  box-shadow:var(--panel-shadow); width:36px; height:36px; display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:25; color:var(--ink-soft);}
.fleet .devices-panel.collapsed ~ .reopen-tab{display:flex;}
.fleet .map-controls{position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:25;}
.fleet .map-controls .grp{background:var(--panel-bg); border-radius:12px; box-shadow:var(--panel-shadow); overflow:hidden;}
.fleet .ctrl-btn{width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink); background:var(--surface); border-bottom:1px solid var(--fline);}
.fleet .ctrl-btn:last-child{border-bottom:none;}
.fleet .ctrl-btn:hover{background:#F7F8FA;}
.fleet .ctrl-btn svg{width:16px; height:16px;}
.fleet .detail-panel{position:absolute; top:16px; bottom:16px; right:72px; width:360px; max-width:calc(100% - 100px);
  background:var(--panel-bg); border-radius:16px; box-shadow:var(--panel-shadow); z-index:24; overflow-y:auto; padding:20px; display:none;}
.fleet .detail-panel.show{display:block;}
.fleet .dt-close{position:absolute; top:14px; left:14px; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); background:#F7F8FA;}
.fleet .dt-name{font-size:16px; font-weight:800; margin:0 0 2px;}
.fleet .dt-sub{font-size:12px; color:var(--ink-soft); font-family:var(--font-data); margin-bottom:16px;}
.fleet .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;}
.fleet .stat{background:#F7F8FA; border-radius:10px; padding:10px 12px;}
.fleet .stat .label{font-size:10.5px; color:var(--ink-soft); margin-bottom:3px;}
.fleet .stat .value{font-size:14px; font-weight:700;}
.fleet .btn{font-family:inherit; font-size:12.5px; font-weight:700; border:none; border-radius:9px; padding:8px 14px;
  cursor:pointer; background:var(--faccent); color:#fff;}
.fleet .btn:disabled{opacity:.45; cursor:not-allowed;}
.fleet .btn.block{width:100%; padding:10px;}
.fleet .timeline{display:flex; height:24px; border-radius:6px; overflow:hidden; margin-top:8px;}
.fleet .timeline .seg.moving{background:var(--moving);}
.fleet .timeline .seg.idling{background:var(--idling);}
.fleet .timeline .seg.parking{background:var(--parking);}
.fleet .legend{display:flex; gap:12px; margin-top:8px; font-size:10.5px; color:var(--ink-soft);}
.fleet .legend span{display:inline-flex; align-items:center; gap:4px;}
.fleet .legend .d{width:7px; height:7px; border-radius:50%;}
.fleet .note{font-size:11px; color:var(--ink-soft); background:#F7F8FA; border-radius:9px; padding:10px 12px; margin-top:14px; line-height:1.6;}
.fleet .car-marker{position:relative; display:flex; flex-direction:column; align-items:center;}
.fleet .car-marker .label{background:var(--surface); border-radius:8px; padding:2px 8px; font-size:10.5px; font-weight:700;
  white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.18); margin-bottom:4px;}
.fleet .car-marker .halo{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.18); border:2px solid #fff;}
.fleet .car-marker svg{width:16px; height:16px;}
.fleet .leaflet-control-attribution{background:rgba(255,255,255,0.85) !important; border-radius:6px !important; font-size:10px !important;}
.fleet .modal-overlay{position:absolute; inset:0; background:rgba(20,25,35,0.35); z-index:50; display:none; align-items:center; justify-content:center;}
.fleet .modal-overlay.show{display:flex;}
.fleet .modal-box{width:380px; max-width:calc(100% - 40px); max-height:70vh; background:var(--surface); border-radius:16px;
  box-shadow:var(--panel-shadow); display:flex; flex-direction:column; overflow:hidden;}
.fleet .modal-head{padding:16px 18px; border-bottom:1px solid var(--fline);}
.fleet .modal-head h3{margin:0 0 3px; font-size:15px; font-weight:800;}
.fleet .modal-head p{margin:0; font-size:11.5px; color:var(--ink-soft);}
.fleet .modal-list{flex:1; overflow-y:auto; padding:6px 10px;}
.fleet .modal-item{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:9px; cursor:pointer;}
.fleet .modal-item:hover{background:#F7F8FA;}
.fleet .modal-item input{width:16px; height:16px; accent-color:var(--faccent);}
.fleet .modal-item .name{font-size:13px; font-weight:600;}
.fleet .modal-foot{padding:12px 18px; border-top:1px solid var(--fline); display:flex; justify-content:space-between; align-items:center; gap:8px;}
.fleet .link-btn{background:none; border:none; color:var(--faccent); font-size:12px; font-weight:700; cursor:pointer; padding:0;}

/* ===== الوضع الداكن =====
   .fleet يعرّف توكناته محليًا (أولوية أعلى من :root)، فلا تصله تجاوزات theme.js.
   نعيد تعريفها هنا تحت :root.dark .fleet لتتسق الشاشة كاملة في الداكن. */
:root.dark .fleet{
  --panel-bg:#1E293B; --fline:#334155; --ink:#F1F5F9; --ink-soft:#94A3B8;
  --panel-shadow:0 8px 28px rgba(0,0,0,0.5);
  background:#0F172A;
}
:root.dark .fleet .dp-search input{background:#0F172A; color:var(--ink); border-color:var(--fline);}
:root.dark .fleet .device-card:hover{background:#243244;}
:root.dark .fleet .device-card.active{background:color-mix(in srgb, var(--faccent) 24%, #1E293B);}
:root.dark .fleet .ctrl-btn:hover{background:#243244;}
:root.dark .fleet .stat,
:root.dark .fleet .note,
:root.dark .fleet .dt-close,
:root.dark .fleet .modal-item:hover{background:#0F172A;}
:root.dark .fleet .leaflet-control-attribution{background:rgba(15,23,42,0.85) !important; color:#94A3B8 !important;}