:root {
    color-scheme: light;
    --surface-1: #fcfcfb;
    --page-plane: #f9f9f7;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --border-hairline: rgba(11, 11, 11, 0.10);
    --sidebar-bg: #16181d;
    --sidebar-text: #c3c2b7;
    --sidebar-active: #2a78d6;
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --surface-1: #1a1a19;
        --page-plane: #0d0d0d;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --border-hairline: rgba(255, 255, 255, 0.10);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border-hairline: rgba(255, 255, 255, 0.10);
}

body {
    background: var(--page-plane);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.app-sidebar {
    background: var(--sidebar-bg);
    min-height: 100vh;
    width: 240px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1030;
}

.app-sidebar .brand {
    color: #fff;
    font-weight: 600;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar .nav-link {
    color: var(--sidebar-text);
    padding: .55rem 1.1rem;
    font-size: .92rem;
    border-left: 3px solid transparent;
}

.app-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.app-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--sidebar-active);
}

.app-sidebar .nav-link i {
    width: 1.4rem;
    display: inline-block;
    text-align: center;
}

.app-main {
    margin-left: 240px;
    min-height: 100vh;
}

.app-topbar {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-hairline);
}

.card {
    background: var(--surface-1);
    border: 1px solid var(--border-hairline);
}

.stat-tile {
    border-left: 4px solid var(--tile-accent, #2a78d6);
    background: var(--surface-1);
}

.stat-tile .stat-value {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-tile .stat-label {
    color: var(--text-secondary);
    font-size: .82rem;
}

.stat-tile .stat-icon {
    color: var(--tile-accent, #2a78d6);
    font-size: 1.5rem;
    opacity: .85;
}

.text-muted-soft {
    color: var(--text-muted) !important;
}

table.table {
    color: var(--text-primary);
}

@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .app-sidebar.show {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }
}