/* ============================================================================
   surface-switcher.css — Top-right app switcher (Surface Switcher)

   Editorial vocabulary matching admin-documents.css / admin-logs.css /
   proaudit-library.css. Character: a printer's grid, a small bureau
   directory pinned to the corner of the page. Warm paper, ink-on-paper,
   per-surface accent stripe used like a printer's mark.

   Surfaces covered:
     1. Floating button + panel (every layout; Portal/Public sit it below their AppBar)
     2. Inline button + panel (legacy, unused)
     3. "Your accounts" section — the person's home account and company
        memberships as a short ledger of rows above the app tiles. Rows that
        switch are real <button>s inside a POST form (AccountSwitchForm).

   Class prefix: swsw-

   Tokens scoped to .swsw-root so the panel + popover (which renders
   detached from the .swsw-root in the top-layer) carry the same palette.

   Per-tile accent is provided by inline style="--swsw-accent: {hex}" —
   stripe + current-state ring read it via var(--swsw-accent, …default…).
   ============================================================================ */

.swsw-root,
.swsw-panel {
    --swsw-paper:           #F4F2EF;
    --swsw-paper-raised:    #FAF8F5;
    --swsw-paper-deep:      #FFFDF8;
    --swsw-ink:             #232323;
    --swsw-ink-strong:      #15140F;
    --swsw-ink-muted:       #6B6862;
    --swsw-ink-faint:       #958E7E;
    --swsw-rule:            rgba(35, 35, 35, 0.12);
    --swsw-rule-soft:       rgba(35, 35, 35, 0.06);
    --swsw-shadow-btn:      0 6px 18px rgba(35, 35, 35, 0.10);
    --swsw-shadow-panel:    0 18px 44px rgba(35, 35, 35, 0.18),
                            0 4px 10px rgba(35, 35, 35, 0.06);
    --swsw-shadow-tile:     0 1px 0 rgba(35, 35, 35, 0.04);
    --swsw-shadow-tile-hov: 0 6px 14px rgba(35, 35, 35, 0.10);
    --swsw-accent-default:  #DD9142;
    --swsw-demo-bg:         #F6E7D4;
    --swsw-demo-ink:        #6B4413;
    --swsw-demo-rule:       rgba(221, 145, 66, 0.45);

    --swsw-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --swsw-ease:            cubic-bezier(0.2, 0.8, 0.2, 1);
    --swsw-t-fast:          140ms;
    --swsw-t-med:           200ms;

    font-family: var(--swsw-font);
}

.swsw-root *,
.swsw-panel * { font-family: inherit; }

/* ── Mode: floating ─────────────────────────────────────────────────────
   For layouts without a top bar — pinned to the page's top-right corner. */
.swsw-floating {
    position: fixed;
    top: 8px;
    right: 16px;
    z-index: 1100;
}

/* Layouts that already have a MudAppBar (Portal, Partner) push the button
   down so it sits below the AppBar instead of overlapping its existing
   right-side items (NotificationBell, AccountMenu). */
.swsw-floating--low {
    top: 76px;
}

.swsw-panel--low {
    inset: 120px 16px auto auto;
}

/* ── Mode: inline ───────────────────────────────────────────────────────
   Sits inside an existing MudAppBar. Vertical centering is the bar's job. */
.swsw-inline {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
}

/* ─── Trigger button ────────────────────────────────────────────────── */

.swsw-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--swsw-rule);
    background: var(--swsw-paper-raised);
    color: var(--swsw-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--swsw-shadow-btn),
                inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform var(--swsw-t-fast) var(--swsw-ease),
                border-color var(--swsw-t-fast) var(--swsw-ease),
                background-color var(--swsw-t-fast) var(--swsw-ease),
                box-shadow var(--swsw-t-med) var(--swsw-ease);
    -webkit-tap-highlight-color: transparent;
}

.swsw-btn:hover {
    transform: translateY(-1px);
    border-color: var(--swsw-accent-default);
    background: var(--swsw-paper-deep);
    box-shadow: 0 8px 22px rgba(35, 35, 35, 0.14),
                inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.swsw-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(35, 35, 35, 0.12),
                inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.swsw-btn:focus-visible {
    outline: 2px solid var(--swsw-accent-default);
    outline-offset: 3px;
}

.swsw-grid-icon {
    width: 18px;
    height: 18px;
    fill: var(--swsw-ink);
    transition: fill var(--swsw-t-fast) var(--swsw-ease);
}

.swsw-btn:hover .swsw-grid-icon {
    fill: var(--swsw-ink-strong);
}

/* ─── Popover panel ─────────────────────────────────────────────────────
   The native popover renders in the top-layer, detached from .swsw-root —
   so token redeclaration above on .swsw-panel itself is essential. */

.swsw-panel {
    display: none;
    position: fixed;
    /* Native [popover] UA stylesheet sets inset: 0 (all four sides), which
       leaves left: 0 in place when only top/right are overridden — the panel
       stretches to the viewport's left edge. Use the inset shorthand to
       explicitly clear bottom/left. */
    inset: 52px 16px auto auto;
    z-index: 1101;
    width: max-content;
    min-width: 280px;
    max-width: min(360px, calc(100vw - 32px));
    background: var(--swsw-paper-raised);
    border: 1px solid var(--swsw-rule);
    border-radius: 14px;
    box-shadow: var(--swsw-shadow-panel);
    padding: 14px 14px 16px;
    margin: 0;
    /* Accounts + apps can outgrow a short viewport: scroll inside the panel, never the page. */
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--swsw-ink);
}

.swsw-panel:popover-open {
    display: block;
    animation: swsw-fade-in var(--swsw-t-med) var(--swsw-ease);
}

.swsw-panel::backdrop {
    background: transparent;
}

@keyframes swsw-fade-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Header — eyebrow ─────────────────────────────────────────────── */

.swsw-header {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--swsw-ink-muted);
    margin: 2px 4px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--swsw-rule);
}

/* The panel heading when both sections show: read by assistive tech, not drawn. */
.swsw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.swsw-section + .swsw-section {
    margin-top: 16px;
}

/* ─── Tile grid ────────────────────────────────────────────────────────
   auto-fit + minmax handles 2/3/4/5 tiles gracefully:
     • 2 tiles  → 2 columns, ~152px wide each
     • 3 tiles  → 3 columns, ~104px wide each
     • 4 tiles  → 2×2 grid wraps inside max-width
     • 5 tiles  → 3+2 wrap, last row balances naturally */

.swsw-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    /* Tiles lift 2px on hover; room so the scrolling panel does not clip the lift. */
    padding-top: 2px;
}

/* ─── Tile ─────────────────────────────────────────────────────────── */

.swsw-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    color: var(--swsw-ink);
    background: var(--swsw-paper);
    border: 1px solid var(--swsw-rule);
    border-radius: 9px;
    padding: 18px 8px 12px;
    overflow: hidden;
    min-height: 100px;
    box-shadow: var(--swsw-shadow-tile);
    transition: transform var(--swsw-t-fast) var(--swsw-ease),
                border-color var(--swsw-t-fast) var(--swsw-ease),
                background-color var(--swsw-t-fast) var(--swsw-ease),
                box-shadow var(--swsw-t-med) var(--swsw-ease);
    isolation: isolate;
}

/* Stagger reveal of tiles when the panel opens — small editorial flourish. */
.swsw-panel:popover-open .swsw-tile {
    animation: swsw-tile-rise 320ms var(--swsw-ease) both;
}
.swsw-panel:popover-open .swsw-tile:nth-child(1) { animation-delay: 30ms; }
.swsw-panel:popover-open .swsw-tile:nth-child(2) { animation-delay: 60ms; }
.swsw-panel:popover-open .swsw-tile:nth-child(3) { animation-delay: 90ms; }
.swsw-panel:popover-open .swsw-tile:nth-child(4) { animation-delay: 120ms; }
.swsw-panel:popover-open .swsw-tile:nth-child(5) { animation-delay: 150ms; }

@keyframes swsw-tile-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.swsw-tile:hover {
    transform: translateY(-2px);
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    background: var(--swsw-paper-deep);
    box-shadow: var(--swsw-shadow-tile-hov);
}

.swsw-tile:active {
    transform: translateY(-1px);
}

.swsw-tile:focus-visible {
    outline: none;
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    box-shadow: 0 0 0 2px var(--swsw-accent, var(--swsw-accent-default)),
                var(--swsw-shadow-tile);
}

/* Top accent stripe — printer's mark. Subtle inner highlight reads as ink
   that has just barely soaked into the paper. */
.swsw-tile-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--swsw-accent, var(--swsw-accent-default));
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    background-blend-mode: overlay;
    z-index: 1;
}

.swsw-tile-icon {
    width: 24px !important;
    height: 24px !important;
    color: var(--swsw-ink-strong);
    fill: currentColor;
    margin-top: 6px;
    margin-bottom: 6px;
    line-height: 1;
    transition: color var(--swsw-t-fast) var(--swsw-ease),
                transform var(--swsw-t-med) var(--swsw-ease);
}

.swsw-tile:hover .swsw-tile-icon {
    color: var(--swsw-accent, var(--swsw-accent-default));
}

.swsw-tile-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--swsw-ink-strong);
    letter-spacing: -0.005em;
}

.swsw-tile-tagline {
    font-size: 0.6875rem;
    color: var(--swsw-ink-muted);
    margin-top: 3px;
    line-height: 1.25;
    letter-spacing: 0.005em;
    /* Tagline lines wrap to two before clipping — keep the bureau labels readable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Current-state tile ───────────────────────────────────────────────
   Crisp 1px border + inset accent ring. Avoids subpixel-fuzzy 1.5px borders. */
.swsw-tile--current {
    background: var(--swsw-paper-raised);
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    box-shadow: inset 0 0 0 1px var(--swsw-accent, var(--swsw-accent-default)),
                var(--swsw-shadow-tile);
}

.swsw-tile--current:hover {
    box-shadow: inset 0 0 0 1px var(--swsw-accent, var(--swsw-accent-default)),
                var(--swsw-shadow-tile-hov);
}

.swsw-tile--current .swsw-tile-icon {
    color: var(--swsw-accent, var(--swsw-accent-default));
}

.swsw-tile-current-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--swsw-accent, var(--swsw-accent-default));
    box-shadow: 0 0 0 2px var(--swsw-paper-raised);
    z-index: 2;
}

/* ─── Your accounts ─────────────────────────────────────────────────────
   A short ledger, one row per account: printer's mark, name (+ Demo pill),
   tagline, and the state on the right ("Current" / "Switch" / "Details").
   The same --swsw-accent stripe as the tiles tells a Partner portal row from
   a company row at a glance. Rows are a <div> (current), an <a> (needs a
   different sign-in first) or a <button> inside the switch form. */

.swsw-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swsw-account-form {
    margin: 0;
}

.swsw-account {
    position: relative;
    /* MudBlazor ships a bare `button { display:inline-flex; justify-content:center }`;
       a class selector only beats it property by property, so say both out loud. */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 8px 12px 8px 14px;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--swsw-ink);
    background: var(--swsw-paper);
    border: 1px solid var(--swsw-rule);
    border-radius: 9px;
    box-shadow: var(--swsw-shadow-tile);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--swsw-t-fast) var(--swsw-ease),
                background-color var(--swsw-t-fast) var(--swsw-ease),
                box-shadow var(--swsw-t-med) var(--swsw-ease);
    -webkit-tap-highlight-color: transparent;
}

/* Left stripe: the printer's mark, turned on its side for a row. */
.swsw-account::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--swsw-accent, var(--swsw-accent-default));
}

.swsw-account:hover {
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    background: var(--swsw-paper-deep);
    box-shadow: var(--swsw-shadow-tile-hov);
}

.swsw-account:focus-visible {
    outline: none;
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    box-shadow: 0 0 0 2px var(--swsw-accent, var(--swsw-accent-default)),
                var(--swsw-shadow-tile);
}

.swsw-account-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--swsw-paper-raised);
    border: 1px solid var(--swsw-rule-soft);
    color: var(--swsw-ink-strong);
}

.swsw-account-mark .mud-icon-root {
    width: 18px;
    height: 18px;
}

.swsw-account-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.swsw-account-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--swsw-ink-strong);
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swsw-account-pill {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: 1px;
    color: var(--swsw-demo-ink);
    background: var(--swsw-demo-bg);
    border: 1px solid var(--swsw-demo-rule);
}

.swsw-account-tagline {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--swsw-ink-muted);
}

.swsw-account-state {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--swsw-ink-muted);
}

/* "Switch" reads as the action: ink with an accent underline, darkening on hover. */
.swsw-account-go {
    color: var(--swsw-ink);
    padding-bottom: 1px;
    border-bottom: 2px solid var(--swsw-accent, var(--swsw-accent-default));
}

.swsw-account:hover .swsw-account-go {
    color: var(--swsw-ink-strong);
}

/* Current account: the same crisp inset ring as the current app tile, and not a control. */
.swsw-account.swsw-account--current {
    cursor: default;
    background: var(--swsw-paper-raised);
    border-color: var(--swsw-accent, var(--swsw-accent-default));
    box-shadow: inset 0 0 0 1px var(--swsw-accent, var(--swsw-accent-default)),
                var(--swsw-shadow-tile);
}

/* Needs a different sign-in first: quieter, and it opens an explanation instead of switching. */
.swsw-account.swsw-account--locked {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.swsw-account.swsw-account--locked .swsw-account-mark {
    color: var(--swsw-ink-muted);
}

/* Set by account-switch.js the moment one switch is submitted. */
.swsw-account[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.6;
}

.swsw-accounts-more {
    display: inline-block;
    margin: 10px 4px 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--swsw-ink);
    text-decoration: underline;
    text-decoration-color: var(--swsw-accent-default);
    text-underline-offset: 3px;
}

.swsw-accounts-more:focus-visible {
    outline: 2px solid var(--swsw-accent-default);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ─── Narrow viewports ─────────────────────────────────────────────────
   Below ~420px we keep the panel tucked into the corner with a sensible
   maximum width so the floating button never overflows. */
@media (max-width: 420px) {
    .swsw-floating {
        top: 12px;
        right: 12px;
    }
    .swsw-panel {
        inset: 56px 12px auto 12px;
        max-width: none;
        width: auto;
        padding: 12px 12px 14px;
    }
    .swsw-tiles {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }
    .swsw-account {
        min-height: 56px;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .swsw-btn,
    .swsw-tile,
    .swsw-tile-icon,
    .swsw-grid-icon,
    .swsw-account {
        transition: none;
    }
    .swsw-panel:popover-open,
    .swsw-panel:popover-open .swsw-tile {
        animation: none;
    }
    .swsw-btn:hover,
    .swsw-tile:hover {
        transform: none;
    }
}

/* ─── High-contrast / forced-colors ─────────────────────────────────────
   System theme overrides our paper palette — keep structure intact. */
@media (forced-colors: active) {
    .swsw-btn,
    .swsw-panel,
    .swsw-tile,
    .swsw-account,
    .swsw-account-pill {
        border: 1px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }
    .swsw-tile--current,
    .swsw-account.swsw-account--current {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
    .swsw-tile-stripe,
    .swsw-tile-current-dot,
    .swsw-account::before {
        background: Highlight;
    }
    .swsw-grid-icon { fill: CanvasText; }
}