/* 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);
}

/* ── Perimeter panels — ingress + Observatory (CR LDD-Alpha8-001) ─────────── */
/* Styling lives here (not inline) so media queries can reflow the layout. */
#charts { display: flex; flex-direction: column; gap: 4px; padding: 6px; }

.perimeter-panel {
    background:    rgba(17, 17, 20, 0.92);
    border:        1px solid rgba(198, 172, 142, 0.35);
    border-radius: 10px;
    padding:       12px;
    box-shadow:    0 6px 24px rgba(0, 0, 0, 0.45);
    font-family:   "Courier New", Courier, monospace;
    z-index:       1000;
}
#ingress-panel { text-align: center; }
.panel-title {
    font-size:      10px;
    letter-spacing: 1px;
    color:          var(--text-secondary);
    margin-bottom:  8px;
    text-align:     center;
}
.ingress-qr-img {
    width: 178px; height: 178px; max-width: 100%;
    border-radius: 6px; image-rendering: pixelated;
}
.ingress-caption {
    font-size: 9.5px; margin-top: 8px; white-space: pre-line; color: #94a3b8;
}

/* Observatory tappable launcher cards (CR LDD-Alpha8-002) */
.observatory-card {
    display:        block;
    text-decoration: none;
    cursor:         pointer;
    border-top:     1px solid rgba(198, 172, 142, 0.15);
    padding:        8px 4px;
    border-radius:  6px;
    transition:     background-color 0.12s ease;
}
.observatory-card:hover,
.observatory-card:active { background: rgba(226, 114, 91, 0.12); }
.observatory-enter {
    font-size: 9px; color: var(--accent-color); white-space: nowrap;
}

/* ── Desktop (≥769px): panels as the fixed right-rail overlay (legacy) ────── */
@media (min-width: 769px) {
    #ingress-panel {
        position: fixed; top: 70px; right: 18px; width: 204px;
    }
    #observatory-panel {
        position: fixed; top: 372px; right: 18px; width: 204px;
        max-height: 40vh; overflow-y: auto;
    }
}

/* ── Mobile (≤768px): Observatory-first launcher; telemetry compact below ─── */
@media (max-width: 768px) {
    #surface { display: flex; flex-direction: column; }
    #observatory-panel { order: -2; }   /* tappable experiment launcher leads */
    #ingress-panel     { order: -1; }   /* then the holographic QR */
    #charts            { order: 1; }     /* telemetry charts last */
    .perimeter-panel {
        position: static; width: auto; margin: 8px 8px 0; max-height: none;
    }
    #network-graph { height: 46vh !important; }
    #metrics-graph { height: 24vh !important; }
    .dash-header { padding: 8px 12px; }
    .dash-title-secondary { display: none; }   /* drop the long subtitle on phones */
    .dash-status-bar {
        font-size: 8px; max-width: 46vw;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}