/*
 * Layout shell styling — overrides MudBlazor's Material defaults to
 * match the V4 mockup's flat-bordered chrome and navy left rail.
 * Source: govcomply/docs/mockups/v4-prototype.html `.sidebar`, `.topbar`,
 * and `.nav-item` rules. Per DECISIONS.md M0.40, MudBlazor is the chassis
 * library; these overrides land in CSS rather than in the C# theme so the
 * theme file stays focused on palette tokens MudBlazor reads at theme time.
 */

/* ── App bar (top bar) ──────────────────────────────────────────────
 * MudAppBar with Color="Color.Surface" + Elevation="0" still ships a
 * shadow on some builds; force flat-with-border per the mockup's
 * .topbar rule (background:white; border-bottom:1px solid var(--border)).
 */
.gc-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}

.gc-appbar-title {
    font-weight: 600;
    color: #1A1A2E;
}

.gc-appbar-subtitle {
    color: rgba(26, 26, 46, 0.6);
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.gc-appbar-page {
    margin-left: 8px;
    min-width: 0;
}

.gc-appbar-burger {
    color: #1A1A2E;
}

.gc-appbar-scope {
    margin-left: 16px;
    min-width: 280px;
}

.gc-appbar-scope-select {
    min-width: 280px;
}

.gc-appbar-ai-button {
    margin-left: 12px;
    text-transform: none;
}

.gc-appbar-user-text {
    line-height: 1.2;
}

/* The user chip's MudMenu activator is a MudButton so the menu has a real
 * click target (#1247). Strip the button's default uppercase/min-width/
 * padding chrome so the chip keeps its prior footprint. */
.gc-appbar-user.mud-button-root {
    text-transform: none;
    padding: 4px 8px;
    min-width: 0;
}

/* ── Drawer (left sidebar) ──────────────────────────────────────────
 * MudDrawer with Color="Color.Dark" maps to the dark-default palette,
 * but the mockup uses a specific navy (#1A2E4A) that the C# theme
 * exposes as PaletteNavy / Secondary. Override the dark background here
 * so the drawer matches the mockup without remapping the dark token.
 *
 * Color the paper (`.gc-drawer` is the Class on <MudDrawer>, i.e. the
 * `.mud-drawer` element) as well as its content, and make the content
 * fill the full height. Coloring only the content left the paper at the
 * dark-palette default, so over-scrolling past the last nav item exposed
 * a gray band beneath the navy content (#1297).
 */
.gc-drawer,
.gc-drawer .mud-drawer-content {
    background: #1A2E4A;
}

.gc-drawer .mud-drawer-content {
    color: rgba(255, 255, 255, 0.6);
    min-height: 100%;
    /* Assert the column flex layout MudBlazor defaults to, so the header /
       nav flex rules below are load-bearing rather than relying on the
       chassis default (#1366). */
    display: flex;
    flex-direction: column;
}

.gc-drawer-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 18px 16px;
    /* #1366: pin the fixed-content header so it keeps its intrinsic height on
       short viewports instead of squishing / shifting the nav up. */
    flex-shrink: 0;
    /* #1694: MudDrawerHeader is a flex row defaulting to justify-content:
       flex-start, so the logo's <MudStack> wrapper — which shrinks to the
       image width — hugged the left edge. Center it so the brand mark sits
       in the middle of the 224px drawer. */
    justify-content: center;
}

/* Reversed-out white + gold brand lockup on the navy sidebar (§2.2). Centered
   in the 224px drawer; sized by width with comfortable margins. */
.gc-drawer-logo-img {
    width: 140px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 4px auto 0;
}

/* Loading-splash brand mark. The full COLOR shield on the white splash (boot
   screen in index.html + the in-app AuthSplash), gently pulsing while the app
   / auth state resolves; a fast 1.1s cycle so any brief appearance reads as
   intentional, and no motion under prefers-reduced-motion. Defined here — not
   inline — so the pre-Blazor boot screen (which links this stylesheet) and the
   Blazor AuthSplash share ONE definition and stay visually identical. */
@keyframes gc-splash-pulse {
    0%, 100% { opacity: .45; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1); }
}
.gc-splash-logo {
    height: 120px;
    width: auto;
    animation: gc-splash-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .gc-splash-logo { animation: none; opacity: 1; }
}

/* ── Nav menu ───────────────────────────────────────────────────────
 * MudNavMenu defaults to a vertical list; mockup nav items are smaller
 * (13px), with a translucent-white active state. The .nav-section
 * dividers are not MudNavLink — they're plain divs scoped to .gc-nav.
 */
.gc-nav {
    padding: 12px 8px;
    /* #1310: paint the MudNavMenu container navy. #1297 colored the drawer paper +
       content (.gc-drawer / .mud-drawer-content), but MudBlazor's own
       .mud-navmenu-default surface-gray sits on top of the navy content and shows
       through in the empty space below the nav links when the drawer scrolls.
       Match the drawer navy so no gray band can appear. */
    background: #1A2E4A;
    /* #1366: take the remaining drawer height and scroll the nav list when
       space is tight. min-height: 0 lets a flex child scroll instead of
       overflowing its parent. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* #2091: the seven section headers became collapsible MudNavGroups. Each
   group header renders as a `.mud-nav-link` that is a direct child of
   `.mud-nav-group`; restyle only that header (child links stay nested inside
   the collapse container) to keep the prior `.gc-nav-section` label treatment
   — uppercase, 10px, translucent-white — plus the expand chevron in the same
   palette. */
.gc-nav .mud-nav-group > .mud-nav-link {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 10px 10px 5px;
    text-transform: uppercase;
}

.gc-nav .mud-nav-group > .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.gc-nav .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
    color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

.gc-nav .mud-nav-link {
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-bottom: 1px;
    padding: 8px 10px;
    transition: all 0.2s ease;
}

.gc-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.gc-nav .mud-nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.gc-nav .mud-nav-link .mud-nav-link-icon {
    color: inherit;
    opacity: 0.8;
}