/* ─── Dark Mode Override — portfolio-site (port 8080) only ─────────────────
   All rules scoped to html.dark-mode — toggled via JS, persisted in
   localStorage. Light mode is the default; dark mode is opt-in.
──────────────────────────────────────────────────────────────────────────── */

html.dark-mode {

/* ─── Variables ─────────────────────────────────────────────────────────── */
    --bg:                 #0e0e12;
    --bg-deep:            #0a0a0d;
    --bg-light:           #16161d;
    --bg-surface:         rgba(255, 255, 255, 0.05);
    --bg-surface-hover:   rgba(255, 255, 255, 0.09);
    --ink:                #e8e4f0;
    --ink-mid:            #b0a8c8;
    --ink-muted:          #6e6585;
    --accent:             #b5294a;
    --thistle-border:     rgba(160, 140, 210, 0.12);
    --thistle-border-mid: rgba(160, 140, 210, 0.28);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */
html.dark-mode body {
    background-color: #0e0e12 !important;
    background-image:
        radial-gradient(ellipse 70% 55% at 15%  10%, #16121f 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 88%  48%, #120f1a 0%, transparent 60%),
        radial-gradient(ellipse 65% 50% at 25%  92%, #0e0b16 0%, transparent 60%) !important;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
html.dark-mode .navbar.scrolled {
    background: rgba(14, 14, 18, 0.82) !important;
    border-bottom-color: var(--thistle-border) !important;
}

html.dark-mode .navbar.nav-open {
    background: #0e0e12 !important;
}

html.dark-mode .nav-menu {
    background: #0e0e12 !important;
}

html.dark-mode .hamburger span {
    background: var(--ink) !important;
}

/* ─── Nav dropdown ───────────────────────────────────────────────────────── */
html.dark-mode .nav-dropdown-menu {
    background: rgba(20, 18, 28, 0.96) !important;
    border-color: var(--thistle-border-mid) !important;
}

html.dark-mode .nav-dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ─── Skill cards ────────────────────────────────────────────────────────── */
html.dark-mode .skill-category {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .skill-category:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--thistle-border-mid) !important;
}

html.dark-mode .skill-category li {
    border-bottom-color: var(--thistle-border) !important;
}

/* ─── Project cards ──────────────────────────────────────────────────────── */
html.dark-mode .project-card {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .project-card:hover {
    background: rgba(181, 41, 74, 0.07) !important;
    border-color: var(--accent) !important;
}

html.dark-mode .project-bullets li {
    border-bottom-color: var(--thistle-border) !important;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
html.dark-mode .footer {
    border-top-color: var(--thistle-border) !important;
}

/* ─── Tool pages: panels, status bar, buttons ────────────────────────────── */
html.dark-mode .jf-panel {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .jf-panel:focus-within {
    border-color: var(--thistle-border-mid) !important;
}

html.dark-mode .jf-panel-header {
    border-bottom-color: var(--thistle-border) !important;
}

html.dark-mode .jf-status-bar {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .jf-meta-chip {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .jf-btn {
    border-color: var(--thistle-border) !important;
    color: var(--ink-mid) !important;
}

html.dark-mode .jf-btn:hover {
    border-color: var(--thistle-border-mid) !important;
    background: var(--bg-surface-hover) !important;
    color: var(--ink) !important;
}

/* ─── Tool pages: tree explorer ──────────────────────────────────────────── */
html.dark-mode .jf-tree-wrap {
    background: var(--bg-surface) !important;
    border-color: var(--thistle-border) !important;
}

html.dark-mode .jf-tree ul {
    border-left-color: var(--thistle-border) !important;
}

/* ─── Syntax highlighting ────────────────────────────────────────────────── */
html.dark-mode .jf-key    { color: #c9b8f0; font-weight: 500; }
html.dark-mode .jf-str    { color: #7ec88a; }
html.dark-mode .jf-num    { color: #b48eed; }
html.dark-mode .jf-bool   { color: #e06c75; }
html.dark-mode .jf-null   { color: var(--ink-muted); font-style: italic; }
html.dark-mode .jf-punct  { color: var(--ink-muted); }

html.dark-mode .jf-tree-value.jf-str  { color: #7ec88a; }
html.dark-mode .jf-tree-value.jf-num  { color: #b48eed; }
html.dark-mode .jf-tree-value.jf-bool { color: #e06c75; }
html.dark-mode .jf-tree-value.jf-null { color: var(--ink-muted); font-style: italic; }
html.dark-mode .jf-tree-key           { color: #c9b8f0; font-weight: 500; }

html.dark-mode .xml-punct        { color: #6e6585; }
html.dark-mode .xml-tag          { color: #7aabdc; font-weight: 500; }
html.dark-mode .xml-attr-name    { color: #e0a060; }
html.dark-mode .xml-attr-val     { color: #7ec88a; }
html.dark-mode .xml-text         { color: var(--ink); }
html.dark-mode .xml-comment      { color: #555e6e; font-style: italic; }
html.dark-mode .xml-comment-tree { color: #555e6e; font-style: italic; }
html.dark-mode .xml-cdata        { color: #4ec9b0; }
html.dark-mode .xml-decl         { color: #e0a060; }
html.dark-mode .xml-pi           { color: #6e6585; font-style: italic; }
html.dark-mode .xml-pi-target    { color: var(--accent); }

/* ─── Tool pages: mobile navbar (dark) ──────────────────────────────────── */
@media (max-width: 768px) {
    html.dark-mode body:has(.tool-main) .navbar.scrolled {
        background: rgba(14, 14, 18, 0.92) !important;
    }

    html.dark-mode body:has(.tool-main) .navbar.nav-open {
        background: #0e0e12 !important;
    }
}

/* ─── DiSC Profile (dark mode) ──────────────────────────────────────────────── */
html.dark-mode .disc-wrapper {
    border-top-color: var(--thistle-border) !important;
}

html.dark-mode .disc-axis {
    stroke: var(--thistle-border-mid) !important;
}

html.dark-mode .disc-ring {
    stroke: var(--thistle-border-mid) !important;
}

html.dark-mode .disc-label {
    fill: var(--ink-mid) !important;
}

html.dark-mode .disc-q-d,
html.dark-mode .disc-q-i { opacity: 0.28 !important; }

html.dark-mode .disc-q-s,
html.dark-mode .disc-q-c { opacity: 0.10 !important; }