:root {
    --wv-primary: #4f46e5;
    --wv-primary-strong: #4338ca;
    --wv-primary-soft: #eef2ff;
    --wv-secondary: #2563eb;
    --wv-success: #047857;
    --wv-danger: #dc2626;
    --wv-ink: #0f172a;
    --wv-muted: #64748b;
    --wv-surface: #ffffff;
    --wv-surface-soft: #f8fafc;
    --wv-background: #f5f7fb;
    --wv-border: #e2e8f0;
    --wv-sidebar: #0f172a;
    --wv-sidebar-soft: #172033;
    --wv-focus: #4f46e5;
    --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-primary: var(--wv-primary);
    --bs-primary-rgb: 79, 70, 229;
    --primary-color: var(--wv-primary);
    --primary-light: var(--wv-primary-soft);
    --text-main: var(--wv-ink);
    --text-muted: var(--wv-muted);
    --bg-body: var(--wv-background);
    --sidebar-width: 248px;
    --header-height: 64px;
    --card-radius: 14px;
    --transition-speed: 0.2s;
}

html,
body {
    background: var(--wv-background);
}

body {
    color: var(--wv-ink);
    font-family: var(--bs-font-sans-serif);
    line-height: 1.5;
}

#sidebar {
    background: var(--wv-sidebar);
    border-right: 1px solid #1e293b;
    box-shadow: 10px 0 30px rgb(15 23 42 / 10%);
}

.sidebar-header {
    border-bottom: 1px solid rgb(148 163 184 / 12%);
    padding: 0 18px;
}

.brand-logo {
    color: #ffffff;
    font-size: 1rem;
    gap: 10px;
    letter-spacing: -0.025em;
}

.brand-logo:hover,
.brand-logo:focus-visible {
    color: #ffffff;
}

.brand-logo > div {
    background: linear-gradient(145deg, #6366f1, #2563eb) !important;
    border: 1px solid rgb(255 255 255 / 16%);
    box-shadow: 0 8px 20px rgb(37 99 235 / 24%);
}

.sidebar-content {
    padding: 14px 10px 22px;
    scrollbar-color: #334155 transparent;
}

.menu-label {
    color: #64748b;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    margin: 18px 10px 7px;
}

#sidebar .nav-link-item,
#sidebar .nav-link-item.gps-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #cbd5e1;
    margin-bottom: 3px;
    min-height: 42px;
    padding: 9px 12px;
}

#sidebar .nav-link-item i,
#sidebar .nav-link-item.gps-link i {
    color: #94a3b8;
}

#sidebar .nav-link-item:hover,
#sidebar .nav-link-item.gps-link:hover {
    background: rgb(99 102 241 / 10%);
    border-color: rgb(129 140 248 / 14%);
    color: #ffffff;
}

#sidebar .nav-link-item:hover i,
#sidebar .nav-link-item.gps-link:hover i {
    color: #a5b4fc;
}

#sidebar .nav-link-item.active,
#sidebar .nav-link-item.gps-link.active {
    background: linear-gradient(90deg, rgb(79 70 229 / 34%), rgb(37 99 235 / 18%));
    border-color: rgb(129 140 248 / 24%);
    box-shadow: inset 3px 0 0 #818cf8;
    color: #ffffff;
}

#sidebar .nav-link-item.active i,
#sidebar .nav-link-item.gps-link.active i {
    color: #c7d2fe;
}

#sidebar .dropdown-toggle::after {
    color: #64748b;
}

#sidebar .submenu {
    margin: 2px 0 8px;
}

#sidebar .submenu li a {
    border-radius: 8px;
    color: #94a3b8;
    min-height: 38px;
    padding: 8px 10px 8px 28px;
}

#sidebar .submenu li a:hover,
#sidebar .submenu li a.active {
    background: rgb(99 102 241 / 10%);
    color: #e0e7ff;
}

#sidebar .submenu-icon,
#sidebar .submenu-icon.text-danger {
    color: #64748b !important;
}

#sidebar .submenu li a:hover .submenu-icon,
#sidebar .submenu li a.active .submenu-icon {
    color: #a5b4fc !important;
}

#content {
    background: var(--wv-background);
}

.main-navbar {
    background: rgb(255 255 255 / 92%);
    border-bottom: 1px solid var(--wv-border);
    box-shadow: 0 1px 12px rgb(15 23 42 / 4%);
    padding: 0 24px;
}

.main-navbar .text-dark {
    color: var(--wv-ink) !important;
}

#sidebarCollapse {
    align-items: center;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

#sidebarCollapse:hover {
    background: var(--wv-primary-soft);
    color: var(--wv-primary);
}

.dashboard-context-panel .input-group,
.dashboard-context-toggle {
    border-color: var(--wv-border);
    box-shadow: 0 2px 8px rgb(15 23 42 / 5%) !important;
}

.dashboard-context-panel .input-group {
    border-radius: 10px !important;
}

.dashboard-context-panel select {
    color: var(--wv-ink);
    font-weight: 600;
}

.page-content {
    background:
        radial-gradient(circle at 92% 2%, rgb(99 102 241 / 5%), transparent 24rem),
        var(--wv-background);
    padding: 24px;
}

.card {
    border: 1px solid var(--wv-border);
    box-shadow: 0 8px 28px rgb(15 23 42 / 5%);
}

.card:hover {
    box-shadow: 0 12px 32px rgb(15 23 42 / 8%);
}

.card-header {
    border-bottom-color: var(--wv-border);
}

.btn-primary {
    --bs-btn-bg: var(--wv-primary);
    --bs-btn-border-color: var(--wv-primary);
    --bs-btn-hover-bg: var(--wv-primary-strong);
    --bs-btn-hover-border-color: var(--wv-primary-strong);
    --bs-btn-active-bg: var(--wv-primary-strong);
    --bs-btn-active-border-color: var(--wv-primary-strong);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role='button']:focus-visible {
    border-color: color-mix(in srgb, var(--wv-focus) 58%, white);
    box-shadow: 0 0 0 3px rgb(79 70 229 / 18%);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

button:not(:disabled),
[role='button'],
summary,
a[href] {
    cursor: pointer;
}

* {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

html[data-wv-theme='dark'] {
    --wv-ink: #e2e8f0;
    --wv-muted: #94a3b8;
    --wv-surface: #111827;
    --wv-surface-soft: #172033;
    --wv-background: #0b1220;
    --wv-border: #273449;
    --wv-primary-soft: rgb(79 70 229 / 18%);
    --bg-body: var(--wv-background);
    --text-main: var(--wv-ink);
    --text-muted: var(--wv-muted);
}

html[data-wv-theme='dark'] body,
html[data-wv-theme='dark'] #content,
html[data-wv-theme='dark'] .page-content {
    background-color: var(--wv-background);
}

html[data-wv-theme='dark'] .main-navbar,
html[data-wv-theme='dark'] .dashboard-context-panel {
    background: rgb(17 24 39 / 94%);
    border-color: var(--wv-border);
}

html[data-wv-theme='dark'] .card {
    background: var(--wv-surface);
    border-color: var(--wv-border);
}

@media (max-width: 991px) {
    :root {
        --header-height: 60px;
    }

    #sidebar {
        box-shadow: 18px 0 50px rgb(2 6 23 / 34%);
    }

    .page-content {
        padding: 16px;
    }

    .form-control,
    .form-select {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}