/* Game Analytics — Dash global styles */
* { font-family: 'Inter', system-ui, -apple-system, sans-serif; box-sizing: border-box; }

body { background-color: #0E0E0E; color: #E8E8E8; margin: 0; overflow-x: hidden; }

/* ── Top Navbar ─────────────────────────────────────────────────────────── */
.top-navbar {
    position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 1000;
    background: #1A1A2E; border-bottom: 1px solid #2A2A3E;
    display: flex; align-items: center; padding: 0 16px; gap: 0;
}
.navbar-brand {
    display: flex; align-items: center; color: #F5A623; font-weight: 700;
    font-size: 0.88rem; white-space: nowrap; padding-right: 20px;
    border-right: 1px solid #2A2A3E; margin-right: 12px; flex-shrink: 0;
}
.navbar-tabs { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-tab {
    color: #A0A0B0; text-decoration: none; font-size: 0.78rem; font-weight: 500;
    padding: 5px 11px; border-radius: 6px; white-space: nowrap;
    transition: all 0.15s ease;
}
.nav-tab:hover { color: #E8E8E8; background: #2A2A3E; text-decoration: none; }
.nav-tab.active { background: #F5A623; color: #0E0E0E !important; font-weight: 700; text-decoration: none; }
.navbar-controls {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding-left: 12px; border-left: 1px solid #2A2A3E;
}

/* ── Level Pills ─────────────────────────────────────────────────────────── */
.level-pill {
    cursor: pointer; padding: 3px 10px; border-radius: 12px; font-size: 0.72rem;
    font-weight: 700; border: 1px solid #2A2A3E; color: #A0A0B0;
    background: none; line-height: 1; transition: all 0.15s ease;
}
.level-pill:hover { border-color: #A0A0B0; color: #E8E8E8; }
.level-pill.active { background: #F5A623; color: #0E0E0E; border-color: #F5A623; }
.level-pill.active:hover { background: #d4911f; border-color: #d4911f; }

/* ── Sync Status ─────────────────────────────────────────────────────────── */
.sync-status {
    font-size: 0.72rem; color: #A0A0B0; display: flex; align-items: center; gap: 5px;
    cursor: pointer; padding: 4px 8px; border-radius: 6px; border: 1px solid #2A2A3E;
    white-space: nowrap;
}
.sync-status:hover { border-color: #F5A623; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #06D6A0; flex-shrink: 0; }
.sync-dot.syncing { background: #F5A623; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Theme Toggle ─────────────────────────────────────────────────────────── */
.theme-btn {
    background: none; border: 1px solid #2A2A3E; color: #A0A0B0; cursor: pointer;
    padding: 4px 8px; border-radius: 6px; font-size: 0.9rem;
}
.theme-btn:hover { border-color: #F5A623; color: #F5A623; }

/* ── Page Content ─────────────────────────────────────────────────────────── */
.page-content { margin-top: 48px; padding: 16px 20px; }

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.kpi-card {
    background: #1A1A2E; border: 1px solid #2A2A3E; border-top: 3px solid #F5A623;
    border-radius: 10px; padding: 12px 16px; height: 100%;
}
.kpi-label {
    color: #A0A0B0; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px;
}
.kpi-value { color: #E8E8E8; font-size: 1.35rem; font-weight: 800; line-height: 1.1; margin-bottom: 2px; }
.kpi-sub { color: #A0A0B0; font-size: 0.72rem; margin-bottom: 4px; }
.kpi-delta { font-size: 0.68rem; margin-top: 2px; }
.kpi-delta.pos { color: #06D6A0; }
.kpi-delta.neg { color: #E94560; }

/* ── Section Headers ─────────────────────────────────────────────────────── */
.section-header {
    color: #E8E8E8; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    border-left: 3px solid #F5A623; padding-left: 10px;
    margin: 18px 0 12px;
}

/* ── AG Grid dark theme ───────────────────────────────────────────────────── */
.ag-theme-quartz { --ag-background-color: #1A1A2E; --ag-odd-row-background-color: #16162a; }

/* ── AG Grid dark variant ──────────────────────────────────────────────────── */
.ag-theme-quartz-dark {
    --ag-background-color: #1A1A2E;
    --ag-odd-row-background-color: #16162a;
    --ag-header-background-color: #12122a;
    --ag-border-color: #2A2A3E;
    --ag-row-border-color: #2A2A3E;
    --ag-row-hover-color: #22223e;
    --ag-selected-row-background-color: #2e2e50;
    --ag-foreground-color: #E8E8E8;
    --ag-header-foreground-color: #A0A0B0;
    --ag-secondary-foreground-color: #A0A0B0;
    --ag-input-border-color: #2A2A3E;
    --ag-chip-background-color: #2A2A3E;
    --ag-range-selection-border-color: #F5A623;
    font-size: 0.83rem;
}

/* ── Hot & Cold ──────────────────────────────────────────────────────────── */
.hc-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.hc-detail {
    background: #1A1A2E; border: 1px solid #2A2A3E; border-radius: 10px;
    padding: 16px; margin-top: 12px;
}
.hc-detail.hidden { display: none; }

/* ── Light theme overrides ───────────────────────────────────────────────── */
body.light-theme {
    background: #FFFFFF; color: #212529;
}
body.light-theme .top-navbar { background: #F8F9FA; border-bottom-color: #DEE2E6; }
body.light-theme .kpi-card { background: #F8F9FA; border-color: #DEE2E6; border-top-color: #1E3A5F; }
body.light-theme .kpi-label { color: #6C757D; }
body.light-theme .kpi-value { color: #212529; }
body.light-theme .nav-tab { color: #6C757D; }
body.light-theme .nav-tab:hover { color: #212529; background: #DEE2E6; }
body.light-theme .nav-tab.active { background: #1E3A5F; color: #FFFFFF !important; }
body.light-theme .navbar-brand { color: #1E3A5F; }