/**
 * Smart-light theme (inherit original cyber style, then differentiate by page)
 * Keep old visual DNA: cyan glow, scan/grid texture, glass-like panels.
 */

:root {
    --sl-bg-root: #0A1628;
    --sl-bg-deep: #081428;
    --sl-panel-start: rgba(10, 25, 45, 0.95);
    --sl-panel-end: rgba(15, 35, 60, 0.92);

    --sl-cyan: #0EFCFF;
    --sl-cyan-soft: rgba(14, 252, 255, 0.35);
    --sl-cyan-line: rgba(14, 252, 255, 0.08);

    --sl-text-main: #C3CADA;
    --sl-text-sub: rgba(195, 202, 218, 0.78);
    --sl-text-bright: #EAF7FF;

    --sl-state-success: #27d17f;
    --sl-state-warning: #ffc548;
    --sl-state-danger: #ff5d5d;
    --sl-state-info: #4aa3ff;
    --sl-state-offline: #7f93ad;

    --sl-radius-sm: 6px;
    --sl-radius-md: 10px;

    --sl-motion-fast: 160ms;
    --sl-motion-base: 240ms;

    --sl-page-accent-rgb: 14, 252, 255;
    --sl-page-accent-alpha: 0.16;
    --sl-page-border-alpha: 0.34;
    --sl-page-glow-alpha: 0.20;
}

body.smart-light-theme {
    background:
        radial-gradient(circle at 50% -20%, rgba(var(--sl-page-accent-rgb), 0.10), transparent 45%),
        linear-gradient(180deg, var(--sl-bg-root) 0%, var(--sl-bg-deep) 100%);
    color: var(--sl-text-main);
}

/* Header: keep original style, add subtle smart-light accent */
body.smart-light-theme .top-header {
    border-bottom: 1px solid rgba(var(--sl-page-accent-rgb), 0.35);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.36),
        0 0 20px rgba(var(--sl-page-accent-rgb), var(--sl-page-glow-alpha));
}

body.smart-light-theme .top-header-grid {
    background-image:
        linear-gradient(rgba(var(--sl-page-accent-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sl-page-accent-rgb), 0.03) 1px, transparent 1px);
}

body.smart-light-theme .header-title {
    color: var(--sl-cyan);
    text-shadow:
        0 0 10px rgba(var(--sl-page-accent-rgb), 0.45),
        0 0 24px rgba(var(--sl-page-accent-rgb), 0.22);
}

body.smart-light-theme .header-subtitle,
body.smart-light-theme .header-time,
body.smart-light-theme #currentUserName {
    color: var(--sl-text-sub);
}

/* Main nav: style should look like original panel chips */
.app-main-nav {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 12;
    padding: 6px 8px;
    border-radius: var(--sl-radius-md);
    border: 1px solid rgba(var(--sl-page-accent-rgb), 0.30);
    background: linear-gradient(135deg, rgba(10, 25, 45, 0.75), rgba(15, 35, 60, 0.66));
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(var(--sl-page-accent-rgb), 0.16);
    backdrop-filter: blur(8px);
}

.app-main-nav .nav-item {
    border: 1px solid rgba(var(--sl-page-accent-rgb), 0.18);
    background: rgba(10, 25, 45, 0.25);
    color: var(--sl-text-sub);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--sl-radius-sm);
    cursor: pointer;
    transition: all var(--sl-motion-fast) ease;
}

.app-main-nav .nav-item:hover {
    color: var(--sl-text-bright);
    border-color: rgba(var(--sl-page-accent-rgb), 0.42);
    background: linear-gradient(
        135deg,
        rgba(var(--sl-page-accent-rgb), 0.20),
        rgba(var(--sl-page-accent-rgb), 0.08)
    );
    box-shadow: 0 0 12px rgba(var(--sl-page-accent-rgb), 0.20);
}

.app-main-nav .nav-item.active {
    color: var(--sl-cyan);
    border-color: rgba(var(--sl-page-accent-rgb), 0.52);
    background: linear-gradient(
        135deg,
        rgba(var(--sl-page-accent-rgb), 0.24),
        rgba(var(--sl-page-accent-rgb), 0.11)
    );
    box-shadow:
        0 0 18px rgba(var(--sl-page-accent-rgb), 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Keep old panels' visual language, only tune border/glow by page */
body.smart-light-theme .panel-section,
body.smart-light-theme .control-panel,
body.smart-light-theme .mode-panel,
body.smart-light-theme .left-unified-panel,
body.smart-light-theme .right-unified-panel {
    border-color: rgba(var(--sl-page-accent-rgb), var(--sl-page-border-alpha));
    box-shadow:
        0 0 25px rgba(var(--sl-page-accent-rgb), var(--sl-page-glow-alpha)),
        inset 0 1px 0 rgba(var(--sl-page-accent-rgb), 0.10);
}

body.smart-light-theme .panel-section-title,
body.smart-light-theme .control-panel-header {
    border-bottom-color: rgba(var(--sl-page-accent-rgb), 0.40);
    background: linear-gradient(90deg, rgba(var(--sl-page-accent-rgb), 0.08), transparent);
}

body.smart-light-theme #controlPanel .control-panel-header span:first-child {
    color: var(--sl-cyan);
    letter-spacing: 0.5px;
}

/* Status helpers */
.status-online { color: var(--sl-state-success); }
.status-offline { color: var(--sl-state-offline); }
.status-warning { color: var(--sl-state-warning); }
.status-critical { color: var(--sl-state-danger); }

/* ---------- Page variants (inherit same DNA, keep role differences) ---------- */
body.smart-light-theme.page-dashboard {
    --sl-page-accent-rgb: 14, 252, 255;
    --sl-page-accent-alpha: 0.14;
    --sl-page-border-alpha: 0.32;
    --sl-page-glow-alpha: 0.18;
}

body.smart-light-theme.page-monitor {
    --sl-page-accent-rgb: 0, 220, 255;
    --sl-page-accent-alpha: 0.20;
    --sl-page-border-alpha: 0.42;
    --sl-page-glow-alpha: 0.26;
}

body.smart-light-theme.page-alerts {
    --sl-page-accent-rgb: 255, 185, 72;
    --sl-page-accent-alpha: 0.20;
    --sl-page-border-alpha: 0.38;
    --sl-page-glow-alpha: 0.24;
}

body.smart-light-theme.page-alerts .nav-item.active {
    color: #ffd18c;
}

body.smart-light-theme.page-alerts .panel-section-title {
    border-bottom-color: rgba(255, 120, 120, 0.36);
}

body.smart-light-theme.page-workorders {
    --sl-page-accent-rgb: 47, 208, 196;
    --sl-page-accent-alpha: 0.16;
    --sl-page-border-alpha: 0.34;
    --sl-page-glow-alpha: 0.20;
}

body.smart-light-theme.page-energy {
    --sl-page-accent-rgb: 66, 211, 156;
    --sl-page-accent-alpha: 0.16;
    --sl-page-border-alpha: 0.32;
    --sl-page-glow-alpha: 0.18;
}

body.smart-light-theme.page-policy {
    --sl-page-accent-rgb: 96, 164, 255;
    --sl-page-accent-alpha: 0.16;
    --sl-page-border-alpha: 0.33;
    --sl-page-glow-alpha: 0.20;
}

body.smart-light-theme.page-assets {
    --sl-page-accent-rgb: 14, 252, 255;
    --sl-page-accent-alpha: 0.17;
    --sl-page-border-alpha: 0.36;
    --sl-page-glow-alpha: 0.22;
}

body.smart-light-theme.page-settings {
    --sl-page-accent-rgb: 145, 172, 210;
    --sl-page-accent-alpha: 0.12;
    --sl-page-border-alpha: 0.28;
    --sl-page-glow-alpha: 0.12;
}

/* Density tuning by page role */
body.smart-light-theme.page-dashboard .panel-section { padding-bottom: 10px; }
body.smart-light-theme.page-monitor .panel-section { padding-bottom: 6px; }
body.smart-light-theme.page-alerts .panel-section { padding-bottom: 6px; }

/* Mobile: keep nav usable */
@media (max-width: 1280px) {
    .app-main-nav {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
}