/* ==================================================================== *
 * adminTheme.css — the "light & airy" reskin layer.
 * Loaded AFTER app.css (see App.razor) so it wins ordering ties.
 * Colours come from the brand tokens declared in app.css (:root /
 * .page-theme-dark), so every rule here follows light + dark themes.
 * ==================================================================== */

/* ---- App bar ---- */
.mud-appbar {
    border-bottom: 1px solid var(--sp-border);
    backdrop-filter: saturate(1.1);
}

.mud-appbar .mud-avatar {
    background: var(--sp-gradient-brand);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--sp-shadow-sm);
}

/* ---- Sidebar / navigation ---- */
.mud-drawer {
    border-right: 1px solid var(--sp-border);
}

.drawer-menu {
    padding: 0.5rem 0.5rem 1.5rem;
}

.mud-navmenu .mud-nav-link {
    border-radius: var(--sp-radius);
    margin: 2px 6px;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.mud-navmenu .mud-nav-link:hover {
    background-color: var(--sp-hover-soft);
}

.mud-navmenu .mud-nav-link.active {
    background-color: var(--sp-active-soft);
    color: var(--sp-brand-1);
    font-weight: 600;
    position: relative;
}

    .mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
        color: var(--sp-brand-1);
    }

    /* Brand accent bar on the active item */
    .mud-navmenu .mud-nav-link.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 62%;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--sp-gradient-brand);
    }

/* Top-level group headers read as section labels */
.mud-navmenu > .mud-nav-group > .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sp-ink-soft);
    margin-top: .35rem;
}

    .mud-navmenu > .mud-nav-group > .mud-nav-link:hover {
        background-color: var(--sp-hover-soft);
    }

/* ---- Tables ---- */
.mud-table .mud-table-container {
    border-radius: var(--sp-radius-lg) !important;
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow-sm) !important;
    overflow: auto;
}

/* ---- Cards / surfaces ---- */
.sp-card {
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-sm);
}

/* ---- Shared page title ---- */
.admin-page-title {
    font-weight: 300;
    letter-spacing: -.01em;
    color: var(--sp-ink);
}