/* Portal shell: persistent navy sidebar + sticky header. */
.portal {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--primary-container);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    z-index: 40;
}

/* Centred so the lockup sits with even space either side of the sidebar. */
.sidebar__brand { padding: 0 var(--space-sm); margin-bottom: var(--space-xl); text-align: center; }
/* The h1 only anchors the lockup partial, which carries its own type — no heading font of its own. */
.sidebar__brand h1 { line-height: 1; }

/* min-height:0 lets this flex child shrink below its content so overflow-y can scroll — without it a long
   nav (e.g. the platform section) overflows the viewport and the last links are clipped unreachably. The
   scrollbar is kept thin and only tinted on hover, so it stays out of the way against the navy sidebar. */
.sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: transparent transparent;    /* hidden until hover */
}

.sidebar__nav:hover {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar__nav::-webkit-scrollbar-thumb {
    background: transparent;                      /* invisible until the nav is hovered */
    border-radius: 999px;
}

.sidebar__nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

/* Hat switcher: the "Viewing as" dropdown and its stacked hat buttons. */
.sidebar__switcher { margin-bottom: var(--space-xs); }
.sidebar__switcher > summary { cursor: pointer; }
.sidebar__switcher-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 12px 12px;
    margin: 6px 0 8px 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
}

.sidebar__section-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    padding: var(--space-md) var(--space-md) var(--space-xs);
    margin-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-md);
    border-radius: var(--radius-lg);
    color: var(--on-primary-container);
    font: var(--text-label-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link .material-symbols-outlined { font-size: 20px; }

.nav-link:hover { background: #3f465c; color: #fff; }

/* A nav-link rendered as a <button> (e.g. sign out) — strip the native button chrome so it matches links. */
.nav-link--button {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.nav-link--active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    font-weight: 700;
}

.nav-link--active:hover { background: var(--secondary-container); color: var(--on-secondary-container); }

.sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

.sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    margin-top: var(--space-md);
}

.sidebar__user--link {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sidebar__user--link:hover { background: rgba(255, 255, 255, 0.12); }

.sidebar__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex: none;
    object-fit: cover;
}

.sidebar__user-name { color: #fff; font-weight: 700; font-size: 13px; }
.sidebar__user-role { color: var(--on-primary-container); font-size: 11px; }
.sidebar__user-chevron { margin-left: auto; color: var(--on-primary-container); font-size: 20px; }

/* Main canvas */
.portal__main { margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }

.portal__header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 0 var(--space-xl);
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    position: sticky;
    top: 0;
    z-index: 30;
}

.portal__title { font: var(--text-headline-md); font-weight: 700; color: var(--primary); }

/* The page-heading copy of the title, hidden until the phone breakpoint below moves the title out of the
   top bar. display:none (not visibility) so the hidden copy stays out of the accessibility tree too. */
.portal__title--page { display: none; }

.portal__header-right { display: flex; align-items: center; gap: var(--space-lg); }

/* Context chip: the "where am I" identity, top-right. Picture + name + kind swap by hat, so the
   loft dashboard and a club dashboard are never mistaken for one another. */
.portal__context {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    background: var(--surface-container, var(--surface));
    max-width: 260px;
}

.portal__context-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-container);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.portal__context-badge--icon .material-symbols-outlined { font-size: 20px; }

.portal__context-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.portal__context-name {
    font-weight: 700;
    color: var(--on-surface, var(--primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal__context-kind {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--on-surface-variant, var(--outline));
}

@media (max-width: 640px) {
    /* On a phone the chip goes entirely — the page title and the menu already say whose portal this is,
       and the crowded header keeps room for just the bell. */
    .portal__context { display: none; }

    /* And the title steps out of the top bar to head the page instead — a long club name was wrapping the
       bar to two lines and squeezing the hamburger. The bar keeps just hamburger + bell. */
    .portal__header .portal__title { display: none; }
    .portal__title--page {
        display: block;
        padding: var(--space-md) var(--space-md) 0;
    }
}

.portal__content {
    padding: var(--space-xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Small screens: reclaim the generous desktop gutters so content isn't squeezed into a narrow centre. */
@media (max-width: 48rem) {
    .portal__content { padding: var(--space-md); }
    .portal__header { padding: 0 var(--space-md); gap: var(--space-md); }
}

.sidebar__toggle { display: none; }

/* The drawer's tap-away layer. It has to sit under the sidebar (40) but over the sticky header (30) —
   otherwise the bell and hat switcher stay lit and tappable beside a drawer that is meant to have the
   page's whole attention. Only ever active on the small screens where the drawer exists; [hidden] keeps
   it out of the way at every other width. */
.portal__scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    display: none;
}

@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-md);
    }
    .sidebar.is-open { transform: translateX(0); }
    .portal__main { margin-left: 0; }
    .portal__scrim:not([hidden]) { display: block; }
    .sidebar__toggle {
        display: inline-flex;
        background: none;
        border: none;
        color: var(--primary);
        cursor: pointer;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* ── Role colour coding (ADR-0031 rule 4) ─────────────────────────────────────────────────────────────
   The hat in view is stamped on .portal[data-hat]; the accent follows it through the context chip (badge
   ring + kind label + dot), the portal nav (section label, active link bar, "Viewing as") and the footer role
   label. Colour is never the only indicator — every one of those keeps its text. */
.portal[data-hat="loft"]       { --hat-accent: var(--hat-loft); }
.portal[data-hat="club"]       { --hat-accent: var(--hat-club); }
.portal[data-hat="federation"] { --hat-accent: var(--hat-federation); }
.portal[data-hat="national"]   { --hat-accent: var(--hat-national); }
.portal[data-hat="platform"]   { --hat-accent: var(--hat-platform); }
/* A platform owner overseeing a national club they don't run (ADR-0021) — distinct from both the platform
   hat and a national club's own purple, so the oversight view is unmistakable in the chrome. */
.portal[data-hat="national-oversight"] { --hat-accent: var(--hat-national-oversight); }

.portal[data-hat] .portal__context { border-color: var(--hat-accent); }
.portal[data-hat] .portal__context-badge { box-shadow: 0 0 0 2px var(--hat-accent); }
.portal[data-hat] .portal__context-kind { color: var(--hat-accent); font-weight: 700; }
.portal[data-hat] .portal__context-kind::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hat-accent);
    margin-right: 6px;
    vertical-align: middle;
}

.portal[data-hat] .sidebar__section-label { color: var(--hat-accent); border-top-color: var(--hat-accent); }
.portal[data-hat] .sidebar__switcher > summary { box-shadow: inset 4px 0 0 var(--hat-accent); }
.portal[data-hat] .nav-link--active { box-shadow: inset 4px 0 0 var(--hat-accent); }
.portal[data-hat] .sidebar__user-role { color: var(--hat-accent); font-weight: 700; }