/* OOI Causal Ledger Dashboard
   Earthen Clarity (light) / Earthen Night (dark)
   ─────────────────────────────────────────────── */

/* ── CSS Custom Properties ──────────────────────────────────────── */

#app-root {
    /* Light Theme: Earthen Clarity (default) */
    --bg-primary:     #FAF8F5;
    --bg-secondary:   #F2EFEA;
    --bg-tertiary:    #EAE0D5;
    --text-primary:   #3E2723;
    --text-secondary: #5E503F;
    --text-muted:     #8D6E63;
    --border-color:   #D5C9BC;
    --border-light:   #C4B5A6;
    --accent-color:   #CC5500;
    --accent-hover:   #A34400;
    --header-bg:      #F2EFEA;
    --header-border:  rgba(94, 80, 63, 0.20);

    background-color: var(--bg-primary);
    min-height:       100vh;
    font-family:      "Courier New", Courier, monospace;
    transition:       background-color 0.3s ease;
}

#app-root[data-theme="dark"] {
    /* Dark Theme: Earthen Night */
    --bg-primary:     #211D1A;
    --bg-secondary:   #3E2723;
    --bg-tertiary:    #5E503F;
    --text-primary:   #F2EFEA;
    --text-secondary: #C6AC8E;
    --text-muted:     #988B7E;
    --border-color:   #6F6050;
    --border-light:   #5E503F;
    --accent-color:   #E2725B;
    --accent-hover:   #F08A74;
    --header-bg:      #3E2723;
    --header-border:  rgba(226, 114, 91, 0.25);

    background-color: var(--bg-primary);
}

/* ── Header ─────────────────────────────────────────────────────── */

.dash-header {
    padding:          10px 20px;
    border-bottom:    1px solid var(--header-border);
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    background-color: var(--header-bg);
    transition:       background-color 0.3s ease, border-color 0.3s ease;
}

.dash-title-primary {
    color:          var(--accent-color);
    font-size:      15px;
    letter-spacing: 3px;
    font-weight:    bold;
    transition:     color 0.3s ease;
}

.dash-title-secondary {
    color:          var(--text-muted);
    font-size:      13px;
    letter-spacing: 2px;
    transition:     color 0.3s ease;
}

.dash-header-right {
    display:     flex;
    align-items: center;
    gap:         12px;
}

/* ── Status Bar ─────────────────────────────────────────────────── */

.dash-status-bar {
    color:          var(--text-muted);
    font-size:      10px;
    letter-spacing: 1px;
    transition:     color 0.3s ease;
}

/* ── Theme Toggle Button ────────────────────────────────────────── */

.theme-toggle-btn {
    background:       var(--bg-tertiary);
    border:           1px solid var(--border-color);
    border-radius:    50%;
    width:            32px;
    height:           32px;
    cursor:           pointer;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    font-size:        15px;
    line-height:      1;
    padding:          0;
    outline:          none;
    flex-shrink:      0;
    color:            var(--text-primary);
    transition:       background-color 0.2s ease, border-color 0.2s ease,
                      transform 0.2s ease;
}

.theme-toggle-btn:hover {
    background:  var(--border-color);
    transform:   scale(1.12);
}