/* ============================================================
   MASAR SCADA — live.css
   The live map's chrome, and nothing else.

   Four round buttons, six popups, one round card, two map controls.
   Every popup is the same object: a title row, a body, a tinted
   footer. Loaded after pages.css so it owns these names outright.
   ============================================================ */

/* ---------------- the four buttons ---------------- */
.mtools{position:absolute;inset-inline-start:16px;top:16px;z-index:var(--z-hud);display:flex;gap:10px}
.mtool{position:relative;width:48px;height:48px;border:0;border-radius:24px;background:var(--surface);
  box-shadow:var(--sh-2);display:grid;place-items:center;cursor:pointer;color:var(--text);
  transition:background var(--t-1,.12s) var(--ease,ease),color var(--t-1,.12s) var(--ease,ease),
             box-shadow var(--t-1,.12s) var(--ease,ease)}
.mtool:hover{background:var(--surface-2);box-shadow:var(--sh-3)}
/* The two buttons that carry a standing meaning wear it at rest —
   red is what is wrong, blue is what is narrowed. The open state
   inverts whichever colour the button already had, so these have to
   be declared before it and outrank it when it lands. */
.mtool[data-pop="alerts"]{color:var(--bad)}
.mtool[data-pop="filter"]{color:var(--b600)}
.mtool.on,.mtool[data-pop="filter"].on{background:var(--b600);color:#fff;box-shadow:var(--sh-3)}
.mtool[data-pop="alerts"].on{background:var(--bad);color:#fff}
.mtool:focus-visible{outline:2px solid var(--b500);outline-offset:2px}
.mt-b{position:absolute;top:-3px;inset-inline-end:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;font:500 11px/16px var(--mono);font-style:normal;color:#fff;text-align:center;
  border:2px solid var(--surface);background:var(--dim)}
.mt-b.red{background:var(--bad)} .mt-b.blue{background:var(--b600)}

/* ---------------- the popup: one shape, six contents ---------------- */
.mpop{position:absolute;inset-inline-start:16px;top:76px;width:432px;max-height:calc(100% - 108px);
  z-index:calc(var(--z-hud) + 5);display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  animation:popIn .16s cubic-bezier(.16,1,.3,1) both}
.mpop.pop-layers,.mpop.pop-base{inset-inline-start:auto;inset-inline-end:16px;top:auto;bottom:88px}
.mpop.pop-base{width:376px}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

.pop-h{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:16px 14px 12px 20px;color:var(--ink)}
.pop-h > .ms{color:var(--muted)}
.pop-h b{font-size:17px;font-weight:500}
.pop-h .grow{flex:1}
.pop-n{height:24px;padding:0 10px;border-radius:12px;background:var(--b50);color:var(--b700);
  font:500 11.5px/24px var(--f)}
.pop-n.bad{background:var(--bad-bg);color:var(--bad)}
.pop-live{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ok)}
.pop-x{width:34px;height:34px;border:0;border-radius:17px;background:transparent;display:grid;
  place-items:center;cursor:pointer;color:var(--muted)}
.pop-x:hover{background:var(--surface-3);color:var(--ink)}

.pop-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 20px 14px}
.pop-b.tight{padding:0 0 8px}
.pop-lbl{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 9px;padding:0 var(--lp,0)}
.pop-b.tight .pop-lbl{padding:0 20px}

.pop-f{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:var(--surface-3);border-top:1px solid var(--line)}
.pop-f .grow{flex:1}

/* ---- filter ---- */
.psrch{display:flex;align-items:center;gap:11px;height:48px;padding:0 16px;border-radius:24px;
  background:var(--surface-3);margin-top:2px}
.psrch .ms{color:var(--muted);flex:0 0 auto}
.psrch input{flex:1;border:0;background:transparent;outline:none;font:400 14.5px var(--f);color:var(--text)}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font:500 12.5px var(--f);cursor:pointer;transition:.12s}
.pchip:hover{background:var(--surface-2);border-color:var(--dim)}
.pchip.on{background:var(--b50);border-color:transparent;color:var(--b700)}
body.dark .pchip.on{background:rgba(121,188,214,.16);color:var(--b300)}
.pchip i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.pchip .ms{color:var(--muted)}
.pchip.on .ms{color:inherit}
.pdot{width:8px;height:8px;border-radius:4px;flex:0 0 auto}

.pdims{display:flex;gap:8px}
.pdim{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;
  height:46px;padding:0 10px 0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);font:400 13px var(--f);color:var(--text);cursor:pointer}
.pdim:hover{border-color:var(--dim);background:var(--surface-2)}
.pdim span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdim em{font-style:normal;color:var(--b600);font-weight:500}
.pdim .ms{color:var(--dim);flex:0 0 auto}

.pdim-list{margin-top:10px;max-height:216px;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);padding:5px}
.pick{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;
  border-radius:9px;background:transparent;cursor:pointer;font:400 13px var(--f);color:var(--text);text-align:start}
.pick:hover{background:var(--surface-3)}
.pick.on{background:var(--b50);color:var(--b700);font-weight:500}
body.dark .pick.on{background:rgba(121,188,214,.15)}
.pk-d{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.pk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .ms{color:var(--b600)}

/* ---- alerts ---- */
.arow{display:flex;align-items:center;gap:13px;padding:12px 20px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:background var(--t-1,.12s) var(--ease,ease)}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--surface-2)}
.a-ic{width:38px;height:38px;flex:0 0 auto;border-radius:19px;display:grid;place-items:center}
.arow.bad .a-ic{background:var(--bad-bg);color:var(--bad)}
.arow.warn .a-ic{background:var(--warn-bg);color:var(--warn)}
.a-x{flex:1;min-width:0;line-height:1.4}
.a-x b{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.a-x span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;unicode-bidi:plaintext}
.a-t{flex:0 0 auto;font:500 12.5px var(--mono)}
.arow.bad .a-t{color:var(--bad)} .arow.warn .a-t{color:var(--warn)}
.arow .ms:last-child{color:var(--dim);flex:0 0 auto}

/* ---- log ---- */
.lrow{display:flex;gap:11px;padding:10px 20px;border-bottom:1px solid var(--surface-3)}
.lrow:last-child{border-bottom:0}
.l-t{flex:0 0 auto;font:400 11.5px/1.5 var(--mono);color:var(--dim)}
.l-d{width:7px;height:7px;flex:0 0 auto;border-radius:4px;margin-top:5px;background:var(--info)}
.l-d.ok{background:var(--ok)} .l-d.warn{background:var(--warn)}
.l-d.bad{background:var(--bad)} .l-d.info{background:var(--info)}
.l-m{flex:1;min-width:0;font-size:12.5px;line-height:1.55;color:var(--text);unicode-bidi:plaintext}

/* ---- key ---- */
.krow{display:flex;align-items:center;gap:12px;height:34px;font-size:13px;color:var(--text)}
.k-pin{width:24px;height:24px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  color:#fff;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.k-dot{width:12px;height:12px;flex:0 0 auto;border-radius:6px}

/* ---- layers ---- */
.lyr{display:flex;align-items:center;gap:12px;height:46px;padding:0 20px;cursor:pointer}
.lyr:hover{background:var(--surface-2)}
.lyr .l-n{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lyr input{display:none}
.lyr .sw{width:44px;height:26px;flex:0 0 auto;border-radius:13px;background:var(--surface-3);
  border:2px solid var(--dim);position:relative;transition:.18s}
.lyr .sw::after{content:'';position:absolute;top:50%;inset-inline-start:5px;width:12px;height:12px;
  margin-top:-6px;border-radius:50%;background:var(--dim);transition:.18s}
.lyr input:checked + .sw{background:var(--b600);border-color:var(--b600)}
.lyr input:checked + .sw::after{inset-inline-start:22px;width:18px;height:18px;margin-top:-9px;background:#fff}

/* ---- basemap ---- */
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:4px}
.bopt{padding:0;border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  cursor:pointer;overflow:hidden;text-align:center}
.bopt.on{border-color:var(--b600)}
.bo-art{display:block;height:58px}
.bo-t{display:block;padding:7px 4px 8px;font:500 12px var(--f);color:var(--text)}
.bopt.on .bo-t{color:var(--b700)}
.b-canvas,.mb-art.b-canvas{background:linear-gradient(135deg,#f6f4ef 60%,#dfe9ef)}
.b-streets,.mb-art.b-streets{background:linear-gradient(135deg,#efeade 55%,#cfdfe8)}
.b-satellite,.mb-art.b-satellite{background:linear-gradient(135deg,#5c6b55,#8a9a7a 60%,#3f5a6b)}
.b-osm,.mb-art.b-osm{background:linear-gradient(135deg,#eef0e6 55%,#cddfe5)}
.b-none,.mb-art.b-none{background:var(--surface-3)}

/* ---------------- the round card ---------------- */
.mround{position:absolute;inset-inline-start:16px;bottom:16px;z-index:var(--z-hud);width:296px;padding:16px 18px;
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:var(--sh-2);backdrop-filter:saturate(1.3) blur(8px)}
/* The map root is forced LTR, so the card stays bottom-left in Arabic
   too — but the assistant launcher crosses over to that corner. Lift
   the card above it there, the way the map controls sit in English. */
html[dir="rtl"] .mround{bottom:92px}
.mr-1{display:flex;align-items:baseline;gap:8px}
.mr-1 b{font:500 30px/1 var(--mono);letter-spacing:-1.2px;color:var(--brand)}
.mr-1 span{font-size:13px;color:var(--muted)}
.mr-bar{height:8px;border-radius:4px;background:var(--surface-3);margin:12px 0 10px;overflow:hidden}
.mr-bar i{display:block;height:100%;border-radius:4px;background:var(--brand);
  transition:width var(--t-3,.32s) var(--ease,ease)}
.mr-2{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.mr-2 .ms{color:var(--ok)}

/* ---------------- map controls ---------------- */
/* Lifted clear of the assistant launcher, which is fixed to the same
   corner — and which mirrors to the other side in Arabic, so clearing
   it sideways would only move the collision. */
.mctl{position:absolute;inset-inline-end:16px;bottom:92px;z-index:var(--z-hud);
  display:flex;align-items:flex-end;gap:12px}
.mctl-b{width:56px;height:56px;border:0;border-radius:var(--r);background:var(--surface);
  box-shadow:var(--sh-2);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.mctl-b:hover{background:var(--surface-2);box-shadow:var(--sh-3)}
.mctl-base{width:88px;height:88px;padding:0;border:2px solid var(--surface);border-radius:var(--r-sm);
  background:var(--surface-3);box-shadow:var(--sh-2);position:relative;overflow:hidden;cursor:pointer}
.mb-art{position:absolute;inset:0}
.mb-l{position:absolute;left:0;right:0;bottom:0;padding:4px 0;background:rgba(28,26,23,.6);
  color:#fff;font:500 10.5px var(--f);letter-spacing:.03em}

/* Leaflet's own zoom, dressed as Material */
.maproot .leaflet-control-zoom{border:0!important;border-radius:var(--r-sm)!important;
  box-shadow:var(--sh-2)!important;overflow:hidden;margin:0!important}
.maproot .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;
  background:var(--surface)!important;color:var(--text)!important;border:0!important;
  border-bottom:1px solid var(--line)!important;font-size:19px!important}
.maproot .leaflet-control-zoom a:last-child{border-bottom:0!important}
.maproot .leaflet-control-zoom a:hover{background:var(--surface-2)!important}
.maproot .leaflet-bottom.leaflet-right{inset-inline-end:120px;bottom:22px}

/* ============================================================
   THE VEHICLE POPUP
   A card that points at the unit, and leaves when you look away.
   ============================================================ */
/* Positioned by transform, from 0,0 — the card follows the unit on the
   compositor, so tracking a moving truck costs no layout and shows no
   shimmer. Only the fade-in animates; the movement must not, or every
   frame would restart a transition it never finishes. */
.vpop{position:absolute;left:0;top:0;z-index:calc(var(--z-hud) + 8);width:372px;
  will-change:transform;backface-visibility:hidden;
  animation:vpIn .18s cubic-bezier(.16,1,.3,1) both;pointer-events:auto}
@keyframes vpIn{from{opacity:0}to{opacity:1}}
.vp-card{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-4);overflow:hidden}
.vp-rule{height:4px;background:var(--vc)}
.vp-tip{width:0;height:0;margin-inline-start:calc(var(--tipx,44px) - 11px);
  border-inline-start:11px solid transparent;border-inline-end:11px solid transparent;
  border-top:12px solid var(--surface)}
.vpop.below{display:flex;flex-direction:column-reverse}
.vpop.below .vp-tip{border-top:0;border-bottom:12px solid var(--vc)}

.vp-h{display:flex;align-items:flex-start;gap:12px;padding:15px 14px 13px 16px}
/* Tonal containers, not washes: the tint is mixed into the surface
   rather than laid over it as transparency, so the chip keeps its
   contrast on white and in the dark theme alike. */
.vp-ic{width:44px;height:44px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--vc) 18%,var(--surface));color:var(--vc)}
.vp-id{flex:1;min-width:0}
.vp-1{display:flex;align-items:center;gap:8px}
.vp-1 b{font:500 19px/1.2 var(--mono);letter-spacing:-.4px;color:var(--ink)}
.vp-st{height:24px;padding:0 10px;border-radius:12px;font:500 11.5px/24px var(--f);
  background:color-mix(in srgb,var(--vc) 22%,var(--surface));
  color:color-mix(in srgb,var(--vc) 62%,#000);text-transform:capitalize}
body.dark .vp-st{background:color-mix(in srgb,var(--vc) 26%,var(--surface));
  color:color-mix(in srgb,var(--vc) 70%,#fff)}
.vp-2{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;unicode-bidi:plaintext}

.vp-task{padding:13px 16px 15px;border-top:1px solid var(--line)}
.vp-t1{display:flex;align-items:baseline;gap:8px}
.vp-t1 b{font:500 22px/1 var(--mono);letter-spacing:-.7px;color:var(--ink)}
.vp-t1 span{font-size:13px;color:var(--muted)}
.vp-t1 .grow{flex:1}
.vp-eta{font-size:12.5px;color:var(--muted)}
.vp-eta b{font:500 12.5px var(--f);letter-spacing:0;color:var(--ink)}
.vp-pb{height:6px;border-radius:3px;background:var(--surface-3);margin:10px 0 9px;overflow:hidden}
.vp-pb i{display:block;height:100%;border-radius:3px;background:var(--vc)}
.vp-addr{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);unicode-bidi:plaintext}
.vp-addr .ms{color:var(--dim)}

.vp-reads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  padding:13px 16px;border-top:1px solid var(--line)}
.vp-r .ms{color:var(--dim)}
.vp-r.hot .ms{color:var(--warn)}
.vp-v{font:500 17px/1.2 var(--mono);letter-spacing:-.4px;color:var(--ink);margin-top:3px}
.vp-v small{font:400 10px var(--f);color:var(--muted);margin-inline-start:2px}
.vp-r.hot .vp-v{color:var(--warn)}
.vp-b{height:3px;border-radius:2px;background:var(--surface-3);margin:6px 0 5px;overflow:hidden}
.vp-b i{display:block;height:100%;border-radius:2px;background:var(--ink)}
.vp-r.hot .vp-b i{background:var(--warn)}
.vp-k{font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

.vp-acts{display:flex;align-items:center;gap:6px;padding:4px 12px 13px}
.vp-acts .btn{flex:1;height:42px;border-radius:21px;gap:8px;justify-content:center}
.vp-acts .icon-btn{width:42px;height:42px;border-radius:21px;background:var(--surface-3);
  color:var(--b600);flex:0 0 auto}
.vp-acts .icon-btn:hover{background:var(--b50)}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .mpop{width:calc(100% - 32px)}
  .mpop.pop-layers,.mpop.pop-base{inset-inline-end:16px;left:16px;width:auto}
  .mround{width:calc(100% - 32px)}
  .mctl-base{display:none}
  .vpop{width:calc(100vw - 32px);max-width:372px}
}