/* ==========================================================================
   MASAR — 5-shell.css
   The application frame: navigation rail, global top bar, scope bar,
   page header, drawers, modals, menus.
   ========================================================================== */

.m-shell{
  height:100%;display:grid;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-rows:var(--top-h) auto auto 1fr;
  grid-template-areas:"nav top" "nav scope" "nav figs" "nav main";
  transition:grid-template-columns var(--t-slow) var(--ease);
}
/* THE PAGE BAND — its own navigation at the start, its own figures at the
   end, on ONE row. When the two cannot both have their width the figures
   wrap under the tabs rather than being cut or hidden: everything the page
   put here stays on the screen.
   It is called m-band because m-bar was TAKEN: that has been the progress
   bar's class since the design system was born, and naming the band after
   it dressed every little meter in the product as a 38px white pill — the
   fuel column looked like a row of green soap bars. One name, one thing. */
.m-band{
  grid-area:figs;display:flex;align-items:center;flex-wrap:wrap;
  column-gap:var(--s-4);row-gap:0;
  padding:8px var(--gutter) 0;min-height:40px;
  background:transparent;border-bottom:0;
}
.m-band[hidden]{display:none}
/* Neither side shrinks: a squeezed tab strip would let the two sit on one
   line that is wider than the band, and the figures would be cut by its
   edge. Refusing to shrink is what makes them WRAP instead — the figures
   drop under the tabs and everything the page put here stays readable. */
.m-band__tabs{flex:0 1 auto;max-width:100%;display:flex;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
/* the family switcher: the module's siblings, as one quiet segmented pill */
.m-fam{
  flex:0 0 auto;display:flex;align-items:center;gap:2px;
  padding:3px;margin-inline-end:12px;
  background:var(--c-n-100);border:1px solid var(--line-subtle);
  border-radius:var(--r-full);
}
html[data-theme="dark"] .m-fam{background:var(--surface-sunken);border-color:var(--line-subtle)}
.m-fam > button{
  height:26px;padding:0 13px;border-radius:var(--r-full);
  font:600 11.5px/1 var(--font);color:var(--text-2);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.m-fam > button:hover{color:var(--text)}
.m-fam > button[aria-current]{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 3px rgba(9,30,54,.14);
}
.m-band__tabs .m-tabs{min-width:0}
.m-band__tabs:empty{display:none}
.m-band__figs{flex:0 0 auto;margin-inline-start:auto;display:flex;align-items:center;max-width:100%}
.m-band__figs:empty{display:none}
/* when they wrap, the second line gets its own breathing room */
.m-band{padding-block:0}
.m-band__figs .m-stats{flex-wrap:wrap}
/* a line of figures on a 38px band is a line, not a panel */
.m-band__figs .m-stats{padding:0;background:none;border:0}
.m-band__figs .m-stats__i{padding:1px 11px}
.m-band__figs .m-stats__i:last-child{padding-inline-end:0}
.m-band__figs .m-stats__v{font-size:14px}
.m-band__figs .m-stats__l{font-size:10px}
.m-shell.is-rail{grid-template-columns:var(--nav-w-rail) minmax(0,1fr)}

/* ============================================================== NAVIGATION */

.m-nav{
  grid-area:nav;position:relative;z-index:var(--z-nav);
  display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg-2) 100%);
  color:var(--nav-item);
  border-inline-end:1px solid var(--nav-line);
  overflow:hidden;
}
/* The Qatar skyline. It used to be a 150px band across the bottom of the
   whole rail, which put a row of towers THROUGH the last four modules —
   with twenty-two items the list always reaches the bottom. It now lives in
   the footer strip alone, under nothing but its own line of text. */
.m-nav__foot::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:46px;
  background:var(--m-skyline) center bottom / auto 100% no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 100%);
          mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  pointer-events:none;
}

.m-nav__brand{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  height:var(--top-h);padding:0 16px;
  border-bottom:1px solid var(--nav-line);
}
/* THE MARK.
   The house logo is two flat brand colours with a cut-out inside each face,
   so it needs a light ground to be read: on a dark surface it sits on a
   white tile, the way it does on a device home screen. On a light surface
   it needs nothing — a white tile on a white rail is a box drawn around
   something that was already legible — so the tile is a token and the light
   theme sets it to nothing. The logo itself is never recoloured. */
.m-mark{
  flex:0 0 auto;display:grid;place-items:center;
  width:28px;height:28px;border-radius:8px;
  background:var(--mark-bg);box-shadow:0 0 0 1px var(--mark-line);
  overflow:hidden;
}
.m-mark img{display:block;width:21px;height:21px;object-fit:contain}
/* the boot screen is the dark identity surface in both themes */
.m-mark--lg{
  width:60px;height:60px;border-radius:16px;
  background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.m-mark--lg img{width:44px;height:44px}
.m-nav__mark{flex:0 0 auto;width:28px;height:28px}
.m-nav__wordmark{display:flex;flex-direction:column;gap:0;min-width:0;overflow:hidden}
.m-nav__wordmark b{font:650 13.5px/17px var(--font);color:var(--nav-brand);letter-spacing:.01em;white-space:nowrap}
.m-nav__wordmark span{font:var(--ty-label-sm);color:var(--nav-group);white-space:nowrap;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase}
.is-rail .m-nav__wordmark{display:none}
.is-rail .m-nav__brand{justify-content:center;padding:0}

.m-nav__scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:10px 10px 14px;position:relative;z-index:1;
  scrollbar-width:none;-ms-overflow-style:none;   /* scrolls, but nothing to look at */
  /* a list that is cut off mid-item with no scrollbar reads as a bug; the
     last row fading out reads as "there is more" */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
}
.m-nav__scroll::-webkit-scrollbar{width:0;height:0;display:none}

/* v6: the rail is flat — nine doors, no section headings to read past */
.m-nav__group{display:none}

.m-nav-item{
  position:relative;display:flex;align-items:center;gap:10px;
  width:100%;height:37px;padding:0 11px;margin-bottom:2px;
  border-radius:var(--r-md);color:var(--nav-item);
  font:var(--ty-label);font-size:12.3px;letter-spacing:-.002em;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.m-nav-item:hover{background:var(--nav-item-hover-bg);color:var(--nav-item-hover);text-decoration:none}
.m-nav-item__ic{flex:0 0 auto;width:17px;height:17px;display:grid;place-items:center}
.m-nav-item__ic svg{width:17px;height:17px}
/* The item is a <button>, and a button centres its text. With the icon
   pinned at the start and the count at the end, that left every label
   floating in the middle of its own row — twenty-two labels on twenty-two
   different left edges, which is what made the rail look broken. */
.m-nav-item__t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;text-align:start}
.m-nav-item__n{
  flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  background:var(--nav-count-bg);color:var(--nav-count-fg);
  font:600 10.5px/18px var(--font);text-align:center;
}
.m-nav-item__n--alert{background:var(--crit-fill);color:#fff}
.m-nav-item__n--warn{background:var(--warn-fill);color:#3A2A00}
/* WHERE YOU ARE, IN THE BRAND'S OWN COLOUR.
   The row is the accent, filled — ONE signal, not the three it used to
   carry (a tint, a bar at its edge and a tinted icon for the same fact).
   The label and the glyph go white on it, and the counts that mean
   something — a breached SLA, an open alarm — keep their own colour, so a
   red badge is still red on the row you are standing on. */
.m-nav-item[aria-current="page"]{
  background:var(--nav-item-on-bg);color:var(--nav-item-on);font-weight:600;
}
/* the identity maroon at the row's start edge — where you are, said once,
   in the state's own colour vocabulary rather than a loud filled block */
.m-nav-item[aria-current="page"]::before{
  content:'';position:absolute;inset-inline-start:0;top:8px;bottom:8px;
  width:3px;border-radius:var(--r-full);background:var(--nav-edge);
}
.m-nav-item[aria-current="page"]:hover{background:var(--nav-item-on-hover)}
.m-nav-item[aria-current="page"] .m-nav-item__ic{color:var(--nav-item-on)}
.m-nav-item[aria-current="page"] .m-nav-item__n{
  background:var(--nav-count-on-bg);color:var(--nav-item-on);
}
/* a count that is RED because something is breached stays red on the row
   you happen to be standing on — the active row lifts the plain counts
   only, never the ones carrying a state */
.m-nav-item[aria-current="page"] .m-nav-item__n--alert{background:var(--crit-fill);color:#fff}
.m-nav-item[aria-current="page"] .m-nav-item__n--warn{background:var(--warn-fill);color:#3A2A00}
.m-nav-item.is-locked{opacity:.4;pointer-events:none}

/* COLLAPSED RAIL.
   Icon-only, centred, and the count becomes a dot rather than a number:
   a two-digit badge on a 40px target had nowhere to sit and broke out over
   the icon. The number is still available — it is in the tooltip, and the
   rail is one click from being open again. */
.is-rail .m-nav-item{
  justify-content:center;padding:0;gap:0;
  width:40px;height:40px;margin:0 auto 6px;border-radius:var(--r-md);
}
.is-rail .m-nav-item__t{display:none}
.is-rail .m-nav-item__ic{width:20px;height:20px}
.is-rail .m-nav-item__ic svg{width:20px;height:20px}
.is-rail .m-nav-item__n{
  position:absolute;top:5px;inset-inline-end:5px;
  min-width:7px;width:7px;height:7px;padding:0;overflow:hidden;
  color:transparent;font-size:0;line-height:0;
  background:var(--c-blue-400);
  box-shadow:0 0 0 2px var(--nav-bg);
}
.is-rail .m-nav-item__n--alert{background:var(--crit-fill)}
.is-rail .m-nav-item__n--warn{background:var(--warn-fill)}
/* The count on the ACTIVE row is a chip when the rail is open and a dot
   when it is closed, and the chip rule is the more specific of the two — so
   on the closed rail the dot on the row you are standing on came out the
   colour of the chip instead of the colour of its state. */
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__n{background:var(--c-blue-400)}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__n--alert{background:var(--crit-fill)}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__n--warn{background:var(--warn-fill)}
.is-rail .m-nav-item[aria-current="page"]{background:var(--nav-item-on-bg)}
.is-rail .m-nav__scroll{padding:8px 0 14px}

.m-nav__foot{
  flex:0 0 auto;position:relative;z-index:1;overflow:hidden;
  padding:9px 14px 10px;border-top:1px solid var(--nav-line);
  display:flex;align-items:center;gap:8px;
  font:var(--ty-caption);font-size:11px;color:var(--nav-group);
}
.m-nav__foot > *{position:relative;z-index:1}
.is-rail .m-nav__foot{justify-content:center}
.is-rail .m-nav__foot span{display:none}

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

.m-top{
  grid-area:top;position:relative;z-index:var(--z-top);
  display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--gutter);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
/* Each group is placed in its OWN column. Without that, a page whose
   figures do not show leaves the middle column empty — and an empty column
   is not a column, so the right-hand group falls into the middle and the
   console's tools end up parked halfway across the bar. */
.m-top__l{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:1 1 auto}
.m-top__r{display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto;margin-inline-start:auto}
.m-top__product{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;padding-inline-end:var(--s-3)}
.m-top__product .m-mark{width:26px;height:26px;border-radius:7px}
.m-top__product .m-mark img{width:20px;height:20px}
/* THE PAGE'S NAME, ON THE PRODUCT'S BAR.
   One title, one bar. The identity line a record's page carries — its kind,
   its municipality, its reference — follows the name on the same row rather
   than under it. */
.m-top__title{display:flex;align-items:baseline;gap:9px;min-width:0}
.m-top__title b{
  font:650 16px/20px var(--font);color:var(--text);
  letter-spacing:-.014em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-top__title span{
  font:var(--ty-caption);color:var(--text-3);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.m-top__sep{width:1px;height:26px;background:var(--line);flex:0 0 auto}

/* THE PAGE'S BUTTONS ARE ICONS HERE.
   A bar carrying "Export the brief", "Re-run the analysers" and "New
   request" as worded buttons is a bar of sentences. The label is not
   dropped — it becomes the tooltip and the accessible name — so the row
   reads as a short line of tools and the words are one hover away. A
   button with no icon keeps its words, because there would be nothing
   left of it otherwise. */
.m-top__acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.m-top__acts:empty{display:none}
.m-top__acts .m-btn:has(svg) > span{display:none}
.m-top__acts .m-btn:has(svg){
  width:32px;min-width:32px;padding:0;justify-content:center;border-radius:var(--r-sm);
}
.m-top__acts .m-btn:has(svg) svg{width:17px;height:17px}
/* the search a page puts on the bar stays a search */
.m-top__acts .m-search{width:min(260px,30vw)}

.m-top__tools{display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto}
.m-icon-btn.is-on{background:var(--accent-soft);color:var(--accent-press)}
.m-icon-btn__dot{
  position:absolute;top:6px;inset-inline-end:6px;
  width:7px;height:7px;border-radius:var(--r-full);
  background:var(--c-blue-400);box-shadow:0 0 0 2px var(--surface);
}
.m-icon-btn__dot[hidden]{display:none}

/* user chip */
.m-user{display:flex;align-items:center;gap:9px;height:38px;padding:0 9px 0 5px;border-radius:var(--r-full)}
.m-user:hover{background:var(--surface-sunken)}
.m-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-press);
  font:600 11.5px/1 var(--font);overflow:hidden;
}
.m-avatar--lg{width:40px;height:40px;font-size:14px}
.m-avatar--sm{width:24px;height:24px;font-size:10px}
.m-user__x{display:flex;flex-direction:column;min-width:0;text-align:start}
.m-user__x b{font:var(--ty-label);color:var(--text);white-space:nowrap}
.m-user__x span{font:var(--ty-caption);color:var(--text-3);white-space:nowrap}

/* ============================================================== SCOPE BAR
   A drawer, not furniture. It is closed by default and the top-bar filter
   button opens it; that button carries a dot while the scope is narrowed,
   so a closed bar can never hide an active filter. */

.m-scope[hidden]{display:none}
.m-scope{
  grid-area:scope;display:flex;flex-direction:column;
  background:var(--surface);border-bottom:1px solid var(--line);
}
/* left: the global scope. right: the slot the current page's own filter bar
   is lifted into, so the product has one filter surface instead of ten. */
.m-scope__g,.m-scope__p{
  display:flex;align-items:center;gap:var(--s-2);
  padding:7px var(--gutter);min-width:0;flex-wrap:wrap;
}
/* Two rows, always in the same order: what the whole console is narrowed to,
   then what THIS page is narrowed to. Side by side they wrapped anyway on
   any page with more than three filters, and a divider that is a vertical
   rule on one screen and nothing on the next is worse than no divider. */
.m-scope__g{min-height:var(--filterbar-h)}
.m-scope__p{border-top:1px solid var(--line-subtle);background:var(--surface-subtle)}
.m-scope__p:empty{display:none}
.m-scope__p > .p-filters{
  margin:0;padding:0;border:0;background:none;box-shadow:none;width:100%;
}
.m-scope__l{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--ty-label-sm);color:var(--text-3);flex:0 0 auto;
}
.m-scope__l svg{width:14px;height:14px}
.m-scope__sep{width:1px;height:20px;background:var(--line);flex:0 0 auto;margin-inline:var(--s-1)}
.m-scope__count{font:var(--ty-caption);color:var(--text-2)}
.m-scope__count b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}

/* a scope picker button that opens a menu */
.m-picker{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:var(--ty-label-sm);
  white-space:nowrap;max-width:230px;
}
.m-picker:hover{border-color:var(--c-n-400);background:var(--surface-sunken)}
.m-picker.is-active{border-color:var(--accent-soft-line);background:var(--accent-soft);color:var(--accent-press)}
.m-picker svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.m-picker__t{overflow:hidden;text-overflow:ellipsis}
.m-picker__n{
  min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;font:600 10px/17px var(--font);
}

/* ============================================================== MENU / POPOVER */

.m-menu{
  position:absolute;z-index:var(--z-popover);
  min-width:212px;max-width:340px;padding:5px;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
  animation:m-rise var(--t-fast) var(--ease-out) both;
  max-height:min(70vh,520px);overflow:auto;
}
.m-menu[hidden]{display:none}
.m-menu__t{padding:7px 10px 4px;font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.m-menu__sep{height:1px;margin:4px 0;background:var(--line-subtle)}
.m-menu__i{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border-radius:var(--r-sm);text-align:start;
  font:var(--ty-body-sm);color:var(--text);
}
.m-menu__i:hover{background:var(--surface-sunken)}
.m-menu__i svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-2)}
.m-menu__i[aria-checked="true"]{color:var(--accent-press);font-weight:550}
.m-menu__i[aria-checked="true"] svg{color:var(--accent)}
.m-menu__i--danger{color:var(--critical)}
.m-menu__i--danger svg{color:var(--critical)}
.m-menu__i__x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.m-menu__i__x b{font-weight:600}
.m-menu__i__x span{font:var(--ty-caption);color:var(--text-3)}
.m-menu__i__n{margin-inline-start:auto;font:var(--ty-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.m-menu__i__dot{width:9px;height:9px;border-radius:var(--r-full);flex:0 0 auto}
.m-menu__search{padding:5px 5px 7px;position:sticky;top:0;background:var(--surface-raised);z-index:1}
.m-menu__foot{display:flex;gap:var(--s-2);padding:7px 5px 3px;border-top:1px solid var(--line-subtle);margin-top:4px}

/* ============================================================== MAIN / PAGE */

.m-main{grid-area:main;position:relative;min-height:0;overflow:hidden}
/* ONE SCROLL PER SCREEN.
   Every page used to be a column of cards inside a scrolling page: the
   window scrolled, a card inside it scrolled, and a table inside that
   scrolled again, so nothing ever had a fixed edge and no two pages agreed
   on where the content ended. A page now fills the viewport exactly and
   does not scroll. Whatever must scroll is ONE named region inside it —
   marked .m-fit, or the last card — and everything else keeps its place. */
.m-page{
  position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;
  padding:var(--s-3) var(--gutter) var(--s-4);
  display:flex;flex-direction:column;gap:10px;
  animation:m-fade var(--t-base) var(--ease) both;
}
.m-page--flush{padding:0;overflow:hidden;gap:0}
/* THE ONE EXCEPTION. A record's dossier — every fact about one vehicle —
   is a document, not a console view: it scrolls as one piece, and nothing
   inside it scrolls on its own. */
.m-page--scroll{overflow:auto}
.m-page--scroll > :last-child{flex:0 0 auto;overflow:visible}

/* ============================================================ PAGE HEADER
   ONE BAND, THREE COLUMNS, and the middle one is the middle of the PAGE.
   The old header was a flex row: the title took what it needed, the buttons
   took what they needed and the figures floated in whatever was left, which
   is why the same KPI line sat at 48% on one page and 61% on the next. It is
   a grid now — 1fr | auto | 1fr — so the figures are centred on the page
   width and stay there whatever the title says or however many buttons the
   page carries. The band itself is a surface with a hairline under it, so
   the chrome of the page is visibly separate from its content instead of
   dissolving into the ground. */
/* THE PAGE BAND IS GONE — see .m-top__title. The page still DECLARES its
   head (its title, its buttons, its figures); the shell lifts every part of
   it into the global bar and what is left takes no height. */
.m-page-head,.m-head__top{display:none !important}
/* THE HOLE A LIFTED THING LEAVES BEHIND TAKES NO SPACE.
   The tab strip, the figure line and the filter bar are lifted onto the
   shell's band, and the containers they came out of stay in the page —
   empty, invisible, and still charged a flex or grid gap each. Ten to
   forty pixels of nothing was sitting between the band and the first real
   thing on most pages. A container something was lifted from is marked at
   lift time; while it stands empty it is simply not there. */
.m5-origin:empty{display:none}
/* pages keep conditional slots of their own (a guard banner, a notice) that
   stand empty most of the time — an empty slot is not a thing to leave a
   gap for either */
.m-page > div[id]:empty{display:none}
.m-head{display:contents}
.m-page-head--keep{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:var(--s-4);
  margin:0 calc(var(--gutter) * -1);
  padding:6px var(--gutter);
  min-height:42px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
/* the tab strip continues the same band, so the hairline closes the pair */
.m-page-head:has(+ .m-tabs--head){border-bottom:0}
/* The page keeps its own top padding. It gave it up while the header band
   was the first thing in it and had to start at the very top edge; with the
   band gone, dropping the padding only pushed the first card against the
   bar. */
.m-page--flush .m-tabs--head{margin-inline:0}
/* the title and whatever identifies the record read across ONE line */
.m-page-head__x{
  grid-column:1;display:flex;flex-direction:row;align-items:baseline;
  gap:8px;min-width:0;
}
.m-page-head__x h1{
  font:var(--ty-h1);color:var(--text);letter-spacing:-.018em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* a record's identity line — kind, municipality, reference. Never a
   sentence explaining the page: the page's name is the explanation. */
.m-page-head__x p{
  font:var(--ty-caption);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.m-page-head__acts{
  grid-column:3;justify-self:end;
  display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto;
}

.m-crumbs{display:flex;align-items:center;gap:5px;font:var(--ty-caption);color:var(--text-3);flex-wrap:wrap}
.m-crumbs a{color:var(--text-2)}
.m-crumbs svg{width:12px;height:12px;opacity:.6}
html[dir="rtl"] .m-crumbs svg{transform:scaleX(-1)}
.m-crumbs b{color:var(--text);font-weight:550}

/* the layout grids a page composes with */
.m-grid{display:grid;gap:var(--s-4);min-width:0}
.m-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-grid--main-rail{grid-template-columns:minmax(0,1fr) 340px}
.m-grid--rail-main{grid-template-columns:300px minmax(0,1fr)}
.m-grid--3rail{grid-template-columns:232px minmax(0,1fr) 348px}

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

/* NO MORE SIDE SHEET. Every record and detail opens as ONE thing: a
   centred floating dialog, the same shape as the tabbed record popup —
   rounded, raised, and rising into place. Physical left/top so the same
   maths centres it in both directions. */
.m-drawer{
  position:fixed;left:50%;top:50%;z-index:var(--z-drawer);
  width:min(720px,94vw);max-height:min(86vh,840px);
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-subtle);
  border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-xl);
  transform:translate(-50%,-48%) scale(.97);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease),
             visibility var(--t-base);
}
.m-drawer.is-open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;visibility:visible;pointer-events:auto;
}
.m-drawer--wide{width:min(880px,96vw)}
.m-drawer__head{
  display:flex;align-items:flex-start;gap:var(--s-3);flex:0 0 auto;
  padding:16px var(--s-6) 13px;border-bottom:1px solid var(--line-subtle);
}
.m-drawer__head h2{font:var(--ty-h2)}
.m-drawer__head p{font:var(--ty-caption);color:var(--text-2)}
.m-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--card-pad-lg)}
.m-drawer__body--flush{padding:0}
.m-drawer__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);
  padding:12px var(--card-pad-lg);border-top:1px solid var(--line);background:var(--surface);
}
.m-drawer-scrim{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);
  background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity var(--t-slow) var(--ease);
}
.m-drawer-scrim.is-open{opacity:1;pointer-events:auto}

/* ============================================================== MODAL */

.m-modal-scrim{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;padding:var(--s-5);
  background:var(--scrim);
  animation:m-fade var(--t-base) var(--ease) both;
}
.m-modal-scrim[hidden]{display:none}
.m-modal{
  display:flex;flex-direction:column;min-width:0;
  width:min(620px,100%);max-height:88vh;
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);
  animation:m-rise var(--t-base) var(--ease-out) both;
}
.m-modal--wide{width:min(980px,100%)}
.m-modal--narrow{width:min(440px,100%)}
.m-modal__head{
  display:flex;align-items:flex-start;gap:var(--s-3);flex:0 0 auto;
  padding:18px var(--s-6) 14px;border-bottom:1px solid var(--line-subtle);
}
.m-modal__head h2{font:var(--ty-h2)}
.m-modal__head p{font:var(--ty-caption);color:var(--text-2);margin-top:2px}
.m-modal__body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--s-5) var(--s-6)}
.m-modal__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);
  padding:14px var(--s-6) 18px;border-top:1px solid var(--line-subtle);
}

/* ------------------------------------------------ a record in a dialog
   The tabbed modal: a head that identifies the record, a strip that says
   which part of it is open, one scrolling body and a foot that carries the
   things you can do to it. The height is fixed so moving between tabs does
   not make the dialog jump under the pointer. */
.m-modal--tall{min-height:min(460px,80vh);max-height:88vh}
.m-modal--tabbed .m-modal__head{padding:14px var(--s-6) 10px;border-bottom:0}
.m-modal--tabbed .m-modal__head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-modal__badge{display:inline-flex;align-items:center;gap:6px}
.m-modal__tabs{
  flex:0 0 auto;padding-inline:var(--s-6);
  border-bottom:1px solid var(--line);
}
.m-modal__tabs .m-tabs{gap:2px;border-bottom:0}
.m-modal__tabs .m-tab{height:34px;padding:0 12px;font-size:12px}
.m-modal__tabs .m-tab[aria-selected="true"]::after{inset-inline:0;bottom:-1px}
.m-modal--tabbed .m-modal__body{padding:var(--s-4) var(--s-6) var(--s-5)}
.m-modal--tabbed .m-modal__foot{padding:10px var(--s-6) 12px;flex-wrap:wrap;row-gap:8px}
.m-modal__hint{font:var(--ty-caption);color:var(--text-3)}
.m-modal__hint b{color:var(--text-2);font-weight:600}

/* ============================================================== RESPONSIVE */

@media (max-width:1500px){
  .m-grid--3rail{grid-template-columns:212px minmax(0,1fr) 320px}
}
@media (max-width:1300px){
  :root{--nav-w:212px;--gutter:16px}
  .m-grid--3rail{grid-template-columns:minmax(0,1fr) 316px}
  .m-grid--3rail > :first-child{display:none}
  .m-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .m-grid--main-rail,.m-grid--rail-main,.m-grid--3rail{grid-template-columns:minmax(0,1fr)}
  .m-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-top__product span{display:none}
}
@media (max-width:900px){
  .m-shell{grid-template-columns:0 minmax(0,1fr)}
  .m-nav{
    position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--nav-w);
    transform:translateX(-102%);transition:transform var(--t-slow) var(--ease);
    z-index:var(--z-drawer);
  }
  html[dir="rtl"] .m-nav{transform:translateX(102%)}
  .m-shell.is-nav-open .m-nav{transform:none}
  .m-grid--2,.m-grid--3,.m-grid--4{grid-template-columns:minmax(0,1fr)}
  .m-top__product span{display:none}
}
@media (max-width:640px){
  :root{--gutter:12px}
  .m-top__product b{display:none}
  .m-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================== BAND ACTS
   The page's own buttons, lifted to the end of the band — the page header
   line — instead of the global top bar. One labelled primary action;
   every other button shows only its icon, with its name in the tooltip. */
.m-band__acts{flex:0 0 auto;display:flex;align-items:center;margin-inline-start:12px}
.m-band__acts:empty{display:none}
/* no figures on the line → the buttons take the end of it themselves */
.m-band__figs:empty + .m-band__acts{margin-inline-start:auto}
.m-band__acts .m-page-head__acts{display:flex;align-items:center;gap:6px}
.m-band__acts .m-btn:not(.m-btn--primary):has(svg) > span{display:none}
.m-band__acts .m-btn:not(.m-btn--primary):has(svg){
  width:32px;height:32px;padding:0;justify-content:center;border-radius:var(--r-md);
}
.m-band__acts .m-btn:not(.m-btn--primary):has(svg) svg{width:16px;height:16px}
.m-band__acts .m-search{width:min(240px,26vw)}

/* ============================================================== SIGN-IN
   The door. A brand panel carrying live figures out of the booted store,
   and a form that signs in against the real account register. Logical
   properties throughout, so Arabic mirrors it for free. */
.lg{
  position:fixed;inset:0;z-index:var(--z-toast);
  display:flex;background:var(--bg);
}
.lg[hidden]{display:none}
.lg__brand{
  flex:1 1 54%;min-width:0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,var(--nav-bg) 12%,var(--nav-bg-2) 88%);
  color:#fff;
}
.lg__brand::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(560px 420px at 82% 14%, rgba(64,150,255,.16), transparent 60%),
    radial-gradient(640px 520px at 8% 92%, rgba(15,157,138,.13), transparent 62%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:auto,auto,26px 26px;
}
.lg__brandin{position:relative;max-width:520px;padding:48px;display:flex;flex-direction:column;gap:14px}
.lg__mark{display:flex;align-items:center;gap:14px;margin-block-end:8px}
.lg__word b{display:block;font:800 30px/1 var(--font);letter-spacing:.4px}
.lg__word span{display:block;margin-top:3px;font:600 15px/1 var(--font);opacity:.72}
.lg__brandin h1{margin:0;font:650 21px/1.5 var(--font);color:#fff}
.lg__tagar{margin:0;font:500 14.5px/1.9 var(--font);color:rgba(255,255,255,.62)}
.lg__facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.lg__facts li{display:flex;align-items:center;gap:9px;font:500 13px/1.5 var(--font);color:rgba(255,255,255,.78)}
.lg__facts svg{color:var(--ok-fill);flex:0 0 auto}
.lg__facts b{font-variant-numeric:tabular-nums;color:#fff}
.lg__foot{margin-block-start:26px;font:500 11.5px/1.6 var(--font);color:rgba(255,255,255,.4)}
.lg__panel{
  flex:1 1 46%;min-width:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;overflow:auto;
}
.lg__tools{position:absolute;inset-block-start:18px;inset-inline-end:20px}
.lg__card{width:min(400px,100%);display:flex;flex-direction:column;gap:12px}
.lg__card h2{margin:0;font:var(--ty-h1);color:var(--text)}
.lg__sub{margin:-8px 0 8px;font:var(--ty-body-sm);color:var(--text-2)}
.lg__pass{position:relative;display:block}
.lg__pass .m-input{width:100%;padding-inline-end:40px}
.lg__pass .m-icon-btn{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:5px}
.lg__go{margin-block-start:4px;height:40px}
.lg__or{display:flex;align-items:center;gap:12px;margin-block:10px 2px;color:var(--text-3);font:var(--ty-caption)}
.lg__or::before,.lg__or::after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
.lg__whos{display:flex;flex-direction:column;gap:7px}
.lg__who{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 12px;border-radius:var(--r-md);cursor:pointer;text-align:start;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.lg__who:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.lg__who:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lg__who-ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);
}
.lg__who-x{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.lg__who-x b{font:600 12.8px/16px var(--font);color:var(--text)}
.lg__who-x span{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg__who > svg:last-child{flex:0 0 auto;color:var(--text-3)}
html[dir="rtl"] .lg__who > svg:last-child{transform:scaleX(-1)}
.lg__note{
  margin:10px 0 0;display:flex;align-items:flex-start;gap:6px;
  font:var(--ty-caption);color:var(--text-3);line-height:1.6;
}
.lg__note svg{flex:0 0 auto;margin-top:2px;opacity:.7}
@media (max-width:960px){
  .lg{flex-direction:column;overflow:auto}
  .lg__brand{flex:0 0 auto;min-height:200px}
  .lg__brandin{padding:28px;gap:8px}
  .lg__brandin h1{font-size:16px}
  .lg__facts{display:none}
  .lg__panel{align-items:flex-start}
}

/* -- the applied-filters overview under the pickers ---------------------- */
.m-scope__g .m-push{margin-inline-start:auto}
.m-scope__chips{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:0 var(--gutter) 8px;
}
.m-scope__chips[hidden]{display:none}
.m-scope__cl{font:var(--ty-caption);color:var(--text-3);margin-inline-end:3px}

/* the scope badge counts filters, not trouble — accent, not alarm red */
#mScopeDot{background:var(--accent);color:var(--text-on-accent,#fff)}