/* ================================================================
   Pipelet App-Switcher — shared UI component
   All selectors prefixed .pipelet-switcher-* to avoid app style
   collisions. No external dependencies; inherits theme via the
   --brand / --accent vars if present, otherwise uses Momentum fallback.
   ================================================================ */

.pipelet-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ----- Trigger button (waffle icon next to brand) ----- */
.pipelet-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary, rgba(0,0,0,0.62));
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
    font-family: inherit;
}
.pipelet-switcher-trigger:hover {
    background: var(--color-bg-active, rgba(0,0,0,0.04));
    color: var(--color-text-primary, rgba(0,0,0,0.92));
}
.pipelet-switcher-trigger:focus-visible {
    outline: none;
    border-color: var(--brand-500, #1170cf);
    box-shadow: 0 0 0 3px rgba(17,112,207,0.15);
}
.pipelet-switcher[data-open="true"] .pipelet-switcher-trigger {
    background: var(--color-bg-active, rgba(0,0,0,0.06));
    color: var(--color-text-primary, rgba(0,0,0,0.92));
}

.pipelet-switcher-trigger-icon {
    width: 22px;
    height: 22px;
    background: currentColor;
    /* mask-image is set inline in app-switcher.html so the URL can pick
       up a per-app prefix (e.g. /driver/static/... for driver-portal). */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* ----- Panel (floating card below trigger) ----- */
.pipelet-switcher-panel {
    /* Default placement (pre-portal, e.g. if JS fails): absolute below trigger */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
    width: 460px;
    padding: 16px 14px 18px;
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 14px;
    /* Stronger shadow so the panel reads clearly on cream / bronze
       backgrounds where plain white otherwise blends in. */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 12px 28px rgba(15,23,42,0.18),
        0 32px 48px rgba(15,23,42,0.10);
    /* Slide-down only; opacity is kept at 1 to avoid any perceived
       transparency during the transition frame. */
    transform: translateY(-4px);
    transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.pipelet-switcher-panel[hidden] {
    display: none;
}
/* Open state — driven by JS on both the panel itself (so it works when
   portalled to document.body) and on the root wrapper. */
.pipelet-switcher-panel[data-open="true"],
.pipelet-switcher[data-open="true"] .pipelet-switcher-panel {
    transform: translateY(0);
    pointer-events: auto;
}

.pipelet-switcher-panel-header {
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--color-border-tertiary, rgba(0,0,0,0.06));
    margin-bottom: 8px;
}
.pipelet-switcher-panel-title {
    font-family: 'GT Alpina', 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-primary, rgba(0,0,0,0.92));
}

/* ----- Tile grid (4 columns) ----- */
.pipelet-switcher-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* Tile — both <a> and <span> variants share the same layout */
.pipelet-switcher-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 8px 12px;
    min-height: 96px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-text-primary, rgba(0,0,0,0.92));
    font-family: inherit;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    transition: background 120ms, transform 120ms;
    cursor: pointer;
}
.pipelet-switcher-tile:hover {
    background: var(--color-bg-brand-subtle, rgba(17,112,207,0.06));
}
.pipelet-switcher-tile:focus-visible {
    outline: none;
    background: var(--color-bg-brand-subtle, rgba(17,112,207,0.08));
    box-shadow: inset 0 0 0 2px var(--brand-500, #1170cf);
}
.pipelet-switcher-tile:active:not(.is-disabled) {
    transform: translateY(1px);
}

.pipelet-switcher-tile-icon {
    width: 32px;
    height: 32px;
    background: var(--brand-500, #1170cf);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    flex-shrink: 0;
}

.pipelet-switcher-tile-label {
    font-weight: 500;
    color: var(--color-text-primary, rgba(0,0,0,0.92));
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* "Pro" badge under tile labels (independent of active state) */
.pipelet-switcher-tile-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--warning-700, #7d4705);
    background: var(--warning-50, #ffebc2);
    border-radius: 3px;
    line-height: 1.4;
}

/* Disabled state (grayed-out, not clickable) */
.pipelet-switcher-tile.is-disabled {
    cursor: not-allowed;
    opacity: 0.42;
}
.pipelet-switcher-tile.is-disabled:hover {
    background: transparent;
}
.pipelet-switcher-tile.is-disabled .pipelet-switcher-tile-icon {
    background: var(--color-text-quaternary, rgba(0,0,0,0.40));
}

/* Current app — subtle highlight, no navigation */
.pipelet-switcher-tile.is-current {
    background: var(--color-bg-brand-subtle, rgba(17,112,207,0.10));
    cursor: default;
}
.pipelet-switcher-tile.is-current:hover {
    background: var(--color-bg-brand-subtle, rgba(17,112,207,0.10));
}

[data-theme="dark"] .pipelet-switcher-panel {
    box-shadow:
        0 1px 2px rgba(0,0,0,0.30),
        0 16px 34px rgba(0,0,0,0.42),
        0 32px 56px rgba(0,0,0,0.34);
}

/* ----- Mobile — panel full-width below trigger ----- */
@media (max-width: 480px) {
    .pipelet-switcher-panel {
        position: fixed;
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
    }
}