/*
 * Slice SB.2.1 (2026-04-27) — Workspace-switcher styling.
 *
 * Renderer øverst i admin-sidebaren. Farvet venstre-stripe signalerer mode:
 *   • Global  (.is-global)  — blå (info)
 *   • Tenant  (.is-tenant)  — rød (brand-primary)
 *   • Portal  (.is-portal)  — lilla
 *
 * Designed til at matche admin-sidebar's mørke tema. Workspace-card har
 * sine egne baggrunde med subtle differentiation per mode for at gøre
 * scoped-context tydelig uden at være skrigende.
 *
 * Sikkerheds-invariants pinned i Fase 0 architecture tests:
 *   • CanSwitchWorkspace gate på markup (kun SuperAdmin får dropdown)
 *   • AvailableTenants populeret kun for SuperAdmin (defense-in-depth)
 */

/* ═══════════════ Workspace-card (alle modes) ═══════════════ */

.platforma-workspace-card {
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-align: left;
    width: calc(100% - 24px);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
    position: relative;
}

.platforma-workspace-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.platforma-workspace-card:focus-visible {
    outline: 2px solid var(--platforma-warm, #C7A55F);
    outline-offset: 2px;
}

/* Read-only variant (TenantAdmin/Staff/Member): ingen hover, ingen cursor */
.platforma-workspace-card--readonly {
    cursor: default;
}
.platforma-workspace-card--readonly:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* ═══════════════ Mode-stripes (left-border) ═══════════════ */

.platforma-workspace-card.is-global {
    border-left: 3px solid #3B82F6; /* blå — Platforma platform-niveau */
    padding-left: 10px; /* compensate for border */
}
.platforma-workspace-card.is-tenant {
    border-left: 3px solid var(--platforma-warm, #D4213D); /* brand-primary rød */
    padding-left: 10px;
}
.platforma-workspace-card.is-portal {
    border-left: 3px solid #8B5CF6; /* lilla — beboere */
    padding-left: 10px;
}

/* ═══════════════ Workspace bubble (initial-letter) ═══════════════ */

.platforma-workspace-bubble {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.platforma-workspace-bubble--is-global {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.platforma-workspace-bubble--is-tenant {
    background: linear-gradient(135deg, var(--platforma-warm, #D4213D), #A01530);
}
.platforma-workspace-bubble--is-portal {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

/* ═══════════════ Workspace info (name + meta) ═══════════════ */

.platforma-workspace-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.platforma-workspace-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.platforma-workspace-meta {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.3;
}
.platforma-workspace-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--platforma-warm, #D4213D);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.platforma-workspace-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    transition: transform .2s ease, color .15s ease;
}
.platforma-workspace-card:hover .platforma-workspace-chevron {
    color: rgba(255, 255, 255, 0.85);
}
.platforma-workspace-card[aria-expanded="true"] .platforma-workspace-chevron {
    transform: rotate(180deg);
}

/* ═══════════════ Dropdown panel ═══════════════ */

.platforma-workspace-dropdown {
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    margin-top: 4px;
    background: #1F2024;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 100;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}
.platforma-workspace-dropdown[hidden] { display: none; }

.platforma-workspace-dropdown-search {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
}
.platforma-workspace-dropdown-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}
.platforma-workspace-dropdown-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.platforma-workspace-dropdown-section {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.platforma-workspace-dropdown-section:last-child {
    border-bottom: none;
}
.platforma-workspace-dropdown-label {
    padding: 4px 14px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}

.platforma-workspace-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
    transition: background .12s ease;
}
.platforma-workspace-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.platforma-workspace-dropdown-item.is-current {
    background: rgba(212, 33, 61, 0.10);
    color: #fff;
}
.platforma-workspace-dropdown-item.is-current:hover {
    background: rgba(212, 33, 61, 0.16);
}

.platforma-workspace-dropdown-item .platforma-workspace-bubble {
    width: 24px; height: 24px;
    font-size: 11px;
    border-radius: 6px;
}

.platforma-workspace-dropdown-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.platforma-workspace-dropdown-check {
    color: var(--platforma-warm, #D4213D);
    font-size: 13px;
    flex-shrink: 0;
}

/* When SuperAdmin's filter input filters dropdown items via JS,
   items not matching the search-term get [hidden] attribute. */
.platforma-workspace-dropdown-item[hidden],
.platforma-workspace-dropdown-form[hidden] { display: none; }

/* ═══════════════ SB.2.3 — "I dag"-card ═══════════════ */

/* Senior Brand Director-anbefaling: rolig grå-card, ikke "skrigende" gul.
   Farvede dots gør jobbet med severity-signaling. */
.platforma-today-card {
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.platforma-today-title {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.platforma-today-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.4;
}

.platforma-today-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.platforma-today-dot--warn {
    background: #F59E0B;     /* amber — kan-do action */
}
.platforma-today-dot--urgent {
    background: #EF4444;     /* rød — blocker */
}

.platforma-today-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .12s ease;
}
.platforma-today-link:hover,
.platforma-today-link:focus-visible {
    color: #fff;
    text-decoration: underline;
    outline: none;
}

.platforma-today-text {
    flex: 1;
    color: rgba(255, 255, 255, 0.85);
}

/* ═══════════════ SB.2.6 — Scoped-indicator banner ═══════════════ */

/* Vises mellem topbar og content når SuperAdmin er switched ind i en
   tenant. Subtle nok til ikke at være irriterende, tydelig nok til at
   registreres. Bruger brand-rød accent på neutral baggrund. */
.platforma-scope-indicator {
    background: var(--platforma-warm-soft, #FCE7EB);
    border-bottom: 1px solid var(--platforma-warm-border, #F5A8B7);
    color: var(--platforma-warm-dark, #A01530);
    padding: 0;
    font-size: 13px;
}

.platforma-scope-indicator-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.platforma-scope-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--platforma-warm, #D4213D);
    flex-shrink: 0;
    animation: platforma-scope-pulse 2s infinite ease-in-out;
}

@keyframes platforma-scope-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.platforma-scope-indicator-text {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}

.platforma-scope-indicator-form {
    margin: 0;
}

.platforma-scope-indicator-back {
    background: transparent;
    border: 1px solid var(--platforma-warm-border, #F5A8B7);
    color: var(--platforma-warm-dark, #A01530);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.platforma-scope-indicator-back:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--platforma-warm, #D4213D);
}
.platforma-scope-indicator-back:focus-visible {
    outline: 2px solid var(--platforma-warm, #D4213D);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .platforma-scope-indicator-inner {
        padding: 6px 16px;
        gap: 8px;
    }
    .platforma-scope-indicator-text {
        font-size: 12px;
    }
}

/* ═══════════════ SB.2.7 — WCAG skip-link + focus-discipline ═══════════════ */

/* WCAG 2.4.1 Bypass Blocks — skip-link skjult indtil keyboard-fokus.
   Når fokus rammer, hopper det op i top-left corner med høj-kontrast
   styling så tastatur-brugere kan springe sidebar over. */
.platforma-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--platforma-warm, #D4213D);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    transition: top .2s ease;
}
.platforma-skip-link:focus,
.platforma-skip-link:focus-visible {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Sikr at main-content kan modtage fokus når skip-link aktiveres */
.platforma-main:focus,
.platforma-main:focus-visible {
    outline: none;  /* main er programmatic-focus-target, ikke interactive */
}

/* ═══════════════ SB.2.8 — Bottom user-section ═══════════════ */

/* Standard SaaS-pattern: Linear/Vercel/Slack/GitHub har avatar + email +
   sign-out i sidebar-bunden. Vi følger samme mønster med charcoal-bobble
   + truncated tekst + sign-out-icon. */
.platforma-sidebar-user {
    margin: auto 12px 12px;  /* auto top-margin pusher det til bunden */
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.platforma-sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4B5563, #1F2937);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.platforma-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.platforma-sidebar-user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.platforma-sidebar-user-email {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.platforma-sidebar-user-form {
    margin: 0;
    flex-shrink: 0;
}

.platforma-sidebar-user-icon {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, color .12s ease;
}
.platforma-sidebar-user-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.platforma-sidebar-user-icon:focus-visible {
    outline: 2px solid var(--platforma-warm, #D4213D);
    outline-offset: 2px;
    color: #fff;
}

/* ═══════════════ SB.2.9 — Collapsed sidebar mode ═══════════════ */

/* Toggle-button placeret i sidebar-top, klikbar for at folde sidebar
   til icon-only-mode (56px). Linear-pattern: Cmd+\ keyboard-shortcut. */
.platforma-sidebar-collapse-toggle {
    position: absolute;
    top: 16px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2D3038;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .15s ease, color .15s ease, transform .2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.platforma-sidebar-collapse-toggle:hover {
    background: var(--platforma-warm, #D4213D);
    color: #fff;
    border-color: var(--platforma-warm, #D4213D);
}
.platforma-sidebar-collapse-toggle:focus-visible {
    outline: 2px solid var(--platforma-warm, #D4213D);
    outline-offset: 2px;
}

/* Collapsed-state: drevet af [data-sidebar-collapsed="true"] på .platforma-app.
   Sidebar bliver 64px bred, alt tekst skjules, kun ikoner og initialer
   bevares. Main-content udvides automatisk via flex-grow. */
.platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar {
    width: 64px;
}

.platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar-collapse-toggle {
    transform: rotate(180deg);
}

/* Hide labels in collapsed mode */
.platforma-app[data-sidebar-collapsed="true"] .platforma-logo-text,
.platforma-app[data-sidebar-collapsed="true"] .platforma-version,
.platforma-app[data-sidebar-collapsed="true"] .platforma-workspace-info,
.platforma-app[data-sidebar-collapsed="true"] .platforma-workspace-chevron,
.platforma-app[data-sidebar-collapsed="true"] .platforma-today-card,
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-text,
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-badge,
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-title-text,
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-title-chevron,
.platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar-user-info,
.platforma-app[data-sidebar-collapsed="true"] .platforma-surface-badge {
    display: none !important;
}

/* Workspace-card in collapsed mode: kun bobble synlig */
.platforma-app[data-sidebar-collapsed="true"] .platforma-workspace-card {
    padding: 10px 0;
    justify-content: center;
}
.platforma-app[data-sidebar-collapsed="true"] .platforma-workspace-card .platforma-workspace-bubble {
    margin: 0 auto;
}

/* Section-titles becomes spacers (kun chevron synligt forsvinder) */
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-title-toggle {
    pointer-events: none;
    padding: 6px 0;
    justify-content: center;
}

/* Items: center icon, ingen tekst */
.platforma-app[data-sidebar-collapsed="true"] .platforma-nav-item {
    justify-content: center;
    padding: 10px 0;
}

/* User-section: kun bobble synlig */
.platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar-user {
    padding: 10px 0;
    justify-content: center;
    margin-left: 8px;
    margin-right: 8px;
}
.platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar-user-form {
    display: none;
}

/* Auto-collapse på smaller screens (<1280px laptop) — opt-in via media query
   ved at default-collapse hvis ingen explicit setting. JS overrider ved klik. */
@media (max-width: 1280px) and (min-width: 769px) {
    .platforma-app:not([data-sidebar-collapsed]) .platforma-sidebar {
        width: 64px;
    }
    /* Samme cascading-skjul-regler — vi gentager dem på media-query niveau */
    .platforma-app:not([data-sidebar-collapsed]) .platforma-logo-text,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-version,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-workspace-info,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-workspace-chevron,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-today-card,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-nav-text,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-nav-badge,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-nav-title-text,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-nav-title-chevron,
    .platforma-app:not([data-sidebar-collapsed]) .platforma-sidebar-user-info {
        display: none;
    }
}

/* Form-wrappers er rene containere — visuelt usynlige. Buttons inde i dem
   ARVER al styling fra .platforma-workspace-dropdown-item. */
.platforma-workspace-dropdown-form {
    margin: 0;
    padding: 0;
}
.platforma-workspace-dropdown-item {
    /* Override button-defaults så form-button ligner link-version */
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

/* ═══════════════ SB.2.12 — Mobile drawer-mode guards ═══════════════ */

/* På <768px er sidebaren en slide-out drawer (CSS transform i layout.css).
   Collapse-toggle er irrelevant der — skjul den så den ikke skaber forvirring.
   Workspace-switcheren er stadig synlig fordi mobile-drawer er fuld bredde. */
@media (max-width: 767.98px) {
    .platforma-sidebar-collapse-toggle {
        display: none;
    }

    /* Hvis brugeren har toggled collapsed-mode på desktop og roterer til
       mobile (eller skifter device), skal vi sikre at app-data-attributten
       ikke kommer i vejen. JS auto-clearer ved breakpoint-skift, men CSS
       fallback hvis JS er disabled. */
    .platforma-app[data-sidebar-collapsed="true"] .platforma-sidebar {
        width: 260px; /* Match mobile-sidebar-width fra layout.css */
    }

    .platforma-app[data-sidebar-collapsed="true"] .platforma-logo-text,
    .platforma-app[data-sidebar-collapsed="true"] .platforma-version,
    .platforma-app[data-sidebar-collapsed="true"] .platforma-workspace-info,
    .platforma-app[data-sidebar-collapsed="true"] .platforma-nav-text,
    .platforma-app[data-sidebar-collapsed="true"] .platforma-nav-badge,
    .platforma-app[data-sidebar-collapsed="true"] .platforma-nav-title-text {
        /* Vis fuld content trods collapsed-state — mobile skal ikke have
           icon-only-mode. */
        display: revert;
    }
}