/* Dark mode, refined. Loaded LAST and every rule requires body.ref-dark (the app's existing dark switch), so light
   mode is untouched by construction; the whole file is screen-only, so print/PDF output is untouched as well.
   Rules are scoped to the dark surfaces they were written for (dashboard, its sheets and overlays, the users screen),
   so the white executive/broadcast reports, the login screen and the map keep their own look even under ref-dark.
   One token set drives every screen: a graphite-navy ground, lighter surfaces as things rise, warm off-white text,
   blue kept for the primary action and focus, the Al Muhaidib gold only as a fine accent. */
@media screen{

/* ---------- tokens ---------- */
.ref-dark{
  --dk-bg:#0f1318;--dk-s1:#161b22;--dk-s2:#1c222a;--dk-elev:#1d232c;--dk-int:#242b35;
  --dk-line:#262d37;--dk-line-2:#303844;
  --dk-text:#ebe8e1;--dk-text-2:#b9bdc5;--dk-muted:#9097a1;--dk-meta:#a4aab3;--dk-faint:#6d737d;--dk-placeholder:#8a909a;--dk-well:#232a33;
  --dk-blue:#1f66d9;--dk-blue-hover:#2a72e3;--dk-cta:#2f63bd;--dk-cta-hover:#3a6fca;--dk-blue-text:#8fb4f5;--dk-blue-soft:rgba(88,140,235,.14);--dk-focus:#8fb4f5;
  --dk-gold:#c9a24a;--dk-gold-text:#d4b064;--dk-gold-soft:rgba(201,162,74,.12);--dk-gold-line:rgba(201,162,74,.34);
  --dk-green:#5fc896;--dk-green-soft:rgba(95,200,150,.12);--dk-amber:#f2a863;--dk-amber-soft:rgba(242,168,99,.12);
  --dk-red:#ee8c82;--dk-red-soft:rgba(238,140,130,.12);--dk-badge:#c8392f;
  --dk-shadow:0 1px 2px rgba(0,0,0,.28),0 10px 28px -14px rgba(0,0,0,.55);
  --dk-shadow-lg:0 2px 6px rgba(0,0,0,.32),0 32px 70px -22px rgba(0,0,0,.7);
  --dk-underline:linear-gradient(var(--dk-gold),var(--dk-gold)) 50% calc(100% - 1px)/34% 2px no-repeat;
}
/* the app's own three dark tokens take the new values only where the dark dashboard or users screen is on screen, so a
   ref-dark left behind on the login or branch-user screen changes nothing there */
.ref-dark:has(.ref-dashboard),.ref-dark:has(.users-panel){--bg:var(--dk-bg);--text:var(--dk-text);--muted:var(--dk-muted)}
/* native controls follow the dark surfaces only (the reports, the login card and the map keep the light scheme);
   the page scrollbar is coloured explicitly instead, so nothing inherits a dark scheme from <html> */
html:has(>body.ref-dark .ref-dashboard){background:#0f1318;scrollbar-color:#353c47 #0f1318}
html:has(>body.ref-dark .users-panel){background:#0f1318;scrollbar-color:#353c47 #0f1318}
.ref-dark .ref-dashboard,.ref-dark .ref-sheet-back,.ref-dark .bc-back,.ref-dark .dr-back,.ref-dark .modal-back{color-scheme:dark}
.ref-dark .app-shell:has(.users-panel){color-scheme:dark}
.ref-dark .ref-dashboard .ewm{color-scheme:light}
.ref-dark .ref-sheet,.ref-dark .user-modal,.ref-dark .bc-back,.ref-dark .bc-sheet,.ref-dark .dr-back{scrollbar-color:#3a424f transparent}
.ref-dark .ref-dashboard ::selection,.ref-dark .ref-sheet-back ::selection{background:rgba(143,180,245,.3)}
.ref-dark .ref-dashboard{--line:var(--dk-line)}
.ref-dark .ref-dashboard,.ref-dark .ref-main{background:var(--dk-bg);color:var(--dk-text)}
.ref-dark .ref-main{background:radial-gradient(1100px 380px at 72% -140px,rgba(201,162,74,.045),transparent 70%),var(--dk-bg)}
/* keyboard focus on the dark surfaces: zero-weight scope (:where), so every component that draws its own focus
   (search pill, sheet inputs, branch sheet, Notifications Center) keeps it; the map keeps its own look entirely */
:where(.ref-dark .ref-dashboard,.ref-dark .ref-sheet-back,.ref-dark .bc-back,.ref-dark .dr-back,.ref-dark .modal-back) :focus-visible:where(:not(.ewm *)){outline:2px solid var(--dk-focus);outline-offset:2px}
:where(.ref-dark .app-shell:has(.users-panel)) :focus-visible{outline:2px solid var(--dk-focus);outline-offset:2px}

/* ---------- sidebar: line glyphs follow the text colour, gold on the active item ---------- */
.ref-dark .ref-sidebar{background:var(--dk-s1);border-color:var(--dk-line);color:var(--dk-text)}
.ref-dark .ref-brand{border-bottom-color:var(--dk-line)}
.ref-dark .ref-brand strong{color:var(--dk-text)}
.ref-dark .ref-brand span{color:var(--dk-muted)}
.ref-dark .ref-monogram{border-color:var(--dk-gold-line);color:var(--dk-gold-text);background:var(--dk-gold-soft)}
.ref-dark .ref-sidebar nav button{color:var(--dk-muted);transition:background-color .15s ease-out,color .15s ease-out}
.ref-dark .ref-sidebar nav button span{color:var(--dk-text-2)}
.ref-dark .ref-sidebar nav button:hover{background:var(--dk-int);color:var(--dk-text-2)}
.ref-dark .ref-sidebar nav button:hover span{color:var(--dk-text)}
.ref-dark .ref-sidebar nav button.active{background:var(--dk-s2);color:var(--dk-gold-text);box-shadow:inset 0 0 0 1px var(--dk-line-2)}
.ref-dark .ref-sidebar nav button.active span{color:var(--dk-text)}
.ref-dark .ref-sidebar nav button.active::after{content:"";position:absolute;inset-block:11px;inset-inline-start:0;width:3px;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--dk-gold)}
.ref-dark .ref-sidebar nav em{background:var(--dk-red-soft);color:var(--dk-red);font-weight:700}
.ref-dark .ref-hotel-art{color:#9c8250;opacity:.85}
.ref-dark .ref-hotel-art span{color:#a58a55}
.ref-dark .ref-support{background:var(--dk-s2);border-color:var(--dk-line);color:var(--dk-text)}
.ref-dark .ref-support:hover{background:var(--dk-int);border-color:var(--dk-line-2)}
.ref-dark .ref-support b{color:var(--dk-gold-text)}
.ref-dark .ref-support span{color:var(--dk-muted)}
.ref-dark .ref-support i{color:var(--dk-muted)}

/* ---------- top bar: only the main action competes for attention ---------- */
.ref-dark .ref-user{background:var(--dk-s1);border-color:var(--dk-line);box-shadow:none;color:var(--dk-text)}
.ref-dark .ref-avatar{background:linear-gradient(150deg,#2a313c,#20262f);color:var(--dk-gold-text);box-shadow:inset 0 0 0 1px var(--dk-gold-line)}
.ref-dark .ref-user span{color:var(--dk-muted)}
.ref-dark .ref-user button{background:var(--dk-s2);color:var(--dk-text-2);box-shadow:inset 0 0 0 1px var(--dk-line)}
.ref-dark .ref-user button:hover{background:var(--dk-int);color:var(--dk-text)}
.ref-dark .ref-actions .ref-icon-btn{background:var(--dk-s1);border-color:var(--dk-line);color:var(--dk-text-2);transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.ref-dark .ref-actions .ref-icon-btn:hover{background:var(--dk-int);border-color:var(--dk-line-2);color:var(--dk-text)}
.ref-dark .ref-actions #owner-pwd-btn{color:transparent;text-shadow:0 0 0 var(--dk-text-2)}
.ref-dark .ref-actions #owner-pwd-btn:hover{text-shadow:0 0 0 var(--dk-text)}
.ref-dark .ref-actions .ref-icon-btn i{background:var(--dk-badge);color:#fff;font-weight:700;box-shadow:0 0 0 2px var(--dk-bg)}
/* the page's one primary action: a calmer, less saturated blue on graphite - still the only filled blue on the dashboard */
.ref-dark #request-settlement-btn{background:var(--dk-cta);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 22px -12px rgba(47,99,189,.5);transition:background-color .15s ease-out}
.ref-dark #request-settlement-btn:hover:not(:disabled){background:var(--dk-cta-hover)}
.ref-dark .ref-title h1{color:var(--dk-text)}
.ref-dark .ref-title p{color:var(--dk-muted)}
.ref-dark .ref-title .admin-tabs button{background:var(--dk-s1);color:var(--dk-text-2);border-color:var(--dk-line);transition:background-color .15s ease-out,color .15s ease-out}
.ref-dark .ref-title .admin-tabs button:hover{background:var(--dk-int);color:var(--dk-text)}
.ref-dark .ref-title .admin-tabs button.active{background:var(--dk-underline),var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2);box-shadow:none}

/* ---------- KPI cards: neutral surfaces, the meaning carried by the number and a small tinted icon tile ---------- */
.ref-dark .ref-kpis .ref-kpi{background:var(--dk-s1);border-color:var(--dk-line);color:var(--dk-text);box-shadow:none}
.ref-dark .ref-kpis .ref-kpi:hover{border-color:var(--dk-line-2);box-shadow:var(--dk-shadow)}
.ref-dark .ref-kpis .ref-kpi span{color:var(--dk-text-2)}
.ref-dark .ref-kpis .ref-kpi small{color:var(--dk-muted)}
.ref-dark .ref-kpis .ref-kpi strong{color:var(--dk-text);font-variant-numeric:tabular-nums}
.ref-dark .ref-kpis .ref-kpi-icon{background:var(--dk-s2);color:var(--dk-text-2)}
.ref-dark .ref-kpis .ref-kpi.primary{background:linear-gradient(165deg,#1b2230 0%,var(--dk-s1) 62%);border-color:#2c3442;box-shadow:inset 0 1px 0 var(--dk-gold-line)}
.ref-dark .ref-kpis .ref-kpi.primary .ref-kpi-icon{background:var(--dk-gold-soft);color:var(--dk-gold-text);box-shadow:inset 0 0 0 1px var(--dk-gold-line)}
.ref-dark .ref-kpis .ref-kpi.info strong{color:var(--dk-blue-text)}
.ref-dark .ref-kpis .ref-kpi.info .ref-kpi-icon{background:var(--dk-blue-soft);color:var(--dk-blue-text)}
.ref-dark .ref-kpis .ref-kpi.success strong{color:var(--dk-green)}
.ref-dark .ref-kpis .ref-kpi.success .ref-kpi-icon{background:var(--dk-green-soft);color:var(--dk-green)}
.ref-dark .ref-kpis .ref-kpi.danger strong{color:var(--dk-red)}
.ref-dark .ref-kpis .ref-kpi.danger .ref-kpi-icon{background:var(--dk-red-soft);color:var(--dk-red)}

/* ---------- branches panel (s1) + branch cards one step up (s2) + branch sheet (elevated) ---------- */
.ref-dark #branches-panel,.ref-dark .ref-sheet.branch-sheet{--bs-navy:#2b4766;--bs-navy-2:#34547a;--bs-gold-soft:rgba(201,162,74,.16);--bs-paper:var(--dk-s1);--bs-warm:var(--dk-s2);--bs-warm-2:#212831;--bs-line:var(--dk-line);--bs-line-2:#232a33;--bs-ink:var(--dk-text);--bs-ink-2:var(--dk-text-2);--bs-ink-3:var(--dk-muted);--bs-ok:var(--dk-green);--bs-ok-soft:var(--dk-green-soft);--bs-warn:var(--dk-amber);--bs-warn-soft:var(--dk-amber-soft);--bs-bad:var(--dk-red);--bs-bad-soft:var(--dk-red-soft);--bs-bar:var(--bs-gold);--bs-shadow:0 1px 2px rgba(0,0,0,.3)}
.ref-dark .ref-sheet.branch-sheet{--bs-paper:var(--dk-elev);--bs-warm:#222932;--bs-warm-2:#262d37;--bs-line:var(--dk-line-2);--bs-line-2:#2a313b}
.ref-dark #branches-panel{box-shadow:none}
.ref-dark #branches-panel .ref-branch-card{--bs-paper:var(--dk-s2);--bs-line-2:#2a313b;border-color:var(--dk-line-2);box-shadow:none}
.ref-dark #branches-panel .ref-branch-card:hover{--bs-paper:#20262f;border-color:#3a4250;box-shadow:var(--dk-shadow)}
/* a card's secondary text (brand · rooms · district, metric labels, last update): a step brighter, still well below
   the branch name and the figures */
.ref-dark #branches-panel .ref-branch-name span,.ref-dark #branches-panel .ref-metrics span,.ref-dark #branches-panel .ref-card-foot{color:var(--dk-meta)}
.ref-dark #branches-panel .ref-toolbar select:hover{border-color:var(--dk-line-2)}
.ref-dark .branch-sheet .net-contact>div:hover,.ref-dark .branch-sheet .bpe-btn:hover{border-color:var(--dk-line-2)}
.ref-dark .branch-sheet .net-contact a{color:var(--dk-gold-text)}
.ref-dark .ref-sheet.branch-sheet #directive-send-btn{background:var(--dk-blue);border-color:var(--dk-blue);color:#fff}
.ref-dark .ref-sheet.branch-sheet #directive-send-btn:hover:not(:disabled){background:var(--dk-blue-hover)}
.ref-dark .ref-sheet .directive-log-row{border-bottom-color:var(--dk-line)}
.ref-dark .ref-sheet .directive-log-row span{color:var(--dk-muted)}
.ref-dark .ref-sheet .directive-status-pill.sent{background:var(--dk-amber-soft);color:var(--dk-amber)}
.ref-dark .ref-sheet .directive-status-pill.seen{background:var(--dk-blue-soft);color:var(--dk-blue-text)}
.ref-dark .ref-sheet .directive-status-pill.completed{background:var(--dk-green-soft);color:var(--dk-green)}

/* ---------- shared sheets (settings, reports list, support, password, directive, legacy alert rows) ---------- */
.ref-dark .ref-sheet-back{background:rgba(6,9,13,.58)}
.ref-dark .ref-sheet{background:var(--dk-elev);border-color:var(--dk-line-2);color:var(--dk-text);box-shadow:var(--dk-shadow-lg)}
.ref-dark .ref-sheet header{border-bottom-color:var(--dk-line)}
.ref-dark .ref-sheet header small{color:var(--dk-gold-text)}
.ref-dark .ref-sheet header h2{color:var(--dk-text)}
.ref-dark .ref-sheet header button{background:var(--dk-s2);color:var(--dk-text);box-shadow:inset 0 0 0 1px var(--dk-line)}
.ref-dark .ref-sheet header button:hover{background:var(--dk-int)}
/* sheets that draw their own close button keep a single frame */
.ref-dark .ref-sheet.branch-sheet header #sheet-close,.ref-dark .ref-sheet.nc-sheet header #sheet-close{box-shadow:none}
.ref-dark .ref-sheet:not(.branch-sheet) .detail-grid>div,.ref-dark .ref-sheet:not(.branch-sheet) .detail-rates>div,.ref-dark .ref-sheet:not(.branch-sheet) .report-list>div{background:var(--dk-well);color:var(--dk-text)}
.ref-dark .ref-sheet:not(.branch-sheet) .detail-grid span,.ref-dark .ref-sheet:not(.branch-sheet) .detail-meta,.ref-dark .ref-sheet:not(.branch-sheet) .ref-empty,.ref-dark .ref-sheet:not(.branch-sheet) .sheet-empty,.ref-dark .ref-sheet:not(.branch-sheet) .setting-row span,.ref-dark .ref-dashboard .ref-empty{color:var(--dk-muted)}
.ref-dark .ref-sheet:not(.branch-sheet) .setting-row{border-bottom-color:var(--dk-line)}
.ref-dark .ref-sheet:not(.branch-sheet) .alert-row{background:var(--dk-s2);border-color:var(--dk-line);color:var(--dk-text)}
.ref-dark .ref-sheet:not(.branch-sheet) .alert-row small{color:var(--dk-muted)}
.ref-dark .ref-sheet:not(.branch-sheet) .sheet-primary{background:var(--dk-blue);color:#fff}
.ref-dark .ref-sheet:not(.branch-sheet) .sheet-primary:hover:not(:disabled){background:var(--dk-blue-hover)}
.ref-dark .ref-sheet:not(.branch-sheet) .sheet-secondary,.ref-dark .ref-sheet:not(.branch-sheet) .support-tools button{background:var(--dk-well);color:var(--dk-text);box-shadow:inset 0 0 0 1px var(--dk-line-2)}
.ref-dark .ref-sheet:not(.branch-sheet) .sheet-secondary:hover,.ref-dark .ref-sheet:not(.branch-sheet) .support-tools button:hover{background:var(--dk-int)}
.ref-dark .ref-sheet:not(.branch-sheet) .input,.ref-dark .user-modal .input{background:var(--dk-s2);border-color:var(--dk-line-2);color:var(--dk-text)}
.ref-dark .ref-sheet:not(.branch-sheet) .input::placeholder,.ref-dark .user-modal .input::placeholder,.ref-dark .bc-back input::placeholder,.ref-dark .bc-back textarea::placeholder,.ref-dark .dr-back input::placeholder{color:var(--dk-placeholder)}
.ref-dark .ref-sheet:not(.branch-sheet) .input:focus,.ref-dark .user-modal .input:focus{border-color:#4f7fd8;box-shadow:0 0 0 3px rgba(88,140,235,.2)}
.ref-dark .ref-sheet:not(.branch-sheet) .input:focus-visible,.ref-dark .user-modal .input:focus-visible{outline:none}
.ref-dark .ref-sheet input[type="checkbox"]{accent-color:var(--dk-blue)}
/* the notification settings card builds its colours inline (push-notifications.js), so only !important reaches it */
.ref-dark .ref-sheet .push-card{background:var(--dk-well)!important;border-color:var(--dk-line)!important;color:var(--dk-text)}
.ref-dark .ref-sheet .push-card [style*="color:#7c8798"],.ref-dark .ref-sheet .push-diag-row [style*="color:#7c8798"]{color:var(--dk-muted)!important}
.ref-dark .ref-sheet .push-card [style*="color:#3a4457"]{color:var(--dk-text-2)!important}
.ref-dark .ref-sheet .push-diag-row{border-bottom-color:var(--dk-line)!important}
/* owner branding controls in the settings sheet (branding.css copies old values; re-pointed at the tokens) */
.ref-dark .ref-sheet .brand-admin,.ref-dark .ref-sheet .brand-row{border-color:var(--dk-line)}
.ref-dark .ref-sheet .brand-admin h3,.ref-dark .ref-sheet .brand-label strong,.ref-dark .ref-sheet .brand-copy>strong{color:var(--dk-text)}
.ref-dark .ref-sheet .brand-inline .input,.ref-dark .ref-sheet .brand-btn{background:var(--dk-s2);border-color:var(--dk-line-2);color:var(--dk-text)}
.ref-dark .ref-sheet .brand-btn:hover:not(:disabled){background:var(--dk-int)}
.ref-dark .ref-sheet .brand-btn.is-primary{background:var(--dk-blue);border-color:var(--dk-blue);color:#fff}
.ref-dark .ref-sheet .brand-preview img{border-color:var(--dk-line-2)}
.ref-dark .ref-sheet .brand-note{background:var(--dk-well);color:var(--dk-muted)}
.ref-dark .ref-sheet .brand-msg{color:var(--dk-text-2)}

/* ---------- users screen and account modals (only where the users panel is shown) ---------- */
.ref-dark .app-shell:has(.users-panel) .app-head h1{color:var(--dk-text)}
.ref-dark .app-shell:has(.users-panel) .app-head p{color:var(--dk-muted)}
.ref-dark .app-shell:has(.users-panel) .user-chip{background:var(--dk-s1);border-color:var(--dk-line);color:var(--dk-text);box-shadow:none}
.ref-dark .app-shell:has(.users-panel) .user-chip span{color:var(--dk-muted)}
.ref-dark .app-shell:has(.users-panel) .user-chip button{background:var(--dk-s2);color:var(--dk-text-2)}
.ref-dark .app-shell:has(.users-panel) .admin-tabs{background:var(--dk-s1)}
.ref-dark .app-shell:has(.users-panel) .app-head .eyebrow{color:var(--dk-gold-text)}
.ref-dark .app-shell:has(.users-panel) .admin-tabs button{color:var(--dk-text-2)}
.ref-dark .app-shell:has(.users-panel) .admin-tabs button.active{background:var(--dk-underline),var(--dk-s2);color:var(--dk-text);box-shadow:inset 0 0 0 1px var(--dk-line-2)}
.ref-dark .users-panel{background:var(--dk-s1);border-color:var(--dk-line);box-shadow:none;color:var(--dk-text)}
.ref-dark .users-panel .users-toolbar span{color:var(--dk-muted)}
.ref-dark .users-panel .user-row{background:var(--dk-s2);border-color:var(--dk-line);color:var(--dk-text)}
.ref-dark .users-panel .user-main span{color:var(--dk-muted)}
.ref-dark .users-panel .mini-btn{background:var(--dk-int);color:var(--dk-text-2)}
.ref-dark .users-panel .account-state.on{background:var(--dk-green-soft);color:var(--dk-green)}
.ref-dark .users-panel .account-state.off{background:var(--dk-red-soft);color:var(--dk-red)}
.ref-dark .users-panel .primary-small{background:var(--dk-blue);box-shadow:0 8px 18px -10px rgba(31,102,217,.7)}
.ref-dark .modal-back{background:rgba(6,9,13,.58)}
.ref-dark .user-modal{background:var(--dk-elev);color:var(--dk-text);box-shadow:var(--dk-shadow-lg);border:1px solid var(--dk-line-2)}
.ref-dark .user-modal .modal-head button{background:var(--dk-s2);color:var(--dk-text)}
.ref-dark .user-modal label>span{color:var(--dk-text-2)}
.ref-dark .user-modal .toggle-line{background:var(--dk-well);color:var(--dk-text)}

/* ---------- live update popup ---------- */
.ref-dark #live-update-alert{background:var(--dk-elev);border-color:var(--dk-line-2);box-shadow:var(--dk-shadow-lg)}
.ref-dark #live-update-alert strong{color:var(--dk-text)}
.ref-dark #live-update-alert p{color:var(--dk-text-2)}
.ref-dark #live-update-alert .live-icon{background:var(--dk-blue-soft);color:var(--dk-blue-text)}
.ref-dark #live-update-alert .live-close{background:var(--dk-s2);color:var(--dk-text-2)}

/* ---------- Broadcast Center + Device Readiness (their own tokens, re-pointed at the shared set) ---------- */
.ref-dark .bc-back,.ref-dark .bc-sheet{--bc-text:var(--dk-text);--bc-muted:var(--dk-muted);--bc-line:var(--dk-line);--bc-bg:var(--dk-bg);--bc-card:var(--dk-s1);--bc-navy:var(--dk-text);--bc-mute-bg:var(--dk-s2);--bc-mute:var(--dk-text-2);--bc-ok:var(--dk-green);--bc-ok-bg:var(--dk-green-soft);--bc-warn:var(--dk-amber);--bc-warn-bg:var(--dk-amber-soft);--bc-bad:var(--dk-red);--bc-bad-bg:var(--dk-red-soft);--bc-info:var(--dk-blue-text);--bc-info-bg:var(--dk-blue-soft)}
.ref-dark .bc-sheet{--bc-card:var(--dk-elev);--bc-line:var(--dk-line-2)}
.ref-dark .bc-head{background:rgba(15,19,24,.9)}
.ref-dark .bc-back .bc-close,.ref-dark .bc-back .bc-secondary,.ref-dark .bc-back .bc-chip,.ref-dark .bc-back .bc-filters input,.ref-dark .bc-back .bc-filters select,.ref-dark .bc-back .bc-branch-search input{background:var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2)}
.ref-dark .bc-sheet .bc-secondary,.ref-dark .bc-sheet .bc-radio,.ref-dark .bc-sheet .bc-pick,.ref-dark .bc-sheet .bc-picker-bar input{background:var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2)}
.ref-dark .bc-back .bc-dtable th{background:var(--dk-s2);color:var(--dk-text-2)}
.ref-dark .bc-back .bc-dtable td{border-color:var(--dk-line)}
.ref-dark .bc-back .bc-preview{color:var(--dk-text-2)}
.ref-dark .bc-back .bc-link{background:var(--dk-s2);color:var(--dk-blue-text);box-shadow:inset 0 0 0 1px var(--dk-line-2)}
.ref-dark .bc-back .bc-link:hover{background:var(--dk-int)}
.ref-dark .bc-back .bc-progress{background:var(--dk-int)}
.ref-dark .bc-back .bc-stats>div{background:var(--dk-s2);box-shadow:inset 0 0 0 1px var(--dk-line)}
.ref-dark .bc-back .bc-chip.active{background:var(--dk-underline),var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2);box-shadow:none}
.ref-dark .bc-back .bc-chip.active em{color:var(--dk-gold-text)}
.ref-dark .dr-back{--dr-text:var(--dk-text);--dr-muted:var(--dk-muted);--dr-line:var(--dk-line);--dr-bg:var(--dk-bg);--dr-card:var(--dk-s1);--dr-navy:var(--dk-text);--dr-mute-bg:var(--dk-s2);--dr-mute:var(--dk-text-2);--dr-ok:var(--dk-green);--dr-ok-bg:var(--dk-green-soft);--dr-warn:var(--dk-amber);--dr-warn-bg:var(--dk-amber-soft);--dr-bad:var(--dk-red)}
.ref-dark .dr-head{background:rgba(15,19,24,.9)}
.ref-dark .dr-back .dr-close,.ref-dark .dr-back .dr-secondary,.ref-dark .dr-back .dr-chip{background:var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2)}
.ref-dark .dr-back .dr-chip.active{background:var(--dk-underline),var(--dk-s2);color:var(--dk-text);border-color:var(--dk-line-2);box-shadow:none}
.ref-dark .dr-back .dr-table th{background:var(--dk-s2);color:var(--dk-text-2)}
.ref-dark .dr-back .dr-table td{border-color:var(--dk-line)}
.ref-dark:has(.ref-dashboard) .bc-toast,.ref-dark:has(.ref-dashboard) .dr-toast{background:#2a313c;color:var(--dk-text);box-shadow:var(--dk-shadow-lg)}

/* ---------- phones and narrow tablets ---------- */
@media(max-width:900px){
  .ref-dark .ref-title .admin-tabs{background:rgba(22,27,34,.92);border-color:var(--dk-line);box-shadow:0 12px 36px rgba(0,0,0,.45)}
}
@media(max-width:820px){
  .ref-dark .ref-sidebar{background:rgba(22,27,34,.94);border-color:var(--dk-line);box-shadow:0 16px 45px rgba(0,0,0,.5)}
  .ref-dark .ref-sidebar nav button{color:var(--dk-muted)}
  .ref-dark .ref-sidebar nav button span{color:var(--dk-muted);line-height:1.45}
  .ref-dark .ref-sidebar nav button.active{background:var(--dk-s2);color:var(--dk-gold-text);box-shadow:inset 0 0 0 1px var(--dk-line-2)}
  .ref-dark .ref-sidebar nav button.active span{color:var(--dk-text)}
  .ref-dark .ref-sidebar nav button.active::after{inset-block:auto 4px;inset-inline-start:calc(50% - 9px);width:18px;height:2px;border-radius:2px}
  .ref-dark .ref-sidebar nav em{background:var(--dk-badge);color:#fff}
  .ref-dark .ref-title .admin-tabs{background:transparent;border-color:transparent;box-shadow:none}
  .ref-dark .ref-sheet header{background:rgba(29,35,44,.96)}
  .ref-dark .users-panel .users-toolbar{background:rgba(22,27,34,.94);color:var(--dk-text)}
  .ref-dark .app-shell:has(.users-panel) .admin-tabs{border-color:var(--dk-line-2);box-shadow:0 12px 36px rgba(0,0,0,.45)}
}
}