@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Outfit', sans-serif;
    background: #F4F6FB;
    margin: 0;
    padding: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7b1120; }

/* MudBlazor nav link active state */
.mud-nav-link.active {
    background: rgba(200, 168, 75, 0.15) !important;
    color: #C8A84B !important;
    border-left: 3px solid #C8A84B;
}

/* MudBlazor outlined textfield radius */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px !important;
}

/* MudDataGrid header */
.mud-table-head .mud-table-cell {
    background: #F4F6FB !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
}

/* Chip style */
.mud-chip {
    font-family: 'Outfit', sans-serif !important;
}

/* ── Paste these rules into your wwwroot/app.css ── */

/* Nav link hover — gold highlight, no blue */
.mud-nav-link:hover {
    background: rgba(200, 168, 75, 0.18) !important;
    color: #C8A84B !important;
}

    .mud-nav-link:hover .mud-icon-root {
        color: #C8A84B !important;
    }

/* Active nav link — gold left border + gold text */
.nav-link-active,
.mud-nav-link.active {
    background: rgba(200, 168, 75, 0.2) !important;
    color: #C8A84B !important;
    border-left: 3px solid #C8A84B !important;
    font-weight: 600 !important;
}

    .nav-link-active .mud-icon-root,
    .mud-nav-link.active .mud-icon-root {
        color: #C8A84B !important;
    }

/* Remove the default blue focus/ripple on nav items */
.mud-nav-link:focus,
.mud-nav-link:focus-visible {
    outline: none !important;
    background: rgba(200, 168, 75, 0.12) !important;
}

/* Ripple override — use gold instead of blue */
.mud-nav-link .mud-ripple {
    background: rgba(200, 168, 75, 0.15) !important;
}