/* ============================================================
   هوية التشغيل (ops) — الرئيسية، الوضع الحي، الرحلات، الخريطة الحرارية،
   مركز التنبيهات. مبنية على رموز app.css/identity.css وحدها (لا ألوان
   فاتحة ثابتة)، فتعمل في وضع الهوية الداكن وفي الكلاسيكي معاً.
   المرجع البصري: pages/home و pages/live (معاينات 2026-11-04).
   ============================================================ */

/* ── مكوّنات مشتركة لشاشات التشغيل ── */
.ops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ops-tt{display:flex;align-items:center;gap:14px;min-width:0}
.ops-tt .id-ic svg{width:24px;height:24px}
.ops-head h1{margin:0;font-family:var(--fdisplay);font-size:26px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.25}
.ops-head p{margin:4px 0 0;color:var(--muted);max-width:720px;font-size:13.5px;line-height:1.6}
.ops-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ops-updated{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
.ops-updated .id-live{width:7px;height:7px}
.ops-livechip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--good-bg);color:var(--good);font-family:var(--fbody)}
.ops-livechip .id-live{width:7px;height:7px;--c:var(--good)}
.num{font-variant-numeric:tabular-nums}
:is(.oh,.ol,.otr,.ohm,.ont) :not(td,th).num{direction:ltr;unicode-bidi:isolate}

.ops-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;
  border:1px solid var(--border);background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);
  font:700 13px var(--fbody);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--t-fast) var(--ease),background var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
.ops-btn:hover{background:color-mix(in srgb,var(--text) 9%,transparent);border-color:color-mix(in srgb,var(--text) 20%,transparent)}
.ops-btn:active{transform:scale(.97)}
.ops-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.ops-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ops-btn.primary{border:0;background:var(--brand-grad);color:#fff;box-shadow:0 10px 24px -10px rgba(168,85,247,.7)}
.ops-btn.primary:hover{filter:brightness(1.08)}
.ops-btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.ops-btn svg{width:15px;height:15px;flex:none}

.ops-inp{height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  font:500 13px var(--fbody);min-width:0;transition:border-color var(--t),box-shadow var(--t)}
.ops-inp::placeholder{color:var(--faint)}
.ops-inp:focus{outline:none;border-color:color-mix(in srgb,var(--brand-2) 60%,transparent);box-shadow:var(--ring)}
select.ops-inp{padding-inline-end:28px}

.ops-tbl{overflow:auto;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);max-width:100%}
.ops-tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.ops-tbl th{position:sticky;top:0;z-index:1;text-align:start;font-weight:700;font-size:12px;color:var(--muted);padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.ops-tbl td{padding:12px 16px;border-bottom:1px solid var(--border-soft);color:color-mix(in srgb,var(--text) 80%,transparent)}
.ops-tbl tbody tr{transition:background var(--t-fast)}
.ops-tbl tbody tr:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.ops-tbl tbody tr:last-child td{border-bottom:0}
.ops-tbl td b{color:var(--text)}

.ops-empty,.oh-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:36px 16px;color:var(--muted);text-align:center;font-size:13px}
.ops-empty svg,.oh-empty svg{width:34px;height:34px;color:var(--faint)}
.ops-empty b,.oh-empty b{color:var(--text);font-weight:700}

@keyframes ops-grow-x{from{transform:scaleX(0)}}
@keyframes ops-grow-y{from{transform:scaleY(0)}}
@keyframes ops-pop{from{opacity:0;transform:scale(.4)}}
@keyframes ops-fade{from{opacity:0}}
@keyframes ops-up{from{opacity:0;transform:translateY(6px)}}
@keyframes ops-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.6);opacity:0}}
@keyframes ops-in{from{opacity:0;transform:translateY(-10px) scale(.97)}}

/* ============================================================
   الرئيسية — نظرة عامة على الشركة (.oh)
   ============================================================ */
.oh{min-width:0}
.oh .oh-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.oh .oh-ch h3{margin:0}
.oh .oh-hint{margin:2px 0 14px;color:var(--muted);font-size:12.5px;line-height:1.7}
.oh .oh-hint b{color:var(--text)}
.oh .oh-livechip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--good)}
.oh .oh-livechip .id-live{width:7px;height:7px}

/* الاختناقات */
.oh .oh-blocks{display:grid;gap:16px}
.oh .oh-blocks.has-hero{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.oh .oh-blocks.n2{grid-template-columns:1fr 1fr}
.oh .oh-blk-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.oh .oh-blk-col .oh-blk{flex:1}
.oh .oh-hero{overflow:hidden;padding:24px 26px 22px;border-color:color-mix(in srgb,var(--crit) 28%,var(--border));
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--crit) 16%,transparent) 0%,transparent 55%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.oh .oh-hero::before{content:"";position:absolute;width:420px;height:420px;left:-120px;top:-180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-growth) 26%,transparent) 0%,transparent 65%);filter:blur(10px);animation:oh-drift 14s var(--ease) infinite alternate}
.oh .oh-hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 45%,transparent 60%);background-size:250% 100%;animation:oh-sheen 7s ease-in-out 1.2s infinite}
@keyframes oh-drift{to{transform:translate(90px,70px) scale(1.15)}}
@keyframes oh-sheen{0%{background-position:150% 0}40%,100%{background-position:-60% 0}}
.oh .oh-hero>*{position:relative;z-index:1}
.oh .oh-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
.oh .oh-kick{display:inline-flex;align-items:center;gap:8px}
.oh .oh-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--crit)}
.oh .oh-pulse::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--crit);animation:ops-ping 1.8s var(--ease) infinite}
.oh .oh-hnum{margin:14px 0 2px;font-family:var(--fdisplay);font-size:76px;font-weight:900;line-height:1;letter-spacing:-1px;width:max-content;
  background:linear-gradient(180deg,var(--text) 20%,color-mix(in srgb,var(--crit) 70%,var(--text)) 110%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--crit) 45%,transparent))}
.oh .oh-hlbl{font-size:16px;font-weight:700;color:var(--text)}
.oh .oh-hdesc{margin:8px 0 0;color:color-mix(in srgb,var(--text) 76%,transparent);max-width:520px;line-height:1.7}
.oh .oh-hdesc b{color:var(--text)}
.oh .oh-ratio{margin-top:18px;max-width:520px}
.oh .oh-ratio-bar{display:flex;gap:2px;height:8px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--text) 5%,transparent)}
.oh .oh-ratio-bar i{display:block;height:100%;border-radius:4px;min-width:3px;transform-origin:right;animation:ops-grow-x 1.1s var(--ease) both;animation-delay:var(--d,0s)}
.oh .oh-ratio-lg{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.oh .oh-ratio-lg span{display:inline-flex;align-items:center;gap:6px}
.oh .oh-ratio-lg i{width:9px;height:9px;border-radius:3px}
.oh .oh-ratio-lg b{color:var(--text);font-weight:800}
.oh .oh-hcta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.oh .oh-waffle{display:grid;grid-template-columns:repeat(10,13px);gap:5px;padding:14px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid var(--border)}
.oh .oh-waffle i{width:13px;height:13px;border-radius:4px;background:color-mix(in srgb,var(--text) 8%,transparent);animation:ops-pop .45s var(--spring) both;animation-delay:var(--d)}
.oh .oh-waffle i.w{background:var(--crit);box-shadow:0 0 8px -2px var(--crit)}
.oh .oh-waffle i.a{background:var(--good);box-shadow:0 0 8px -2px var(--good)}
.oh .oh-wcap{margin-top:8px;text-align:center;font-size:11.5px;color:var(--muted)}

.oh .oh-blk{display:flex;flex-direction:column;padding:22px 22px 20px;overflow:hidden;min-width:0}
.oh .oh-blk::before{content:"";position:absolute;width:240px;height:240px;left:-80px;bottom:-120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--bc,var(--warn)) 16%,transparent),transparent 65%)}
.oh .oh-blk.warn{--bc:var(--warn);border-color:color-mix(in srgb,var(--warn) 24%,var(--border))}
.oh .oh-blk.crit{--bc:var(--crit);border-color:color-mix(in srgb,var(--crit) 26%,var(--border))}
.oh .oh-blk.ok{--bc:var(--good);border-color:color-mix(in srgb,var(--good) 22%,var(--border))}
.oh .oh-blk>*{position:relative}
.oh .oh-blk-k{align-self:flex-start}
.oh .oh-bv{margin-top:14px;font-family:var(--fdisplay);font-size:44px;font-weight:900;line-height:1;color:var(--text)}
.oh .oh-bv small{font-size:16px;font-weight:700;color:var(--muted);margin-inline-start:6px}
.oh .oh-okmark{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;color:var(--good);background:var(--good-bg);box-shadow:inset 0 0 0 1px var(--good-line)}
.oh .oh-okmark svg{width:28px;height:28px}
.oh .oh-bd{margin-top:10px;color:color-mix(in srgb,var(--text) 76%,transparent);line-height:1.7;font-size:13px}
.oh .oh-bd b{color:var(--text)}
.oh .oh-deadlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.oh .oh-deadlist .id-chip{animation:ops-up .4s var(--spring) both;animation-delay:calc(500ms + var(--i) * 60ms)}
.oh .oh-go{margin-top:auto;padding-top:18px}

/* المؤشّرات */
.oh .oh-kpis{margin-top:16px}
.oh .oh-kpi{padding:18px 20px 16px;display:flex;flex-direction:column;gap:4px;transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
.oh .oh-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--kc) 30%,var(--border));box-shadow:var(--shadow-lg)}
.oh .oh-krow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oh .oh-kpi .k{color:var(--muted);font-size:12.5px;font-weight:600}
.oh .oh-kpi .v{margin-top:8px;font-family:var(--fdisplay);font-size:30px;font-weight:800;line-height:1.15;color:var(--text);align-self:flex-start}
.oh .oh-kpi .d{font-size:12px;color:var(--muted)}
.oh .oh-kic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--kc);
  background:color-mix(in srgb,var(--kc) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 24%,transparent)}
.oh .oh-kic svg{width:18px;height:18px}
.oh .oh-kpi .oh-livechip{color:var(--kc);height:34px}
.oh .oh-kpi.warn .d{color:var(--warn);font-weight:700}
.oh .oh-kpi.crit{border-color:color-mix(in srgb,var(--crit) 35%,var(--border))}
.oh .oh-kpi.crit .v{color:var(--crit)}
.oh .oh-meter{margin-top:12px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.oh .oh-meter:empty{background:transparent}
.oh .oh-meter i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--kc);transform-origin:right;animation:ops-grow-x 1s var(--ease) .2s both}

/* البطاقات */
.oh .oh-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;margin-top:16px}
.oh .oh-two.eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.oh .oh-two>.id-card,.oh .oh-series{min-width:0}

/* القمع */
.oh .oh-fun{display:flex;flex-direction:column}
.oh .oh-frow{display:grid;grid-template-columns:96px minmax(0,1fr) 52px;align-items:center;gap:12px;height:40px}
.oh .oh-frow .fl{font-weight:700;color:color-mix(in srgb,var(--text) 80%,transparent);font-size:13px}
.oh .oh-frow .ft{position:relative;height:30px;border-radius:9px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.oh .oh-frow .ff{position:absolute;inset-block:0;right:0;width:var(--w);border-radius:9px;display:flex;align-items:center;padding:0 10px;overflow:hidden;
  background:linear-gradient(to left,var(--fc),color-mix(in srgb,var(--fc) 55%,transparent));box-shadow:0 6px 18px -10px var(--fc);
  color:#120a20;font-weight:800;font-size:13px;transform-origin:right;animation:ops-grow-x 1s var(--ease) both;animation-delay:calc(var(--i) * 140ms + 150ms)}
.oh .oh-frow .ff span{white-space:nowrap}
.oh .oh-frow .fv{font-weight:800;color:var(--text);font-size:14px;text-align:start}
.oh .oh-fdrop{display:grid;grid-template-columns:96px minmax(0,1fr) 52px;gap:12px;height:22px;align-items:center}
.oh .oh-fdrop span{grid-column:2;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);padding-inline-start:6px}
.oh .oh-fdrop span::before{content:"";width:1px;height:14px;background:linear-gradient(var(--border),transparent)}
.oh .oh-fdrop b{color:var(--crit);font-weight:800}
.oh .oh-leak{margin-top:18px;padding-top:16px;border-top:1px dashed var(--border)}
.oh .oh-leak-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:color-mix(in srgb,var(--text) 80%,transparent);font-weight:700;margin-bottom:10px}
.oh .oh-leak-t b{font-size:18px;color:var(--text);font-weight:800}
.oh .oh-leak-bar{display:flex;gap:2px;height:10px;border-radius:6px;overflow:hidden}
.oh .oh-leak-bar i{height:100%;border-radius:4px;min-width:3px;animation:ops-grow-y .6s var(--spring) both;animation-delay:calc(var(--i) * 90ms + 700ms)}
.oh .oh-leak-lg{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:12px}
.oh .oh-lk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:color-mix(in srgb,var(--text) 80%,transparent)}
.oh .oh-lk .sq{width:9px;height:9px;border-radius:3px;flex:none}
.oh .oh-lk .n{margin-inline-start:auto;font-weight:800;color:var(--text)}

/* المدن */
.oh .oh-cities{max-height:440px}
.oh .oh-cities td,.oh .oh-cities th{white-space:nowrap}
.oh .oh-cities td:not(:first-child),.oh .oh-cities th:not(:first-child){text-align:center}
.oh .oh-cities tbody tr{animation:ops-up .45s var(--ease) both;animation-delay:calc(var(--i) * 35ms + 250ms)}
.oh .oh-city{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.oh .oh-city .id-chip{font-size:11px;padding:1px 8px}
.oh .oh-cities td.z{color:var(--crit);font-weight:800}
.oh .oh-cpl{display:inline-flex;align-items:center;gap:8px}
.oh .oh-cpl .mb{width:46px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.oh .oh-cpl .mb i{display:block;height:100%;width:var(--w);background:currentColor;border-radius:4px}

/* الطلب مقابل الإنجاز */
.oh .oh-series{margin-top:16px}
.oh .oh-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:color-mix(in srgb,var(--text) 80%,transparent);margin-top:12px}
.oh .oh-legend span{display:inline-flex;align-items:center;gap:7px}
.oh .oh-legend i{width:14px;height:3px;border-radius:2px}
.oh .oh-legend i.dry{width:9px;height:9px;border-radius:3px;background:var(--crit)}
.oh .oh-chart{position:relative;margin-top:8px;height:270px}
.oh .oh-chart svg{width:100%;height:100%;overflow:visible;direction:ltr;display:block}
.oh .oh-chart .ax{fill:var(--faint);font:500 11px var(--fbody)}
.oh .oh-chart .ax.dry{fill:var(--crit);font-weight:700}
.oh .oh-chart .gl{stroke:var(--border-soft);stroke-width:1}
.oh .oh-chart .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.oh .oh-chart .dl{font:800 12px var(--fbody);fill:color-mix(in srgb,var(--text) 80%,transparent)}
.oh .oh-chart .drym{fill:var(--crit)}
.oh .oh-chart svg.anim .ln{stroke-dasharray:1;animation:id-draw 1.5s var(--ease) both}
.oh .oh-chart svg.anim .ln2{animation-delay:.25s}
.oh .oh-chart svg.anim .ar{animation:ops-fade .9s var(--ease) .5s both}
.oh .oh-chart svg.anim .dl{animation:ops-fade .5s var(--ease) 1.4s both}
.oh .oh-chart .xh{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3}
.oh .oh-chart .hp{stroke:var(--surface);stroke-width:2}
.oh .oh-tipc{position:absolute;top:0;pointer-events:none;min-width:150px;padding:10px 12px;border-radius:12px;background:var(--surface-3,var(--surface-2));border:1px solid var(--border);
  box-shadow:var(--shadow-lg);font-size:12.5px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .2s var(--ease);z-index:3}
.oh .oh-tipc.on{opacity:1;transform:none}
.oh .oh-tipc .t{font-weight:800;color:var(--text);margin-bottom:6px}
.oh .oh-tipc .r{display:flex;align-items:center;gap:8px;color:color-mix(in srgb,var(--text) 80%,transparent)}
.oh .oh-tipc .r i{width:8px;height:8px;border-radius:3px}
.oh .oh-tipc .r b{margin-inline-start:auto;color:var(--text)}
.oh .oh-tipc .x{margin-top:6px;padding-top:6px;border-top:1px solid var(--border-soft);color:var(--muted)}
.oh .oh-tipc .x b{color:var(--text)}
.oh .oh-tblv{max-height:270px;margin-top:8px}

/* الحصيلة والنشاط */
.oh .oh-life{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.oh .oh-life .id-stat{padding:14px;border-radius:var(--r);background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--border-soft);min-width:0}
.oh .oh-life .v{font-family:var(--fdisplay);font-size:24px;white-space:nowrap}
.oh .oh-life .v small{font-size:12px;color:var(--muted);font-weight:700}
.oh .oh-feed{display:flex;flex-direction:column;gap:2px;min-height:200px}
.oh .oh-fi{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;transition:background var(--t-fast)}
.oh .oh-fi:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.oh .oh-fi .fd{position:relative;width:9px;height:9px;border-radius:50%;background:var(--fc);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 15%,transparent)}
.oh .oh-fi .ft{flex:1;min-width:0;color:color-mix(in srgb,var(--text) 80%,transparent)}
.oh .oh-fi .ft b{color:var(--text)}
.oh .oh-fi .tm{color:var(--faint);font-size:12px;white-space:nowrap}
.oh .oh-fi.new{animation:ops-in .55s var(--spring)}
.oh .oh-fi.new .fd::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--fc);animation:ops-ping 1.6s var(--ease) 2}

/* التحديث الهادئ كل 15 ثانية: لا حركة دخول (النبضات الحيّة و«جديد» تبقى) */
.content.no-anim .oh-ratio-bar i,.content.no-anim .oh-waffle i,.content.no-anim .oh-deadlist .id-chip,
.content.no-anim .oh-meter i,.content.no-anim .oh-frow .ff,.content.no-anim .oh-leak-bar i,
.content.no-anim .oh-cities tbody tr{animation:none}

@media (max-width:1240px){.oh .oh-two,.oh .oh-two.eq{grid-template-columns:1fr}}
@media (max-width:1100px){.oh .oh-blocks.has-hero,.oh .oh-blocks.n2{grid-template-columns:1fr}}
@media (max-width:640px){
  .ops-head h1{font-size:22px}
  .oh .oh-hero{padding:20px 18px}
  .oh .oh-hero-grid{grid-template-columns:1fr}
  .oh .oh-waffle-box{justify-self:start}
  .oh .oh-hnum{font-size:58px}
  .oh .oh-life{grid-template-columns:1fr}
  .oh .oh-leak-lg{grid-template-columns:1fr}
  .oh .oh-frow,.oh .oh-fdrop{grid-template-columns:78px minmax(0,1fr) 44px;gap:8px}
  .oh .oh-chart{height:230px}
  .oh .oh-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .oh .oh-kpi{padding:14px 14px 12px}
  .oh .oh-kpi .v{font-size:26px;margin-top:4px}
  .oh .oh-kic,.oh .oh-kpi .oh-livechip{display:none}
}

@media (prefers-reduced-motion:reduce){
  .oh *,.oh *::before,.oh *::after{animation:none!important}
}

/* ============================================================
   الوضع الحي للرحلات (.ol)
   ============================================================ */
.ol{padding-bottom:8px}
.ol .ol-clock{font-weight:800;color:color-mix(in srgb,var(--text) 80%,transparent);font-size:13px;padding:0 12px;height:38px;display:inline-flex;align-items:center;gap:8px;
  border-radius:11px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--border)}
.ol .ol-clock svg{width:15px;height:15px;color:var(--muted)}

/* طلب بالهاتف — لوحة تنزلق مفتوحة */
.ol .ol-md{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease),margin var(--t-slow) var(--ease)}
.ol .ol-md>div{min-height:0;overflow:hidden}
.ol .ol-md.on{grid-template-rows:1fr;margin-bottom:14px}
.ol .ol-md .id-card{border-color:color-mix(in srgb,var(--brand-2) 30%,var(--border))}
.ol .ol-md-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ol .ol-md-h h3{margin:0 0 2px}
.ol .ol-md-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ol .ol-md-grid label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);font-weight:700}
.ol .ol-md-grid .ops-inp{width:100%}
.ol .ol-md-pts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.ol .ol-md-pts .ops-btn{max-width:100%}
.ol .ol-md-pts .ops-btn b{color:var(--text);font-weight:800}
.ol .ol-md-pts .ops-btn i{width:9px;height:9px;border-radius:50%;background:var(--good);flex:none}
.ol .ol-md-pts .ops-btn i.b{border-radius:2px;background:var(--crit)}
.ol .ol-md-pts .ops-btn.picking{border-color:var(--brand-2);box-shadow:var(--ring);animation:ol-breath 1.4s var(--ease) infinite}
@keyframes ol-breath{50%{box-shadow:0 0 0 6px rgba(169,127,214,.14)}}
.ol .ol-note{color:var(--muted);font-size:12.5px}
.ol .ol-md-lock{display:flex;align-items:center;gap:10px;margin-top:14px;color:color-mix(in srgb,var(--text) 80%,transparent);font-size:13px;cursor:pointer;line-height:1.6}
.ol .ol-md-lock input{width:16px;height:16px;flex:none;accent-color:var(--brand-2)}
.ol .ol-md-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ol .md-msg{font-size:13px;font-weight:700;color:var(--muted);line-height:1.6}
.ol .md-msg.good{color:var(--good)}
.ol .md-msg.bad{color:var(--crit)}

/* شريط المدينة والعدّادات */
.ol .ol-bar{position:relative;z-index:8;display:flex;align-items:stretch;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ol .live-cities{flex:none;display:flex}
.ol .lc-select{position:relative;display:flex}
.ol .lc-trigger{height:100%;min-height:58px;min-width:210px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--text);font:700 14px var(--fbody);
  transition:border-color var(--t),box-shadow var(--t)}
.ol .lc-trigger:hover{border-color:color-mix(in srgb,var(--c-live) 40%,var(--border))}
.ol .lc-trigger:focus-visible{outline:none;box-shadow:var(--ring)}
.ol .lc-trigger .ic{width:17px;height:17px;flex:none;color:var(--c-live)}
.ol .lc-trigger .lb{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;flex:1;min-width:0}
.ol .lc-trigger .lb small{font-size:11.5px;color:var(--muted);font-weight:500}
.ol .lc-trigger .lb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol .lc-chev{width:16px;height:16px;flex:none;color:var(--muted);transition:transform var(--t) var(--ease)}
.ol .lc-select.open .lc-trigger{border-color:color-mix(in srgb,var(--c-live) 50%,var(--border))}
.ol .lc-select.open .lc-chev{transform:rotate(180deg)}
.ol .lc-clear{position:absolute;top:-7px;left:-7px;z-index:2;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--border);
  background:var(--surface-3,var(--surface-2));color:var(--text);display:grid;place-items:center;cursor:pointer}
.ol .lc-clear svg{width:11px;height:11px}
.ol .lc-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:300px;max-width:calc(100vw - 32px);padding:10px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity var(--t-fast) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)}
.ol .lc-select.open .lc-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.ol .lc-panel-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface)}
.ol .lc-panel-search .ic{width:15px;height:15px;flex:none;color:var(--faint)}
.ol .lc-panel-search input{border:0;background:none;outline:none;font:500 13px var(--fbody);color:var(--text);flex:1;min-width:0}
.ol .lc-panel-search input::placeholder{color:var(--faint)}
.ol .lc-panel-list{max-height:320px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.ol .lc-sec{font-size:11.5px;font-weight:700;color:var(--faint);padding:8px 10px 4px}
.ol .lc-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:10px;background:transparent;
  color:color-mix(in srgb,var(--text) 80%,transparent);cursor:pointer;text-align:start;font:500 13px var(--fbody)}
.ol .lc-item:hover,.ol .lc-item:focus-visible{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);outline:none}
.ol .lc-item.active{color:var(--text);font-weight:700;background:color-mix(in srgb,var(--c-live) 13%,transparent)}
.ol .lc-item .ic{width:14px;height:14px;flex:none;color:var(--faint)}
.ol .lc-item.active .ic{color:var(--c-live)}
.ol .lc-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol .lc-item .n{flex:none;min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:var(--good-bg);color:var(--good);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.ol .lc-empty{padding:18px 10px;text-align:center;color:var(--muted);font-size:13px}

.ol .ol-ctrs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ol .ol-ctr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;min-width:0;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow)}
.ol .ol-ctr .ci{position:relative;width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;color:var(--kc);
  background:color-mix(in srgb,var(--kc) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 24%,transparent)}
.ol .ol-ctr .ci svg{width:18px;height:18px}
.ol .ol-ctr .ci.pulse::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:2px solid var(--kc);opacity:0;animation:ol-ring 2.4s var(--ease) infinite}
@keyframes ol-ring{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
.ol .ol-ctr .cv{font-family:var(--fdisplay);font-size:23px;font-weight:800;line-height:1.1;color:var(--text);display:inline-block}
.ol .ol-ctr .cv.bump{animation:ol-bump .55s var(--spring)}
@keyframes ol-bump{0%{transform:translateY(6px);opacity:.2}100%{transform:none;opacity:1}}
.ol .ol-ctr .ck{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol .ol-ctr>div{min-width:0}

/* الإطار: القائمة + الخريطة */
.ol .ol-wrap{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;height:max(600px,calc(100vh - 262px))}
.ol .ol-side{display:flex;flex-direction:column;min-height:0;padding:14px;gap:10px}
.ol .ol-q{position:relative}
.ol .ol-q>svg{position:absolute;top:11px;right:12px;width:16px;height:16px;color:var(--faint);pointer-events:none}
.ol .ol-q .ops-inp{width:100%;padding-inline-start:36px;padding-inline-end:34px}
.ol .ol-q .ops-inp::-webkit-search-cancel-button{display:none}
.ol .ol-q .x{position:absolute;top:7px;left:7px;width:24px;height:24px;border-radius:7px;border:0;background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0}
.ol .ol-q .x[hidden]{display:none}
.ol .ol-q .x svg{width:12px;height:12px}
.ol .ol-filters{display:flex;flex-wrap:wrap;gap:6px}
.ol .ol-lf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 4%,transparent);color:color-mix(in srgb,var(--text) 78%,transparent);font:700 12.5px var(--fbody);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast) var(--ease)}
.ol .ol-lf:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.ol .ol-lf:active{transform:scale(.96)}
.ol .ol-lf .d{width:7px;height:7px;border-radius:50%;background:var(--fc)}
.ol .ol-lf .n{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:rgba(0,0,0,.22);font-size:11px;display:grid;place-items:center;color:inherit}
.ol .ol-lf.on{background:color-mix(in srgb,var(--fc) 16%,transparent);border-color:color-mix(in srgb,var(--fc) 45%,transparent);color:var(--text)}
.ol .ol-lf.on .n{background:var(--fc);color:var(--bg)}
.ol .ol-lhint{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:0 2px}
.ol .ol-lhint b{color:var(--text)}
.ol .ol-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:2px;margin:0 -2px;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--text) 16%,transparent) transparent}
.ol .ol-skc{flex:none;display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:14px;border:1px solid var(--border-soft)}
.ol .ol-skc .id-skel{display:block}
.ol .ol-lt{position:relative;flex:none;padding:12px 14px 12px 12px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid var(--border-soft);cursor:pointer;text-align:start;color:inherit;
  transition:background var(--t-fast),border-color var(--t),transform var(--t-fast) var(--ease)}
.ol .ol-lt::before{content:"";position:absolute;right:-1px;top:14px;bottom:14px;width:3px;border-radius:3px 0 0 3px;background:var(--sc)}
.ol .ol-lt:hover{background:color-mix(in srgb,var(--text) 7%,transparent);border-color:var(--border)}
.ol .ol-lt:focus-visible{outline:none;box-shadow:var(--ring)}
.ol .ol-lt.sel{background:color-mix(in srgb,var(--sc) 11%,var(--surface-2));border-color:color-mix(in srgb,var(--sc) 45%,transparent)}
.ol .ol-lt.flash{animation:ol-flash 1.4s var(--ease)}
.ol .ol-lt.new{animation:ol-new .6s var(--spring)}
@keyframes ol-flash{0%,30%{box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 60%,transparent),0 0 24px -4px var(--sc)}100%{box-shadow:none}}
@keyframes ol-new{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.ol .lt-top{display:flex;align-items:center;gap:6px}
.ol .lt-ref{font-weight:800;color:var(--text);margin-inline-end:auto;font-size:13.5px}
.ol .lt-top .tag{font-size:10.5px}
.ol .lt-who{color:color-mix(in srgb,var(--text) 78%,transparent);font-size:12.5px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol .lt-addr{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden}
.ol .lt-addr span:last-child{overflow:hidden;text-overflow:ellipsis}
.ol .lt-addr .p{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.ol .lt-addr .p.b{border-radius:2px;background:var(--crit)}
.ol .bs-lt-stage{margin-top:8px}
.ol .lt-cd{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;font-weight:700;color:var(--good)}
.ol .lt-cd .bar{flex:1;height:4px;border-radius:4px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.ol .lt-cd .bar i{display:block;height:100%;border-radius:4px;background:currentColor;transform-origin:right;transform:scaleX(0);transition:transform 1s linear}
.ol .lt-cd svg{width:13px;height:13px;flex:none}
.ol .lt-cd.srch{color:var(--c-care)}
.ol .eta-urgent .lt-cd{color:var(--warn)}
.ol .eta-over .lt-cd{color:var(--crit)}

/* الخريطة */
.ol .ol-map{scroll-margin-top:72px;position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg);box-shadow:var(--shadow);min-width:0}
.ol #liveMap{position:absolute;inset:0}
.ol .ol-map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 90% at 50% 50%,transparent 60%,color-mix(in srgb,var(--bg) 70%,transparent) 100%)}
.ol .ol-hud{position:absolute;z-index:4;display:flex;gap:8px;align-items:center}
.ol .ol-hud.tr{top:12px;right:12px;flex-wrap:wrap}
.ol .ol-hud.br{bottom:12px;right:12px}
.ol .ol-hud.bl{bottom:12px;left:12px;flex-wrap:wrap;max-width:calc(100% - 230px)}
.ol .ol-hud.zr{top:56px;right:12px;flex-direction:column;gap:6px}
.ol .ol-glass{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:10px;font:700 12.5px var(--fbody);color:color-mix(in srgb,var(--text) 80%,transparent);
  background:color-mix(in srgb,var(--surface-2) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);box-shadow:0 6px 18px -10px rgba(0,0,0,.6)}
.ol .ol-glass.live{color:var(--good)}
.ol .ol-glass .id-live{width:7px;height:7px;--c:var(--good)}
.ol .ol-zb{width:34px;height:34px;padding:0;justify-content:center;cursor:pointer;transition:background var(--t),color var(--t)}
.ol .ol-zb svg{width:16px;height:16px}
.ol .ol-zb:hover{color:var(--text);background:var(--surface-3,var(--surface-2))}
.ol .ol-zb:focus-visible{outline:none;box-shadow:var(--ring)}
.ol .ol-legend{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;font-size:12px;color:color-mix(in srgb,var(--text) 80%,transparent);
  background:color-mix(in srgb,var(--surface-2) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border)}
.ol .ol-legend span{display:flex;align-items:center;gap:8px}
.ol .ol-legend i{width:9px;height:9px;border-radius:50%;background:var(--lc);box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 22%,transparent)}
.ol .ol-legend i.car{width:7px;height:12px;border-radius:3px}
.ol .ol-cchip{cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.ol .ol-cchip:hover{color:var(--text);border-color:color-mix(in srgb,var(--good) 50%,transparent);background:color-mix(in srgb,var(--good) 14%,var(--surface-2))}
.ol .ol-cchip .n{font-size:11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--good-bg);color:var(--good);display:grid;place-items:center}
.ol .ol-mempty{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;pointer-events:none}
.ol .ol-mempty.on{display:flex}
.ol .ol-mempty div{padding:14px 18px;border-radius:14px;text-align:center;color:color-mix(in srgb,var(--text) 80%,transparent);background:color-mix(in srgb,var(--surface-2) 84%,transparent);
  border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px}
.ol .ol-mempty b{display:block;color:var(--text);margin-bottom:2px}
.ol .ol-pickhint{position:absolute;z-index:5;top:12px;left:50%;transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t) var(--spring)}
.ol .ol-map.picking .ol-pickhint{opacity:1;transform:translate(-50%,0)}
.ol .ol-map.picking .ol-pickhint .ol-glass{color:var(--text);border-color:color-mix(in srgb,var(--brand-2) 55%,transparent);box-shadow:var(--ring)}

/* لوحة تفاصيل الرحلة — زجاج فوق الخريطة */
.ol .ol-detail{position:absolute;top:12px;bottom:12px;left:12px;z-index:6;width:370px;max-width:calc(100% - 24px);display:flex;flex-direction:column;border-radius:18px;
  background:color-mix(in srgb,var(--surface-2) 93%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateX(-24px) scale(.985);pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t-slow) var(--ease)}
.ol .ol-detail.show{opacity:1;transform:none;pointer-events:auto}
.ol .ol-detail .ld-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border-soft);background:none;color:var(--text)}
.ol .ol-detail .ld-head b{font-size:16px;font-weight:800;margin-inline-end:auto}
.ol .ld-x{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid var(--border);background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:background var(--t)}
.ol .ld-x:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.ol .ld-x svg{width:14px;height:14px}
.ol .ol-detail .ld-body{flex:1;min-height:0;overflow:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px;font-size:13px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 16%,transparent) transparent}
.ol .ol-detail .ld-body>*{flex:none;animation:id-rise var(--t-slow) var(--ease) both}
.ol .ol-detail .ld-body>*:nth-child(2){animation-delay:40ms}.ol .ol-detail .ld-body>*:nth-child(3){animation-delay:80ms}
.ol .ol-detail .ld-body>*:nth-child(4){animation-delay:120ms}.ol .ol-detail .ld-body>*:nth-child(5){animation-delay:160ms}
.ol .ol-detail .ld-body>*:nth-child(n+6){animation-delay:200ms}
.ol .ol-detail .id-skel{display:block}
.ol .ld-p{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--border-soft)}
.ol .ld-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--bg);background:var(--avc);
  box-shadow:0 6px 16px -8px var(--avc)}
.ol .ld-av.empty{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--faint);box-shadow:none}
.ol .ld-av.empty svg{width:20px;height:20px}
.ol .ld-p .ld-pi{flex:1;min-width:0}
.ol .ld-p .nm{font-weight:800;color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol .ld-p .sub{font-size:12.5px;color:var(--muted);text-align:start}
.ol .ld-p .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ol .ld-p .chips .id-chip{font-size:11px;padding:1px 8px;font-weight:600}
.ol .ld-p .ld-role{position:static;font-size:11px;font-weight:700;color:var(--faint);align-self:flex-start}
.ol .ld-search{color:var(--muted)!important;font-weight:700}
.ol .ld-search:not(.done)::after{content:"";display:inline-block;width:12px;height:12px;margin-inline-start:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--faint);border-top-color:var(--warn);animation:ol-spin .9s linear infinite}
@keyframes ol-spin{to{transform:rotate(360deg)}}
.ol .ld-veh{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--border-soft)}
.ol .ld-plate{display:inline-block;padding:6px 10px;border-radius:8px;border:1.5px solid var(--muted);background:var(--text);color:var(--bg);font-weight:800;font-size:13px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.ol .ld-veh .vi{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted);min-width:0}
.ol .ld-veh .vi b{color:var(--text);font-size:13.5px}
.ol .ld-veh .sw{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--border);vertical-align:-1px;margin-inline-end:5px}
.ol .ol-detail .ld-sec{padding:12px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--border-soft)}
.ol .ol-detail .ld-sec .t{font-size:12px;font-weight:700;color:var(--faint);margin-bottom:8px;letter-spacing:0;text-transform:none}
.ol .ol-detail .ld-ab{position:relative;display:flex;flex-direction:column;gap:10px;padding-inline-start:20px}
.ol .ol-detail .ld-ab::before{content:"";position:absolute;right:4px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--good),var(--crit));opacity:.5;border-radius:2px}
.ol .ol-detail .ld-ab .r{position:relative;color:color-mix(in srgb,var(--text) 82%,transparent);font-size:13px;line-height:1.5}
.ol .ol-detail .ld-ab .r::before{content:"";position:absolute;right:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--surface-2)}
.ol .ol-detail .ld-ab .r.b::before{background:var(--crit);border-radius:3px}
.ol .ld-est{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ol .ld-est div{padding:8px 4px;border-radius:10px;background:rgba(0,0,0,.16);text-align:center;font-size:11.5px;color:var(--muted)}
.ol .ld-est b{display:block;font-size:15px;color:var(--text);font-weight:800}
.ol .ol-detail .ld-pay{margin-top:10px;font-size:12.5px;color:var(--muted)}
.ol .ol-detail .ld-pay b{color:var(--text)}
.ol .ld-dur{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ol .ld-dur div{padding:9px 6px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--border-soft);font-size:11px;color:var(--muted);text-align:center}
.ol .ld-dur b{display:block;font-size:13.5px;color:var(--text);font-weight:800}
.ol .ld-cdn{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;font-weight:800;color:var(--good);background:var(--good-bg)}
.ol .ld-cdn.eta-urgent{color:var(--warn);background:var(--warn-bg)}
.ol .ld-cdn.eta-over{color:var(--crit);background:var(--crit-bg)}
.ol .ld-cdn svg{width:18px;height:18px;flex:none}
.ol .ld-cdn .bar{flex:1;height:5px;border-radius:5px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden;min-width:40px}
.ol .ld-cdn .bar i{display:block;height:100%;background:currentColor;border-radius:5px;transform-origin:right;transform:scaleX(0);transition:transform 1s linear}
.ol .ld-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ol .ld-tl li{position:relative;display:flex;gap:12px;padding:0 0 12px}
.ol .ld-tl li:last-child{padding-bottom:0}
.ol .ld-tl li::before{content:"";position:absolute;right:13px;top:30px;bottom:2px;width:2px;background:var(--border)}
.ol .ld-tl li:last-child::before{display:none}
.ol .ld-tl .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
.ol .ld-tl .ic svg{width:14px;height:14px}
.ol .ld-tl b{display:block;color:var(--text);font-size:13px}
.ol .ld-tl small{color:var(--muted);font-size:12px}

/* علامات الخريطة الحيّة (داخل لوحات Google، لا داخل .ol) */
.map-pin{--pc:var(--warn);width:16px;height:16px;border-radius:50%;background:var(--pc);border:2.5px solid var(--surface);cursor:pointer;position:relative;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 24%,transparent),0 2px 8px rgba(0,0,0,.45);transition:transform var(--t-fast) var(--spring)}
.map-pin:hover{transform:scale(1.18)}
.map-pin.s-unassigned{--pc:var(--c-care)}
.map-pin.s-ongoing{--pc:#a066dd}
.map-pin.s-cancelled{--pc:var(--crit)}
.map-pin.s-completed{--pc:var(--info,#60a5fa)}
/* تبحث عن كابتنة: تموّج حولها — الطلب حيّ ينتظر */
.map-pin.s-unassigned::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pc);animation:ops-ping 2.2s var(--ease) infinite}
/* سيارة من الأعلى — نفس هيكل تطبيق العميل حرفياً (car_art.dart)، والمؤقّت
   المشترك في live.js:_startMotion ينزلق بها نحو كل نبضة GPS حقيقية؛ أكبر من
   مقاس التطبيق عمداً (خريطة عامّة بعشرات السيارات) بنفس النسبة 0.56. */
.map-car{width:28px;height:50px;cursor:pointer;transition:transform .08s linear;filter:drop-shadow(0 0 10px rgba(160,102,221,.55))}
.map-car-rot{width:100%;height:100%;transition:transform .12s linear;transform-origin:50% 50%}
.map-car-rot svg{display:block;width:100%;height:100%}
/* دبوس العميلة وهي تنتظر الكابتنة — نبضة بلون الهوية */
.map-wait{position:relative;width:38px;height:38px;display:grid;place-items:center;cursor:pointer}
.map-wait .ring{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(169,127,214,.38);animation:ol-wait 1.8s ease-out infinite}
.map-wait .dot{position:relative;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#a97fd6,#7c4dbd);
  border:2.5px solid var(--surface);box-shadow:0 2px 10px rgba(60,20,90,.6);display:grid;place-items:center}
.map-wait .dot svg{width:13px;height:13px}
@keyframes ol-wait{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.4);opacity:0}}
/* نقطة بداية الرحلة (بعد ركوب العميلة) */
.map-start{width:16px;height:16px;border-radius:50%;background:var(--good);border:3px solid var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent),0 2px 7px rgba(0,0,0,.5)}
/* دبوس الوجهة */
.map-dest{width:26px;height:26px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);background:var(--crit);
  border:2.5px solid var(--surface);display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.map-dest b{transform:rotate(-45deg);color:#fff;font-size:10px;line-height:1}

@media (max-width:1240px){.ol .ol-ctrs{grid-template-columns:repeat(2,minmax(0,1fr))}.ol .ol-md-grid{grid-template-columns:1fr 1fr}}
@media (max-width:1100px){
  .ol .ol-wrap{grid-template-columns:1fr;height:auto}
  .ol .ol-map{order:-1;height:520px}
  .ol .ol-side{max-height:640px}
  .ol .ol-hud.bl{max-width:calc(100% - 24px);bottom:auto;top:56px;left:12px}
}
@media (max-width:640px){
  .ol .ol-bar{flex-direction:column}
  .ol .live-cities,.ol .lc-select,.ol .lc-trigger{width:100%}
  .ol .ol-ctrs{grid-template-columns:1fr 1fr;gap:8px}
  .ol .ol-ctr{padding:10px;gap:10px}
  .ol .ol-ctr .cv{font-size:20px}
  .ol .ol-md-grid{grid-template-columns:1fr}
  .ol .ol-map{height:460px}
  .ol .ol-hud.br,.ol .ol-hud.bl{display:none}
  .ol .ol-detail{width:auto;right:12px}
  .ol .ops-head-r{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ol *,.ol *::before,.ol *::after,.map-pin::after,.map-wait .ring{animation:none!important}
}

/* ============================================================
   مكوّنات مؤشّرات ورسوم مشتركة (الرحلات/الحرارية/التنبيهات)
   ============================================================ */
.ops-kpis{margin-bottom:16px}
.id-card.ops-kpi{padding:16px 18px 15px;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
.id-card.ops-kpi::after{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:3px 0 0 3px;background:var(--kc);opacity:.85}
.id-card.ops-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--kc) 32%,var(--border));box-shadow:var(--shadow-lg)}
.ops-kpi .ops-krow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ops-kpi .k{color:var(--muted);font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ops-kpi .v{margin-top:6px;font-family:var(--fdisplay);font-size:28px;font-weight:800;line-height:1.15;color:var(--text);align-self:flex-start;direction:ltr;unicode-bidi:isolate}
.ops-kpi .d{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ops-kpi .d b{color:var(--text)}
.ops-kpi .d .id-live{width:7px;height:7px}
.ops-kic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;color:var(--kc);
  background:color-mix(in srgb,var(--kc) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 24%,transparent)}
.ops-kic:empty{display:none}
.ops-kic svg{width:18px;height:18px}
.ops-kpi.good .v{color:var(--good)}
.ops-kpi.warn{border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
.ops-kpi.warn .v{color:var(--warn)}
.ops-kpi.crit{border-color:color-mix(in srgb,var(--crit) 32%,var(--border))}
.ops-kpi.crit .v{color:var(--crit)}

.ops-skel-tbl{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:var(--r-lg);border:1px solid var(--border-soft);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.ops-skel-tbl .r{display:flex;align-items:center;gap:18px;height:46px;padding:0 12px;border-radius:10px}
.ops-skel-tbl .id-skel{display:block}

.ops-chart{position:relative;height:250px}
.ops-chart svg{width:100%;height:100%;overflow:visible;direction:ltr;display:block}
.ops-chart .ax{fill:var(--faint);font:500 11px var(--fbody)}
.ops-chart .gl{stroke:var(--border-soft);stroke-width:1}
.ops-chart .ln{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ops-chart .pt{stroke:var(--surface);stroke-width:2}
.ops-chart .xh{stroke:var(--border);stroke-dasharray:3 3}
.ops-chart .hp{stroke:var(--surface);stroke-width:2}
.ops-chart svg.anim .ln{stroke-dasharray:1;animation:id-draw 1.4s var(--ease) both}
.ops-chart svg.anim .ar,.ops-chart svg.anim .pt{animation:ops-fade .8s var(--ease) .5s both}

.ops-hbars{display:flex;flex-direction:column;gap:10px}
.ops-hbars .hb{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) auto;align-items:center;gap:12px;font-size:13px;animation:ops-up .4s var(--ease) both;animation-delay:calc(var(--i) * 50ms)}
.ops-hbars .hl{color:color-mix(in srgb,var(--text) 82%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-hbars .ht{height:10px;border-radius:99px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.ops-hbars .ht i{display:block;height:100%;width:var(--w);border-radius:99px;transform-origin:right;
  background:linear-gradient(to left,var(--hc),color-mix(in srgb,var(--hc) 50%,transparent));box-shadow:0 0 12px -3px var(--hc);
  animation:ops-grow-x .9s var(--ease) both;animation-delay:calc(var(--i) * 60ms + 120ms)}
.ops-hbars .hv{font-weight:800;color:var(--text);min-width:40px;text-align:end}
.content.no-anim .ops-hbars .hb,.content.no-anim .ops-hbars .ht i{animation:none}

/* ============================================================
   الرحلات (.otr)
   ============================================================ */
.otr .ops-head .id-tabs{align-self:flex-end}
.otr .otr-filters{padding:14px 16px;margin-bottom:14px;position:relative;z-index:2}
.otr .otr-frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.otr .otr-seg{display:flex;flex-wrap:wrap;gap:6px}
.otr .otr-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--text) 4%,transparent);color:color-mix(in srgb,var(--text) 78%,transparent);font:700 12.5px var(--fbody);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast) var(--ease)}
.otr .otr-chip:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.otr .otr-chip:active{transform:scale(.96)}
.otr .otr-chip .d{width:7px;height:7px;border-radius:50%;background:var(--fc)}
.otr .otr-chip.on{background:color-mix(in srgb,var(--fc) 16%,transparent);border-color:color-mix(in srgb,var(--fc) 46%,transparent);color:var(--text)}
.otr .otr-count{margin-inline-start:auto;color:var(--muted);font-size:12.5px}
.otr .otr-count b{color:var(--text);font-size:14px}
.otr .otr-fgrid{display:flex;flex-wrap:wrap;gap:12px 10px;margin-top:14px;align-items:center}
.otr .otr-fgrid>*{flex:1 1 160px;min-width:0}
.otr .otr-fgrid>.otr-q{flex:3 1 300px}
.otr .otr-fgrid>.otr-fare{flex:1.4 1 220px}
.otr .otr-fgrid>.otr-fraud{flex:0 0 auto}
.otr .otr-q{position:relative;display:block}
.otr .otr-q svg{position:absolute;top:11px;right:12px;width:16px;height:16px;color:var(--faint);pointer-events:none}
.otr .otr-q .ops-inp{width:100%;padding-inline-start:36px}
.otr .otr-fgrid>select,.otr .otr-fgrid .ops-inp{width:100%}
.otr .otr-lbl{position:relative;display:block}
.otr .otr-lbl span{position:absolute;top:-8px;right:10px;padding:0 5px;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:4px;line-height:16px;z-index:1}
.otr .otr-lbl input{color-scheme:dark}
:root[data-sidebar-style="classic"]:not([data-theme="dark"]) .otr .otr-lbl input{color-scheme:light}
.otr .otr-fare{display:flex;align-items:center;gap:6px}
.otr .otr-fare span{color:var(--faint)}
.otr .otr-fare .ops-inp{flex:1;min-width:0}
.otr .otr-fraud{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--border);white-space:nowrap;
  background:color-mix(in srgb,var(--text) 4%,transparent);color:color-mix(in srgb,var(--text) 80%,transparent);font:700 12.5px var(--fbody);cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.otr .otr-fraud svg{width:15px;height:15px}
.otr .otr-fraud:hover{border-color:var(--crit-line)}
.otr .otr-fraud.on{background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit)}

.otr .otr-tblcard{padding:0;overflow:hidden}
.otr .otr-tbl{border:0;border-radius:0;background:transparent;transition:opacity var(--t)}
.otr .otr-tbl.loading{opacity:.45;pointer-events:none}
.otr .ops-tbl th,.otr .ops-tbl td{white-space:nowrap}
.otr .ops-tbl td.num{text-align:start}
.otr .ops-tbl tbody tr.clickable{cursor:pointer;position:relative}
.otr .ops-tbl tbody tr.clickable td:first-child{box-shadow:inset -3px 0 0 color-mix(in srgb,var(--sc,transparent) 70%,transparent)}
.otr .ops-tbl tbody tr.clickable:hover td:first-child{box-shadow:inset -3px 0 0 var(--sc,var(--brand-2))}
.otr .ops-tbl tbody tr:focus-visible{outline:none;background:color-mix(in srgb,var(--brand-2) 10%,transparent)}
.otr .otr-tbl tbody tr{animation:ops-up .35s var(--ease) both;animation-delay:calc(var(--i) * 18ms)}
.content.no-anim .otr .otr-tbl tbody tr{animation:none}
.otr .otr-ref{display:inline-flex;align-items:center;gap:8px}
.otr .otr-ref b{font-weight:800;letter-spacing:.01em}
.otr .id-chip svg{width:12px;height:12px}
.otr .otr-tier{display:inline-block;padding:2px 9px;border-radius:7px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--text) 6%,transparent);color:color-mix(in srgb,var(--text) 82%,transparent)}
.otr .otr-est{color:var(--faint);font-size:11px;font-weight:600}
.otr .otr-when{color:var(--muted);font-size:12.5px}
.otr .otr-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px;border-top:1px solid var(--border-soft);margin:0;background:none}
.otr .otr-pager .otr-pinfo{color:var(--muted);font-size:12.5px}
.otr .otr-pager .otr-pinfo b{color:var(--text)}

.otr .otr-sec{margin-bottom:16px;min-width:0}
.otr .otr-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.otr .otr-sec-h h3{margin:0}
.otr .otr-sec .ops-tbl{max-height:460px}
.otr .otr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.otr .otr-two.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.otr .otr-two>.otr-sec{margin-bottom:0}
.otr .otr-clean svg{color:var(--good)}
.otr .otr-speed{color:var(--crit);font-weight:800}
.otr .otr-rk{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.otr .otr-rk>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.otr-ring{width:58px;height:58px;flex:none;transform:rotate(-90deg)}
.otr-ring circle{fill:none;stroke-width:6}
.otr-ring .bg{stroke:color-mix(in srgb,var(--text) 8%,transparent)}
.otr-ring .fg{stroke-linecap:round;stroke-dashoffset:var(--off);animation:otr-ring 1.2s var(--ease) both;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--kc) 50%,transparent))}
@keyframes otr-ring{from{stroke-dashoffset:var(--L)}}
.content.no-anim .otr-ring .fg{animation:none}

/* درج تفاصيل الرحلة (يُفتح من هنا ومن غيرها) — ما كان ثابتاً فاتحاً صار رموزاً */
.av-rate{background:var(--surface-2);color:var(--warn);box-shadow:0 2px 6px rgba(0,0,0,.3)}
/* «70 / 100» كانت تنقلب «100 / 70» في سياق عربي — الرقم بترتيب لاتيني */
.drawer .trust-score-num{direction:ltr;unicode-bidi:isolate;text-align:right}

@media (max-width:1240px){
  .otr .otr-two,.otr .otr-two.wide{grid-template-columns:1fr}
}
@media (max-width:640px){
  .otr .ops-head .id-tabs{width:100%}
  .otr .ops-head .id-tab{flex:1}
  .otr .otr-fgrid>*{flex-basis:calc(50% - 5px)}
  .otr .otr-fgrid>.otr-q,.otr .otr-fgrid>.otr-fare,.otr .otr-fgrid>.otr-fraud{flex-basis:100%}
  .otr .otr-count{margin-inline-start:0}
  .otr .ops-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .otr .ops-kpi .v{font-size:22px}
  .otr .ops-kic{display:none}
  .otr .otr-pager{gap:8px;flex-wrap:wrap}
  .otr .otr-ring{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .otr *,.ops-hbars *,.ops-chart *{animation:none!important}
}