/* ==========================================================================
   MASAR v9.9 — 13-frame.css
   ONE FRAME. The navigation and the top bar are the same surface, the same
   line and the same height, so the console reads as one piece of chrome
   around the work instead of a navy slab bolted to a white strip. The brand
   lives in the mark and in the accent of the row you are standing on.
   The rail collapses to a 72px column of icon tiles with a flyout that names
   each one; the control that collapses it sits at the foot of the rail.
   Loaded last; tokens only.
   ========================================================================== */

:root{
  --nav-w:236px;
  --nav-w-rail:72px;
  --top-h:56px;
  --nav-bg:           var(--surface);
  --nav-bg-2:         var(--surface);
  --nav-item:         var(--text-2);
  --nav-item-hover:   var(--text);
  --nav-item-hover-bg:var(--surface-sunken);
  --nav-item-on:      var(--accent-press);
  --nav-item-on-bg:   var(--accent-soft);
  --nav-item-on-hover:var(--accent-soft);
  --nav-brand:        var(--text);
  --nav-group:        var(--text-3);
  --nav-line:         var(--line);
  --nav-count-bg:     var(--surface-sunken);
  --nav-count-fg:     var(--text-2);
  --nav-count-on-bg:  var(--surface);
  --mark-bg:          transparent;
  --mark-line:        transparent;
}
html[data-theme="dark"]{
  --nav-bg:           var(--surface);
  --nav-bg-2:         var(--surface);
  --nav-item:         #A9B8CA;
  --nav-item-hover:   #EAF2FA;
  --nav-item-hover-bg:rgba(255,255,255,.05);
  --nav-item-on:      #CFE0FF;
  --nav-item-on-bg:   var(--accent-soft);
  --nav-item-on-hover:var(--accent-soft);
  --nav-brand:        #EAF2FA;
  --nav-group:        #6F829A;
  --nav-line:         var(--line);
  --nav-count-bg:     rgba(255,255,255,.07);
  --nav-count-fg:     #C3D1E2;
  --nav-count-on-bg:  rgba(255,255,255,.12);
  --mark-bg:          #FFFFFF;
  --mark-line:        rgba(255,255,255,.1);
}

/* ---------------------------------------------------------------- rail */
.m-nav{background:var(--nav-bg);border-inline-end:1px solid var(--nav-line);box-shadow:none}
.m-nav__foot::after{display:none}
.m-nav__brand{height:var(--top-h);padding:0 18px;gap:11px;border-bottom:1px solid var(--nav-line)}
.m-nav__mark{width:34px;height:34px;border-radius:10px;background:var(--mark-bg);box-shadow:0 0 0 1px var(--mark-line)}
.m-nav__mark img{width:26px;height:26px}
.m-nav__wordmark b{font:750 15px/18px var(--font);letter-spacing:.02em;color:var(--nav-brand)}
.m-nav__wordmark span{font:600 9.5px/12px var(--font);letter-spacing:.14em;color:var(--nav-group)}

.m-nav__scroll{padding:10px 12px 16px}
.m-nav__group{display:flex;align-items:center;gap:8px;height:28px;margin:12px 0 2px;padding:0 10px;
  font:700 10.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--nav-group);white-space:nowrap}
.m-nav__group:first-child{margin-top:2px}
.m-nav__group span{overflow:hidden;text-overflow:ellipsis}

.m-nav-item{height:38px;padding:0 10px;gap:11px;margin-bottom:2px;border-radius:10px;font:560 13px/1 var(--font);color:var(--nav-item)}
.m-nav-item__ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;margin-inline-start:-4px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.m-nav-item__ic svg{width:18px;height:18px}
.m-nav-item:hover{background:var(--nav-item-hover-bg);color:var(--nav-item-hover)}
.m-nav-item__n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);font:650 10.5px/20px var(--font);background:var(--nav-count-bg);color:var(--nav-count-fg)}
.m-nav-item__n--alert{background:var(--crit-fill);color:#fff}
.m-nav-item[aria-current="page"]{background:var(--nav-item-on-bg);color:var(--nav-item-on);font-weight:650}
.m-nav-item[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
[dir="rtl"] .m-nav-item[aria-current="page"]::before{border-radius:4px 0 0 4px}
.m-nav-item[aria-current="page"] .m-nav-item__ic{background:var(--accent);color:var(--text-on-accent);box-shadow:0 4px 10px -4px var(--accent)}
.m-nav-item[aria-current="page"] .m-nav-item__n{background:var(--nav-count-on-bg);color:var(--nav-item-on);box-shadow:0 0 0 1px var(--accent-soft)}
.m-nav-item[aria-current="page"] .m-nav-item__n--alert{background:var(--crit-fill);color:#fff}

/* the foot: the collapse control */
.m-nav__foot{padding:10px 12px;border-top:1px solid var(--nav-line);display:flex;align-items:center}
.m-nav__collapse{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:10px;background:transparent;
  color:var(--nav-group);font:600 12px/1 var(--font);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.m-nav__collapse:hover{background:var(--nav-item-hover-bg);color:var(--nav-item-hover)}
.m-nav__collapse i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--nav-line);flex:0 0 auto;
  transition:transform var(--t-slow) var(--ease)}
.m-nav__collapse i svg{width:15px;height:15px}
[dir="rtl"] .m-nav__collapse i{transform:scaleX(-1)}

/* ---------------------------------------------------------- collapsed */
.m-shell{transition:grid-template-columns .28s cubic-bezier(.2,.8,.2,1)}
.is-rail .m-nav__brand{justify-content:center;padding:0}
.is-rail .m-nav__scroll{padding:10px 0 16px}
.is-rail .m-nav__group{height:13px;margin:10px 18px 7px;padding:0;font-size:0;color:transparent}
.is-rail .m-nav__group::after{content:"";flex:1 1 auto;height:1px;background:var(--nav-line)}
.is-rail .m-nav__group:first-child{display:none}
.is-rail .m-nav-item{width:48px;height:44px;margin:0 auto 4px;padding:0;justify-content:center;border-radius:12px;background:transparent}
.is-rail .m-nav-item__ic{width:40px;height:40px;border-radius:11px;margin:0}
.is-rail .m-nav-item__ic svg{width:20px;height:20px}
.is-rail .m-nav-item:hover{background:transparent}
.is-rail .m-nav-item:hover .m-nav-item__ic{background:var(--nav-item-hover-bg);color:var(--nav-item-hover)}
.is-rail .m-nav-item[aria-current="page"]{background:transparent}
.is-rail .m-nav-item[aria-current="page"]::before{inset-inline-start:-12px}
.is-rail .m-nav-item__n{position:absolute;top:3px;inset-inline-end:3px;min-width:16px;width:auto;height:16px;padding:0 4px;
  border-radius:8px;font:700 9.5px/16px var(--font);color:#fff;background:var(--accent);box-shadow:0 0 0 2px var(--nav-bg);overflow:visible}
.is-rail .m-nav-item__n--alert{background:var(--crit-fill)}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__n{background:var(--c-blue-400, var(--accent));color:#fff}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__n--alert{background:var(--crit-fill)}
.is-rail .m-nav__foot{justify-content:center;padding:10px 0}
.is-rail .m-nav__collapse{width:48px;justify-content:center;padding:0}
.is-rail .m-nav__collapse span{display:none}
.is-rail .m-nav__collapse i{transform:rotate(180deg)}
[dir="rtl"] .is-rail .m-nav__collapse i{transform:scaleX(-1) rotate(180deg)}

/* the flyout that names a collapsed icon */
.m-nav-tip{position:fixed;z-index:9999;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;pointer-events:none;
  background:var(--surface-inverse, #0f1b2b);color:var(--bg, #fff);font:600 12px/1 var(--font);white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(9,30,54,.45);opacity:0;transform:translate(-4px,-50%);transition:opacity .12s ease,transform .12s ease}
.m-nav-tip.is-on{opacity:1;transform:translate(0,-50%)}
.m-nav-tip.is-rtl{transform:translate(4px,-50%)}
.m-nav-tip.is-rtl.is-on{transform:translate(0,-50%)}
.m-nav-tip::before{content:"";position:absolute;top:50%;inset-inline-start:-4px;width:8px;height:8px;background:inherit;transform:translateY(-50%) rotate(45deg);border-radius:1px}
.m-nav-tip i{font-style:normal;font:700 10.5px/18px var(--font);min-width:18px;padding:0 5px;border-radius:9px;text-align:center;background:var(--accent);color:#fff}
.m-nav-tip i.is-alert{background:var(--crit-fill)}
html[data-theme="dark"] .m-nav-tip{background:#E3EDF7;color:#0B1622}

/* -------------------------------------------------------------- top bar */
.m-top{background:var(--surface);border-bottom:1px solid var(--nav-line);gap:12px}
@media (min-width:901px){ #mNavToggle{display:none} }
.m-top__title{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
.m-top__crumb{font:700 10px/12px var(--font);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.m-top__title b{font:700 17px/21px var(--font);letter-spacing:-.015em}
.m-top__title span{display:none}
.m-top__clock{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border-radius:var(--r-full);
  background:var(--surface-sunken);border:1px solid var(--line-subtle);font:600 11px/1 var(--font);color:var(--text-3);white-space:nowrap}
.m-top__clock i{width:7px;height:7px;border-radius:50%;background:var(--ok-fill);box-shadow:0 0 0 3px var(--ok-soft);animation:frmBeat 2s ease-in-out infinite}
.m-top__clock span{letter-spacing:.08em;color:var(--ok)}
.m-top__clock b{font:700 13px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.02em}
@keyframes frmBeat{0%,100%{box-shadow:0 0 0 2px var(--ok-soft)}50%{box-shadow:0 0 0 5px var(--ok-soft)}}
.m-top__tools{display:flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--surface-sunken);border:1px solid var(--line-subtle)}
.m-top__tools .m-icon-btn{width:34px;height:34px;border-radius:9px;color:var(--text-2)}
.m-top__tools .m-icon-btn:hover{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs)}
.m-top__tools .m-user{margin-inline-start:6px;padding:3px 8px 3px 3px;height:36px;border-radius:10px;background:var(--surface);box-shadow:var(--sh-xs)}
[dir="rtl"] .m-top__tools .m-user{padding:3px 3px 3px 8px}
.m-top__tools .m-avatar{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--text-on-accent);font-weight:700}
.m-icon-btn__badge{box-shadow:0 0 0 2px var(--surface-sunken)}

/* the page band sits on the canvas, under the frame */
.m-band{padding-top:10px}

@media (max-width:900px){
  .m-top__clock span{display:none}
  .m-nav{box-shadow:var(--sh-lg, 0 20px 40px rgba(0,0,0,.2))}
}
/* fit thirteen doors and five headings on a laptop screen */
.m-nav-item{height:35px;margin-bottom:1px}
.m-nav__group{height:22px;margin:8px 0 1px}
.m-nav__scroll{padding-top:6px}
@media (max-height:760px){ .m-nav-item{height:32px} .m-nav-item__ic{width:26px;height:26px} .m-nav__group{height:18px;margin-top:6px} }

/* ==========================================================================
   v9.9.1 — A FRAME WITH COLOUR
   One surface was calm but flat. The frame is the brand navy now — the rail
   and the top bar as ONE L-shaped piece of chrome with a soft glow — and the
   work floats inside it on a light canvas with a rounded corner. The frame
   and the canvas differ; the rail and the bar still match each other.
   ========================================================================== */
:root{
  --frame-a:#0E2340;
  --frame-b:#10284A;
  --frame-c:#1B2F6B;
  --nav-bg:           transparent;
  --nav-bg-2:         transparent;
  --nav-item:         #AFC0D6;
  --nav-item-hover:   #FFFFFF;
  --nav-item-hover-bg:rgba(255,255,255,.07);
  --nav-item-on:      #FFFFFF;
  --nav-item-on-bg:   rgba(255,255,255,.10);
  --nav-item-on-hover:rgba(255,255,255,.14);
  --nav-brand:        #FFFFFF;
  --nav-group:        #7E95B4;
  --nav-line:         rgba(255,255,255,.08);
  --nav-count-bg:     rgba(255,255,255,.10);
  --nav-count-fg:     #D5E2F2;
  --nav-count-on-bg:  rgba(255,255,255,.18);
  --mark-bg:          #FFFFFF;
  --mark-line:        rgba(255,255,255,.18);
}
html[data-theme="dark"]{
  --frame-a:#060D18;
  --frame-b:#0A1526;
  --frame-c:#141C3C;
  --nav-bg:transparent; --nav-bg-2:transparent;
  --nav-item:#9FB0C6; --nav-item-hover:#fff; --nav-item-hover-bg:rgba(255,255,255,.06);
  --nav-item-on:#fff; --nav-item-on-bg:rgba(255,255,255,.08);
  --nav-brand:#EAF2FA; --nav-group:#6A7F9C; --nav-line:rgba(255,255,255,.06);
  --nav-count-bg:rgba(255,255,255,.08); --nav-count-fg:#C3D1E2; --nav-count-on-bg:rgba(255,255,255,.14);
  --mark-bg:#FFFFFF; --mark-line:rgba(255,255,255,.1);
}

.m-shell{
  background:
    radial-gradient(600px 380px at 0% 100%,rgba(90,120,255,.22),transparent 70%),
    radial-gradient(520px 200px at 100% 0%,rgba(80,200,255,.12),transparent 70%),
    linear-gradient(160deg,var(--frame-a) 0%,var(--frame-b) 45%,var(--frame-c) 100%);
}
/* the canvas the work sits on — one rounded panel behind the scope, band and page */
.m-shell::before{
  content:"";grid-column:2;grid-row:2 / 5;z-index:0;
  background:var(--bg);border-start-start-radius:20px;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.06),-8px -8px 30px -12px rgba(0,0,0,.35);
}
.m-scope,.m-band,.m-main{position:relative;z-index:1}
.m-scope{background:transparent;border-bottom:1px solid var(--line)}
.m-band{padding-top:12px}

/* rail — transparent on the frame, the brand block has no line under it */
.m-nav{background:transparent;border-inline-end:0}
.m-nav__brand{border-bottom:0}
.m-nav__foot{border-top:1px solid var(--nav-line)}
.m-nav__collapse i{border-color:rgba(255,255,255,.14)}
.m-nav-item[aria-current="page"]{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
[dir="rtl"] .m-nav-item[aria-current="page"]{background:linear-gradient(270deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.m-nav-item[aria-current="page"]::before{background:#6EA8FF;box-shadow:0 0 12px #6EA8FF}
.m-nav-item[aria-current="page"] .m-nav-item__ic{background:linear-gradient(135deg,#4C8DFF,#6C5CE7);color:#fff;box-shadow:0 6px 16px -6px #4C8DFF}
.m-nav-item[aria-current="page"] .m-nav-item__n{box-shadow:none}
.is-rail .m-nav-item[aria-current="page"]{background:transparent;box-shadow:none}
.is-rail .m-nav-item__n{box-shadow:0 0 0 2px var(--frame-b)}

/* top bar — transparent on the frame, white type */
.m-top{background:transparent;border-bottom:0}
.m-top__title b{color:#fff}
.m-top__crumb{color:#8FB6FF}
.m-top #mNavToggle{color:#D5E2F2}
.m-top__clock{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);color:#AFC0D6}
.m-top__clock b{color:#fff}
.m-top__clock span{color:#6EE7B7}
.m-top__clock i{background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.25)}
@keyframes frmBeat{0%,100%{box-shadow:0 0 0 2px rgba(52,211,153,.25)}50%{box-shadow:0 0 0 5px rgba(52,211,153,.18)}}
.m-top__tools{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}
.m-top__tools .m-icon-btn{color:#D5E2F2}
.m-top__tools .m-icon-btn:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.m-top__tools .m-user{background:rgba(255,255,255,.10);box-shadow:none;color:#fff}
.m-top__tools .m-user b{color:#fff}
.m-top__tools .m-user span{color:#AFC0D6}
.m-top__tools .m-user svg{color:#AFC0D6}
.m-top__tools .m-avatar{background:linear-gradient(135deg,#4C8DFF,#6C5CE7);color:#fff}
.m-icon-btn__badge{box-shadow:0 0 0 2px var(--frame-b)}

/* the flyout reads on the navy frame */
.m-nav-tip{background:#fff;color:#0E2340}
html[data-theme="dark"] .m-nav-tip{background:#E3EDF7;color:#0B1622}

@media (max-width:900px){
  .m-nav{background:linear-gradient(160deg,var(--frame-a),var(--frame-c))}
  .m-shell::before{border-radius:0}
}

/* v9.9.2 — the canvas is a floating panel: rounded on every corner, with the
   frame showing around it on the end side and the bottom */
:root{--canvas-gap:12px}
.m-shell::before{margin:0 var(--canvas-gap) var(--canvas-gap) 0;margin-inline:0 var(--canvas-gap);border-radius:18px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05)}
.m-scope,.m-band,.m-main{margin-inline-end:var(--canvas-gap)}
.m-main{margin-bottom:var(--canvas-gap);border-end-start-radius:18px;border-end-end-radius:18px}
.m-scope{border-start-start-radius:18px;border-start-end-radius:18px;padding-top:4px}
.m-scope + .m-band,.m-band{padding-inline:calc(var(--gutter) - 2px)}
/* a pressed tool in the top bar reads on the navy, not as a white box */
.m-top__tools .m-icon-btn[aria-expanded="true"],.m-top__tools .m-icon-btn[aria-pressed="true"],.m-top__tools .m-icon-btn.is-on{
  background:rgba(110,168,255,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(110,168,255,.45)}
@media (max-width:900px){ :root{--canvas-gap:0px} .m-shell::before{border-radius:0} }

/* v9.9.3 — quieter rail: no group headings, no divider lines, and the
   current page's icon is a light tint rather than a filled gradient tile */
.m-nav__group{display:none !important}
.m-nav__scroll{padding-top:10px}
.m-nav-item{margin-bottom:3px}
.m-nav__foot{border-top:0}
.m-nav-item[aria-current="page"]::before{display:none}
.m-nav-item[aria-current="page"]{background:rgba(255,255,255,.08);box-shadow:none}
[dir="rtl"] .m-nav-item[aria-current="page"]{background:rgba(255,255,255,.08)}
.m-nav-item[aria-current="page"] .m-nav-item__ic{background:transparent;color:#8FB6FF;box-shadow:none}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__ic{background:rgba(255,255,255,.10);color:#8FB6FF}
.m-nav-item__ic{color:inherit;opacity:.9}
.m-top__crumb{display:none}

/* v10 — the filter drawer carries the page's filters too */
.m-scope{box-shadow:0 10px 24px -18px rgba(9,30,54,.35)}
.m-scope__p{background:transparent;border-top:1px dashed var(--line);gap:8px}
.m-scope__p[hidden]{display:none}
.m-scope__p::before{content:attr(data-l);display:inline-flex;align-items:center;height:30px;padding:0 10px;margin-inline-end:4px;border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent-press);font:700 10.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.m-scope__p > *{flex:0 0 auto}
.m-scope__p .p-rp9__tools{flex:1 1 auto}
.m-scope__p .p-filters{background:transparent;border:0;padding:0}
.m-scope__p .p-filters{display:flex;flex:1 1 auto;align-items:center;flex-wrap:wrap;gap:8px;min-height:0;margin:0}
.m-scope__p .p-filters__l{display:none}
.m-scope__p{flex-wrap:nowrap}
.m-scope__p > .p-filters,.m-scope__p > [data-page-filters].p-filters{flex:1 1 0 !important;width:auto !important;min-width:0;border:0 !important;padding:0 !important;background:none !important}

/* v10.2 — every icon sits on its own soft tile; the page you are on is the
   same tile in the deep accent */
.m-nav-item__ic{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:10px;opacity:1;color:#B9C8DC;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.m-nav-item:hover .m-nav-item__ic{background:rgba(255,255,255,.11);color:#fff}
.m-nav-item[aria-current="page"]{background:rgba(255,255,255,.06)}
[dir="rtl"] .m-nav-item[aria-current="page"]{background:rgba(255,255,255,.06)}
.m-nav-item[aria-current="page"] .m-nav-item__ic{background:#2F6FE0;border-color:#4C8DFF;color:#fff;box-shadow:0 6px 16px -6px rgba(76,141,255,.9)}
.is-rail .m-nav-item{width:52px;height:48px;margin-bottom:6px}
.is-rail .m-nav-item__ic{width:44px;height:44px;border-radius:13px}
.is-rail .m-nav-item:hover .m-nav-item__ic{background:rgba(255,255,255,.12)}
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__ic{background:#2F6FE0;border-color:#4C8DFF;color:#fff}
.is-rail .m-nav-item__n{top:0;inset-inline-end:0}
.is-rail .m-nav__collapse i{width:44px;height:36px;border-radius:12px;background:rgba(255,255,255,.06)}
html[data-theme="dark"] .m-nav-item[aria-current="page"] .m-nav-item__ic{background:#2A5FC4;border-color:#3F7AE6}
.is-rail .m-nav-item{height:42px;margin-bottom:4px}
.is-rail .m-nav-item__ic{width:40px;height:40px;border-radius:12px}
.is-rail .m-nav__scroll{padding-top:6px}
.is-rail .m-nav__foot{padding:6px 0}
.is-rail .m-nav__collapse i{height:32px}
@media (max-height:760px){ .is-rail .m-nav-item{height:36px;margin-bottom:3px} .is-rail .m-nav-item__ic{width:34px;height:34px;border-radius:10px} }

/* v10.3 — softer selection, brighter idle icons, one style for the top-right,
   and the collapse control sits on the canvas's bottom line */
.m-nav-item__ic{background:rgba(143,182,255,.08);border-color:rgba(143,182,255,.10);color:#D3DFEE}
.m-nav-item{color:#D3DFEE}
.m-nav-item:hover .m-nav-item__ic{background:rgba(143,182,255,.16)}
.m-nav-item[aria-current="page"]{background:rgba(143,182,255,.10)}
[dir="rtl"] .m-nav-item[aria-current="page"]{background:rgba(143,182,255,.10)}
.m-nav-item[aria-current="page"] .m-nav-item__ic,
.is-rail .m-nav-item[aria-current="page"] .m-nav-item__ic{background:rgba(96,150,255,.32);border-color:rgba(143,182,255,.45);color:#fff;box-shadow:none}
html[data-theme="dark"] .m-nav-item[aria-current="page"] .m-nav-item__ic{background:rgba(96,150,255,.28);border-color:rgba(143,182,255,.35)}

.m-nav__foot{padding:0 12px var(--canvas-gap);height:auto}
.m-nav__collapse{height:40px;border:1px solid rgba(143,182,255,.14);background:rgba(143,182,255,.06);border-radius:12px;color:#B9C8DC}
.m-nav__collapse:focus{outline:none}
.m-nav__collapse:focus-visible{box-shadow:0 0 0 2px rgba(143,182,255,.5)}
.m-nav__collapse i{border:0;background:transparent}
.is-rail .m-nav__foot{padding:0 0 var(--canvas-gap)}
.is-rail .m-nav__collapse{width:48px;height:40px}
.is-rail .m-nav__collapse i{background:transparent;height:auto}

/* top right: the clock and the tools are one family of pills */
.m-top__clock,.m-top__tools{background:rgba(143,182,255,.08);border:1px solid rgba(143,182,255,.14);border-radius:12px;height:40px}
.m-top__tools{padding:3px}
.m-top__clock{padding:0 14px}
.m-top__tools .m-user{background:rgba(143,182,255,.10);height:32px}
.m-top__tools .m-icon-btn{width:32px;height:32px}
.m-top__tools .m-icon-btn[aria-expanded="true"],.m-top__tools .m-icon-btn.is-on{background:rgba(96,150,255,.28);box-shadow:none}

/* ==========================================================================
   v10.4 — ONE MENU SYSTEM FOR EVERY PAGE
   Level 1 — the page's own sections (the strip the shell lifts into the
     band, and the Admin / Settings family): underline tabs on one hairline,
     icon + label + count, the active one in the accent with a 3px bar.
   Level 2 — everything that switches a view INSIDE a section (sub-tabs,
     Board / List, sort and rank switches, report pickers): one segmented
     control, a quiet track with the active item raised in white.
   Same heights, radii, type and count badges wherever they appear.
   ========================================================================== */
:root{--l1-h:42px;--l2-h:30px}

/* ---- level 1 -------------------------------------------------------- */
.m-band{padding-top:6px;border-bottom:1px solid var(--line);margin-bottom:10px;min-height:calc(var(--l1-h) + 6px);align-items:flex-end}
.m-band__acts{align-self:center}
.m-band__tabs{align-self:stretch;align-items:flex-end}
.m-band__tabs .m-tabs{gap:4px;padding:0;align-items:flex-end;overflow:visible}
.m-band__tabs .m-tab{height:var(--l1-h);padding:0 14px;border-radius:0;background:transparent !important;color:var(--text-2);font:600 13px/1 var(--font);gap:8px}
.m-band__tabs .m-tab svg{width:16px;height:16px;opacity:.75}
.m-band__tabs .m-tab:hover{color:var(--text)}
.m-band__tabs .m-tab::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:background var(--t-fast) var(--ease)}
.m-band__tabs .m-tab:hover::after{background:var(--line-strong)}
.m-band__tabs .m-tab[aria-selected="true"]{color:var(--accent-press);font-weight:700}
.m-band__tabs .m-tab[aria-selected="true"] svg{opacity:1;color:var(--accent)}
.m-band__tabs .m-tab[aria-selected="true"]::after{background:var(--accent)}
.m-band__tabs .m-tab__n{min-width:20px;height:19px;padding:0 6px;border-radius:var(--r-full);font:700 10.5px/19px var(--font);background:var(--surface-sunken);color:var(--text-2)}
.m-band__tabs .m-tab[aria-selected="true"] .m-tab__n{background:var(--accent);color:var(--text-on-accent)}
.m-band__tabs .m-tab__n--alert,.m-band__tabs .m-tab[aria-selected="true"] .m-tab__n--alert{background:var(--crit-fill);color:#fff}

/* the family (Admin · Settings) reads as the same level-1 tabs, set off by a rule */
.m-fam{padding:0;margin-inline-end:8px;background:none !important;border:0;border-radius:0;gap:4px;align-self:stretch;align-items:flex-end;
  padding-inline-end:12px;border-inline-end:1px solid var(--line);margin-bottom:8px;height:calc(var(--l1-h) - 8px)}
.m-fam > button{position:relative;height:calc(var(--l1-h) - 8px);padding:0 12px;border-radius:0;background:none !important;box-shadow:none !important;
  font:600 13px/1 var(--font);color:var(--text-2)}
.m-fam > button[aria-current]{color:var(--text);font-weight:750}
.m-fam > button[aria-current]::after{content:"";position:absolute;inset-inline:8px;bottom:-9px;height:3px;border-radius:3px 3px 0 0;background:var(--text)}

/* ---- level 2 -------------------------------------------------------- */
.m-seg,.p-md9__sub{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:11px;background:var(--surface-sunken);
  border:1px solid var(--line-subtle);box-shadow:none;min-width:0}
.m-seg button,.p-md9__st{position:relative;display:inline-flex;align-items:center;gap:7px;height:var(--l2-h);padding:0 12px;border:0;border-radius:8px;
  background:transparent;color:var(--text-2);font:600 12.5px/1 var(--font);white-space:nowrap;cursor:pointer;box-shadow:none}
.m-seg button svg,.p-md9__st svg{width:14px;height:14px;color:var(--text-3);flex:0 0 auto}
.m-seg button:hover,.p-md9__st:hover{color:var(--text);background:rgba(255,255,255,.55)}
.m-seg button[aria-pressed="true"],.m-seg button.is-on,.p-md9__st.is-on{background:var(--surface);color:var(--text);font-weight:700;
  box-shadow:0 1px 2px rgba(9,30,54,.10),0 0 0 1px var(--line-subtle)}
.m-seg button[aria-pressed="true"] svg,.p-md9__st.is-on svg{color:var(--accent)}
.p-md9__st em{font:700 10.5px/1 var(--font);font-style:normal;padding:3px 6px;border-radius:var(--r-full);background:var(--surface);border:0;color:var(--text-3)}
.p-md9__st.is-on em{background:var(--accent-soft);color:var(--accent-press)}
.m-seg--lg button{height:var(--l2-h);padding:0 14px}
html[data-theme="dark"] .m-seg button:hover,html[data-theme="dark"] .p-md9__st:hover{background:rgba(255,255,255,.05)}
/* a level-2 control in a dialog or a card keeps the same shape, a little smaller */
.m-drawer .m-seg button,.m-modal .m-seg button,.m-card .m-seg button{height:26px;padding:0 10px;font-size:12px}

/* tabs that live INSIDE a record (dialogs, a contractor's record) are level 2 too */
.m-tabs:not(.m-tabs--page),.m-modal__tabs .m-tabs,.m-drawer .m-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface-sunken);border:1px solid var(--line-subtle);overflow-x:auto;max-width:100%}
.m-tabs:not(.m-tabs--page) .m-tab,.m-modal__tabs .m-tab,.m-drawer .m-tab{height:var(--l2-h);padding:0 12px;border-radius:8px;font:600 12.5px/1 var(--font);background:transparent}
.m-tabs:not(.m-tabs--page) .m-tab[aria-selected="true"],.m-modal__tabs .m-tab[aria-selected="true"],.m-drawer .m-tab[aria-selected="true"]{background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgba(9,30,54,.10),0 0 0 1px var(--line-subtle)}
.m-tabs:not(.m-tabs--page) .m-tab[aria-selected="true"] svg{color:var(--accent)}
.m-modal__tabs{padding:8px 20px 0}

/* v10.5 — one icon size, open or collapsed: a 30px tile with an 18px glyph */
.m-nav-item__ic,.is-rail .m-nav-item__ic{width:30px !important;height:30px !important;border-radius:9px !important;margin:0}
.m-nav-item__ic svg,.is-rail .m-nav-item__ic svg{width:17px !important;height:17px !important}
.m-nav-item{height:38px;margin-bottom:3px}
.is-rail .m-nav-item{width:46px;height:38px;margin:0 auto 3px;border-radius:10px}
.is-rail .m-nav-item[aria-current="page"]{background:rgba(143,182,255,.10)}
.is-rail .m-nav-item:hover{background:rgba(143,182,255,.06)}
.is-rail .m-nav-item__n{top:0;inset-inline-end:2px}
@media (max-height:760px){ .m-nav-item,.is-rail .m-nav-item{height:34px} .m-nav-item__ic,.is-rail .m-nav-item__ic{width:28px !important;height:28px !important} }

/* ==========================================================================
   v10.5 — ROW 2 IS ONE SUB-TAB BAR
   Whatever sits under the page tabs — a view switch, quick filters with
   counts, a register strip — is drawn as one family of sub-tabs: the same
   height, radius, quiet track colour, and the same raised-white "on" state.
   Read-only figures (KPIs) drop their pill and line up on the right, before
   the search box. A page has at most two header rows: the tabs, and this.
   ========================================================================== */
:root{--sub-h:32px}
.p-qc{gap:4px;row-gap:6px}
button.p-qc__i{height:var(--sub-h);padding:0 11px;gap:6px;border:0 !important;border-radius:9px;background:var(--surface-sunken);box-shadow:none !important;
  transition:background var(--t-fast) var(--ease)}
button.p-qc__i:hover{background:var(--line-subtle)}
button.p-qc__i b{font:700 13px/1 var(--font)}
button.p-qc__i span{font:600 12px/1 var(--font);color:var(--text-2)}
button.p-qc__i.is-on,button.p-qc__i[aria-pressed="true"]{background:var(--surface) !important;box-shadow:0 1px 2px rgba(9,30,54,.10),0 0 0 1px var(--line) !important}
button.p-qc__i.is-on span{color:var(--text);font-weight:700}
button.p-qc__i.is-on b{color:var(--accent-press)}
button.p-qc__i--crit.is-on b{color:var(--critical)}
button.p-qc__i--warn.is-on b{color:var(--warn)}
.p-qc .m-seg,.p-qc .p-md9__sub{height:calc(var(--sub-h) + 8px)}
.p-qc .m-seg button,.p-qc .p-md9__st{height:var(--sub-h)}
.p-rq9__sep{display:none}

/* read-only figures: plain, on the right */
.p-qc > .m-push{order:3}
.p-qc > span.p-qc__i,.p-qc > .p-qc__fact,.p-qc > .p-wb9__livedot,.p-qc > .m-demo{order:4}
.p-qc > .m-search,.p-qc > .p-fm9__tf,.p-qc > .m-icon-btn{order:5}
.p-qc > span.p-qc__i{height:var(--sub-h);padding:0 10px;border:0 !important;background:none !important;box-shadow:none !important;gap:5px;
  border-inline-start:1px solid var(--line-subtle) !important;border-radius:0}
.p-qc > span.p-qc__i b{font:700 15px/1 var(--font)}
.p-qc > span.p-qc__i span{font:500 11.5px/1 var(--font);color:var(--text-3)}
.p-qc > span.p-qc__i em{font-size:10.5px}
.p-qc > .p-qc__fact{padding:0 10px;border-inline-start:1px solid var(--line-subtle)}
.p-qc > .m-search{margin-inline-start:8px}
:root{--sub-track:rgba(20,45,90,.065)}
html[data-theme="dark"]{--sub-track:rgba(255,255,255,.06)}
button.p-qc__i{background:var(--sub-track)}
button.p-qc__i:hover{background:rgba(20,45,90,.11)}
html[data-theme="dark"] button.p-qc__i:hover{background:rgba(255,255,255,.1)}
.m-seg,.p-md9__sub,.m-tabs:not(.m-tabs--page){background:var(--sub-track);border-color:transparent}
.p-qc > .p-kfig.is-ok b{color:var(--ok)}.p-qc > .p-kfig.is-warn b{color:var(--warn)}.p-qc > .p-kfig.is-crit b{color:var(--critical)}
.p-qc > .p-kfig b small{font-size:11px;color:var(--text-3);font-weight:600}
#coTop:empty,#facTop:empty{display:none}
.p-co9__lbl{order:0}
.p-qc{flex-wrap:nowrap}
.p-qc > .m-search{flex:0 1 240px;min-width:140px}
.p-qc > .m-push{flex:1 1 0;min-width:0}
@media (max-width:1400px){ .p-qc{flex-wrap:wrap} }
.p-qc > span.p-qc__i b{white-space:nowrap}
@media (max-width:1400px){
  .p-qc{flex-wrap:nowrap}
  .p-qc > span.p-qc__i > span,.p-qc > span.p-qc__i > em{display:none}
  .p-qc .p-md9__st > svg,.p-qc .m-seg button > svg{display:none}
  .p-qc .p-md9__st,.p-qc .m-seg button,.p-qc button.p-qc__i{padding:0 8px}
  .p-qc > .m-search{flex:0 1 200px;min-width:120px}
}
@media (max-width:1100px){ .p-qc{flex-wrap:wrap} }

/* ---- v10.5: Waste page — pickup areas against their contracts ---- */
.p-ws__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.p-ws__num b{font-variant-numeric:tabular-nums}
.p-ws__prog{display:flex;flex-direction:column;gap:5px;min-width:0}
.p-ws__pt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:var(--ty-caption);color:var(--text-2)}
.p-ws__pt b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.p-ws__pt span{font-variant-numeric:tabular-nums}
.p-ws__prog.is-crit .p-ws__pt span{color:var(--critical)}
.p-ws__prog.is-warn .p-ws__pt span{color:var(--warn)}
.p-ws__dprog{margin:2px 0 12px}
.p-ws__types{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.p-ws__note{font:var(--ty-caption);margin:14px 0 0}
.p-ws__dlg .m-sec + .m-sec{margin-top:16px}
.p-ws__mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;min-height:0;flex:1 1 auto}
.p-ws__mapgrid > .m-card{min-height:0}
.p-ws__rail{display:flex;flex-direction:column;overflow:hidden;padding:0}
.p-ws__rh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.p-ws__rh b{font:var(--ty-label);color:var(--text)}
.p-ws__rh em{font-style:normal;font:var(--ty-caption);color:var(--text-3)}
.p-ws__rl{flex:1 1 auto;overflow:auto;padding:4px}
.p-ws__ri{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:8px;text-align:start;cursor:pointer;color:inherit}
.p-ws__ri:hover{background:var(--surface-subtle)}
.p-ws__ri.is-on{background:var(--accent-soft)}
.p-ws__rx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.p-ws__rx b{font:var(--ty-body);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ws__rx span{font:var(--ty-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ws__rn{font:var(--ty-caption);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ok)}
.p-ws__rn.is-warn{color:var(--warn)}
.p-ws__rn.is-crit{color:var(--critical)}
@media (max-width:1100px){.p-ws__mapgrid{grid-template-columns:1fr}.p-ws__rail{max-height:280px}}
.p-ws__dot.is-ok{background:var(--ok)}.p-ws__dot.is-warn{background:var(--warn)}.p-ws__dot.is-crit{background:var(--critical)}
.p-ws__bar .p-fm9__tf span{white-space:nowrap}
@media (max-width:1640px){.p-ws__bar .p-kfig.is-opt{display:none}}
/* v10.5: Facilities list — accepted streams fill the empty middle */
.p-fa9__acc{display:flex;flex-wrap:wrap;gap:3px 10px;font:var(--ty-caption);color:var(--text-2);min-width:0}
.p-fa9__acc > span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.p-fa9__acc i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.p-fa9__acc em{font-style:normal;color:var(--text-3)}
@media (max-width:1680px){.p-rp9__bar2 .p-kfig > span{display:none}}
.p-ws__mapgrid .p-fa9__mapcard .p-facmap{height:auto;min-height:180px;flex:1 1 auto}

/* ---- v10.5.1: table row hover — a soft fill, no border ---- */
.m-table tbody tr.is-clickable:hover td,
.m-table tbody tr:hover td{
  border-color:transparent;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
}
.m-table tbody tr.is-selected:hover td{border-color:var(--accent);background:var(--accent-soft)}

/* ---- v10.5.2: a canvas that belongs to the frame ----
   Light: a cool blue-grey ground (not paper white) so the white cards lift
   off it and the step from the navy frame is softer.
   Dark: a slate-navy a clear step lighter than the frame, with the cards one
   step lighter again — the canvas no longer melts into the chrome. */
:root{
  --bg:#E8EDF5;
  --canvas-top:#F1F4F9;
}
html[data-theme="dark"]{
  --bg:#111C2C;
  --canvas-top:#16233A;
  --surface:#172437;
  --surface-raised:#1D2B40;
  --surface-subtle:#1A2739;
  --surface-sunken:#101A29;
}
.m-shell::before{background:linear-gradient(180deg,var(--canvas-top) 0,var(--bg) 220px)}
html[data-theme="dark"] .m-shell::before{box-shadow:0 18px 40px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(140,170,220,.10)}