/* =============================================================
   theme.css — Shared theme styles for all pages.
   This stylesheet defines the visual rules for the default theme
   and, where present below, for html[data-theme="dark"].
   The data-theme attribute is not set by this file; any theme
   activation or persistence must be implemented by the pages/scripts
   that include this stylesheet.
   ============================================================= */

/* ── Scrollbar gutter stabilization ──────────────────────– */
html {
    scrollbar-gutter: stable;
}

/* ── Navigation bar baseline ─────────────────────────────– */
.home-link-bar {
    margin: 0 0 24px;
    padding: 8px 12px;
    border: 1px solid #d4d9df;
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 6px 20px rgba(18, 30, 49, 0.08);
    overflow-x: auto;
}

.home-link-bar a {
    color: #111827;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.73rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s, text-decoration 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.home-link-bar a:hover {
    color: #0b1323;
    background: #e8eef7;
    text-decoration: none;
}

.home-link-bar a:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
}

/* ── Toggle button ─────────────────────────────────────────── */
#theme-toggle {
    background: none;
    border: 1px solid currentColor;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
    line-height: 1.4;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    color: inherit;
    font-family: inherit;
    flex-shrink: 0;
}
#theme-toggle:hover {
    opacity: 1;
}
@media (max-width: 1099px) {
    .home-link-bar {
        padding: 7px 10px;
        gap: 3px;
    }

    .home-link-bar a {
        font-size: 0.66rem;
        letter-spacing: 0.15px;
        padding: 5px 6px;
    }

    #theme-toggle {
        font-size: 0.88rem;
        padding: 1px 6px;
    }
}

@media (max-width: 820px) {
    .home-link-bar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-link-bar::-webkit-scrollbar {
        display: none;
    }
}

/* Fixed toggle for index.html (no nav bar) */
#theme-toggle-fixed {
    position: fixed;
    top: 14px;
    right: 18px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 1000;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    color: #1a1a1a;
    font-family: inherit;
}
#theme-toggle-fixed:hover {
    background: rgba(240, 240, 240, 0.95);
}

/* ── Dark mode — global resets ─────────────────────────────── */
html[data-theme="dark"] body {
    background-color: #121212;
    background: #121212;
    color: #e0e0e0;
}

/* ── Dark mode — navigation bar ──────────────────────────– */
html[data-theme="dark"] .home-link-bar {
    background: linear-gradient(180deg, #171a20 0%, #121419 100%);
    border-color: #2b313a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .home-link-bar a {
    color: #b9d3ef;
}

html[data-theme="dark"] .home-link-bar a:hover {
    color: #e3effc;
    background: #243142;
}

html[data-theme="dark"] .home-link-bar a:focus-visible {
    outline-color: #60a5fa;
}

/* ── Dark mode — index.html fixed toggle ───────────────────── */
html[data-theme="dark"] #theme-toggle-fixed {
    background: rgba(40, 40, 40, 0.92);
    border-color: #555;
    color: #e0e0e0;
}
html[data-theme="dark"] #theme-toggle-fixed:hover {
    background: rgba(60, 60, 60, 0.95);
}

/* ── Dark mode — index.html links ──────────────────────────── */
html[data-theme="dark"] .links a {
    background: #1e1e1e;
    color: #e0e0e0;
    border-color: #555;
}
html[data-theme="dark"] .links a:hover {
    background: #e0e0e0;
    color: #121212;
    border-color: #e0e0e0;
}



/* ── Dark mode — headings & text ───────────────────────────── */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: #e0e0e0;
}
html[data-theme="dark"] .subtitle {
    color: #999;
}
html[data-theme="dark"] footer {
    color: #888;
}

/* ── Dark mode — borders & horizontal rules ────────────────── */
html[data-theme="dark"] header {
    border-bottom-color: #333;
}
html[data-theme="dark"] hr {
    border-color: #333;
}

/* ── Dark mode — cards / boxes ─────────────────────────────── */
html[data-theme="dark"] .brief,
html[data-theme="dark"] .logic-box,
html[data-theme="dark"] .pillar-card,
html[data-theme="dark"] .priority-box,
html[data-theme="dark"] .section-box,
html[data-theme="dark"] .notice-card {
    background: #1e1e1e;
    border-color: #333;
}
html[data-theme="dark"] #ledger-content {
    background: #1e1e1e;
    border-color: #333;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
}

/* ── Dark mode — standard.html specific ───────────────────── */
html[data-theme="dark"] .deadline-alert {
    background: #2a1010;
    border-left-color: #d00;
    color: #f0c0c0;
}
html[data-theme="dark"] .cta-dark {
    background: #e0e0e0;
    color: #121212;
}

/* ── Dark mode — tables ────────────────────────────────────── */
html[data-theme="dark"] table {
    color: #e0e0e0;
}
html[data-theme="dark"] th {
    background: #252525;
    color: #ccc;
    border-bottom-color: #333;
}
html[data-theme="dark"] td {
    border-bottom-color: #333;
}
html[data-theme="dark"] tr:nth-child(even) td {
    background: #1a1a1a;
}

/* ── Dark mode — CSS variable overrides ────────────────────── */
/* Pages that already use CSS variables (ledger, legal, off-the-shelf) */
html[data-theme="dark"] {
    --bg: #121212;
    --card: #1e1e1e;
    --border: #333;
    --text: #e0e0e0;
    --high-vis: #f0f0f0;
    --slate: #999;
    --blue: #7cb8f5;
    --red: #e57373;
}

/* ── Dark mode — compliance-tracker.html ───────────────────── */
html[data-theme="dark"] .master-ticker,
html[data-theme="dark"] .company-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .controls-bar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .company-name {
    color: #e0e0e0;
}
html[data-theme="dark"] .ticker-value,
html[data-theme="dark"] .stat-value {
    color: #e0e0e0;
}

/* ── Dark mode — arboreum.html briefs ──────────────────────── */
html[data-theme="dark"] .brief h2 {
    color: #e0e0e0;
}
html[data-theme="dark"] .brief p {
    color: #bbb;
}
html[data-theme="dark"] .tagline {
    color: #999;
}
html[data-theme="dark"] .section-title {
    color: #888;
}

/* ── Dark mode — mandates.html ─────────────────────────────── */
html[data-theme="dark"] #aif-title {
    border-bottom-color: #555;
}
html[data-theme="dark"] #strategic-mission-heading {
    border-left-color: #555;
}
html[data-theme="dark"] .funding-notice {
    background: #e0e0e0;
    color: #121212;
}
html[data-theme="dark"] .pillar-card h3 {
    color: #ccc;
}
html[data-theme="dark"] .pillar-card li {
    color: #bbb;
}

/* ── Dark mode — legal.html ─────────────────────────────────── */
html[data-theme="dark"] .container {
    background: var(--card);
    border-color: var(--border);
}
html[data-theme="dark"] .legal-section {
    border-color: #333;
}