/*
 * Style editor application-theme bridge.
 *
 * This file changes editor presentation only. It does not write theme state,
 * alter Style's compiler, or participate in generated application assets.
 * The .sp-pvframe protection block deliberately restores project --pp-* tokens
 * after the shared application dark-mode compatibility layer.
 */

body.sp-body {
    --sp-text: #0f172a;
    --sp-input: #ffffff;
    --sp-raised: #ffffff;
    --sp-hover: #f8fafc;
    --sp-shadow: rgba(15, 23, 42, .12);
}

html[data-pp-theme="dark"] body.sp-body {
    --sp-border: var(--pp-border, #2b3a52);
    --sp-muted: var(--pp-text-muted, #9cabc1);
    --sp-bg: var(--pp-app-bg, #0b1120);
    --sp-surface: var(--pp-surface, #111827);
    --sp-text: var(--pp-text, #e7edf7);
    --sp-input: var(--pp-input-bg, #101827);
    --sp-raised: var(--pp-surface-raised, #172033);
    --sp-hover: var(--pp-surface-muted, #1e293b);
    --sp-primary-soft: #172b4d;
    --sp-shadow: rgba(0, 0, 0, .34);
    color: var(--sp-text);
    color-scheme: dark;
}

html[data-pp-theme="dark"] body.sp-body :is(
    .sp-list, .sp-editor, .sp-ed-head, .sp-ed-body, .sp-actions,
    .sp-preview-wrap, .sp-preview-bar
) {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

html[data-pp-theme="dark"] body.sp-body .sp-preview-scroll {
    background: var(--sp-bg);
}

html[data-pp-theme="dark"] body.sp-body :is(.sp-list-head, .sp-ed-head, .sp-preview-bar, .sp-actions) {
    border-color: var(--sp-border);
}

html[data-pp-theme="dark"] body.sp-body :is(
    .sp-list-head strong, .sp-theme-meta strong, .sp-tok > label,
    .sp-ctl > label, .sp-checkrow, .sp-mi .mi-label,
    .sp-navbar-opt .nv-meta strong, .sp-modal-head strong, .sp-radio
) { color: var(--sp-text); }

html[data-pp-theme="dark"] body.sp-body .sp-theme:hover { background: var(--sp-hover); }
html[data-pp-theme="dark"] body.sp-body .sp-theme.active {
    background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-surface));
}
/* Swatch is a self-contained mini preview (its own bg/border come from the
   theme's tokens), so the dark shell only needs a subtle outer ring. */
html[data-pp-theme="dark"] body.sp-body .sp-swatch {
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.5);
}

html[data-pp-theme="dark"] body.sp-body :is(.sp-tabs, .sp-seg) {
    background: var(--sp-hover);
    border-color: var(--sp-border);
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-tabs button.active, .sp-seg button.active) {
    background: var(--sp-raised);
    color: var(--sp-primary);
    box-shadow: 0 1px 3px var(--sp-shadow);
}
html[data-pp-theme="dark"] body.sp-body .sp-maintabs {
    background: var(--sp-hover);
    border-color: var(--sp-border);
}
html[data-pp-theme="dark"] body.sp-body .sp-maintabs button {
    background: transparent;
    color: var(--sp-muted);
}
html[data-pp-theme="dark"] body.sp-body .sp-maintabs button:hover {
    background: var(--sp-raised);
    color: var(--sp-text);
}
/* Dark primary is a light blue — the filled pill needs a DARK label. */
html[data-pp-theme="dark"] body.sp-body .sp-maintabs { --sp-tab-on: #0b1220; --sp-track: var(--sp-hover); }
html[data-pp-theme="dark"] body.sp-body .sp-maintabs button.active {
    background: var(--sp-primary);
    color: var(--sp-tab-on);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
html[data-pp-theme="dark"] body.sp-body .sp-maintabs button:hover:not(.active) {
    background: var(--sp-raised);
}

html[data-pp-theme="dark"] body.sp-body :is(
    .sp-ed-head input.sp-name, .sp-tok input[type="text"],
    .sp-ctl select, .sp-ctl input[type="text"], .sp-ctl input[type="number"],
    .sp-mini, .sp-cssarea, .sp-mi input,
    .sp-modal-body #it-page, .sp-modal-body #it-sub
) {
    background: var(--sp-input);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-tok input, .sp-ctl input, .sp-cssarea, .sp-mi input)::placeholder {
    color: var(--sp-muted);
    opacity: 1;
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-tok input[type="color"], .sp-ctl input[type="color"]) {
    background: var(--sp-raised);
    border-color: var(--sp-border);
}

html[data-pp-theme="dark"] body.sp-body :is(.sp-btn, .sp-iconbtn, .sp-navbar-opt) {
    background: var(--sp-raised);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-btn, .sp-iconbtn, .sp-navbar-opt):hover {
    background: var(--sp-hover);
    border-color: color-mix(in srgb, var(--sp-primary) 48%, var(--sp-border));
    color: var(--sp-primary);
}
html[data-pp-theme="dark"] body.sp-body .sp-btn.primary {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-btn.danger, .sp-iconbtn.danger) { color: #fb7185; }
html[data-pp-theme="dark"] body.sp-body :is(.sp-btn.danger, .sp-iconbtn.danger):hover {
    background: rgba(225, 29, 72, .12);
    border-color: #9f3650;
    color: #fda4af;
}

html[data-pp-theme="dark"] body.sp-body :is(.sp-navbar-opt, .sp-mi) {
    background: var(--sp-raised);
    border-color: var(--sp-border);
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-navbar-opt:hover, .sp-mi.child, .sp-mi.is-sub) {
    background: var(--sp-hover);
}
html[data-pp-theme="dark"] body.sp-body .sp-mi input:focus { background: var(--sp-input); }
html[data-pp-theme="dark"] body.sp-body .sp-mi .drag { color: #5e7089; }

html[data-pp-theme="dark"] body.sp-body [data-tip]:hover::after {
    background: var(--sp-raised);
    color: var(--sp-text);
    border: 1px solid var(--sp-border);
    box-shadow: 0 7px 20px rgba(0, 0, 0, .36);
}
html[data-pp-theme="dark"] body.sp-body [data-tip]:hover::before { border-top-color: var(--sp-raised); }
html[data-pp-theme="dark"] body.sp-body :is(.sp-mi, .sp-menu-toolbar) [data-tip]:hover::before {
    border-top-color: transparent;
    border-bottom-color: var(--sp-raised);
}

/* Item editor dialog. */
html[data-pp-theme="dark"] body.sp-body .sp-modal-back { background: rgba(2, 6, 23, .72); }
html[data-pp-theme="dark"] body.sp-body .sp-modal {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .58);
}
html[data-pp-theme="dark"] body.sp-body :is(.sp-modal-head, .sp-modal-foot, .sp-item-linksec) {
    border-color: var(--sp-border);
}
html[data-pp-theme="dark"] body.sp-body .sp-modal-x {
    background: var(--sp-raised);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body .sp-modal-x:hover {
    background: var(--sp-hover);
    color: var(--sp-primary);
}

/* Shared icon chooser opened by the Style menu editor. */
html[data-pp-theme="dark"] body.sp-body .ppd-icm-backdrop { background: rgba(2, 6, 23, .72); }
html[data-pp-theme="dark"] body.sp-body .ppd-icm {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body :is(
    .ppd-icm-head, .ppd-icm-toolbar, .ppd-icm-foot, .ppd-icm-sec
) {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body :is(
    .ppd-icm-close, .ppd-icm-search, .ppd-icm-packs, .ppd-icm-packs button,
    .ppd-icm-ic
) {
    background: var(--sp-raised);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body .ppd-icm-search input {
    background: transparent;
    color: var(--sp-text);
}
html[data-pp-theme="dark"] body.sp-body :is(.ppd-icm-packs button.is-active, .ppd-icm-ic:hover) {
    background: var(--sp-primary-soft);
    border-color: color-mix(in srgb, var(--sp-primary) 52%, var(--sp-border));
    color: var(--sp-primary);
}

/*
 * Preview isolation boundary.
 * Shared application dark-mode rules use !important for legacy modules, so
 * these narrowly scoped restorations are intentionally authoritative. They
 * read only the theme currently compiled by style-spa.js into #spPreview.
 */
html[data-pp-theme="dark"] body.sp-body .sp-pvframe {
    background: var(--pp-bg) !important;
    color: var(--pp-text) !important;
    color-scheme: normal;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(h1, h2, h3, h4, h5, h6) {
    color: var(--pp-text) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(label, .pv-field label) {
    color: var(--pp-muted) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(input, select, textarea) {
    background-color: var(--pp-bg) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-card, .pv-stat .s, .pv-footer) {
    background-color: var(--pp-surface) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-top nav a, .pv-stat .s span) {
    color: var(--pp-muted) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe .pv-top nav a.on { color: var(--pp-primary) !important; }
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-btn, .ppd-btn, .ppd-act, .ppd-pg) {
    background-color: var(--pp-surface) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-btn.primary, .ppd-btn.primary, .ppd-pg.active) {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    color: var(--pp-primary-text, #fff) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe .pv-btn.soft {
    background-color: var(--pp-primary-soft) !important;
    border-color: transparent !important;
    color: var(--pp-primary) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe .pv-btn.danger {
    background-color: var(--pp-danger) !important;
    border-color: var(--pp-danger) !important;
    color: #fff !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-grid.panel, .pv-grid table) {
    background-color: var(--pp-grid-panel, var(--pp-surface)) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
html[data-pp-theme="dark"] body.sp-body .sp-pvframe :is(.pv-grid th, .pv-grid td) {
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

html[data-pp-theme="dark"] body.sp-body :is(.sp-list, .sp-ed-body, .sp-preview-scroll, .sp-modal-body, .ppd-icm-body) {
    scrollbar-color: var(--sp-border) transparent;
}

/* Editor chrome consumes only semantic application tokens.  Preview-specific
   variables remain isolated above, so this never changes generated output. */
body.sp-body :is(.sp-modal, .ppd-icm) {
    background: var(--sp-raised);
    color: var(--sp-text);
    border-color: var(--sp-border);
}
body.sp-body :is(.sp-modal-head, .sp-modal-body, .sp-modal-foot, .ppd-icm-head, .ppd-icm-toolbar, .ppd-icm-body, .ppd-icm-foot) {
    background: var(--sp-raised);
    color: var(--sp-text);
    border-color: var(--sp-border);
}

@media (max-width: 980px) {
    html[data-pp-theme="dark"] body.sp-body .sp-preview-bar {
        background: var(--sp-surface);
    }
}

/* ============================================================
   Icon chooser — full theme adoption (light AND dark).
   The designer's .ppd-icm ships hard-coded light colours; inside the Style
   editor we rebind every part to the semantic --sp-* tokens so the picker
   always matches the selected theme and the glyphs stay legible.
   ============================================================ */
body.sp-body .ppd-icm {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
}
body.sp-body .ppd-icm-head strong { color: var(--sp-text); }
body.sp-body .ppd-icm-head small { color: var(--sp-muted); }
body.sp-body :is(.ppd-icm-head, .ppd-icm-toolbar, .ppd-icm-foot) {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-muted);
}
body.sp-body .ppd-icm-body { background: var(--sp-surface); }
body.sp-body .ppd-icm-sec {
    background: var(--sp-surface);
    color: var(--sp-muted);
}
body.sp-body .ppd-icm-close {
    background: var(--sp-raised);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
body.sp-body .ppd-icm-close:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-primary-soft);
}
body.sp-body .ppd-icm-search {
    background: var(--sp-input);
    border-color: var(--sp-border);
    color: var(--sp-muted);
}
body.sp-body .ppd-icm-search input { color: var(--sp-text); }
body.sp-body .ppd-icm-search input::placeholder { color: var(--sp-muted); opacity: 1; }
body.sp-body .ppd-icm-packs {
    background: var(--sp-hover);
    border-color: var(--sp-border);
}
body.sp-body .ppd-icm-packs button { color: var(--sp-muted); }
body.sp-body .ppd-icm-packs button.is-active {
    background: var(--sp-raised);
    color: var(--sp-primary);
    box-shadow: 0 1px 2px var(--sp-shadow);
}
body.sp-body .ppd-icm-ic {
    background: var(--sp-raised);
    border-color: var(--sp-border);
}
body.sp-body .ppd-icm-ic-glyph { color: var(--sp-text); }
body.sp-body .ppd-icm-ic-lbl { color: var(--sp-muted); }
body.sp-body .ppd-icm-ic:hover {
    border-color: var(--sp-primary);
    background: var(--sp-primary-soft);
}
body.sp-body .ppd-icm-ic:hover .ppd-icm-ic-glyph { color: var(--sp-primary); }
body.sp-body .ppd-icm-ic.is-active {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 2px var(--sp-primary-soft);
}
body.sp-body .ppd-icm-empty { color: var(--sp-muted); }

/* Navbar picker tooltip — inverted against the dark console chrome, so the
   bubble still reads as an overlay rather than another panel. */
html[data-pp-theme="dark"] body.sp-body {
    --sp-tip-bg: #e2e8f0;
    --sp-tip-text: #0f172a;
}
html[data-pp-theme="dark"] body.sp-body [data-sp-tip]::after {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
