/* ============================================================
   MASAR SCADA — layout.css
   App shell: sidebar, topbar, main region, drawers, chat dock
   ============================================================ */

#app{height:100%;display:grid;
  grid-template-columns:var(--side-w) 1fr;
  grid-template-rows:var(--top-h) auto 1fr;
  grid-template-areas:"side top" "side scope" "side main";
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}
body.rail #app{grid-template-columns:var(--side-w-min) 1fr}

/* ============================================================
   SIDEBAR

   One flat surface, a hairline to the content, and nothing decorative:
   no gradient, no corner glow, no gradient-filled active pill. The
   accent appears exactly once — on the active item's icon — which is
   what makes it legible as "you are here".

   The eleven links are ordered by how often they are used and split by
   two hairlines rather than five uppercase headings; the headings were
   taller than the rows they labelled and turned a short list into a
   document. Row height is 34px so the whole nav is visible without
   scrolling on a laptop.
   ============================================================ */
.side{
  grid-area:side;position:relative;z-index:40;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}

.side-head{display:flex;align-items:center;gap:10px;padding:0 14px;
  height:var(--top-h);flex:0 0 auto;border-bottom:1px solid var(--line)}
.side-mark{flex:0 0 auto;display:block;line-height:0}
.side-name{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.side-name b{font-size:14px;color:var(--ink);letter-spacing:1.6px;font-weight:700}
.side-name span{font-size:10px;color:var(--dim);letter-spacing:.3px}
.side-collapse{width:26px;height:26px;border-radius:7px;color:var(--dim);margin-left:auto;
  display:grid;place-items:center;transition:background .12s,color .12s}
.side-collapse:hover{background:var(--surface-3);color:var(--ink)}

.nav{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 8px 14px}
.nav::-webkit-scrollbar{width:5px}
.nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.nav-sep{height:1px;background:var(--line);margin:9px 10px}

.nav-item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;
  border-radius:8px;color:var(--text);font-size:13px;font-weight:500;text-align:left;
  transition:background .12s,color .12s}
.nav-item .ni-ic{flex:0 0 17px;height:17px;display:grid;place-items:center;color:var(--dim);
  transition:color .12s}
.nav-item .ni-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:var(--surface-3);color:var(--ink)}
.nav-item:hover .ni-ic{color:var(--muted)}
.nav-item.on{background:var(--surface-3);color:var(--ink);font-weight:600}
.nav-item.on .ni-ic{color:var(--b600)}
.nav-item:focus-visible{outline:2px solid var(--b500);outline-offset:-2px}

/* counts are information, not decoration: a plain number, and colour
   only when the number is asking for attention */
.nav-item .ni-tag{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--dim);letter-spacing:-.2px}
.nav-item.on .ni-tag{color:var(--muted)}
.nav-item .ni-tag.warn{color:var(--warn)}
.nav-item .ni-tag.hot{color:var(--bad)}
.nav-item .ni-tag.off{display:none}

/* collapsed rail */
body.rail .side-name{display:none}
/* collapsed, the head keeps the mark and only offers the expand
   control on hover — a lone chevron over an empty header looks unfinished */
body.rail .side-head{justify-content:center;padding:0}
body.rail .side-collapse{display:none;margin:0 auto;width:34px;height:34px}
body.rail .side-head:hover .side-mark{display:none}
body.rail .side-head:hover .side-collapse{display:grid}
body.rail .nav{padding:10px 6px}
body.rail .nav-item{justify-content:center;padding:0;gap:0}
body.rail .nav-item .ni-tx,body.rail .nav-item .ni-tag{display:none}
body.rail .nav-sep{margin:9px 6px}

/* footer: the link status is real telemetry, so it stays — as one
   quiet line rather than a card */
.side-foot{flex:0 0 auto;padding:10px 8px;border-top:1px solid var(--line)}
.sf-net{display:flex;align-items:center;gap:7px;padding:0 10px 8px;
  font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.sf-user{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  cursor:pointer;transition:background .12s}
.sf-user:hover{background:var(--surface-3)}
.sf-user .avatar{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
.sf-user .ui{display:flex;flex-direction:column;line-height:1.3;overflow:hidden}
.sf-user .ui b{font-size:12.5px;color:var(--ink);font-weight:600}
.sf-user .ui span{font-size:10.5px;color:var(--dim)}
body.rail .sf-net{justify-content:center;padding:0 0 8px}
body.rail .sf-net span:not(.dot){display:none}
body.rail .sf-user{justify-content:center;padding:6px 0}
body.rail .sf-user .ui{display:none}

/* ---------------- topbar ---------------- */
.top{grid-area:top;display:flex;align-items:center;gap:13px;padding:0 16px;position:relative;z-index:30;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line)}
.top-title{display:flex;align-items:center;min-width:0;flex:0 1 auto;max-width:230px}
.top-title h1{font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title span{display:none}
/* beats .icon-btn{display:grid}, which is declared later in this file */
.top .only-mobile{display:none}

.top-search{position:relative;flex:1 1 auto;min-width:150px;max-width:440px;margin-inline-start:4px}
.top-search input{width:100%;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);padding:0 12px 0 33px;font-size:13px;outline:none;transition:.16s;color:var(--text)}
.top-search input:focus{border-color:var(--b400);box-shadow:var(--ring);background:var(--surface)}
.ts-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:15px;pointer-events:none}
.ts-res{position:absolute;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);max-height:330px;overflow:auto;display:none;padding:6px}
.ts-res.on{display:block}
.ts-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:12.5px}
.ts-item:hover{background:var(--surface-3)}
.ts-item .k{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--b600);background:var(--b50);
  padding:2px 6px;border-radius:5px;text-transform:uppercase}
body.dark .ts-item .k{background:rgba(59,130,246,.16)}

.top-tools{display:flex;align-items:center;gap:9px;margin-inline-start:auto;flex:0 0 auto}
.spd{display:flex;background:var(--surface-3);border-radius:9px;padding:2.5px;gap:2px}
.spd button{padding:0 9px;height:26px;border-radius:7px;font-size:11.5px;font-weight:600;color:var(--muted);
  font-family:var(--mono);transition:.14s}
.spd button:hover{color:var(--ink)}
.spd button.on{background:var(--surface);color:var(--b600);box-shadow:var(--sh-1)}

.icon-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted);
  position:relative;transition:.15s;border:1px solid transparent}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.icon-btn.sm{width:26px;height:26px;border-radius:8px;font-size:12px}
.icon-btn .badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:100px;background:var(--bad);color:#fff;font-size:9px;font-weight:700;font-style:normal;
  display:grid;place-items:center;border:2px solid var(--surface);font-family:var(--mono);
  line-height:1;letter-spacing:-.2px}
.icon-btn .badge.zero{display:none}

/* ---------------- main ---------------- */
main{grid-area:main;position:relative;overflow:hidden}
.page{position:absolute;inset:0;overflow:auto;padding:20px 22px 30px;animation:pgIn .28s cubic-bezier(.2,.8,.3,1)}
.page.flush{padding:0;overflow:hidden}
@keyframes pgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.pgrid{display:grid;gap:16px}
.pgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgrid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pgrid.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.pgrid.side-main{grid-template-columns:320px minmax(0,1fr)}
.pgrid.main-side{grid-template-columns:minmax(0,1fr) 340px}
@media(max-width:1500px){.pgrid.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1400px){.pgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.pgrid.c5,.pgrid.c6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1180px){.pgrid.c3,.pgrid.main-side,.pgrid.side-main{grid-template-columns:1fr}}
@media(max-width:900px){.pgrid.c2{grid-template-columns:1fr}}

/* ---------------- drawer ---------------- */
.drawer{position:fixed;top:var(--top-h);right:0;bottom:0;width:390px;z-index:var(--z-drawer);
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-4);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-head{height:50px;flex:0 0 auto;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}
.dr-head b{font-size:13.5px}
.dr-head .icon-btn{margin-left:auto}
.dr-body{flex:1;overflow:auto;padding:12px 12px 86px}

/* ---------------- chat dock ---------------- */
.chatfab{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:16px;z-index:var(--z-chat);
  background:linear-gradient(140deg,var(--b500),var(--b700));color:#fff;font-size:20px;
  box-shadow:0 8px 26px -6px rgba(37,99,235,.6);display:grid;place-items:center;transition:.2s}
.chatfab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px -8px rgba(37,99,235,.7)}
.chatfab.hide{opacity:0;pointer-events:none;transform:scale(.7)}
.chatdock{position:fixed;right:22px;bottom:22px;width:396px;height:min(620px,calc(100vh - 110px));z-index:var(--z-chat);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.97);opacity:0;pointer-events:none;transition:.24s cubic-bezier(.2,.9,.3,1)}
.chatdock.on{transform:none;opacity:1;pointer-events:auto}
.chatdock.min{height:52px}
.chatdock.min .cd-body,.chatdock.min .cd-input,.chatdock.min .cd-chips{display:none}
.cd-head{flex:0 0 auto;height:52px;display:flex;align-items:center;padding:0 12px;gap:10px;
  background:linear-gradient(120deg,#12306a,var(--b700));color:#fff}
.cd-id{display:flex;align-items:center;gap:10px}
.cd-id div{display:flex;flex-direction:column;line-height:1.25}
.cd-id b{font-size:13px;color:#fff}
.cd-id span{font-size:10.5px;color:#a9c6ee}
.cd-orb{width:9px;height:9px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 0 0 rgba(125,211,252,.7);animation:orb 2.2s infinite}
@keyframes orb{70%{box-shadow:0 0 0 9px rgba(125,211,252,0)}100%{box-shadow:0 0 0 0 rgba(125,211,252,0)}}
.cd-acts{margin-left:auto;display:flex;gap:2px}
.cd-acts .icon-btn{color:var(--b200)}
.cd-acts .icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.cd-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.cd-chips{flex:0 0 auto;display:flex;gap:6px;padding:8px 10px 0;flex-wrap:wrap;background:var(--surface-2)}
.cd-input{flex:0 0 auto;display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--surface)}
.cd-input input{flex:1;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  padding:0 12px;font-size:12.8px;outline:none}
.cd-input input:focus{border-color:var(--b400);box-shadow:var(--ring)}

/* ---------------- toasts ---------------- */
/* Bottom-right, stacked above the assistant button. Centred toasts
   landed on top of the live map's event ticker and covered the middle
   of the city — the one part of the map an operator is looking at. */
.toasts{position:fixed;bottom:86px;right:22px;z-index:var(--z-toast);align-items:flex-end;
  display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
body.has-inspector .toasts{right:404px}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:11px;font-size:12.5px;font-weight:500;
  box-shadow:var(--sh-3);display:flex;align-items:center;gap:9px;animation:tIn .3s cubic-bezier(.2,.9,.3,1);max-width:460px}
body.dark .toast{background:#1e2f4d;border:1px solid var(--line-2)}
.toast.out{animation:tOut .3s forwards}
.toast .ti{width:6px;height:6px;border-radius:50%;background:var(--b400);flex:0 0 auto}
.toast.ok .ti{background:#34d399}.toast.warn .ti{background:#fbbf24}.toast.bad .ti{background:#f87171}
@keyframes tIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(8px) scale(.96)}}

/* ---------------- modal ---------------- */
.modal-wrap{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:24px;
  background:rgba(10,22,42,.42);backdrop-filter:blur(4px);animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-4);
  width:min(680px,100%);max-height:88vh;overflow:auto;animation:mIn .26s cubic-bezier(.2,.9,.3,1);border:1px solid var(--line)}
.modal.wide{width:min(1020px,100%)}
.modal.narrow{width:min(460px,100%)}
@keyframes mIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.md-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.md-head h3{font-size:16px}
.md-head .sub{font-size:11.5px;color:var(--muted);display:block;margin-top:2px;font-weight:400}
.md-body{padding:20px 22px}
.md-foot{display:flex;gap:9px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--surface)}

/* ---------------- responsive ---------------- */
@media(max-width:1024px){
  #app{grid-template-columns:0 1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);transform:translateX(-102%);transition:transform .24s;z-index:var(--z-drawer)}
  body.mopen .side{transform:none}
  .top .only-mobile{display:grid}
  /* tapping outside the drawer closes it */
  body.mopen::after{content:'';position:fixed;inset:0;z-index:85;background:rgba(10,22,42,.42)}
  /* the rail state is a desktop idea — on a phone the sidebar is a drawer */
  body.rail .side{width:var(--side-w)}
  body.rail .side-name{display:flex}
  body.rail .side-mark{display:block}
  body.rail .side-collapse{display:none}
  body.rail .nav{padding:10px 8px 14px}
  body.rail .nav-item{justify-content:flex-start;padding:0 10px;gap:10px}
  body.rail .nav-item .ni-tx{display:block}
  body.rail .nav-item .ni-tag{display:block}
  body.rail .nav-item .ni-tag.off{display:none}
  body.rail .nav-sep{margin:9px 10px}
  body.rail .sf-net{justify-content:flex-start;padding:0 10px 8px}
  body.rail .sf-net span{display:inline}
  body.rail .sf-user{justify-content:flex-start;padding:6px 8px}
  body.rail .sf-user .ui{display:flex}
  .top-search{display:none}
  .drawer{width:100%}
  .chatdock{right:10px;left:10px;width:auto}
}

@media(max-width:720px){
  .simpill{display:none}
  .top{gap:10px;padding:0 12px}
  .top-title h1{font-size:15px}
  .top-title span{display:none}
  #btnAsk .push{display:none}
  .page{padding:14px 12px 24px}
  .page-head h2{font-size:17px}
}

/* a module that exists but is switched off in this build */
.nav-item.locked{opacity:.42;cursor:not-allowed}
.nav-item.locked:hover{background:transparent;color:var(--text)}
.nav-item.locked:hover .ni-ic{color:var(--dim)}
.nav-item.locked .ni-lock{margin-left:auto;display:grid;place-items:center;color:var(--dim)}
html[dir="rtl"] .nav-item.locked .ni-lock{margin-left:0;margin-right:auto}

/* ============================================================
   TOP BAR

   It had ten things in it and no structure, so every one of them
   competed: a title with a sub-line saying what the page below it
   already said, a clock and a speed control as two separate widgets
   with a hairline between them, three loose icon circles, two more
   hairlines, and a saturated blue button. The search box — the one
   control that wants room — was the thing being squeezed, down to a
   stub that read "Search veh".

   Now it is four zones and nothing else:

       what you are looking at  ·  search  ·  whose fleet  ·  controls

   and the controls are grouped by what they do rather than spaced
   evenly apart: the simulation is one instrument, the display
   toggles are one tray, and the search takes the slack.
   ============================================================ */
.top-grp{display:flex;align-items:center;gap:8px}

/* ---- the simulation, as one instrument ---- */
.simpill{display:flex;align-items:center;gap:0;height:34px;padding:0 3px 0 3px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;flex:0 0 auto}
.simpill .spd{background:transparent;padding:0;gap:1px}
.simpill .spd button{height:26px;padding:0 8px}
.sp-clk{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
  padding:0 9px 0 10px;margin-inline-start:4px;border-inline-start:1px solid var(--line)}
.sp-clk b{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.3px;
  font-variant-numeric:tabular-nums}
.sp-clk span{font-size:9.5px;color:var(--muted);white-space:nowrap}

/* the alarm bell sits between two trays, so it gets the same frame —
   an unframed circle between two framed groups reads as a mistake */
#btnAlarms{background:var(--surface-2);border-color:var(--line);border-radius:10px;overflow:visible}
#btnAlarms:hover{background:var(--surface);color:var(--bad)}
#btnAlarms.hot{color:var(--bad)}

/* ---- Ask MASAR ----
   The one door out of the console and into the assistant, so it keeps
   the filled treatment; it just stopped spending width on its own name. */
#btnAsk{background:var(--b600);border-color:var(--b600);color:#fff;border-radius:10px}
#btnAsk:hover{background:var(--b700);border-color:var(--b700);color:#fff}

/* ---- the display menu ---- */
.topmore{position:relative;flex:0 0 auto}
#btnMore{background:var(--surface-2);border-color:var(--line);border-radius:10px}
#btnMore:hover{background:var(--surface)}
#btnMore[aria-expanded="true"]{background:var(--b50);border-color:var(--b200);color:var(--b700)}
.tm-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  min-width:196px;padding:6px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3,0 12px 32px rgba(0,0,0,.14))}
.tm-row{display:flex;align-items:center;gap:10px;width:100%;
  height:36px;padding:0 10px;border:0;border-radius:8px;
  background:none;color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:start}
.tm-row:hover{background:var(--surface-3)}
.tm-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--muted);flex:0 0 auto}
.tm-ic.ar{font-size:13px;font-weight:700;color:var(--b600)}
.tm-row:hover .tm-ic{color:var(--b600)}
.tm-t{flex:1}

.spd button[data-spd="0"] svg{width:13px;height:13px}
.icon-btn:focus-visible,.spd button:focus-visible{outline:2px solid var(--b500);outline-offset:2px}

/* ---- what gives way, and in what order ----
   The search box is the last thing to shrink, because it is the only
   control here that cannot do its job small. */
@media(max-width:1500px){
  .sp-clk span{display:none}
  .sp-clk{padding-inline-end:8px}
}
@media(max-width:1200px){
  .simpill .spd button:not(.on):not([data-spd="0"]){display:none}
}
@media(max-width:1060px){
  .top-title{display:none}
}
@media(max-width:900px){ .simpill{display:none} }

/* ============================================================
   ALARM DRAWER

   Its own row shape, not the console's seven-column grid: a narrow
   panel cannot carry columns, and reusing them wrapped every title
   one word per line.
   ============================================================ */
.dr-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr-head > div{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.dr-head b{font-size:14px;color:var(--ink)}
.dr-head span{font-size:11px;color:var(--muted)}

.dr-al{position:relative;padding:9px 16px 9px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s}
.dr-al::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--idle)}
.dr-al.sev-crit::before{background:var(--bad)}
.dr-al.sev-maj::before{background:var(--warn)}
.dr-al.sev-min::before{background:var(--info)}
.dr-al:hover{background:var(--surface-2)}
.dr-al.seen{opacity:.62}
.dr-al.seen::before{opacity:.45}

.dra-1{display:flex;align-items:center;gap:7px}
.dra-1 b{font-size:12.5px;color:var(--ink);line-height:1.35;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dra-tag{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;flex:0 0 auto}
.dra-tag.new{background:var(--bad-bg);color:var(--bad)}
.dra-tag.ok{background:var(--ok-bg);color:var(--ok)}
.dra-tag.rtn{background:var(--info-bg);color:var(--info)}

.dra-2{display:flex;align-items:center;gap:7px;margin-top:3px;
  font-family:var(--mono);font-size:10px;color:var(--muted);min-width:0}
.dra-2 .dra-v{color:var(--ink);font-weight:700;flex:0 0 auto}
.dra-2 .dra-v.dim{color:var(--dim);font-weight:500}
.dra-2 .dra-c{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dra-2 .dra-x{color:var(--warn);font-weight:700;flex:0 0 auto}
.dra-2 .dra-t{margin-left:auto;color:var(--dim);flex:0 0 auto}
html[dir="rtl"] .dra-2{unicode-bidi:plaintext}
html[dir="rtl"] .dra-2 .dra-t{margin-left:0;margin-right:auto}
html[dir="rtl"] .dr-al{padding:9px 18px 9px 16px}
html[dir="rtl"] .dr-al::before{left:auto;right:0}

.dr-clear{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 20px;
  color:var(--dim);text-align:center}
.dr-clear b{font-size:13px;color:var(--muted)}
.dr-clear span{font-size:11.5px}
.dr-clear svg{color:var(--ok);opacity:.7}

/* ============================================================
   v4 — CONTRACTOR SELECTOR
   The municipality does not run these trucks; contractors do. Which
   of them you are looking at is a header-level question, so it sits
   with the search rather than inside one page's controls.
   ============================================================ */
.conpick{position:relative;flex:none}
.conbtn{display:flex;align-items:center;gap:7px;height:34px;padding:0 9px 0 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12px;font-weight:600;transition:.14s}
.conbtn:hover{border-color:var(--line-2);color:var(--ink)}
.conbtn.active{border-color:var(--b600);color:var(--b600);background:var(--b50)}
body.dark .conbtn.active{background:rgba(37,99,235,.16);color:#93c5fd}
.cb-ic{display:grid;place-items:center;color:var(--muted)}
.conbtn.active .cb-ic{color:inherit}
.cb-t{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-ch{display:grid;place-items:center;opacity:.55}
.conbtn:focus-visible{outline:none;box-shadow:var(--ring)}

.conmenu{position:absolute;top:calc(100% + 6px);left:0;width:340px;max-height:70vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);
  z-index:var(--z-drawer);padding:5px}
.cm-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;text-align:left;transition:.12s}
.cm-row:hover{background:var(--surface-2)}
.cm-row.on{background:var(--b50)}
body.dark .cm-row.on{background:rgba(37,99,235,.14)}
.cm-ck{width:15px;display:grid;place-items:center;color:var(--b600);flex:none}
.cm-dot{width:8px;height:8px;border-radius:100px;flex:none}
.cm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cm-t b{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-t span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.cm-t em{color:var(--warn);font-style:normal;font-weight:700}
.cm-n{font:700 11px/1 var(--mono);color:var(--muted);flex:none}
.cm-rule{height:1px;background:var(--line);margin:4px 2px}

/* ---- scope strip ---- */
.scopebar{grid-area:scope;display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:7px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.scopebar.off{display:none}
.sb-l{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.sb-n{font:700 13px/1 var(--mono);color:var(--b600)}
.sb-of{font-size:11px;color:var(--muted);margin-right:2px}
.sb-sep{width:1px;height:15px;background:var(--line);margin:0 4px}

@media (max-width:1280px){ .cb-t{max-width:96px} }
@media (max-width:1024px){ .conpick{display:none} }
.cm-t em.bad{color:var(--bad)}