/*
  Dark mode polish (loaded last). Slate style approved by the product owner:
  page #13282f, cards/banner in the brand charcoal #1a3640, controls one step lighter,
  circle colours and data series exactly as in light (white Fajr, teal Asr, grey Isha), lime for "now".
*/
:root[data-theme="dark"] body { background: var(--bg); }

/* Cards sit on the page by tone alone (no border, no heavy shadow) */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .k4, :root[data-theme="dark"] .qa-pill { border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .k4-bar { background: var(--surface-3); }

/* Main calls to action on the dark banners stay white with charcoal text (as in light) */
:root[data-theme="dark"] :is(.sbx-cta, .sbn-cta, .nsn-cta, .nsx-cta, .gx-cta, .call-cta, .sb-btn) { background: #fff; color: #1a3640; }
:root[data-theme="dark"] :is(.sbx-cta, .sbn-cta, .nsn-cta, .nsx-cta, .gx-cta, .call-cta, .sb-btn) svg { color: #1a3640; }
:root[data-theme="dark"] :is(.sbx-cta, .sbn-cta, .nsn-cta, .nsx-cta, .gx-cta):hover { background: var(--brand-lime); color: #1a3640; }

/* Quick actions: charcoal pills with a dashed edge */
:root[data-theme="dark"] .qa-pill { background: var(--surface); border: 1.5px dashed var(--line-2); }
:root[data-theme="dark"] .qa-pill:hover { border-color: var(--accent); }
:root[data-theme="dark"] .qa-pill .qp-go { background: var(--surface-3); }

/* Circle cards keep their light-mode colours */
:root[data-theme="dark"] .circle-card.ink { background: #1a3640; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .circle-card.brand { background: #307b96; }
:root[data-theme="dark"] .circle-card.lime { background: #6a7578; }
:root[data-theme="dark"] .gx.ink { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }

/* Sidebar: the current page is a slate pill with white text, icons sit in round chips */
:root[data-theme="dark"] .nav-item[aria-current="page"] { background: #365864; color: #fff; }
:root[data-theme="dark"] .nav-item[aria-current="page"] * { color: #fff; }
/* Collapsed rail: the current page is a white circle with the icon in the page colour */
:root[data-theme="dark"] .app.rail-min .nav-item[aria-current="page"] { background: transparent; }
:root[data-theme="dark"] .app.rail-min .nav-item[aria-current="page"] .ico-wrap { background: #f3f5f6; color: var(--bg); }
:root[data-theme="dark"] .app.rail-min .nav-item[aria-current="page"] .ico-wrap * { color: var(--bg); }

/* Counters inside a selected (white) pill */
:root[data-theme="dark"] .pill[aria-pressed="true"] .count, :root[data-theme="dark"] .pill[aria-selected="true"] .count,
:root[data-theme="dark"] .tpl-seg button.on .num, :root[data-theme="dark"] .tpl-seg button[aria-pressed="true"] .num { background: rgba(0, 0, 0, .1); color: var(--on-ink); }
:root[data-theme="dark"] .tab[aria-selected="true"] .muted, :root[data-theme="dark"] .tab[aria-pressed="true"] .muted { color: #5b6368; }

/* Notebook: each note keeps a hint of its colour on a charcoal card */
:root[data-theme="dark"] .nb-card { background: color-mix(in srgb, var(--tint, var(--surface)) 10%, var(--surface)); border-color: color-mix(in srgb, var(--tint, #fff) 20%, transparent); box-shadow: none; }
:root[data-theme="dark"] .nb-card:hover { box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .nb-tag { background: rgba(255, 255, 255, .08); }

/* Library folders */
:root[data-theme="dark"] .svf-folder, :root[data-theme="dark"] .svf-folder::before { background: #284a55; }

/* Teal text on charcoal: use the light teal so small labels stay readable */
:root[data-theme="dark"] :is(.badge.ok, .badge.info, .qa-st.ok, .ayah-no) { color: var(--accent-ink); }
/* Text the teacher coloured teal inside a note */
:root[data-theme="dark"] .nb-rich [style*="46, 122, 147"], :root[data-theme="dark"] .nb-rich [style*="#2e7a93" i] { color: var(--accent-ink) !important; }
:root[data-theme="dark"] .nb-rich [style*="26, 54, 64"], :root[data-theme="dark"] .nb-rich [style*="#1a3640" i] { color: var(--ink) !important; }

/* Charcoal chips with a lime icon in light become white chips in dark: icon and text take the page colour */
:root[data-theme="dark"] :is(.rv-step, .lb-ic, .lib-col-ic, .ls-n.big, .lib-surah.full .ls-n, .lib-toc nav .num, .lib-article h2 .num) { color: var(--bg); }
:root[data-theme="dark"] :is(.rv-step, .lb-ic, .lib-col-ic) svg { color: var(--bg); }
/* Correction-mode switch: white thumb, dark text and icon on the selected side */
:root[data-theme="dark"] .rv-switch button[aria-selected="true"], :root[data-theme="dark"] .rv-switch button[aria-selected="true"] * { color: var(--bg); }

/* Errors the system spotted: a light slate box (not pink), each error a charcoal row inside it */
:root[data-theme="dark"] :is(.sbm-auto, .auto-list) { background: var(--surface-3); border: 1px solid var(--line-2); }
:root[data-theme="dark"] :is(.sbm-item, .auto-item) { background: var(--surface); }
:root[data-theme="dark"] :is(.sbm-auto, .auto-list) .btn-ghost { color: var(--ink); }

/* Circle cards: done segments white, the rest a light veil — same rule on all three colours */
:root[data-theme="dark"] .circle-card .cc-seg span, :root[data-theme="dark"] .circle-card.lime .cc-seg span { background: rgba(255, 255, 255, .26); }
:root[data-theme="dark"] .circle-card .cc-seg span.on, :root[data-theme="dark"] .circle-card.lime .cc-seg span.on,
:root[data-theme="dark"] .circle-card.brand .cc-seg span.on, :root[data-theme="dark"] .circle-card.ink .cc-seg span.on { background: #fff; }

/* Mushaf while following a recitation: green-slate frame, words still to come in soft white (50%),
   words already recited in full white, the current word on the brand green with soft white text */
:root[data-theme="dark"] .sb-mushaf, :root[data-theme="dark"] .rv .sb-mushaf { background: #304650; border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .sb-mushaf .sbm-text { background: #2a3e47; color: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .sb-mushaf .sbw.read { color: #fff; }
:root[data-theme="dark"] .sb-mushaf .sbw.cur { background: #165b62; color: rgba(255, 255, 255, .88); box-shadow: 0 0 0 2px #165b62; }

/* Charts: the charcoal series (#1a3640 in the data) becomes light grey so it reads on charcoal cards */
:root[data-theme="dark"] .card [fill="#1a3640"] { fill: #c9d0d4; }
:root[data-theme="dark"] .card [stroke="#1a3640"] { stroke: #c9d0d4; }
:root[data-theme="dark"] .card [style*="#1a3640"]:not(svg) { background: #c9d0d4 !important; }

/* Programme milestone «عرض السبع وإجازته»: a charcoal card with a lime edge instead of the pale lime wash */
:root[data-theme="dark"] .pm-card.final { background: var(--surface-2); border-color: rgba(177, 235, 81, .45); }
:root[data-theme="dark"] .pm-card.final.done { opacity: .8; }

/* Anything sitting on brand lime keeps dark text */
:root[data-theme="dark"] .sbx-mini.on *, :root[data-theme="dark"] .sbx-mode * { color: var(--on-lime); }

/* Recording waveform: still to play = soft white, already played = brand green */
:root[data-theme="dark"] .rv .rv-wave span { background: rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .rv .rv-wave span.on { background: #3a95b5; }

/* Error severity on the dark mushaf */
:root[data-theme="dark"] { --sev-high: #f06a5f; --sev-high-soft: rgba(240, 106, 95, .16); --sev-mid: #f2a33a; --sev-mid-soft: rgba(242, 163, 58, .16); }
:root[data-theme="dark"] .sbw.mk.sev-mid, :root[data-theme="dark"] .pk-row.on.sev-mid, :root[data-theme="dark"] .sb-err-chip.sev-mid { color: var(--sev-mid); }
:root[data-theme="dark"] .sb-mushaf .sbw.mk.sev-high { color: #ff9d94; }
:root[data-theme="dark"] .mk-word.sev-mid { color: var(--sev-mid); }
:root[data-theme="dark"] .tk.part { background: var(--brand-lime); color: var(--on-lime); }

/* Library folders: the front pocket is frosted glass instead of solid white */
:root[data-theme="dark"] .svf-front { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 -8px 18px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
:root[data-theme="dark"] .svf-n { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .svf.on .svf-n { background: var(--accent); }

/* Notes in dark: each card colour becomes tinted glass with a stroke in its own hue (--g = the hue as r,g,b). */
:root[data-theme="dark"] [data-tint="white"] { --g: 226, 232, 236; }
:root[data-theme="dark"] [data-tint="sand"] { --g: 242, 184, 75; }
:root[data-theme="dark"] [data-tint="mint"] { --g: 143, 208, 228; }
:root[data-theme="dark"] [data-tint="sky"] { --g: 92, 172, 199; }
:root[data-theme="dark"] [data-tint="rose"] { --g: 236, 122, 156; }
:root[data-theme="dark"] [data-tint="lilac"] { --g: 166, 140, 236; }
:root[data-theme="dark"] .nb-main[data-tint], :root[data-theme="dark"] .nb-card[data-tint] {
  background: linear-gradient(160deg, rgba(var(--g), .16), rgba(var(--g), .06)); border: 1px solid rgba(var(--g), .34);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .nb-main[data-tint="white"], :root[data-theme="dark"] .nb-card[data-tint="white"] { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border-color: rgba(255, 255, 255, .13); }
:root[data-theme="dark"] .nb-card[data-tint]:hover { border-color: rgba(var(--g), .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px -20px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .nb-title { color: #f1f4f5; }
:root[data-theme="dark"] .nb-title::placeholder { color: rgba(241, 244, 245, .45); }
:root[data-theme="dark"] .nb-editor { color: #e6ebee; }
:root[data-theme="dark"] .nb-editor:empty::before { color: rgba(230, 235, 238, .42); }
/* Toolbar: dark glass strip, readable buttons */
:root[data-theme="dark"] .nb-toolbar { background: rgba(0, 0, 0, .22); border: 1px solid rgba(var(--g, 255, 255, 255), .2); }
:root[data-theme="dark"] .nb-tool { color: #dfe5e8; }
:root[data-theme="dark"] .nb-tool:hover { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .nb-sep { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .nb-ink { box-shadow: inset 0 0 0 2px #17313a, 0 0 0 1px rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .nb-ink[style*="#141719"] { background: #eef2f4; }
:root[data-theme="dark"] .nb-hl { background: rgba(242, 184, 75, .3); color: #ffe3a3; }
/* The "dark ink" colour reads as light text in dark mode; highlighted text keeps contrast */
:root[data-theme="dark"] .nb-rich [style*="20, 23, 25"], :root[data-theme="dark"] .nb-rich [style*="#141719" i] { color: #f1f4f5 !important; }
:root[data-theme="dark"] .nb-rich [style*="background-color: rgb(255, 241, 168)"] { background-color: rgba(242, 184, 75, .3) !important; color: #ffe3a3 !important; }
/* Colour picker: each swatch is its glass tint with its own stroke */
:root[data-theme="dark"] .nb-tint[data-tint] { background: rgba(var(--g), .2); border: 1.5px solid rgba(var(--g), .55); color: rgb(var(--g)); }
:root[data-theme="dark"] .nb-tint[data-tint="white"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: #fff; }
:root[data-theme="dark"] .nb-tint.on { box-shadow: 0 0 0 2px #13282f, 0 0 0 4px rgba(var(--g), .9); }

/* Live session pill in the top bar: glass in dark mode so its text stays readable */
:root[data-theme="dark"] .tb-live { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: var(--ink-2); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
:root[data-theme="dark"] .tb-live-t { color: var(--ink); }
:root[data-theme="dark"] .tb-live-sep { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .tb-live-end { background: rgba(255, 255, 255, .14); color: var(--ink); }
:root[data-theme="dark"] .tb-live-end:hover { background: #e5483b; color: #fff; }
/* Notes in dark mode: colored notes become glass — a faint tint of the chosen paper color with a stroke in that color */
:root[data-theme="dark"] [data-paper="white"] { --tint: #ffffff; }
:root[data-theme="dark"] [data-paper="cream"] { --tint: #f2c47a; }
:root[data-theme="dark"] [data-paper="lime"] { --tint: #b1eb51; }
:root[data-theme="dark"] [data-paper="sky"] { --tint: #8fd0e4; }
:root[data-theme="dark"] [data-paper="lilac"] { --tint: #b9a6f0; }
:root[data-theme="dark"] [data-paper="rose"] { --tint: #f5a3b3; }
:root[data-theme="dark"] :is(.nt-card, .nt-paper):not([data-paper="night"]) {
  background: color-mix(in srgb, var(--tint, #fff) 9%, rgba(255, 255, 255, .03));
  border: 1.5px solid color-mix(in srgb, var(--tint, #fff) 50%, transparent);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: none; filter: none; color: #eef3f4;
}
:root[data-theme="dark"] .nt-card.on:not([data-paper="night"]) { border-color: var(--tint, #fff); box-shadow: 0 0 0 1px var(--tint, #fff); }
:root[data-theme="dark"] .nt-card:not([data-paper="night"]) * { color: inherit; }
:root[data-theme="dark"] .nt-card:not([data-paper="night"]) :is(p, small, time, span) { color: rgba(238, 243, 244, .72); }
:root[data-theme="dark"] .nt-card:not([data-paper="night"]) b { color: #fff; }
/* The chosen ink stays as a hint, lightened so the text reads on glass */
:root[data-theme="dark"] .nt-paper:not([data-paper="night"]) { --ink-l: color-mix(in srgb, var(--ink) 22%, #eef3f4); color: var(--ink-l); }
:root[data-theme="dark"] .nt-paper:not([data-paper="night"]) > * { --ink: var(--ink-l); }
:root[data-theme="dark"] .nt-paper:not([data-paper="night"]) .nt-tag { background: color-mix(in srgb, var(--tint, #fff) 14%, transparent); }
:root[data-theme="dark"] .nt-tpl-ic:not([data-paper="night"]) { background: color-mix(in srgb, var(--tint, #fff) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint, #fff) 55%, transparent); color: var(--tint, #fff); }