/* gocomm-app.css — app-level brand glue for MudBlazor.
   Loaded globally AFTER gocomm-brand.css. This file styles MudBlazor's OWN rendered
   DOM (drawer / nav-menu / main-content), which Blazor scoped CSS can't reliably reach
   because those elements are produced by child components. Everything here is namespaced
   under .gc-nav (the drawer) or .gc-* classes and is driven by the --gc-* tokens — no
   hardcoded hex values. Component-private layout lives in the matching .razor.css files. */

/* ─────────────────────────────────────────────────────────────
   Type system — MudBlazor's own typography (h1-h6/body/button/etc.) is
   driven by MudTheme.Typography in MainLayout.razor, the one allowed C#
   duplication of the --gc-font-* stacks. This fallback covers plain HTML
   this app writes itself (rail buttons, header divs) that sit outside
   MudBlazor's Typo system.
   ───────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--gc-font-body);
}

.mud-tab .mud-tab-slot {
    font-family: var(--gc-font-display);
}

/* Monospace utility face — machine-readable values (IDs, codes) that aren't
   prose, e.g. the Overview tab's technical identifier fields. */
.gc-mono {
    font-family: var(--gc-font-mono);
}

/* ─────────────────────────────────────────────────────────────
   Collapsible nav drawer (MudDrawer Variant="Mini", Class="gc-nav")
   Mini width = 76px (the "rail"); open width = 248px.
   ───────────────────────────────────────────────────────────── */
.gc-nav {
    --gc-rail: 76px;
    border-right: 1px solid var(--gc-border);
}

/* This layout has no MudAppBar, so pin the fixed drawer to the full viewport height —
   MudBlazor otherwise offsets a fixed drawer down by the (phantom) app-bar height,
   which would push the footer off the bottom of the screen. */
.gc-nav.mud-drawer-fixed {
    top: 0;
    height: 100vh;
    max-height: 100vh;
}

.gc-nav .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden; /* clip the wordmark while collapsed */
}

/* ── Brand header: the MARK is permanent, the WORDMARK fades in beside it ──
   padding-left:20px in a 76px rail leaves 20px on the right too (20+36+20=76),
   so the 36px mark is centred while collapsed AND never moves when expanding. */
.gc-nav .gc-brand {
    flex: none;
    height: 64px;
    border-bottom: 1px solid var(--gc-border);
}

.gc-nav .gc-brand-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* anchor the mark at padding-left:20px so it stays put
                                    (20 + 36 + 20 = 76 → centred in the collapsed rail) */
    gap: 9px;
    width: 100%;
    height: 64px;
    padding: 0 0 0 20px;
    border: 0;
    background: transparent;
    color: var(--gc-ink);
    cursor: pointer;
    overflow: hidden;
}

.gc-nav .gc-brand-mark {
    display: flex;
    flex: none;
}

.gc-nav .gc-brand-mark .gc-mark {
    height: 36px;
    width: 36px;
}

/* Wordmark cut at the same scale as the mark → equal height reproduces the lockup. */
.gc-nav .gc-brand-wordmark {
    display: flex;
    flex: none;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
}

.gc-nav .gc-brand-wordmark .gc-wordmark {
    height: 36px;
    width: auto;
}

.gc-nav.mud-drawer--open .gc-brand-wordmark {
    opacity: 1;
    transform: none;
}

/* ── Nav menu ──────────────────────────────────────────────── */
.gc-nav .mud-navmenu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
}

/* Icon pinned at 26px from the rail edge in BOTH states:
   while collapsed, a 24px icon at 26px is symmetric in the 76px rail (26+24+26=76),
   so it reads as centred and does NOT jump left when the labels fade in. */
.gc-nav .mud-nav-link,
.gc-nav .mud-nav-group > .mud-nav-link {
    padding: 11px 14px 11px 26px;
    color: var(--gc-ink);
}

.gc-nav .mud-nav-link .mud-nav-link-icon {
    margin-right: 16px;
    color: inherit;
}

.gc-nav .mud-nav-link:hover {
    background: var(--gc-muted);
}

/* Active item: faint fill + readable green text + a left accent bar drawn with an
   inset shadow (no box model change → preserves the icon alignment above). */
.gc-nav .mud-nav-link.active {
    background: var(--gc-muted);
    color: var(--gc-green-text);
    box-shadow: inset 3px 0 0 0 var(--gc-accent);
}

.gc-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--gc-accent);
}

/* Nested links inside the Organization / Admin groups (only seen when expanded). */
.gc-nav .mud-nav-group .mud-nav-group .mud-nav-link,
.gc-nav .mud-collapse-container .mud-nav-link {
    font-size: .9rem;
}

/* Recent Clients: its own always-visible section above Dashboard, built from real
   MudNavLinks so it inherits the same padding/hover/active-route styling as every
   other rail link above (.gc-nav .mud-nav-link rules further up this file). */
.gc-nav .gc-recent-clients-caption {
    display: none;
    padding: 10px 14px 4px 26px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gc-ink-muted, rgba(128,128,128,0.7));
}

.gc-nav.mud-drawer--open .gc-recent-clients-caption {
    display: block;
}

.gc-recent-client-link-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gc-recent-client-link-name {
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-recent-client-link-number {
    font-size: .75rem;
    color: var(--gc-ink-muted, rgba(128,128,128,0.7));
}

.gc-recent-client-item-number {
    font-size: .75rem;
    color: var(--gc-ink-muted, rgba(128,128,128,0.7));
}

/* ── Footer (org chip / avatar / theme toggle / sign-out) ──── */
.gc-nav .gc-drawer-footer {
    flex: none;
    border-top: 1px solid var(--gc-border);
    padding: 10px 0;
}

.gc-nav .gc-org-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 14px 10px;
}

.gc-nav .gc-org-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-nav .gc-switch-btn {
    flex: none;
    min-width: 0;
    padding: 0 8px;
}

.gc-nav .gc-footer-actions {
    display: flex;
    align-items: center;
}

.gc-nav .gc-footer-actions.gc-row {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
}

.gc-nav .gc-footer-actions.gc-col {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Mobile nav: below 768px the rail is fully hidden at rest and
   opens as a fixed overlay with a dismiss backdrop, instead of
   permanently occupying part of a narrow viewport.
   ───────────────────────────────────────────────────────────── */
.gc-mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1301;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-md);
    background: var(--gc-bg);
    color: var(--gc-ink);
    cursor: pointer;
}

@media (max-width: 767px) {
    .gc-mobile-nav-toggle {
        display: flex;
    }

    /* While the drawer is open, its own brand-mark button (top-left, inside .gc-nav) and
       MudBlazor's own overlay scrim already close it on click — hide the external toggle
       so it doesn't overlap the drawer's brand lockup. */
    .gc-mobile-nav-toggle:has(~ .gc-nav.mud-drawer--open) {
        display: none;
    }

    .gc-nav:not(.mud-drawer--open) {
        width: 0 !important;
        min-width: 0;
        border-right: none;
        overflow: hidden;
    }

    .gc-nav.mud-drawer--open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: min(85vw, 320px) !important;
        /* MudBlazor's own overlay wrapper (.mud-drawer-overlay) sits at z-index 1301 for this
           breakpoint/variant combination; the drawer itself must clear that or its own scrim
           intercepts clicks on the nav links, not just outside-clicks. */
        z-index: 1302 !important;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    }

    /* Filter bars (e.g. Call Logs): fields carry a per-field desktop max-width inline,
       which wins over an external rule at equal specificity, so drop it explicitly here
       rather than let MudStack's wrap algorithm pair fields arbitrarily and truncate labels. */
    .gc-filter-field {
        max-width: none !important;
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   Outlined-primary buttons: MudBlazor renders these with the raw
   --mud-palette-primary color as literal button text/border, which
   in light mode is Signal Green Deep at 2.7:1 — fails the 4.5:1 text
   contrast floor. --gc-green-text already resolves to the correct
   value per theme (the desaturated variant in light, the bright
   accent in dark, where it's contrasty enough as text), so applying
   it here needs no theme-conditional logic of its own.
   ───────────────────────────────────────────────────────────── */
.mud-button-outlined-primary {
    color: var(--gc-green-text) !important;
    border-color: var(--gc-green-text) !important;
}

/* Long sync-button labels read as shouting under MudBlazor's default
   uppercase button text-transform; render them as authored instead. */
.gc-btn-sentence-case {
    text-transform: none;
}

/* ─────────────────────────────────────────────────────────────
   Subdrawer: a second-level panel for one rail item (e.g. Clients),
   rendered as a third column between the rail and the main content.
   Reusable shell (AppSubDrawer.razor) + per-item content component.
   ───────────────────────────────────────────────────────────── */
.gc-subdrawer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* MudBlazor's own built-in rule already margins any non-.mud-main-content sibling
       div of an open mini/persistent drawer by the drawer's current width
       (".mud-drawer...--open ~ div:not(.mud-main-content) { margin-left: var(--mud-drawer-width...) }",
       specificity 0,5,0 — it wins over this base rule automatically once the rail
       opens). This base value only covers the mini/collapsed rail width; don't also
       add a manual transform here or the two offsets stack. */
    margin-left: 76px;
    width: 280px;
    z-index: 1250;
    flex-direction: column;
    background: var(--gc-bg);
    border-right: 1px solid var(--gc-border);
    transition: margin-left 0.18s ease;
}

.gc-subdrawer.gc-subdrawer-open {
    display: flex;
}

/* Main content must clear the subdrawer PLUS whatever the rail itself already
   takes (76 mini / 248 open) — MudBlazor's own built-in main-content margin rule
   isn't reachable/composable from here, so both totals are stated explicitly
   rather than assuming they add across two separate declarations. */
.gc-subdrawer.gc-subdrawer-open ~ .mud-main-content {
    margin-left: 356px; /* 76 (mini rail) + 280 (subdrawer) */
    transition: margin-left 0.18s ease;
}

.gc-nav.mud-drawer--open ~ .gc-subdrawer.gc-subdrawer-open ~ .mud-main-content {
    margin-left: 528px; /* 248 (open rail) + 280 (subdrawer) */
}

.gc-subdrawer-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 var(--gc-space-4);
    border-bottom: 1px solid var(--gc-border);
}

.gc-subdrawer-search {
    flex: none;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gc-bg);
    padding: var(--gc-space-3) var(--gc-space-4) var(--gc-space-2);
    border-bottom: 1px solid var(--gc-border);
}

.gc-subdrawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0 var(--gc-space-4);
}

.gc-subdrawer-list {
    padding: 0 var(--gc-space-3);
}

.gc-subdrawer-section-label {
    display: block;
    padding: var(--gc-space-3) 0 var(--gc-space-1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gc-ink-muted, rgba(128, 128, 128, 0.7));
}

.gc-subdrawer-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--gc-space-2);
    width: 100%;
    padding: var(--gc-space-1) var(--gc-space-2);
    border: 0;
    border-radius: var(--gc-radius-sm);
    background: transparent;
    color: var(--gc-ink);
    text-align: left;
    cursor: pointer;
}

.gc-subdrawer-item:hover {
    background: var(--gc-muted);
}

.gc-subdrawer-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--gc-font-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-subdrawer-item-number {
    flex: none;
    font-size: var(--gc-font-xs);
    white-space: nowrap;
    color: var(--gc-ink-muted, rgba(128, 128, 128, 0.7));
}

.gc-subdrawer-empty {
    padding: var(--gc-space-2) 0;
}

.gc-subdrawer-footer {
    flex: none;
    padding: var(--gc-space-2) var(--gc-space-4);
    border-top: 1px solid var(--gc-border);
}

@media (max-width: 767px) {
    .gc-subdrawer {
        /* Full-screen overlay on mobile: no rail offset regardless of the rail's own
           state, overriding both this file's desktop base and MudBlazor's built-in
           open-rail sibling margin (0,5,0 specificity), which is why this needs
           !important rather than relying on media-query source order alone. */
        left: 0;
        width: 100%;
        z-index: 1305;
        margin-left: 0 !important;
    }

    .gc-subdrawer.gc-subdrawer-open ~ .mud-main-content,
    .gc-nav.mud-drawer--open ~ .gc-subdrawer.gc-subdrawer-open ~ .mud-main-content {
        margin-left: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Main content area
   ───────────────────────────────────────────────────────────── */
.gc-main {
    background: var(--gc-bg);
    min-height: 100vh;
}

/* Reclaim the top padding MudMainContent reserves for an app bar we don't render. */
.gc-main.mud-main-content {
    padding-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   Boot splash — tint the WASM load ring with the brand accent.
   ───────────────────────────────────────────────────────────── */
.loading-progress circle:last-child {
    stroke: var(--gc-accent);
}