/* =============================================================================
   GFG app shell — app bar, icon rail, page frame, and the shared PageHeader.
   Global (not CSS-isolated) on purpose: these rules target MudBlazor's own
   rendered elements, which never carry a component's scope attribute.
   ============================================================================= */

/* ------------------------------------------------------------------ App bar -- */
.gfg .gfg-appbar {
    background-color: var(--teal-800);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: saturate(140%);
}

.gfg .gfg-appbar-title {
    font-weight: 600;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------- Page frame -- */
.gfg .gfg-page {
    max-width: var(--gfg-content-max);
    margin: 0 auto;
    padding: 26px 28px 72px;
}

@media (max-width: 960px) {
    .gfg .gfg-page {
        padding: 18px 16px 48px;
    }
}

/* --------------------------------------------------------------- Icon rail --
   Collapsed the rail is 72px. MudBlazor puts `mud-drawer-open-mini-*-left` on the
   layout when a mini drawer opens, which slides .mud-main-content over to the full
   264px. With OpenMiniOnHover that would shove the whole page sideways every time
   the pointer grazes the rail, so while the rail is unpinned we hold the content at
   the mini width and let the expanded rail float above it. Pinning drops the
   `--floating` class and the page reflows for good. */
.gfg-shell--floating .mud-main-content {
    margin-left: var(--mud-drawer-width-mini-left) !important;
}

.gfg-shell--floating .gfg-rail.mud-drawer--open {
    box-shadow: var(--shadow-3);
    z-index: 1250;
}

.gfg .gfg-rail {
    background-color: var(--surface);
    border-right: 1px solid var(--hair);
    overflow-x: hidden;
}

.gfg .gfg-rail .mud-navmenu {
    padding: 10px 0 16px;
}

.gfg .gfg-rail .mud-nav-link {
    position: relative;
    height: 42px;
    margin: 2px 10px;
    padding: 0 14px;
    border-radius: 8px;
    gap: 14px;
    color: var(--muted);
    font-family: var(--gfg-font-head);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .14s var(--gfg-ease), color .14s var(--gfg-ease);
}

.gfg .gfg-rail .mud-nav-link .mud-nav-link-icon {
    color: var(--muted);
    min-width: 24px;
    margin-right: 0;
    transition: color .14s var(--gfg-ease);
}

.gfg .gfg-rail .mud-nav-link:hover {
    background-color: var(--mist);
    color: var(--ink);
}

    .gfg .gfg-rail .mud-nav-link:hover .mud-nav-link-icon {
        color: var(--ink);
    }

/* Active destination: filled pill plus a turquoise edge marker bled to the rail border. */
.gfg .gfg-rail .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mist);
    color: var(--ink);
    font-weight: 600;
}

    .gfg .gfg-rail .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--turq-deep);
    }

    .gfg .gfg-rail .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--turq-deep);
    }

/* Section label. Expanded it is an uppercase micro-heading; collapsed it degrades to
   a hairline so the rail keeps its grouping without any text. */
.gfg .gfg-nav__section {
    display: flex;
    align-items: center;
    height: 28px;
    margin: 12px 24px 2px;
    font-family: var(--gfg-font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
}

.gfg .gfg-rail.mud-drawer--closed .gfg-nav__section {
    height: 1px;
    margin: 14px 22px 12px;
    background: var(--hair);
}

    .gfg .gfg-rail.mud-drawer--closed .gfg-nav__section > span {
        display: none;
    }

/* ------------------------------------------------------------- Page header --
   One component for every page: title with a brand accent rail, a subtitle in the
   muted ink (4.9:1) rather than the brand turquoise, and an actions slot. */
.gfg .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gfg .page-header__lead {
    position: relative;
    padding-left: 16px;
    min-width: 0;
}

    .gfg .page-header__lead::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 4px;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--turq), var(--turq-deep));
    }

.gfg .page-header__title {
    color: var(--ink);
}

.gfg .page-header__subtitle {
    color: var(--muted);
    max-width: 78ch;
    margin-top: 3px;
}

.gfg .page-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------- Control polish -- */
.gfg .mud-button-root {
    border-radius: 8px;
}

.gfg .mud-button-filled {
    box-shadow: none;
}

    .gfg .mud-button-filled:hover {
        box-shadow: var(--shadow-1);
    }

/* Tables inherit the report's figure alignment so numbers line up app-wide. */
.gfg .mud-table-cell {
    font-variant-numeric: tabular-nums lining-nums;
}

.gfg .mud-table-head .mud-table-cell {
    font-family: var(--gfg-font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}