/* ==========================================================================
   layout.css
   Header, navigation, footer, and structural layout styles.
   Edit here for top nav and footer layout/typography only.
   ========================================================================== */

/* Semantic HEADER tokens — GENERIC DEFAULTS (platform tokens only; an area may
   reassign these on its body class in ITS OWN sheet). This mirrors the rail's
   area-adaptive contract (CSS_ARCHITECTURE Domain 6, --app-rail-*): the header is
   shared chrome that must read as part of whatever surface sits behind it, so the
   VALUES belong to the area, not to this sheet. No color literals (Hard Rule 19). */
:root {
    --app-header-bg:        var(--white);
    --app-header-border:    var(--light-border);
    --app-header-fg:        var(--gray-600);
    --app-header-fg-hover:  var(--blue-600);
    --app-header-hover-bg:  var(--bg-paper-1);
}

.topnav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    /* The shared alignment spine (base.css --platform-spine-w), not the raw content width:
       admin widens the spine so its rail + wide data tables stay INSIDE the navigation row.
       Defaults to --platform-content-width, so every non-admin surface is unchanged. */
    max-width: var(--platform-spine-w);
    width: 100%;
    margin: 0 auto;
    padding: 0 0.9rem;
    background-color: var(--app-header-bg);
    border-bottom: 1px solid var(--app-header-border);
    box-sizing: border-box;
    border-radius: 12px;
}

/* Print: navigation chrome never prints (platform-wide — a printed page is the
   CONTENT, e.g. the credit-application review document). Each chrome piece is
   hidden in ITS owning sheet; this sheet owns the top nav + impersonation banner. */
@media print {
    .topnav-container,
    .impersonation-banner {
        display: none;
    }
}

.topnav-left {
    display: flex;
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 36px;
    display: block;
}

/* Two brand-logo variants — the standard mark (default) and the WHITE mark for the
   dark-surface header (the standard mark's dark "MarketAssistant" wordmark would vanish
   on a dark bar). The theme class shows exactly one; both keep .brand-logo sizing. */
.brand-logo--dark {
    display: none;
}

body.theme-dark .brand-logo--light {
    display: none;
}

body.theme-dark .brand-logo--dark {
    display: block;
}

/* ── The header is the SAME light card on every surface (owner ruling 2026-08-05) ──
   History: task #19 (commit 12e8021f, 2026-07-27) turned the header dark on the
   dark-capable surfaces, reasoning that a white bar over a dark canvas was "a jarring
   white slab". The owner rejected that outright — "the nav bar went black on dark mode,
   that's ugly and it is NOT WHAT WE HAD" — and rejected a softened dark bar too. The
   light card is restored as the ONE header treatment, exactly as it was before #19.
   The semantic --app-header-* tokens above stay: they are how an area would opt into
   its own header palette deliberately, rather than one global dark override nobody asked
   for. No theme-dark header rules exist — theme-dark styles the CANVAS, not this bar. */

/* `.brand-text` was removed 2026-08-05: no markup under Pages/ carried it (the brand
   is the logo image, which has its own light/dark variants above). Orphan rules are
   deleted, not re-plumbed — CSS_ARCHITECTURE §6 Step 4. */

.topnav-center {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Group the primary links with the brand on the LEFT — do NOT let this column grow and center them.
       With flex:1 + justify-content:center the authenticated bar (brand · Home · Contact · User) left the
       two links marooned in ~260px of dead space each side — the "unintentional" look the owner flagged
       2026-07-27. Now: brand · Home · Contact · [Admin] on the left, user menu pushed to the far right
       (topnav-right margin-left:auto). Reads as one intentional bar. Mobile re-centers via the @media block. */
    flex: 0 1 auto;
    justify-content: flex-start;
    margin-left: 1.75rem;
}

.topnav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    justify-content: flex-end;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: visible;
    margin-left: auto; /* push the user menu to the far-right edge; brand+links stay grouped left */
}

    /* Top nav link styles (top-level only). Colors come from the --app-header-*
       tokens, NOT from platform tokens directly: these links sit ON the bar, so they
       must follow whatever surface the area assigned it. Hardcoding --gray-600 here
       was the other half of the dark-header bug — the bar went navy while the links
       stayed light-mode grey at 2.78:1, below the 4.5:1 AA floor. */
    .topnav-center > .site-nav-link,
    .topnav-right > .site-nav-link {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-weight: 500;
        color: var(--app-header-fg);
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 5px;
        transition: background 0.2s ease, color 0.2s ease;
    }

        .topnav-center > .site-nav-link:hover,
        .topnav-right > .site-nav-link:hover {
            background: var(--app-header-hover-bg);
            color: var(--app-header-fg-hover);
            text-decoration: none;
        }

        .topnav-center > .site-nav-link:focus,
        .topnav-right > .site-nav-link:focus {
            background: var(--app-header-hover-bg);
            color: var(--app-header-fg-hover);
            text-decoration: none;
            outline: none;
            box-shadow: none;
        }

        .topnav-center > .site-nav-link:active,
        .topnav-right > .site-nav-link:active {
            outline: none;
            box-shadow: none;
            text-decoration: none;
        }

/* Login/Logout Styling */
.inline-form {
    display: inline;
}

/* `.nav-user` and `.logout-btn` were removed 2026-08-05: neither appears in any markup
   under Pages/ — sign-out lives in the user dropdown menu (dropdowns.css). Orphan rules
   are deleted, not re-plumbed — CSS_ARCHITECTURE §6 Step 4. */

.site-nav-item {
    margin: 0;
}

/* Platform footer styling lives in base.css under `.platform-footer*` —
   the contained card pattern that matches the header. The legacy
   `body:not(.tenant-site) footer { background-color: var(--primary-blue) }`
   rule was removed because it hijacked every <footer> element with a
   full-width blue stripe, conflicting with the header's contained
   max-width card aesthetic. Sales footers (`.sales-footer`) are styled
   by sales-base.css; tenant footers (`.tenant-powered-by-footer`) by
   their template CSS. */

@media (max-width: 768px) {
    /* Header collapses to a stacked column. Fixed 60px height is dropped
       so the wrapped rows actually take the space they need — otherwise
       page content rides up under the nav. Edge-to-edge background, no
       pill radius. */
    .topnav-container {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 0.65rem 0.9rem;
        gap: 0.4rem;
        border-radius: 0;
    }

    .topnav-left {
        justify-content: center;
    }

    .topnav-center {
        /* margin: 0, not margin-top: 0 — the desktop margin-left: 1.75rem survived
           this block and pushed the stacked 100%-width nav 14px past every <=768
           viewport (probe-measured 2026-08-24: right=782 at 768; the page's only
           horizontal-overflow offender). */
        margin: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.5rem;
    }

    .topnav-right {
        margin-top: 0;
        width: 100%;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }

    .topnav-center > .site-nav-link,
    .topnav-right > .site-nav-link,
    .nav-dropdown-toggle,
    .user-dropdown-toggle {
        padding: 6px 10px;
        font-size: 0.95rem;
    }

    .brand-logo {
        height: 32px;
    }

    /* Dropdown panels — anchor to the toggle's left edge so they never
       escape the viewport on narrow screens, and cap width to the viewport
       inset. */
    .nav-dropdown-menu,
    .user-dropdown-menu {
        left: 0;
        right: auto;
        max-width: calc(100vw - 1.8rem);
    }
}

/* ====== Impersonation banner ======================================
   Rendered by Pages/Shared/_ImpersonationBanner.cshtml whenever an
   admin is impersonating another user. This partial appears on every
   page in the platform — marketing, sales, client-app, admin, error
   pages — so its styles must live in layout.css (loaded site-wide
   via site.css) rather than client-base.css (client-app only).
   Self-contained: the exit button styles itself, no .client-btn
   dependency.
   ===================================================================== */
.impersonation-banner {
    background: var(--bg-tint-amber);
    border: 1px solid var(--gold-250);
    border-left: 4px solid var(--gold-450);
    color: var(--gold-900);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 8px;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.95rem;
}

.impersonation-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.impersonation-banner-form {
    margin: 0;
    display: inline;
}

.impersonation-exit-btn {
    background: var(--red-300);
    color: var(--white);
    border: 1px solid var(--red-300);
    border-radius: 6px;
    padding: 0.35rem 0.9rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.impersonation-exit-btn:hover {
    background: var(--red-750);
    border-color: var(--red-750);
}

/* ── Impersonation renew + countdown (task #21) ─────────────────────────────
   The banner carries a live countdown to the absolute 30-min bound and a
   "Continue 30 min" renew action so an admin still working isn't force-ended.
   Near expiry (T-5min) impersonation-banner.js adds .is-expiring and the bar
   escalates to a warning. Tokens only (Hard Rule 19). */
.impersonation-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.impersonation-countdown {
    font-size: 0.85rem;
    color: var(--gold-900);
    opacity: 0.8;
    white-space: nowrap;
}

/* "Continue 30 min" — the positive renew action; green reads as "keep going" against the amber bar. */
.impersonation-renew-btn {
    background: var(--green-600);
    color: var(--white);
    border: 1px solid var(--green-600);
    border-radius: 6px;
    padding: 0.35rem 0.9rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.impersonation-renew-btn:hover {
    background: var(--green-700);
    border-color: var(--green-700);
}

/* Near expiry the whole bar escalates: red accent edge + a bold red countdown, so the renew button
   reads as the obvious next action before the absolute bound force-ends the session. */
.impersonation-banner.is-expiring {
    background: var(--red-150);
    border-left-color: var(--red-300);
}

.impersonation-banner.is-expiring .impersonation-countdown {
    color: var(--red-onfill-text);
    font-weight: 600;
    opacity: 1;
}