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

    --optora-green: #4a9030;
    --optora-green-bright: #5da838;
    --optora-green-dark: #3a7024;
    --optora-green-neon: #52a038;
    --optora-green-rgb: 74, 144, 48;
    --optora-green-bright-rgb: 93, 168, 56;

    --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) 100%);
    --optora-gradient-soft: linear-gradient(135deg, rgba(0, 180, 255, 0.25) 0%, rgba(var(--optora-green-rgb), 0.12) 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;
}

/* ——— Тёмная тема ——— */
[data-theme="dark"] {
    --bg-deep: #1a3d72;
    --bg-page: #224a82;
    --bg-elevated: rgba(255, 255, 255, 0.1);
    --bg-surface: rgba(255, 255, 255, 0.12);
    --bg-glass: rgba(255, 255, 255, 0.12);
    --bg-glass-hover: rgba(255, 255, 255, 0.18);
    --bg-input: rgba(255, 255, 255, 0.1);

    --text: #f0f8ff;
    --text-heading: #ffffff;
    --text-muted: rgba(200, 225, 245, 0.72);
    --text-body: rgba(235, 245, 255, 0.92);
    --text-dim: rgba(160, 195, 230, 0.55);

    --border: rgba(255, 255, 255, 0.18);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-glass: rgba(255, 255, 255, 0.22);

    --sidebar-bg: linear-gradient(180deg, rgba(22, 52, 96, 0.97) 0%, rgba(30, 68, 120, 0.95) 45%, rgba(26, 58, 102, 0.97) 100%);
    --sidebar-header-bg: rgba(255, 255, 255, 0.08);
    --sidebar-border: rgba(255, 255, 255, 0.15);
    --sidebar-shadow: 4px 0 48px rgba(0, 40, 90, 0.35);
    --sidebar-brand-color: #ffffff;
    --sidebar-tagline-muted: rgba(200, 230, 255, 0.55);

    --nav-link-color: rgba(210, 235, 255, 0.72);
    --nav-link-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-link-hover-color: #fff;
    --nav-group-color: rgba(0, 230, 255, 0.55);
    --nav-group-line: linear-gradient(90deg, rgba(0, 230, 255, 0.35), rgba(var(--optora-green-rgb), 0.18), transparent);

    --nav-icon-bg: rgba(255, 255, 255, 0.08);
    --nav-icon-border: rgba(255, 255, 255, 0.12);

    --top-bar-bg: rgba(255, 255, 255, 0.1);
    --top-bar-border: rgba(255, 255, 255, 0.15);
    --top-bar-shadow: 0 4px 24px rgba(0, 40, 90, 0.2);

    --main-glow-1: rgba(0, 230, 255, 0.16);
    --main-glow-2: rgba(var(--optora-green-rgb), 0.08);
    --main-grid-color: rgba(255, 255, 255, 0.07);

    --glow-blue: rgba(0, 230, 255, 0.5);
    --glow-green: rgba(var(--optora-green-rgb), 0.32);
    --glow-blue-soft: 0 0 24px rgba(0, 212, 255, 0.3);
    --glow-green-soft: 0 0 24px rgba(var(--optora-green-rgb), 0.18);

    --shadow-brand: 0 8px 32px rgba(0, 50, 100, 0.35), 0 0 32px rgba(0, 212, 255, 0.2);
    --shadow-glass: 0 8px 32px rgba(0, 40, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 20px rgba(0, 212, 255, 0.35);

    --error: #ff6b8a;
    --error-bg: rgba(255, 77, 109, 0.15);
    --success: var(--optora-green);
    --success-bg: rgba(var(--optora-green-rgb), 0.12);

    --btn-logout-bg: rgba(255, 255, 255, 0.08);
    --btn-logout-color: var(--optora-blue-bright);
    --btn-logout-border: rgba(255, 255, 255, 0.25);
    --btn-logout-hover-color: #030810;

    --nav-active-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.22) 0%, rgba(var(--optora-green-rgb), 0.1) 100%);
    --nav-active-color: #ffffff;
    --nav-active-border: rgba(255, 255, 255, 0.35);

    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tick: rgba(200, 225, 245, 0.72);
}

/* ——— Светлая тема (по умолчанию) ——— */
:root,
[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(var(--optora-green-rgb), 0.04);
    --main-grid-color: rgba(0, 153, 255, 0.04);

    --glow-blue: rgba(0, 153, 255, 0.25);
    --glow-green: rgba(var(--optora-green-rgb), 0.2);
    --glow-blue-soft: 0 4px 16px rgba(0, 153, 255, 0.12);
    --glow-green-soft: 0 4px 16px rgba(var(--optora-green-rgb), 0.08);

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