/* ── MLM theme polish ──────────────────────────────────────────────
   Theme colours/typography are in Components/Layout/AppTheme.cs; these rules refine
   MudBlazor components so every staff page shares one look (matching login + portal). */

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: "cv11", "ss01"; }   /* Inter: straight-sided 1, open digits */

a, button, .mud-button-root {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.main-content { min-height: calc(100vh - 56px); background: var(--mud-palette-background); }

/* ── App bar ── */
.app-bar.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(8px);
}
.app-brand { display: flex; align-items: center; gap: 10px; margin-left: 6px; text-decoration: none; color: inherit; }
.app-brand-mark {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 55%, #7e57c2 100%);
    box-shadow: 0 4px 10px rgba(57, 73, 171, .28);
}
.app-brand-mark svg { width: 18px; height: 18px; fill: #fff; }
.app-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.app-brand-sub {
    font-size: .8rem; color: var(--mud-palette-text-secondary);
    padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--mud-palette-divider);
}
.app-user {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent; background: none; color: var(--mud-palette-text-primary);
    font: 500 .85rem Inter, Roboto, sans-serif;
}
.app-user:hover { background: var(--mud-palette-background); border-color: var(--mud-palette-divider); }
.app-avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3949ab, #7e57c2);
}

/* ── Navigation drawer ── */
.app-drawer.mud-drawer { border-right: 1px solid var(--mud-palette-divider); }
.nav-menu { padding: 10px 0 24px; }
.nav-menu .mud-nav-link {
    border-radius: 8px; margin: 1px 10px; padding: 7px 12px; min-height: 38px; white-space: nowrap;
    font-weight: 500; font-size: .875rem; color: var(--mud-palette-drawer-text);
}
.nav-menu .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-drawer-icon); }
.nav-menu .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: #f3f4f9; }
.nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) { background: #eef0fb; color: var(--mud-palette-primary); font-weight: 600; }
.nav-menu .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; }
.nav-menu .mud-navgroup .mud-collapse-wrapper .mud-nav-link { padding-left: 40px; min-height: 34px; font-size: .845rem; }
.nav-section {
    margin: 18px 22px 6px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); white-space: nowrap;
}
.mud-drawer--closed .nav-section, .mud-drawer-mini:not(.mud-drawer--open) .nav-section { visibility: hidden; height: 0; margin: 8px 0; }

/* ── Surfaces ── */
.mud-main-content .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2,
.mud-main-content .mud-paper.mud-elevation-3,
.mud-main-content .mud-paper.mud-elevation-4 { border: 1px solid #eceef5; }
.mud-paper-outlined { border-color: #e6e8f1 !important; }
.mud-card { border-radius: 12px; }

/* ── Tables & grids ── */
.mud-table .mud-table-head .mud-table-cell {
    background: #f8f9fc; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--mud-palette-text-secondary); white-space: nowrap; border-bottom-color: #e8eaf2;
}
.mud-table .mud-table-cell { font-variant-numeric: tabular-nums; }
.mud-table-dense .mud-table-row .mud-table-cell { padding-top: 7px; padding-bottom: 7px; }
.mud-table .mud-table-head .mud-table-cell .mud-button-root { text-transform: inherit; font: inherit; letter-spacing: inherit; }
.mud-table-pagination { border-top: 1px solid var(--mud-palette-table-lines); }

/* ── Tabs ── */
.mud-tab { text-transform: none !important; letter-spacing: 0; font-weight: 550; min-width: 0; padding: 10px 18px; }
.mud-tab.mud-tab-active { color: var(--mud-palette-primary); }
.mud-tabs-tabbar { border-bottom: 1px solid var(--mud-palette-divider); }
/* Tabbed cards (ApplyEffectsToContainer): give the panels the card surface too, not just the tab strip */
.mud-main-content .mud-tabs[class*="mud-elevation-"] { background: var(--mud-palette-surface); border-radius: 12px; overflow: hidden; }
.mud-main-content .mud-tabs[class*="mud-elevation-"] .mud-tabs-tabbar { background: var(--mud-palette-surface); }
.mud-tab-slider { height: 2.5px !important; border-radius: 2px 2px 0 0; }

/* ── Buttons ── */
.mud-button-root { border-radius: 8px; }
.mud-button-filled { box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.mud-button-filled:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .14); }
.mud-button-filled-primary:not(:disabled):not(.mud-button-disabled) { background: linear-gradient(135deg, #3949ab, #5c6bc0); }
.mud-button-filled-primary:not(:disabled):not(.mud-button-disabled):hover {
    background: linear-gradient(135deg, #303f9f, #3949ab); box-shadow: 0 6px 16px rgba(57, 73, 171, .3);
}
.mud-button-outlined { border-color: #d9dcea; }
.mud-button-outlined:hover { border-color: currentColor; }
.mud-icon-button { border-radius: 8px; }

/* ── Inputs ── */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 8px; border-color: var(--mud-palette-lines-inputs); }
.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border { border-color: #a9b0cc; }
.mud-input.mud-input-filled { background: #f5f6fa; border-radius: 8px 8px 0 0; }
.mud-input.mud-input-filled:hover { background: #eff1f7; }
.mud-input-label { font-weight: 500; }

/* ── Chips, alerts, menus, dialogs ── */
.mud-chip { font-weight: 500; }
.mud-chip.mud-chip-size-small { border-radius: 999px; }
.mud-alert { border-radius: 10px; }
.mud-popover.mud-paper {
    border-radius: 10px; border: 1px solid #eceef5;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06) !important;
}
.mud-popover .mud-list { padding: 4px; }
.mud-popover .mud-list-item { border-radius: 6px; }
.mud-dialog { border-radius: 16px !important; box-shadow: 0 24px 60px rgba(16, 24, 40, .24) !important; }
.mud-dialog .mud-dialog-title { padding: 20px 24px 8px; }
.mud-dialog .mud-dialog-title .mud-typography-h6 { font-size: 1.1rem; font-weight: 650; }
.mud-dialog .mud-dialog-content { padding: 8px 24px 12px; }
.mud-dialog .mud-dialog-actions { padding: 12px 20px 18px; gap: 4px; }
.mud-overlay-dark { background-color: rgba(15, 18, 40, .45) !important; backdrop-filter: blur(2px); }
.mud-snackbar { border-radius: 10px !important; font-weight: 500; box-shadow: 0 10px 28px rgba(16, 24, 40, .2) !important; }
.mud-progress-linear { border-radius: 4px; overflow: hidden; }
.mud-expand-panel { border-radius: 10px !important; }

/* ── Dashboard stat cards ── */
.stat-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px;
    background: var(--mud-palette-surface); border: 1px solid #eceef5; border-radius: 12px; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .08); border-color: #dfe2f0; }
.stat-label { font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 6px; }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }

/* ── Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: rgba(29, 32, 51, .2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(29, 32, 51, .18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(29, 32, 51, .3); background-clip: padding-box; }