/**
 * OPTORA — палитра бренда + семантические токены (тёмная / светлая тема)
 */
:root {
    /* Бренд — общий для обеих тем */
    --optora-blue: #00b4ff;
    --optora-blue-bright: #00d4ff;
    --optora-blue-dark: #0088cc;
    --optora-blue-deep: #0066ff;
    --optora-blue-light: #5cc8ff;

    --optora-green: #7ae228;
    --optora-green-bright: #9ef01a;
    --optora-green-dark: #5cb81a;
    --optora-green-neon: #00ff88;

    --optora-gradient: linear-gradient(90deg, var(--optora-blue-bright) 0%, var(--optora-green) 100%);
    --optora-gradient-diagonal: linear-gradient(135deg, var(--optora-blue-bright) 0%, var(--optora-green-bright) 100%);
    --optora-gradient-soft: linear-gradient(135deg, rgba(0, 180, 255, 0.25) 0%, rgba(122, 226, 40, 0.15) 100%);

    --primary: var(--optora-blue-bright);
    --primary-dark: var(--optora-blue-dark);
    --accent: var(--optora-green);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --sidebar-width: 272px;
}

/* ——— Тёмная тема (по умолчанию) ——— */
:root,
[data-theme="dark"] {
    --bg-deep: #030810;
    --bg-page: #050a14;
    --bg-elevated: #0a1220;
    --bg-surface: rgba(12, 20, 36, 0.92);
    --bg-glass: rgba(10, 18, 32, 0.75);
    --bg-glass-hover: rgba(14, 26, 46, 0.88);
    --bg-input: rgba(6, 12, 24, 0.85);

    --text: #e8f4ff;
    --text-heading: #ffffff;
    --text-muted: rgba(160, 190, 220, 0.72);
    --text-body: rgba(210, 230, 250, 0.92);
    --text-dim: rgba(120, 150, 180, 0.65);

    --border: rgba(0, 180, 255, 0.18);
    --border-light: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(0, 180, 255, 0.22);

    --sidebar-bg: linear-gradient(180deg, #030810 0%, #061018 35%, #050c16 100%);
    --sidebar-header-bg: rgba(0, 0, 0, 0.35);
    --sidebar-border: rgba(0, 180, 255, 0.12);
    --sidebar-shadow: 4px 0 40px rgba(0, 0, 0, 0.5);
    --sidebar-brand-color: #ffffff;
    --sidebar-tagline-muted: rgba(255, 255, 255, 0.35);

    --nav-link-color: rgba(200, 220, 240, 0.65);
    --nav-link-hover-bg: rgba(0, 180, 255, 0.07);
    --nav-link-hover-color: #fff;
    --nav-group-color: rgba(0, 212, 255, 0.45);
    --nav-group-line: linear-gradient(90deg, rgba(0, 180, 255, 0.2), rgba(122, 226, 40, 0.1), transparent);

    --nav-icon-bg: rgba(0, 0, 0, 0.35);
    --nav-icon-border: rgba(255, 255, 255, 0.06);

    --top-bar-bg: rgba(8, 14, 26, 0.85);
    --top-bar-border: rgba(0, 180, 255, 0.12);
    --top-bar-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

    --main-glow-1: rgba(0, 180, 255, 0.08);
    --main-glow-2: rgba(122, 226, 40, 0.06);
    --main-grid-color: rgba(0, 180, 255, 0.025);

    --glow-blue: rgba(0, 212, 255, 0.45);
    --glow-green: rgba(122, 226, 40, 0.45);
    --glow-blue-soft: 0 0 20px rgba(0, 180, 255, 0.25);
    --glow-green-soft: 0 0 20px rgba(122, 226, 40, 0.25);

    --shadow-brand: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 180, 255, 0.15);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --focus-ring: 0 0 0 3px rgba(0, 180, 255, 0.25), 0 0 16px rgba(0, 180, 255, 0.2);

    --error: #ff4d6d;
    --error-bg: rgba(255, 77, 109, 0.12);
    --success: var(--optora-green);
    --success-bg: rgba(122, 226, 40, 0.12);

    --btn-logout-bg: transparent;
    --btn-logout-color: var(--optora-blue-bright);
    --btn-logout-border: rgba(0, 180, 255, 0.35);
    --btn-logout-hover-color: #030810;

    --nav-active-bg: linear-gradient(135deg, rgba(0, 180, 255, 0.16) 0%, rgba(122, 226, 40, 0.1) 100%);
    --nav-active-color: #ffffff;
    --nav-active-border: rgba(0, 212, 255, 0.45);

    --chart-grid: rgba(0, 180, 255, 0.08);
    --chart-tick: rgba(160, 190, 220, 0.72);
}

/* ——— Светлая тема ——— */
[data-theme="light"] {
    --bg-deep: #eef3f9;
    --bg-page: #f0f4fa;
    --bg-elevated: #ffffff;
    --bg-surface: #ffffff;
    --bg-glass: #ffffff;
    --bg-glass-hover: #f8fafc;
    --bg-input: #ffffff;

    --text: #0a1628;
    --text-heading: #0a1628;
    --text-muted: #5a6b85;
    --text-body: #333333;
    --text-dim: #94a3b8;

    --border: #dce6f2;
    --border-light: #e9ecef;
    --border-glass: #dce6f2;

    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f0f4fa 100%);
    --sidebar-header-bg: rgba(0, 153, 255, 0.04);
    --sidebar-border: #e2e8f0;
    --sidebar-shadow: 2px 0 16px rgba(10, 22, 40, 0.06);
    --sidebar-brand-color: #0a1628;
    --sidebar-tagline-muted: #64748b;

    --nav-link-color: #475569;
    --nav-link-hover-bg: rgba(0, 153, 255, 0.08);
    --nav-link-hover-color: #0a1628;
    --nav-group-color: #94a3b8;
    --nav-group-line: linear-gradient(90deg, rgba(0, 153, 255, 0.15), transparent);

    --nav-icon-bg: rgba(0, 153, 255, 0.06);
    --nav-icon-border: rgba(0, 153, 255, 0.12);

    --top-bar-bg: rgba(255, 255, 255, 0.92);
    --top-bar-border: #e2e8f0;
    --top-bar-shadow: 0 2px 12px rgba(10, 22, 40, 0.06);

    --main-glow-1: rgba(0, 153, 255, 0.06);
    --main-glow-2: rgba(122, 226, 40, 0.04);
    --main-grid-color: rgba(0, 153, 255, 0.04);

    --glow-blue: rgba(0, 153, 255, 0.25);
    --glow-green: rgba(122, 226, 40, 0.25);
    --glow-blue-soft: 0 4px 16px rgba(0, 153, 255, 0.12);
    --glow-green-soft: 0 4px 16px rgba(122, 226, 40, 0.1);

    --shadow-brand: 0 5px 20px rgba(0, 153, 255, 0.18);
    --shadow-glass: 0 2px 12px rgba(10, 22, 40, 0.06);
    --focus-ring: 0 0 0 3px rgba(0, 153, 255, 0.2);

    --error: #dc2626;
    --error-bg: #fef2f2;
    --success: var(--optora-green-dark);
    --success-bg: #f0fdf4;

    --btn-logout-bg: var(--optora-gradient-diagonal);
    --btn-logout-color: #ffffff;
    --btn-logout-border: transparent;
    --btn-logout-hover-color: #ffffff;

    --nav-active-bg: rgba(0, 153, 255, 0.1);
    --nav-active-color: var(--optora-blue-dark);
    --nav-active-border: rgba(0, 153, 255, 0.22);

    --chart-grid: rgba(0, 0, 0, 0.06);
    --chart-tick: #64748b;
}

/* Базовая раскладка — использует переменные темы */
html, body {
    background: var(--bg-deep);
    color: var(--text-body);
}

.admin-container {
    display: flex;
    min-height: 100vh;
    background: var(--bg-page);
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    color: var(--text-body);
    box-shadow: var(--sidebar-shadow);
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, var(--main-glow-1) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 90% 100%, var(--main-glow-2) 0%, transparent 50%),
        var(--bg-page);
}

.top-bar {
    background: var(--top-bar-bg);
    border-bottom: 1px solid var(--top-bar-border);
    color: var(--text-heading);
    box-shadow: var(--top-bar-shadow);
}

.page-content .stat-card,
.page-content .action-card,
.page-content .welcome-card,
.page-content .recent-panel {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-body);
}