/* Theme layer on top of nocturne.css: light/dark modes, swappable accent
   palettes, semantic status colors, icon-only sidebar and nested submenus.
   Driven by data-theme / data-accent / data-sidebar on <html>. */

/* ---- Semantic status colors (dark defaults; nocturne base is dark) ---- */
:root {
    --ok-bg: color-mix(in srgb, #5dd69b 18%, transparent);   --ok-fg: #8ff0bf;
    --warn-bg: color-mix(in srgb, #e0a458 20%, transparent); --warn-fg: #f4c98a;
    --danger-bg: color-mix(in srgb, #f7768e 18%, transparent); --danger-fg: #ffb3c0;
    --neutral-bg: var(--color-neutral-800); --neutral-fg: var(--color-neutral-200);
}

/* ---- Light mode ---- */
:root[data-theme="light"] {
    color-scheme: light;
    --color-bg: #f4f5fb;
    --color-surface: #ffffff;
    --color-text: #292b31;
    --color-divider: color-mix(in srgb, #292b31 14%, transparent);
    --shadow-sm: 0 0 0 1px color-mix(in srgb, #292b31 10%, transparent);
    --shadow-md: 0 0 0 1px color-mix(in srgb, #292b31 10%, transparent), 0 6px 18px rgba(41,43,49,0.10);
    --shadow-lg: 0 0 0 1px color-mix(in srgb, #292b31 12%, transparent), 0 16px 40px rgba(41,43,49,0.16);

    --ok-bg: #e2f6ea;   --ok-fg: #17794a;
    --warn-bg: #fff3e0; --warn-fg: #a15c00;
    --danger-bg: #fbe7e9; --danger-fg: #b3222f;
    --neutral-bg: #eef0f6; --neutral-fg: #5f6673;
}

/* ---- Accent palettes ---- */
:root[data-accent="blurple"] {
    --color-accent: #9184d9;
    --color-accent-100: #f5f4ff; --color-accent-200: #e7e5fe; --color-accent-300: #d2cefd;
    --color-accent-400: #968ae0; --color-accent-500: #968ae0; --color-accent-600: #5d5294;
    --color-accent-700: #5d5294; --color-accent-800: #423a6a; --color-accent-900: #423a6a;
}
:root[data-accent="teal"] {
    --color-accent: #6fb6ad;
    --color-accent-100: #f1fbf9; --color-accent-200: #dcf2ee; --color-accent-300: #b9e0da;
    --color-accent-400: #6fb6ad; --color-accent-500: #6fb6ad; --color-accent-600: #3f7b74;
    --color-accent-700: #3f7b74; --color-accent-800: #2b5751; --color-accent-900: #2b5751;
}
:root[data-accent="amber"] {
    --color-accent: #d4a760;
    --color-accent-100: #fdf7ec; --color-accent-200: #f6e7c9; --color-accent-300: #ecd6ab;
    --color-accent-400: #d4a760; --color-accent-500: #d4a760; --color-accent-600: #93703b;
    --color-accent-700: #93703b; --color-accent-800: #6a4f28; --color-accent-900: #6a4f28;
}
:root[data-accent="rose"] {
    --color-accent: #d4849b;
    --color-accent-100: #fdf2f5; --color-accent-200: #f7dbe3; --color-accent-300: #edc0cd;
    --color-accent-400: #d4849b; --color-accent-500: #d4849b; --color-accent-600: #93576c;
    --color-accent-700: #93576c; --color-accent-800: #6a3d4d; --color-accent-900: #6a3d4d;
}
:root[data-accent="steel"] {
    --color-accent: #8fa3c4;
    --color-accent-100: #f2f5fa; --color-accent-200: #e0e7f1; --color-accent-300: #c6d2e4;
    --color-accent-400: #8fa3c4; --color-accent-500: #8fa3c4; --color-accent-600: #5c6c8a;
    --color-accent-700: #5c6c8a; --color-accent-800: #414d64; --color-accent-900: #414d64;
}

/* ---- Icon-only sidebar ---- */
:root[data-sidebar="icons"] .side { width: 56px; }
:root[data-sidebar="icons"] .side-brand-text,
:root[data-sidebar="icons"] .side-foot-text,
:root[data-sidebar="icons"] .side-group-label,
:root[data-sidebar="icons"] .side-item span,
:root[data-sidebar="icons"] .side-caret,
:root[data-sidebar="icons"] .side-foot form { display: none; }
:root[data-sidebar="icons"] .side-item { justify-content: center; padding: 6px; }
:root[data-sidebar="icons"] .side-sub { display: none; }
:root[data-sidebar="icons"] .side-brand,
:root[data-sidebar="icons"] .side-foot { justify-content: center; }

/* ---- Nested submenus (up to 2 levels) ---- */
.side-parent { display: flex; align-items: center; }
.side-parent .side-caret { margin-left: auto; font-size: 11px; transition: transform .15s ease; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.side-parent[aria-expanded="true"] .side-caret { transform: rotate(90deg); }
.side-sub { display: none; flex-direction: column; gap: 1px; margin: 1px 0 3px 15px; padding-left: 13px; border-left: 1px solid var(--color-divider); }
.side-sub.is-open { display: flex; }
.side-sub .side-item { font-size: 12.5px; padding: 5px 8px; }

/* ---- Settings page controls ---- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); gap: 6px; }
.theme-swatch {
    display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; text-align: left;
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit;
}
.theme-swatch:hover { box-shadow: var(--shadow-md); }
.theme-swatch.is-selected { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.theme-dots { display: flex; gap: 3px; }
.theme-dot { width: 18px; height: 14px; border-radius: 4px; }
.theme-swatch-name { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.theme-swatch-name .ph-check-circle { display: none; color: var(--color-accent); font-size: 13px; }
.theme-swatch.is-selected .ph-check-circle { display: inline; }

.seg-btns { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11.5px;
    border: 0; background: transparent; color: var(--color-text); cursor: pointer; font-family: var(--font-body);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--color-divider); }
.seg-btn.is-selected { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }