/* ============================================================================
   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 (ProAudit, CRM, Admin layouts)
     2. Inline button + panel (Portal, Partner — sits inside MudAppBar)

   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-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;
    overflow: visible;
    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);
}

/* ─── 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;
}

/* ─── 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;
}

/* ─── 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));
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .swsw-btn,
    .swsw-tile,
    .swsw-tile-icon,
    .swsw-grid-icon {
        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 {
        border: 1px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }
    .swsw-tile--current {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
    .swsw-tile-stripe,
    .swsw-tile-current-dot {
        background: Highlight;
    }
    .swsw-grid-icon { fill: CanvasText; }
}