/* =====================================================================
   NIGHT MODE  (html[data-mode="dark"])  - works with every colour theme and both Jaguar looks.
   Colour-theme scales are mirrored (light tints become deep tints, dark text becomes light text),
   the original dark shades stay available as --d-NNN for solid buttons.
   ===================================================================== */

html[data-mode="dark"]:not([data-theme]), html[data-mode="dark"][data-theme="emerald"] {
  --e-50: 2 44 34;
  --d-50: 236 253 245;
  --e-100: 6 78 59;
  --d-100: 209 250 229;
  --e-200: 6 95 70;
  --d-200: 167 243 208;
  --e-300: 4 120 87;
  --d-300: 110 231 183;
  --e-400: 5 150 105;
  --d-400: 52 211 153;
  --e-500: 16 185 129;
  --d-500: 16 185 129;
  --e-600: 52 211 153;
  --d-600: 5 150 105;
  --e-700: 110 231 183;
  --d-700: 4 120 87;
  --e-800: 167 243 208;
  --d-800: 6 95 70;
  --e-900: 209 250 229;
  --d-900: 6 78 59;
  --e-950: 236 253 245;
  --d-950: 2 44 34;
}

html[data-mode="dark"][data-theme="maroon"] {
  --e-50: 40 8 20;
  --d-50: 252 242 244;
  --e-100: 70 17 35;
  --d-100: 249 224 229;
  --e-200: 90 22 44;
  --d-200: 240 190 200;
  --e-300: 112 26 52;
  --d-300: 224 140 158;
  --e-400: 138 34 62;
  --d-400: 200 90 115;
  --e-500: 168 52 80;
  --d-500: 168 52 80;
  --e-600: 200 90 115;
  --d-600: 138 34 62;
  --e-700: 224 140 158;
  --d-700: 112 26 52;
  --e-800: 240 190 200;
  --d-800: 90 22 44;
  --e-900: 249 224 229;
  --d-900: 70 17 35;
  --e-950: 252 242 244;
  --d-950: 40 8 20;
}

html[data-mode="dark"][data-theme="gold"] {
  --e-50: 69 26 3;
  --d-50: 255 251 235;
  --e-100: 120 53 15;
  --d-100: 254 243 199;
  --e-200: 146 64 14;
  --d-200: 253 230 138;
  --e-300: 180 83 9;
  --d-300: 252 211 77;
  --e-400: 217 119 6;
  --d-400: 251 191 36;
  --e-500: 245 158 11;
  --d-500: 245 158 11;
  --e-600: 251 191 36;
  --d-600: 217 119 6;
  --e-700: 252 211 77;
  --d-700: 180 83 9;
  --e-800: 253 230 138;
  --d-800: 146 64 14;
  --e-900: 254 243 199;
  --d-900: 120 53 15;
  --e-950: 255 251 235;
  --d-950: 69 26 3;
}

html[data-mode="dark"][data-theme="graphite"] {
  --e-50: 2 6 23;
  --d-50: 248 250 252;
  --e-100: 15 23 42;
  --d-100: 241 245 249;
  --e-200: 30 41 59;
  --d-200: 226 232 240;
  --e-300: 51 65 85;
  --d-300: 203 213 225;
  --e-400: 71 85 105;
  --d-400: 148 163 184;
  --e-500: 100 116 139;
  --d-500: 100 116 139;
  --e-600: 148 163 184;
  --d-600: 71 85 105;
  --e-700: 203 213 225;
  --d-700: 51 65 85;
  --e-800: 226 232 240;
  --d-800: 30 41 59;
  --e-900: 241 245 249;
  --d-900: 15 23 42;
  --e-950: 248 250 252;
  --d-950: 2 6 23;
}

html[data-mode="dark"][data-theme="amethyst"] {
  --e-50: 36 30 56;
  --d-50: 247 245 251;
  --e-100: 58 49 86;
  --d-100: 238 234 247;
  --e-200: 74 62 108;
  --d-200: 224 217 240;
  --e-300: 92 77 133;
  --d-300: 200 188 226;
  --e-400: 112 94 158;
  --d-400: 168 152 204;
  --e-500: 136 118 178;
  --d-500: 136 118 178;
  --e-600: 168 152 204;
  --d-600: 112 94 158;
  --e-700: 200 188 226;
  --d-700: 92 77 133;
  --e-800: 224 217 240;
  --d-800: 74 62 108;
  --e-900: 238 234 247;
  --d-900: 58 49 86;
  --e-950: 247 245 251;
  --d-950: 36 30 56;
}

/* AUTO-GENERATED from the templates' own colours (see night mode). */
html[data-mode="dark"]:root .hub-tile { background:linear-gradient(180deg, #16181b, #16181b) !important; }
html[data-mode="dark"]:root .hub-badge { color:#fff !important; }
html[data-mode="dark"]:root .hub-t { color:#ececec !important; }
html[data-mode="dark"]:root .hub-s { color:#a8aab0 !important; }
html[data-mode="dark"]:root .pill { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .pill.on { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root .sw { color:#a8aab0 !important; background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .sw.on { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root .sw .dot { color:#fff !important; }
html[data-mode="dark"]:root .fld { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#ececec !important; }
html[data-mode="dark"]:root .lbl { color:#a8aab0 !important; }
html[data-mode="dark"]:root .seg-opt span { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .seg-opt.masjid input:checked + span { background:rgba(216,181,38,.16) !important; border-color:#d97706 !important; color:#f0ae89 !important; }
html[data-mode="dark"]:root .btn-pri { background:linear-gradient(180deg,rgb(var(--d-700)),rgb(var(--d-800))) !important; color:#fff !important; }
html[data-mode="dark"]:root .btn-sec { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#ececec !important; }
html[data-mode="dark"]:root .btn-bad { background:#16181b !important; border-color:rgba(204,50,69,.35) !important; color:#f08aa0 !important; }
html[data-mode="dark"]:root .now-tag { background:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root .fchip { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .fchip.on { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root .stat { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .stat span { color:#94a3b8 !important; }
html[data-mode="dark"]:root .pav.f { background:rgba(216,38,140,.16) !important; color:#ee8bb3 !important; }
html[data-mode="dark"]:root .pcard { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .pph.f { background:rgba(216,38,140,.16) !important; color:#ee8bb3 !important; }
html[data-mode="dark"]:root .tk-eyebrow { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-h1 { color:#ececec !important; }
html[data-mode="dark"]:root .tk-card { background:#16181b !important; }
html[data-mode="dark"]:root .tk-btn { background:#16181b !important; color:#ececec !important; }
html[data-mode="dark"]:root .tk-btn.solid { color:#fff !important; }
html[data-mode="dark"]:root .tk-btn.solid:hover { background:rgb(var(--d-900)) !important; color:#fff !important; }
html[data-mode="dark"]:root .tk-stat b { color:#ececec !important; }
html[data-mode="dark"]:root .tk-stat span { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-tools { background:color-mix(in srgb, rgb(var(--e-50)) 28%, #202328) !important; }
html[data-mode="dark"]:root .tk-search { background:#16181b !important; color:#ececec !important; }
html[data-mode="dark"]:root .tk-tab { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-tab em { color:#a3a3a3 !important; }
html[data-mode="dark"]:root .tk-tab.on { color:#ececec !important; }
html[data-mode="dark"]:root .tk-sort { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-list { background:#16181b !important; }
html[data-mode="dark"]:root .tk-name { color:#ececec !important; }
html[data-mode="dark"]:root .tk-its { color:#8a8a8a !important; }
html[data-mode="dark"]:root .tk-amt { color:#ececec !important; }
html[data-mode="dark"]:root .tk-st { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-st.paid { color:#8decb1 !important; }
html[data-mode="dark"]:root .tk-st.part { color:#f5b584 !important; }
html[data-mode="dark"]:root .tk-st.unpaid { color:#ee8c8c !important; }
html[data-mode="dark"]:root .tk-chev { color:#a3a3a3 !important; }
html[data-mode="dark"]:root .tk-input { background:#16181b !important; color:#ececec !important; }
html[data-mode="dark"]:root .tk-label { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-x { color:#a3a3a3 !important; }
html[data-mode="dark"]:root .tk-x:hover { color:#ee8c8c !important; }
html[data-mode="dark"]:root .tk-seg span { color:#a8aab0 !important; }
html[data-mode="dark"]:root .tk-seg input:checked + span { color:#fff !important; }
html[data-mode="dark"]:root .tk-sheet { background:#16181b !important; }
html[data-mode="dark"]:root .dchip { background:#16181b !important; }
html[data-mode="dark"]:root .dchip .dw { color:#a8aab0 !important; }
html[data-mode="dark"]:root .dchip .dd { color:#ececec !important; }
html[data-mode="dark"]:root .dchip .dm { color:#94a3b8 !important; }
html[data-mode="dark"]:root .dchip.on { background:linear-gradient(180deg,rgb(var(--d-700)),rgb(var(--d-800))) !important; }
html[data-mode="dark"]:root .dchip.on .dw,
html[data-mode="dark"]:root .dchip.on .dd,
html[data-mode="dark"]:root .dchip.on .dm { color:#fff !important; }
html[data-mode="dark"]:root .slot.sel { background:linear-gradient(180deg,rgb(var(--d-700)),rgb(var(--d-800))) !important; color:#fff !important; }
html[data-mode="dark"]:root .slot.taken { background:#202328 !important; border-color:rgba(255,255,255,.14) !important; color:#94A3B8 !important; }
html[data-mode="dark"]:root .tag { background:#202328 !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .tag.role { background:rgba(72,38,216,.16) !important; color:#b38feb !important; }
html[data-mode="dark"]:root .tag.takhmeen { background:rgba(216,181,38,.16) !important; color:#f3af86 !important; }
html[data-mode="dark"]:root .tag.payment { background:rgba(38,216,125,.16) !important; color:#84f5d5 !important; }
html[data-mode="dark"]:root .tag.menu { background:rgba(38,145,216,.16) !important; color:#84cef5 !important; }
html[data-mode="dark"]:root .tag.noc { background:rgba(216,38,140,.16) !important; color:#ee8bb3 !important; }
html[data-mode="dark"]:root .tag.appointment { background:rgba(38,216,178,.16) !important; color:#8febe5 !important; }
html[data-mode="dark"]:root .tag.export { background:#202328 !important; color:#ececec !important; }
html[data-mode="dark"]:root .fld { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .glass-card { background:linear-gradient(180deg, #16181b, #16181b) !important; }
html[data-mode="dark"]:root .glass-nav { background:#16181b !important; }
html[data-mode="dark"]:root .icon-btn { background:#16181b !important; color:#ececec !important; }
html[data-mode="dark"]:root .icon-btn:hover { background:#16181b !important; }
html[data-mode="dark"]:root .lang-pill { color:#a8aab0 !important; background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .lang-pill.lang-on { background:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root .look-pop { background:#16181b !important; }
html[data-mode="dark"]:root .look-h { color:#ececec !important; }
html[data-mode="dark"]:root .look-dot-btn.theme-on .theme-dot::after { color:#fff !important; }
html[data-mode="dark"]:root .look-nm { color:#a8aab0 !important; }
html[data-mode="dark"]:root .bn-card { color:#fff !important; background:linear-gradient(135deg, rgb(var(--d-800)), rgb(var(--d-950))) !important; }
html[data-mode="dark"]:root .bn-ic { background:rgba(22,24,27,.16) !important; }
html[data-mode="dark"]:root .bn-x { background:rgba(22,24,27,.18) !important; color:#fff !important; }
html[data-mode="dark"]:root .theme-dot { border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .theme-opt.theme-on .theme-dot::after { color:#fff !important; }
html[data-mode="dark"]:root #nav-bar { background:rgb(var(--d-600)) !important; }
html[data-mode="dark"]:root [data-ui="type01"] #nav-bar { background:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root .nm-panel { background:#16181b !important; }
html[data-mode="dark"]:root .nm-avatar { border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .nm-name { color:#ececec !important; }
html[data-mode="dark"]:root .nm-meta { color:#a8aab0 !important; }
html[data-mode="dark"]:root .nm-role { background:#16181b !important; }
html[data-mode="dark"]:root .nm-label { color:#94a3b8 !important; }
html[data-mode="dark"]:root .nm-row:hover { background:#202328 !important; }
html[data-mode="dark"]:root .nm-t { color:#ececec !important; }
html[data-mode="dark"]:root .nm-t small { color:#94a3b8 !important; }
html[data-mode="dark"]:root .nm-go { color:#cbd5e1 !important; }
html[data-mode="dark"]:root .nm-badge { color:#fff !important; }
html[data-mode="dark"]:root .nm-logout { color:#f08aa0 !important; background:rgba(216,38,50,.16) !important; border-color:rgba(204,50,69,.35) !important; }
html[data-mode="dark"]:root .nm-logout:hover { background:rgba(216,38,51,.16) !important; }
html[data-mode="dark"]:root .menu-panel { background:#16181b !important; }
html[data-mode="dark"]:root .menu-item { color:#ececec !important; }
html[data-mode="dark"]:root .menu-item:hover { background:#202328 !important; }
html[data-mode="dark"]:root .menu-item.danger { color:#DC2626 !important; }
html[data-mode="dark"]:root .menu-item.danger:hover { background:rgba(216,38,38,.16) !important; }
html[data-mode="dark"]:root .dock { background:#16181b !important; }
html[data-mode="dark"]:root .dock-item { color:#a8aab0 !important; }
html[data-mode="dark"]:root .dock-badge { color:#fff !important; }
html[data-mode="dark"]:root .flash { color:#fff !important; }
html[data-mode="dark"]:root .flash-success { background:rgb(var(--d-800)) !important; }
html[data-mode="dark"]:root .toast-body { color:#fff !important; }
html[data-mode="dark"]:root .ann-card { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .ring-avatar { background:conic-gradient(from 200deg, rgb(var(--d-800)), rgb(var(--d-500)), rgb(var(--d-200)), rgb(var(--d-700)), rgb(var(--d-800))) !important; }
html[data-mode="dark"]:root .ring-avatar img { border-color:rgba(255,255,255,.14) !important; background:#202328 !important; }
html[data-mode="dark"]:root .header-date-container { background:#16181b !important; }
html[data-mode="dark"]:root .alert-row.amber { background:linear-gradient(180deg,rgba(216,181,38,.16),rgba(216,181,38,.16)) !important; border-color:#FCD34D !important; color:#f0ae89 !important; }
html[data-mode="dark"]:root .alert-row.rose { background:linear-gradient(180deg,rgba(216,38,50,.16),rgba(216,38,51,.16)) !important; border-color:rgba(204,50,69,.35) !important; color:#ef8ba9 !important; }
html[data-mode="dark"]:root .qtile { background:linear-gradient(180deg, #16181b, #16181b) !important; }
html[data-mode="dark"]:root .qtile .qt { color:#ececec !important; }
html[data-mode="dark"]:root .qtile .qs { color:#a8aab0 !important; }
html[data-mode="dark"]:root .qtile .go { color:#94a3b8 !important; }
html[data-mode="dark"]:root .dh-month { color:#ececec !important; }
html[data-mode="dark"]:root .dh-year { color:#94a3b8 !important; }
html[data-mode="dark"]:root .dh-greg { color:#94a3b8 !important; }
html[data-mode="dark"]:root .greet-name { color:#ececec !important; }
html[data-mode="dark"]:root .qtile { background:#16181b !important; }
html[data-mode="dark"]:root .ring-avatar { background:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root .ring-avatar img { border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .qtile::after { background:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root .home-stagger a.block.rounded-3xl { background:#16181b !important; }
html[data-mode="dark"]:root .ev-card { background:#16181b !important; }
html[data-mode="dark"]:root .ev-eyebrow { color:#a8aab0 !important; }
html[data-mode="dark"]:root .ev-arrow { background:#16181b !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .ev-item.today .ev-date { background:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root .ev-item.today .ev-date b,
html[data-mode="dark"]:root .ev-item.today .ev-date span { color:#fff !important; }
html[data-mode="dark"]:root .ev-t { color:#ececec !important; }
html[data-mode="dark"]:root .ev-s { color:#a8aab0 !important; }
html[data-mode="dark"]:root .ev-tag { color:#a8aab0 !important; }
html[data-mode="dark"]:root .ev-x { color:#a3a3a3 !important; }
html[data-mode="dark"]:root .ev-x:hover { color:#ee8c8c !important; }
html[data-mode="dark"]:root .bd-sheet { background:#16181b !important; }
html[data-mode="dark"]:root .bd-title { color:#ececec !important; }
html[data-mode="dark"]:root .bd-sub { color:#a8aab0 !important; }
html[data-mode="dark"]:root .bd-x { background:#16181b !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .bd-name { color:#ececec !important; }
html[data-mode="dark"]:root .bd-btn { background:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root .bd-btn:hover { background:rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root .dlg-toggle { background:#16181b !important; }
html[data-mode="dark"]:root .dlg-toggle .dlg-n { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root .dlg-panel { background:#16181b !important; }
html[data-mode="dark"]:root .dlg-hint { color:#a8aab0 !important; }
html[data-mode="dark"]:root .dlg-list li { border-top-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .dlg-name { color:#ececec !important; }
html[data-mode="dark"]:root .dlg-its { color:#94a3b8 !important; }
html[data-mode="dark"]:root .dlg-x { border-color:rgba(255,255,255,.14) !important; background:#16181b !important; color:#a8aab0 !important; }
html[data-mode="dark"]:root .dlg-x:hover { border-color:#f43f5e !important; color:#f08aa0 !important; }
html[data-mode="dark"]:root .dlg-add input { border-color:rgba(255,255,255,.14) !important; background:#16181b !important; }
html[data-mode="dark"]:root .dlg-add button { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root .dlg-who { color:#a8aab0 !important; }
html[data-mode="dark"]:root .dlg-who.bad { color:#f08aa0 !important; }
html[data-mode="dark"]:root .fc-menu { color:#fff !important; background:linear-gradient(135deg, rgb(var(--d-800)), rgb(var(--d-950))) !important; }
html[data-mode="dark"]:root .fc-hero { background:#16181b !important; }
html[data-mode="dark"]:root .fc-hero .k { color:#a8aab0 !important; }
html[data-mode="dark"]:root .fc-hero .s { color:#a8aab0 !important; }
html[data-mode="dark"]:root .fc-box { background:#16181b !important; }
html[data-mode="dark"]:root .fc-box .k { color:#a8aab0 !important; }
html[data-mode="dark"]:root .fc-note { color:#a8aab0 !important; }
html[data-mode="dark"]:root .kv .k { color:#94a3b8 !important; }
html[data-mode="dark"]:root .kv .v { color:#ececec !important; }
html[data-mode="dark"]:root .sec-h { color:#94a3b8 !important; }
html[data-mode="dark"]:root .act { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; }
html[data-mode="dark"]:root .seg button { color:#a8aab0 !important; }
html[data-mode="dark"]:root .seg button.on { background:#16181b !important; }
html[data-mode="dark"]:root .reason-chip { background:#16181b !important; border-color:rgba(255,255,255,.14) !important; color:#ececec !important; }
html[data-mode="dark"]:root .bar { background:#202328 !important; }
html[data-mode="dark"]:root .tl-item::before { background:#202328 !important; }
html[data-mode="dark"]:root .dot.ok { background:rgb(var(--d-600)) !important; color:#fff !important; }
html[data-mode="dark"]:root .dot.bad { color:#fff !important; }
html[data-mode="dark"]:root .dot.wait { background:#16181b !important; color:#f5b584 !important; border-color:#FCD34D !important; }
html[data-mode="dark"]:root .dot.mine { background:rgba(216,181,38,.16) !important; color:#f5b584 !important; border-color:#F59E0B !important; }
html[data-mode="dark"]:root .stat { background:linear-gradient(180deg, #16181b, #16181b) !important; }
html[data-mode="dark"]:root .stat .k { color:#a8aab0 !important; }
html[data-mode="dark"]:root .stat .v { color:#ececec !important; }
html[data-mode="dark"]:root .stat .s { color:#a8aab0 !important; }
html[data-mode="dark"]:root .pbar { background:#202328 !important; }
html[data-mode="dark"]:root { background-color:#202328 !important; }
html[data-mode="dark"]:root body { background:#202328 !important; background:color-mix(in srgb, rgb(var(--e-50)) 28%, #202328) !important; }
html[data-mode="dark"]:root ::selection { background:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root body .glass-card,
html[data-mode="dark"]:root body .bg-white\/80,
html[data-mode="dark"]:root body .bg-white\/70 { background:#16181b !important; }
html[data-mode="dark"]:root body .glass-nav { background:#16181b !important; }
html[data-mode="dark"]:root body .icon-btn { background:#16181b !important; }
html[data-mode="dark"]:root body .dock { background:#16181b !important; }
html[data-mode="dark"]:root body .dock-item { color:#a8aab0 !important; }
html[data-mode="dark"]:root body .dock-item.active::before { background:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html[data-mode="dark"]:root body select,
html[data-mode="dark"]:root body textarea { background:#16181b !important; }
html[data-mode="dark"]:root body .bn-card { background:rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root body .bn-ic { background:rgba(22,24,27,.1) !important; }
html[data-mode="dark"]:root body .hub-tile,
html[data-mode="dark"]:root body .stat,
html[data-mode="dark"]:root body .pcard,
html[data-mode="dark"]:root body .hof-row,
html[data-mode="dark"]:root body .reason-chip,
html[data-mode="dark"]:root body .dchip,
html[data-mode="dark"]:root body .slot { background:#16181b !important; }
html[data-mode="dark"]:root body .fld,
html[data-mode="dark"]:root body .seg-opt span { background:#16181b !important; }
html[data-mode="dark"]:root body :is(button,a)[class*="bg-gradient"] { background:rgb(var(--d-800)) !important; }
html[data-mode="dark"]:root body :is(button,a)[class*="bg-gradient"]:hover { background:rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root body #global-page-loader { background:#202328 !important; }
html[data-mode="dark"]:root body #global-page-loader .animate-pulse-text { color:#ececec !important; }
html[data-mode="dark"]:root body #global-page-loader .relative.z-10.pt-1::after { background:linear-gradient(90deg, transparent 0, rgb(var(--d-700)) 30%, rgb(var(--d-700)) 70%, transparent 100%) !important; }
html[data-mode="dark"]:root body .nm-panel { background:#16181b !important; }
html[data-mode="dark"]:root body .nm-head { background:#16181b !important; }
html[data-mode="dark"]:root body .nm-role { background:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root body #calendar-modal > div { background:#202328 !important; }
html[data-mode="dark"]:root body #calendar-modal > div > div:first-child { background:#16181b !important; }
html[data-mode="dark"]:root body #calendar-frame { background:#202328 !important; }
html[data-mode="dark"]:root body .dchip.on,
html[data-mode="dark"]:root body .slot.sel { background:rgb(var(--d-800)) !important; color:#fff !important; }
html[data-mode="dark"]:root body .dchip.on .dw,
html[data-mode="dark"]:root body .dchip.on .dd,
html[data-mode="dark"]:root body .dchip.on .dm { color:#fff !important; }
html[data-mode="dark"]:root body .glass-card.menu-banner { background:rgb(var(--d-900)) !important; color:#fff !important; }
html[data-mode="dark"]:root body .glass-card.menu-banner p { color:#fff !important; }
html[data-ui="type01"][data-mode="dark"]:root .toast-body { background:#16181b !important; }
html[data-ui="type01"][data-mode="dark"]:root .toast-body.error { background:#16181b !important; color:#f288a5 !important; }
html[data-ui="type01"][data-mode="dark"]:root .fmb-skipped { background:rgba(216,157,38,.16) !important; }
html[data-ui="type01"][data-mode="dark"]:root .fmb-skipped .tot-badge span { color:#a8aab0 !important; }
html[data-ui="type01"][data-mode="dark"]:root .season-card .sc-status { color:#a8aab0 !important; }
html[data-ui="type01"][data-mode="dark"]:root .season-card .sc-status.on { color:#eecf8b !important; }
html[data-ui="type01"][data-mode="dark"]:root .sc-seg button { background:#16181b !important; color:#a8aab0 !important; }
html[data-ui="type01"][data-mode="dark"]:root .sc-seg button.sel { color:#fff !important; }

html[data-mode="dark"]:root { color-scheme: dark; --j-ink:#ececec; --j-line:rgba(255,255,255,.10); --j-line-2:rgba(255,255,255,.18); --j-paper:#0d0e10;
  --n-bg:#0d0e10; --n-card:#16181b; --n-raise:#1e2125; --n-line:rgba(255,255,255,.10); --n-line2:rgba(255,255,255,.18); --n-ink:#ececec; --n-mute:#a1a1a6; --n-dim:#7d7f85; }
html[data-mode="dark"]:root, html[data-mode="dark"]:root body { background:var(--n-bg) !important; background-image:none !important; color:var(--n-ink); }

/* ---- Tailwind neutrals ---- */
html[data-mode="dark"]:root .bg-white, html[data-mode="dark"]:root [class*="bg-white/"] { background-color:var(--n-card) !important; }
html[data-mode="dark"]:root [class*="bg-slate-50"] { background-color:var(--n-raise) !important; }
html[data-mode="dark"]:root .bg-slate-100, html[data-mode="dark"]:root [class*="bg-slate-100/"] { background-color:#202328 !important; }
html[data-mode="dark"]:root .bg-slate-200 { background-color:#2b2e33 !important; }
html[data-mode="dark"]:root .text-slate-900, html[data-mode="dark"]:root .text-slate-800, html[data-mode="dark"]:root .text-neutral-900 { color:#f1f1f2 !important; }
html[data-mode="dark"]:root .text-slate-700, html[data-mode="dark"]:root .text-slate-600, html[data-mode="dark"]:root .text-gray-600 { color:#cfd0d4 !important; }
html[data-mode="dark"]:root .text-slate-500, html[data-mode="dark"]:root .text-slate-400, html[data-mode="dark"]:root .text-neutral-400 { color:var(--n-mute) !important; }
html[data-mode="dark"]:root .text-slate-300 { color:#6f7177 !important; }
html[data-mode="dark"]:root [class*="border-slate-"], html[data-mode="dark"]:root .border-white { border-color:var(--n-line) !important; }
html[data-mode="dark"]:root .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html[data-mode="dark"]:root [class*="divide-slate"] > :not([hidden]) ~ :not([hidden]) { border-color:var(--n-line) !important; }
html[data-mode="dark"]:root .ring-white { --tw-ring-color:var(--n-card) !important; }
html[data-mode="dark"]:root .placeholder\:text-slate-400::placeholder, html[data-mode="dark"]:root ::placeholder { color:#6f7177 !important; }

/* ---- pastel status tints: deep translucent surface + light text ---- */
html[data-mode="dark"]:root :is([class*="bg-amber-50"],[class*="bg-amber-100"],[class*="bg-amber-200"],[class*="bg-yellow-50"],[class*="bg-yellow-100"],[class*="bg-orange-50"],[class*="bg-orange-100"]) { background-color:rgba(245,158,11,.14) !important; }
html[data-mode="dark"]:root :is([class*="bg-rose-50"],[class*="bg-rose-100"],[class*="bg-red-50"],[class*="bg-red-100"],[class*="bg-pink-50"],[class*="bg-pink-100"]) { background-color:rgba(244,63,94,.15) !important; }
html[data-mode="dark"]:root :is([class*="bg-sky-50"],[class*="bg-sky-100"],[class*="bg-blue-50"],[class*="bg-blue-100"]) { background-color:rgba(14,165,233,.16) !important; }
html[data-mode="dark"]:root :is([class*="bg-violet-50"],[class*="bg-violet-100"],[class*="bg-indigo-50"],[class*="bg-indigo-100"]) { background-color:rgba(139,92,246,.18) !important; }
html[data-mode="dark"]:root :is([class*="bg-teal-50"],[class*="bg-teal-100"],[class*="bg-green-50"],[class*="bg-green-100"]) { background-color:rgba(20,184,166,.16) !important; }
html[data-mode="dark"]:root :is(.text-amber-950,.text-amber-900,.text-amber-800,.text-amber-700,.text-amber-600) { color:#fbbf24 !important; }
html[data-mode="dark"]:root :is(.text-rose-800,.text-rose-700,.text-rose-600,.text-rose-500,.text-red-700,.text-red-600,.text-red-500) { color:#fb7185 !important; }
html[data-mode="dark"]:root :is(.text-sky-800,.text-sky-700,.text-blue-700) { color:#7dd3fc !important; }
html[data-mode="dark"]:root :is(.text-violet-700,.text-indigo-700) { color:#c4b5fd !important; }
html[data-mode="dark"]:root :is(.text-teal-700,.text-green-700) { color:#5eead4 !important; }
html[data-mode="dark"]:root :is([class*="border-amber-"]) { border-color:rgba(245,158,11,.35) !important; }
html[data-mode="dark"]:root :is([class*="border-rose-"],[class*="border-red-"]) { border-color:rgba(244,63,94,.35) !important; }

/* ---- accent solids keep their deep original shade (white text stays readable) ---- */
html[data-mode="dark"]:root :is(.bg-emerald-600,.bg-emerald-700) { background-color:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root :is(.bg-emerald-800) { background-color:rgb(var(--d-800)) !important; }
html[data-mode="dark"]:root :is(.bg-emerald-900,.bg-emerald-950) { background-color:rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root :is(.bg-emerald-500,.bg-emerald-400) { background-color:rgb(var(--d-500)) !important; }
html[data-mode="dark"]:root [class*="from-emerald"], html[data-mode="dark"]:root [class*="to-emerald"] { --tw-gradient-from:rgb(var(--d-700)) !important; --tw-gradient-to:rgb(var(--d-900)) !important; --tw-gradient-stops:rgb(var(--d-700)), rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root :is(.text-emerald-50,.text-emerald-100,.text-emerald-200,.text-emerald-300) { color:rgb(var(--d-200)) !important; }
html[data-mode="dark"]:root .bg-emerald-100, html[data-mode="dark"]:root .bg-emerald-50 { background-color:rgb(var(--d-900) / .45) !important; }
html[data-mode="dark"]:root .ring-emerald-600, html[data-mode="dark"]:root [class*="ring-emerald-"] { --tw-ring-color:rgb(var(--e-600)) !important; }

/* ---- Portal chrome ---- */
html[data-mode="dark"]:root body .glass-card, html[data-mode="dark"]:root body .bg-white\/80, html[data-mode="dark"]:root body .bg-white\/70,
html[data-mode="dark"]:root body .glass-nav, html[data-mode="dark"]:root body .dock, html[data-mode="dark"]:root body .icon-btn,
html[data-mode="dark"]:root body .look-pop, html[data-mode="dark"]:root body .nm-panel, html[data-mode="dark"]:root body .nm-head,
html[data-mode="dark"]:root body .hub-tile, html[data-mode="dark"]:root body .stat, html[data-mode="dark"]:root body .pcard, html[data-mode="dark"]:root body .hof-row,
html[data-mode="dark"]:root body .reason-chip, html[data-mode="dark"]:root body .dchip, html[data-mode="dark"]:root body .slot,
html[data-mode="dark"]:root body .fld, html[data-mode="dark"]:root body .seg-opt span,
html[data-mode="dark"]:root[data-ui="type01"] .toast-body, html[data-mode="dark"]:root[data-ui="type01"] .sc-seg button,
html[data-mode="dark"]:root body #calendar-modal > div > div:first-child, html[data-mode="dark"]:root .qtile {
  background:var(--n-card) !important; border-color:var(--n-line) !important; color:var(--n-ink);
}
html[data-mode="dark"]:root body .glass-nav, html[data-mode="dark"]:root body .dock { border-color:var(--n-line2) !important; }
html[data-mode="dark"]:root body .icon-btn { border-color:var(--n-line2) !important; }
html[data-mode="dark"]:root body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), html[data-mode="dark"]:root body select, html[data-mode="dark"]:root body textarea {
  background:var(--n-raise) !important; color:var(--n-ink) !important; border-color:var(--n-line2) !important;
}
html[data-mode="dark"]:root body .dock-item { color:#8b8d93; }
html[data-mode="dark"]:root body .dock-item.active { color:#fff !important; }
html[data-mode="dark"]:root body .dock-item.active::before { background:rgb(var(--e-600)); }
html[data-mode="dark"]:root .look-h, html[data-mode="dark"]:root .look-nm { color:var(--n-ink) !important; }
html[data-mode="dark"]:root .look-cur { color:rgb(var(--e-600)) !important; }
html[data-mode="dark"]:root body #calendar-modal > div, html[data-mode="dark"]:root body #calendar-frame { background:var(--n-bg) !important; }
html[data-mode="dark"]:root[data-ui="type01"] .toast-body { color:var(--n-ink); }
html[data-mode="dark"]:root[data-ui="type01"] .fmb-skipped { background:#121316 !important; }
html[data-mode="dark"]:root[data-ui="type01"] .sc-seg button.sel { background:#ececec !important; color:#0d0e10 !important; }
html[data-mode="dark"]:root body #global-page-loader { background:#0d0e10 !important; }
html[data-mode="dark"]:root body #global-page-loader .animate-pulse-text { color:#ececec !important; }
html[data-mode="dark"]:root ::selection { background:rgb(var(--e-600)); color:#0d0e10; }
html[data-mode="dark"]:root .dh-day, html[data-mode="dark"]:root body .dh-day { color:rgb(var(--e-600)) !important; }
html[data-mode="dark"]:root body .dh-month { color:rgb(var(--e-700)) !important; }
html[data-mode="dark"]:root body .nm-row:hover { background:var(--n-raise) !important; }
html[data-mode="dark"]:root body .dchip.on, html[data-mode="dark"]:root body .slot.sel, html[data-mode="dark"]:root body :is(button,a)[class*="bg-gradient"] { background:rgb(var(--d-800)) !important; border-color:rgb(var(--d-700)) !important; color:#fff !important; }
html[data-mode="dark"]:root body .glass-card.menu-banner, html[data-mode="dark"]:root body .bn-card { background:rgb(var(--d-900)) !important; }
html[data-mode="dark"]:root body .glass-card.menu-banner h3 { color:rgb(var(--d-200)) !important; }
html[data-mode="dark"]:root body .nm-role { background:rgb(var(--d-700)) !important; border-color:rgb(var(--d-700)) !important; }
html[data-mode="dark"]:root body input.reason-radio:checked + .reason-chip { background:rgb(var(--d-900) / .5) !important; color:#fff !important; border-color:rgb(var(--e-600)) !important; }

/* ---- Page-level inline colours (hex written in page styles) ---- */
html[data-mode="dark"]:root [style*="background:#fff"], html[data-mode="dark"]:root [style*="background: #fff"], html[data-mode="dark"]:root [style*="background:white"] { background:var(--n-card) !important; }
html[data-mode="dark"]:root [style*="color:#0f172a"], html[data-mode="dark"]:root [style*="color: #0f172a"], html[data-mode="dark"]:root [style*="color:#0a0a0a"] { color:var(--n-ink) !important; }
html[data-mode="dark"]:root [style*="color:#64748b"], html[data-mode="dark"]:root [style*="color: #64748b"], html[data-mode="dark"]:root [style*="color:#94a3b8"], html[data-mode="dark"]:root [style*="color:#737373"] { color:var(--n-mute) !important; }
html[data-mode="dark"]:root img.avatar-light { filter:none; }
/* never darken photos / logos */
html[data-mode="dark"]:root img, html[data-mode="dark"]:root video, html[data-mode="dark"]:root canvas { filter:none; }
html[data-mode="dark"]:root .lang-pill { background:var(--n-raise) !important; color:#cfd0d4 !important; border-color:var(--n-line2) !important; }
html[data-mode="dark"]:root .lang-pill.lang-on, html[data-mode="dark"]:root .lang-pill[data-mode-opt][aria-pressed="true"] { background:rgb(var(--d-700)) !important; border-color:rgb(var(--e-600)) !important; color:#fff !important; }
html[data-mode="dark"]:root :is(.brand-title,.greet-name,.qt,.hub-t,.dh-name) { color:var(--n-ink) !important; }
html[data-mode="dark"]:root :is([class*="from-white"],[class*="via-white"]) { --tw-gradient-from:#16181b !important; --tw-gradient-stops:#16181b, var(--tw-gradient-to,rgb(22 24 27 / 0)) !important; }
html[data-mode="dark"]:root [class*="to-white"] { --tw-gradient-to:#16181b !important; }

/* page-specific hard-coded greys (ledger, appointments, fmb) */
html[data-mode="dark"]:root :is(.tk-h1,.tk-tab.on,.dchip .dd,.dchip .dw,.dchip .dm,.tk-name,.tk-amt) { color:var(--n-ink) !important; }
html[data-mode="dark"]:root :is(.tk-tab,.tk-tab em,.tk-chev) { color:var(--n-mute) !important; }
html[data-mode="dark"]:root .tk-tab.on { border-color:rgb(var(--e-600)) !important; }
html[data-mode="dark"]:root button.bg-slate-300 { background-color:#2b2e33 !important; color:#8b8d93 !important; }

/* page components with their own white / pastel fills */
html[data-mode="dark"]:root :is(.tk-card,.tk-btn,.tk-search,.tk-list,.tk-input,.tk-sheet,.ev-card,.bd-sheet,.bd-x,.ev-arrow,.dlg-toggle,.dlg-panel,.dlg-x,.dlg-add input,.fc-hero,.fc-box,.btn-sec,.btn-bad,.seg button.on,.noc-card,.dot.wait) {
  background:var(--n-card) !important; border-color:var(--n-line2) !important; color:var(--n-ink) !important; }
html[data-mode="dark"]:root :is(.tk-search,.tk-input,.dlg-add input) { background:var(--n-raise) !important; }
html[data-mode="dark"]:root :is(.btn-bad) { color:#fb7185 !important; border-color:rgba(244,63,94,.4) !important; }
html[data-mode="dark"]:root .slot.taken { background:#121316 !important; color:#5d5f65 !important; border-color:var(--n-line) !important; }
html[data-mode="dark"]:root .seg-opt.masjid input:checked + span { background:rgba(245,158,11,.16) !important; color:#fbbf24 !important; }
html[data-mode="dark"]:root .tag { background:#23262b !important; color:#cfd0d4 !important; }
html[data-mode="dark"]:root .tag.role { background:rgba(139,92,246,.2) !important; color:#c4b5fd !important; }
html[data-mode="dark"]:root .tag.takhmeen { background:rgba(245,158,11,.18) !important; color:#fbbf24 !important; }
html[data-mode="dark"]:root .tag.payment { background:rgba(16,185,129,.18) !important; color:#6ee7b7 !important; }
html[data-mode="dark"]:root .tag.menu { background:rgba(14,165,233,.18) !important; color:#7dd3fc !important; }
html[data-mode="dark"]:root .tag.noc, html[data-mode="dark"]:root :is(.pav.f,.pph.f) { background:rgba(236,72,153,.2) !important; color:#f9a8d4 !important; }
html[data-mode="dark"]:root .tag.appointment { background:rgba(20,184,166,.18) !important; color:#5eead4 !important; }
html[data-mode="dark"]:root .ring-avatar img { border-color:var(--n-card) !important; background:#23262b !important; }
html[data-mode="dark"]:root :is(.fc-hero,.fc-box) .n { color:rgb(var(--e-700)) !important; }
html[data-mode="dark"]:root [class*="bg-slate-200"] { background-color:#2b2e33 !important; }
html[data-mode="dark"]:root :is(.text-slate-600) { color:#cfd0d4 !important; }
html[data-mode="dark"]:root img[src*="Logo"] { background:transparent; }
html[data-mode="dark"]:root .alert-row.amber { background:rgba(245,158,11,.14) !important; border-color:rgba(245,158,11,.4) !important; color:#fbbf24 !important; }
html[data-mode="dark"]:root .alert-row.rose { background:rgba(244,63,94,.14) !important; border-color:rgba(244,63,94,.4) !important; color:#fb7185 !important; }
html[data-mode="dark"]:root .tk-st.unpaid { color:#fb7185 !important; }
html[data-mode="dark"]:root .tk-card b, html[data-mode="dark"]:root .tk-list b { color:var(--n-ink); }
/* embedded Mumineen calendar (external page): invert it so it isn't a white slab */
html[data-mode="dark"]:root #calendar-frame { filter:invert(1) hue-rotate(180deg); background:#0d0e10 !important; }
html[data-mode="dark"]:root #calendar-modal > div { background:#0d0e10 !important; }
html[data-mode="dark"]:root .qtile .qicon { background:transparent !important; }


/* Mode pills (Light / Night / Auto) in the theme menu */
.lang-pill[data-mode-opt][aria-pressed="true"] { background:rgb(var(--e-700)); border-color:rgb(var(--e-700)); color:#fff; }