:root {
    --brand-cyan: #27bcce;
    --brand-navy: #032f7a;
    --bg-primary: #060a14;
    --bg-secondary: #0a1326;
}

html[data-theme='dark'] {
    color-scheme: dark;
}

html {
    overflow-x: hidden;
}

html[data-theme='light'] {
    color-scheme: light;
}

body {
    background:
        radial-gradient(1200px circle at 100% 0%, rgba(39, 188, 206, 0.18), transparent 45%),
        radial-gradient(900px circle at 0% 100%, rgba(3, 47, 122, 0.35), transparent 40%),
        linear-gradient(165deg, #060a14 0%, #0a1326 45%, #090f1f 100%);
    color: #e2e8f0;
    overflow-x: hidden;
}

.dashboard-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
}

.glass-card {
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.38));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 60px rgba(2, 8, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
}

.glass-soft {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(10px);
}

.brand-gradient-text {
    background: linear-gradient(135deg, var(--brand-cyan), #62d9e6 45%, #8ea7ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-border {
    border-color: rgba(39, 188, 206, 0.45);
}

.sidebar-link {
    transition: all 0.25s ease;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: linear-gradient(120deg, rgba(39, 188, 206, 0.2), rgba(3, 47, 122, 0.35));
    border-color: rgba(39, 188, 206, 0.35);
    color: #e2f9fc;
}

.form-input,
.form-select,
.form-textarea {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: #e2e8f0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgba(39, 188, 206, 0.85);
    box-shadow: 0 0 0 4px rgba(39, 188, 206, 0.2);
    outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.data-table tr {
    border-color: rgba(148, 163, 184, 0.14);
}

.data-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.45);
}

.btn-brand {
    background: linear-gradient(120deg, #27bcce, #0f5bcf);
    color: #f8fafc;
}

.btn-brand:hover {
    filter: brightness(1.07);
}

.btn-muted {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: #cbd5e1;
}

.btn-muted:hover {
    border-color: rgba(39, 188, 206, 0.5);
    color: #e2f9fc;
}

.theme-toggle {
    transition: all 0.22s ease;
}

.theme-toggle:hover {
    border-color: rgba(39, 188, 206, 0.55);
    color: #e2f9fc;
}

table.data-table {
    width: 100%;
}

canvas {
    display: block;
    max-width: 100%;
}

.mobile-table-cards {
    display: none;
}

.alert-item {
    animation: slide-in 0.25s ease;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.45);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.8);
}

html[data-theme='light'] body {
    background:
        radial-gradient(1200px circle at 100% 0%, rgba(39, 188, 206, 0.14), transparent 45%),
        radial-gradient(900px circle at 0% 100%, rgba(3, 47, 122, 0.11), transparent 45%),
        linear-gradient(165deg, #f7fbff 0%, #eef4fb 48%, #f8fafc 100%);
    color: #0f172a;
}

html[data-theme='light'] .dashboard-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.11) 1px, transparent 1px);
}

html[data-theme='light'] .glass-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.82));
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 16px 45px rgba(148, 163, 184, 0.24);
}

html[data-theme='light'] .glass-soft {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

html[data-theme='light'] .sidebar-link:hover,
html[data-theme='light'] .sidebar-link.active {
    background: linear-gradient(120deg, rgba(39, 188, 206, 0.2), rgba(219, 234, 254, 0.9));
    color: #0f172a;
}

html[data-theme='light'] .form-input,
html[data-theme='light'] .form-select,
html[data-theme='light'] .form-textarea {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.42);
    color: #0f172a;
}

html[data-theme='light'] .form-input::placeholder,
html[data-theme='light'] .form-textarea::placeholder {
    color: rgba(100, 116, 139, 0.92);
}

html[data-theme='light'] .data-table tbody tr:hover {
    background: rgba(226, 232, 240, 0.55);
}

html[data-theme='light'] .btn-muted {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.44);
    color: #334155;
}

html[data-theme='light'] .btn-muted:hover {
    color: #0f172a;
    border-color: rgba(39, 188, 206, 0.6);
}

html[data-theme='light'] .theme-toggle {
    border-color: rgba(148, 163, 184, 0.44);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
}

html[data-theme='light'] .theme-toggle:hover {
    color: #0f172a;
}

html[data-theme='light'] .bg-slate-950\/70 {
    background-color: rgba(248, 250, 252, 0.94) !important;
}

html[data-theme='light'] .bg-slate-900\/80,
html[data-theme='light'] .bg-slate-900\/65,
html[data-theme='light'] .bg-slate-900\/60,
html[data-theme='light'] .bg-slate-900\/50,
html[data-theme='light'] .bg-slate-900\/40 {
    background-color: rgba(255, 255, 255, 0.84) !important;
}

html[data-theme='light'] .bg-slate-800\/80 {
    background-color: rgba(226, 232, 240, 0.85) !important;
}

html[data-theme='light'] .bg-slate-500\/20 {
    background-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme='light'] .border-slate-700\/70,
html[data-theme='light'] .border-slate-700\/60,
html[data-theme='light'] .border-slate-700\/40,
html[data-theme='light'] .border-slate-600\/70 {
    border-color: rgba(148, 163, 184, 0.45) !important;
}

html[data-theme='light'] .border-slate-400\/30 {
    border-color: rgba(100, 116, 139, 0.3) !important;
}

html[data-theme='light'] .text-slate-100 {
    color: #0f172a !important;
}

html[data-theme='light'] .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme='light'] .text-slate-300 {
    color: #334155 !important;
}

html[data-theme='light'] .text-slate-400 {
    color: #475569 !important;
}

html[data-theme='light'] .text-slate-500 {
    color: #64748b !important;
}

@media (max-width: 640px) {
    .glass-card {
        backdrop-filter: blur(12px);
    }

    .dashboard-kpi-grid {
        gap: 0.75rem;
    }

    .dashboard-kpi-grid > * {
        padding: 1rem !important;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .btn-brand,
    .btn-muted,
    .theme-toggle,
    .sidebar-link {
        min-height: 44px;
    }

    .theme-toggle {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .mobile-multiselect {
        display: block;
    }

    .mobile-multiselect-option {
        background: rgba(15, 23, 42, 0.35);
        border-color: rgba(148, 163, 184, 0.18);
    }
}

@media (max-width: 380px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html.mobile-tables-ready table.data-table {
        display: none !important;
    }

    html.mobile-tables-ready .mobile-table-cards {
        display: block;
    }
}