/* ═══════════════════════════════════════════════════════════════════
   VSK — post-login (app shell) theme
   Everything is scoped under .vsk-app so pre-login pages are untouched.
   Tokens (--vsk-*) come from vsk-landing.css :root — change them there
   and both pre-login and post-login update together.
═══════════════════════════════════════════════════════════════════ */

.vsk-app {
    --vsk-page: #F8F4F1;
    --vsk-maroon-tint: #FDE8E8;
    --vsk-maroon-line: #E7B7B7;
    --vsk-appbar-h: 68px; /* same height as the pre-login navbar */
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    color: var(--vsk-text);
}

    /* ── Page background ───────────────────────────────────────────── */
    .vsk-app .vsk-main {
        background: var(--vsk-page) !important;
        min-height: 100vh;
    }

    /* ── App bar (white, like the scrolled pre-login navbar) ───────── */
    .vsk-app .vsk-appbar {
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(20px);
        color: var(--vsk-navy) !important;
        box-shadow: 0 1px 0 var(--vsk-border), var(--vsk-shadow) !important;
    }

        .vsk-app .vsk-appbar .mud-toolbar {
            min-height: var(--vsk-appbar-h);
            height: var(--vsk-appbar-h);
        }

        .vsk-app .vsk-appbar .mud-icon-button {
            color: var(--vsk-navy);
        }

            .vsk-app .vsk-appbar .mud-icon-button:hover {
                background: rgba(122,0,25,.06);
            }

    .vsk-app .vsk-appbar-title {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--vsk-navy);
    }

    .vsk-app .vsk-appbar-sub {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--vsk-sub);
    }

    /* ── Drawer / sidebar (maroon, like the footer + mobile menu) ──── */
    .vsk-app .vsk-drawer {
        background: var(--vsk-navy) !important;
        color: #fff;
        border-right: none;
    }

        .vsk-app .vsk-drawer .mud-drawer-header {
            padding: 16px 16px 14px;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,.14); /* replaces the old <hr> divider */
        }

    .vsk-app .vsk-drawer-brand {
        color: #fff !important;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
    }

    .vsk-app .vsk-drawer-brand-sub {
        color: rgba(255,255,255,.75) !important;
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .vsk-app .vsk-drawer-portal {
        color: #fff !important;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    /* Keep header, divider and menu stacked from the top — no stretching gap */
    .vsk-app .vsk-drawer .mud-drawer-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .vsk-app .vsk-drawer .mud-drawer-header {
        flex: 0 0 auto !important;
        height: auto;
        min-height: 0;
    }

    .vsk-app .vsk-drawer .mud-navmenu {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Nav links */
    .vsk-app .vsk-drawer .mud-nav-link {
        color: rgba(255,255,255,.82) !important;
        border-radius: 10px;
        margin: 2px 10px;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        transition: background var(--vsk-t), color var(--vsk-t);
    }

        .vsk-app .vsk-drawer .mud-nav-link .mud-icon-root {
            color: rgba(255,255,255,.82) !important;
        }

        .vsk-app .vsk-drawer .mud-nav-link:hover {
            background: rgba(255,255,255,.10) !important;
            color: #fff !important;
        }

        .vsk-app .vsk-drawer .mud-nav-link.active,
        .vsk-app .vsk-drawer .mud-nav-link.active:hover {
            background: #fff !important;
            color: var(--vsk-navy) !important;
            font-weight: 700;
            box-shadow: 0 2px 10px rgba(0,0,0,.18);
        }

            .vsk-app .vsk-drawer .mud-nav-link.active .mud-icon-root {
                color: var(--vsk-navy) !important;
            }

    /* ── Cards / papers: white, soft border, 12px radius ───────────── */
    .vsk-app .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover):not(.mud-menu-list) {
        border: 1px solid var(--vsk-border);
        border-radius: var(--vsk-r);
        box-shadow: var(--vsk-shadow) !important;
    }

/* Popovers (select lists, date pickers, menus) keep their own elevation */
.mud-popover .mud-paper {
    border-radius: var(--vsk-r);
}

/* ── Page headings ─────────────────────────────────────────────── */
.vsk-app h1.mud-typography-h4,
.vsk-app .mud-typography-h4 {
    color: var(--vsk-navy);
    letter-spacing: -.02em;
}

.vsk-app .mud-typography-h5,
.vsk-app .mud-typography-h6 {
    color: var(--vsk-navy);
}

/* Captions/body text that use Color.Secondary → readable muted grey,
       not a second maroon (Secondary is a deep maroon for buttons/chips) */
.vsk-app .mud-typography.mud-secondary-text {
    color: var(--vsk-paratext) !important;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.vsk-app .mud-tabs {
    border-radius: var(--vsk-r-md);
    overflow: hidden;
    border: 1px solid var(--vsk-border);
    box-shadow: var(--vsk-shadow);
    background: #fff;
}

.vsk-app .mud-tabs-toolbar {
    background: #fff;
    border-bottom: 1px solid var(--vsk-border);
}

.vsk-app .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vsk-paratext);
}

    .vsk-app .mud-tab.mud-tab-active {
        color: var(--vsk-navy);
        background: var(--vsk-maroon-tint);
    }

.vsk-app .mud-tab-slider {
    background-color: var(--vsk-navy) !important;
    height: 3px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.vsk-app .mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.vsk-app .mud-button-filled.mud-button-filled-primary {
    border-radius: 50px; /* pill, same as the Login button */
    box-shadow: none;
}

    .vsk-app .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--vsk-navy4);
        box-shadow: 0 6px 18px rgba(122,0,25,.28);
    }

.vsk-app .mud-button-group-root .mud-button-root {
    border-radius: 0;
}

.vsk-app .mud-button-group-root.mud-button-group-outlined .mud-button-root:first-child {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.vsk-app .mud-button-group-root.mud-button-group-outlined .mud-button-root:last-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

/* ── Tables ────────────────────────────────────────────────────── */
.vsk-app .mud-table-head .mud-table-cell {
    background: var(--vsk-maroon-tint);
    color: var(--vsk-navy);
    font-weight: 700;
    border-bottom: 1px solid var(--vsk-maroon-line);
}

.vsk-app .mud-table-hover .mud-table-body .mud-table-row:hover {
    background: rgba(122,0,25,.04);
}

/* ── Form fields: maroon focus ring ────────────────────────────── */
.vsk-app .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--vsk-navy) !important;
}

.vsk-app .mud-input-label-outlined.mud-input-label-inputcontrol:focus,
.vsk-app .mud-input-control:focus-within > .mud-input-label {
    color: var(--vsk-navy);
}

/* ── Chips ─────────────────────────────────────────────────────── */
.vsk-app .mud-chip {
    font-weight: 600;
}

/* ── Loading bar ───────────────────────────────────────────────── */
.vsk-app .mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--vsk-navy);
}

/* ── Logout menu item ──────────────────────────────────────────── */
.vsk-app .logout-menu-item {
    color: var(--vsk-navy);
    font-weight: 600;
}

/* ── Reusable KPI card (same look as the landing-page KPI card) ───── */
.vsk-kpi-tile {
    background: var(--vsk-maroon-tint, #FDE8E8);
    border: 1px solid var(--vsk-maroon-line, #E7B7B7);
    border-radius: var(--vsk-r-lg);
    box-shadow: 0 15px 35px rgba(122,0,25,.10);
}

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .vsk-app .vsk-appbar-sub {
        display: none;
    }
}