/* «ليل»: the dark theme for the whole app (home, account, studio and the editor).
   Neutral blacks, no navy. Slides stay as designed; previews of ready elements sit on a dark
   tile and their dark text is lifted (js/dark-theme.js) so nothing disappears before it is added. */
html[data-editor-theme=midnight] {
  --dk-bg: #0c0c0d; --dk-stage: #101011; --dk-surface: #151516; --dk-panel: #19191b; --dk-raise: #1f1f21; --dk-control: #252528;
  --dk-hover: #2b2b2f; --dk-press: #323236; --dk-line: #2a2a2d; --dk-line-2: #3a3a3e; --dk-ink: #f1f1f2; --dk-text: #d6d6d9; --dk-muted: #a3a3a8; --dk-faint: #77777d;
  --editor-ink: var(--dk-ink); --editor-muted: var(--dk-muted); --editor-panel: var(--dk-panel); --editor-line: var(--dk-line); --editor-control: var(--dk-control);
  background: var(--dk-bg);
}
html[data-editor-theme=midnight] body { background: var(--dk-bg); }
html[data-editor-theme=midnight] :is(input, select, textarea):not(#canvas *) { color-scheme: dark; }
html[data-editor-theme=midnight] :is(#drawer-content, #slides-panel, .desktop-main, #dashboard-view) { color-scheme: dark; }

/* Top bar */
html[data-editor-theme=midnight] #editor-view > header.pz-topbar { --tb-surface: var(--dk-surface); --tb-line: var(--dk-line); --tb-ink: var(--dk-ink); --tb-muted: var(--dk-muted); --tb-hover: var(--dk-hover); --tb-press: var(--dk-press); }
html[data-editor-theme=midnight] #editor-view > header.pz-topbar [data-tip]::after { background: #2f2f33; color: var(--dk-ink); }

/* Editor frame */
html[data-editor-theme=midnight] .desktop-mode #editor-view, html[data-editor-theme=midnight] #editor-view { background: var(--dk-bg); }
html[data-editor-theme=midnight] .stage-wrapper { background-color: var(--dk-stage) !important; background-image: radial-gradient(#2c2c30 .7px, transparent .7px) !important; border-color: var(--dk-line) !important; }
html[data-editor-theme=midnight] .desktop-mode #canvas { box-shadow: 0 14px 50px #0009, 0 0 0 1px #3a3a3e; }
html[data-editor-theme=midnight] :is(#editor-view > div.flex.flex-1 > aside:first-of-type, .editor-section-rail, #slides-panel, #drawer, #drawer > div:first-child) { background: var(--dk-panel) !important; border-color: var(--dk-line) !important; color: var(--dk-ink); }
html[data-editor-theme=midnight] .sidebar-icon-btn { color: var(--dk-muted) !important; }
html[data-editor-theme=midnight] .sidebar-icon-btn:hover { background: var(--dk-hover) !important; color: var(--dk-ink) !important; }
html[data-editor-theme=midnight] .sidebar-icon-btn.active { color: var(--dk-ink) !important; background: color-mix(in srgb, var(--brand-primary) 22%, var(--dk-control)) !important; }
html[data-editor-theme=midnight] #slides-panel > button { background: var(--dk-control) !important; color: var(--dk-ink) !important; border-color: var(--dk-line-2) !important; }

/* Slides list */
html[data-editor-theme=midnight] .slides-panel-heading, html[data-editor-theme=midnight] #slides-panel :is(h2, h3, .text-slate-800, .text-slate-700) { color: var(--dk-ink) !important; }
html[data-editor-theme=midnight] #slides-panel-count { background: var(--dk-control) !important; color: var(--dk-muted) !important; }
html[data-editor-theme=midnight] .slide-thumb { background: var(--dk-raise) !important; border-color: var(--dk-line-2) !important; }
html[data-editor-theme=midnight] .slide-thumb.active { border-color: var(--brand-primary) !important; }
html[data-editor-theme=midnight] :is(.slide-thumb-actions, .slide-smart-layout) { background: #232326f2 !important; border-color: var(--dk-line-2) !important; color: var(--dk-text) !important; box-shadow: 0 4px 14px #0007 !important; }
html[data-editor-theme=midnight] .slide-thumb-actions button { color: var(--dk-muted); }
html[data-editor-theme=midnight] .slide-thumb-actions button:hover { background: var(--dk-hover) !important; color: var(--dk-ink); }

/* Zoom controls */
html[data-editor-theme=midnight] .editor-view-controls { background: var(--dk-raise); color: var(--dk-text); border-color: var(--dk-line-2); box-shadow: 0 6px 20px #0008; }
html[data-editor-theme=midnight] .editor-view-controls button:hover { background: var(--dk-hover); }

/* Drawer heading */
html[data-editor-theme=midnight] #drawer-title, html[data-editor-theme=midnight] #drawer > div:first-child :is(h2, h3, button) { color: var(--dk-ink) !important; }
html[data-editor-theme=midnight] #drawer > div:first-child button:hover { background: var(--dk-hover) !important; }

/* Ready elements, ready designs and organization elements */
html[data-editor-theme=midnight] .ready-studio-intro { background: var(--dk-raise); border-color: var(--dk-line); }
html[data-editor-theme=midnight] .ready-studio-intro strong { color: var(--dk-ink); }
html[data-editor-theme=midnight] .ready-studio-intro small { color: var(--dk-muted); }
html[data-editor-theme=midnight] .ready-studio-intro span { color: color-mix(in srgb, var(--brand-primary) 60%, #fff); }
html[data-editor-theme=midnight] .ready-studio-section > h4 { color: var(--dk-text); }
html[data-editor-theme=midnight] .ready-fold { background: var(--dk-raise); border-color: var(--dk-line); }
html[data-editor-theme=midnight] .ready-fold > summary:hover { background: var(--dk-hover); }
html[data-editor-theme=midnight] .ready-fold > summary span { color: var(--dk-ink); }
html[data-editor-theme=midnight] .ready-fold > summary b { color: var(--dk-ink); background: color-mix(in srgb, var(--brand-primary) 30%, var(--dk-control)); }
html[data-editor-theme=midnight] .ready-fold > summary svg { color: var(--dk-faint); }
html[data-editor-theme=midnight] .ready-fold[open] > summary { border-color: var(--dk-line); }
html[data-editor-theme=midnight] :is(.ready-element-card, .ready-design-card) { background: var(--dk-panel); border-color: var(--dk-line-2); color: var(--dk-ink); }
html[data-editor-theme=midnight] :is(.ready-element-card, .ready-design-card):hover { border-color: var(--brand-primary); box-shadow: 0 10px 24px #0008; }
html[data-editor-theme=midnight] :is(.ready-element-copy, .ready-design-card) :is(strong, b) { color: var(--dk-ink); }
html[data-editor-theme=midnight] :is(.ready-element-copy, .ready-design-card) small { color: var(--dk-muted); }
html[data-editor-theme=midnight] .ready-element-preview { background: #232326; box-shadow: inset 0 0 0 1px #2e2e32; }
html[data-editor-theme=midnight] .ready-design-preview { background: #232326; box-shadow: inset 0 0 0 1px #2e2e32; }

/* Marks from js/dark-theme.js for parts not named above. A selected or active part keeps its own colours. */
html[data-editor-theme=midnight] .dk-surface:not(.active, .selected, .is-active, .is-selected, [aria-pressed=true], [aria-selected=true], [aria-checked=true], [aria-current], :has(> input:checked), :has(> * > input:checked)) { background-color: var(--dk-raise) !important; background-image: none !important; }
html[data-editor-theme=midnight] .dk-tint:not(.active, .selected, .is-active, [aria-pressed=true], [aria-selected=true]) { background-color: color-mix(in srgb, var(--brand-primary) 16%, var(--dk-raise)) !important; background-image: none !important; }
html[data-editor-theme=midnight] :is(button, a, summary, label, [role=button], [role=menuitem], [tabindex]):is(.dk-surface, .dk-tint):not(.active, .selected, [aria-pressed=true], [aria-selected=true]):hover { background-color: var(--dk-hover) !important; }
html[data-editor-theme=midnight] .dk-line:not(:is(button, a, summary, label, input, textarea, select, [role=button], [tabindex]):is(:hover, :focus), :has(> input:focus, > textarea:focus, > select:focus), .active, .selected, .is-active, .is-selected, [aria-pressed=true], [aria-selected=true], [aria-checked=true], :has(> input:checked), :has(> * > input:checked)) { border-color: var(--dk-line-2) !important; }
html[data-editor-theme=midnight] .dk-ink { color: var(--dk-ink) !important; }
html[data-editor-theme=midnight] .dk-muted { color: var(--dk-muted) !important; }
html[data-editor-theme=midnight] .dk-accent { color: color-mix(in srgb, var(--dk-orig) 58%, #fff) !important; }
html[data-editor-theme=midnight] :is(input, textarea, select).dk-surface { background-color: var(--dk-control) !important; }
html[data-editor-theme=midnight] ::placeholder { color: var(--dk-faint); }

/* The light/dark switch on screens outside the editor */
.dk-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; opacity: .8; }
.dk-toggle:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.dk-toggle svg { flex: none; }

/* Logo pictures keep a light tile: many logos are dark and would vanish on black. */
html[data-editor-theme=midnight] .logo-library-preview { background: #f4f4f5; border-radius: 9px; margin: 6px 6px 0; }
html[data-editor-theme=midnight] .logo-library-card { background: var(--dk-raise); border-color: var(--dk-line-2); }
html[data-editor-theme=midnight] .logo-library-card strong { color: var(--dk-ink); }
html[data-editor-theme=midnight] .logo-library-card small { color: var(--dk-faint); }
html[data-editor-theme=midnight] .general-logo-search { background: var(--dk-control); border-color: var(--dk-line-2); }
html[data-editor-theme=midnight] .general-logo-search input { color: var(--dk-ink); }

/* Preznta's wordmark: the white version on dark screens (slides keep whatever they use). */
html[data-editor-theme=midnight] img[src*="preznta-wordmark-color"]:not(#canvas *, .ready-mini-canvas *, .slide-live-preview *, .presentation-canvas *) { content: url("../assets/brand/preznta-wordmark-white.png"); }

/* Dialogs */
html[data-editor-theme=midnight] dialog::backdrop { background: rgba(0, 0, 0, .62); }
html[data-editor-theme=midnight] dialog:not(.presentation-player *) { border-color: var(--dk-line-2); }
html[data-editor-theme=midnight] .dk-page { background-color: var(--dk-bg) !important; background-image: none !important; }
html[data-editor-theme=midnight] .editor-nav-choice { border-color: var(--dk-line-2) !important; }

/* Export window */
html[data-editor-theme=midnight] .export-modal { background: var(--dk-panel); color: var(--dk-ink); border-color: var(--dk-line); }
html[data-editor-theme=midnight] .export-backdrop.is-working { background: var(--dk-bg); }
html[data-editor-theme=midnight] .export-quality-card { background: var(--dk-raise); border-color: var(--dk-line-2); box-shadow: none; }
html[data-editor-theme=midnight] .export-quality-card:hover { background: var(--dk-hover); border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--dk-line-2)); box-shadow: none; }
html[data-editor-theme=midnight] .export-quality-card.active { background: color-mix(in srgb, var(--brand-primary) 18%, var(--dk-raise)); border-color: var(--brand-primary); box-shadow: 0 10px 24px #0006; }
html[data-editor-theme=midnight] .export-quality-card .name { color: var(--dk-ink); }
html[data-editor-theme=midnight] .export-quality-card .desc { color: var(--dk-muted); }