/* ==========================================================================
   layout.css — the app frame: shell, sidebar, topbar.
   Minimal light theme. Desktop-first; collapses to off-canvas on narrow.
   ========================================================================== */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    /* When impersonating, the body reserves --imp-bar-h for the indicator strip so
       the rest of the app is unchanged below it (defaults to 0 otherwise). */
    min-height: calc(100dvh - var(--imp-bar-h, 0px));
}

.shell__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-body);
}

.shell__content {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--space-section) var(--space-gutter) var(--space-12);
}

/* ==========================================================================
   Sidebar — light, hairline border, restrained
   ========================================================================== */
.sidebar {
    grid-row: 1 / -1;
    position: sticky;
    /* Sit below the impersonation strip (0 when not impersonating) and shrink to
       the remaining viewport so the account block at the bottom stays reachable. */
    top: var(--imp-bar-h, 0px);
    height: calc(100dvh - var(--imp-bar-h, 0px));
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    z-index: var(--z-sidebar);
    overflow: hidden;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding-inline: var(--space-5);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color-subtle);
}
.sidebar__brand-mark--logo { background: transparent; overflow: hidden; }
.sidebar__brand-mark--logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar__brand-mark {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--text-on-accent);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.sidebar__brand-name {
    color: var(--text-strong);
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
}
.sidebar__brand-sub {
    display: block;
    color: var(--text-faint);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.sidebar__group-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-default);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__item:hover { background: var(--bg-hover); color: var(--text-strong); }
.sidebar__item--active {
    background: var(--bg-sunken);
    color: var(--text-strong);
    font-weight: var(--font-semibold);
}
.sidebar__item-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }
.sidebar__item--active .sidebar__item-icon { color: var(--text-strong); }

.sidebar__item-badge {
    margin-left: auto;
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    min-width: 20px;
    text-align: center;
}
.sidebar__item--active .sidebar__item-badge { background: var(--color-neutral-200); color: var(--text-strong); }

.sidebar__footer {
    flex-shrink: 0;
    padding: var(--space-3);
    border-top: 1px solid var(--border-color-subtle);
}
.account-menu { position: relative; }

/* Generic popover menu (used by the account block; opens upward via --up) */
.menu {
    position: absolute;
    z-index: var(--z-dropdown);
    min-width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
}
.menu--up { bottom: calc(100% + var(--space-2)); left: 0; right: 0; }
.menu--down { top: calc(100% + var(--space-2)); left: 0; }
.menu__header { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-color-subtle); margin-bottom: var(--space-1); display: flex; flex-direction: column; }
.menu__header-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-strong); }
.menu__header-sub { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.menu__item:hover { background: var(--bg-hover); color: var(--text-strong); }
.menu__item-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.menu__sep { height: 1px; background: var(--border-color-subtle); margin: var(--space-1) 0; }

/* Account block — floats at the bottom-left of the nav */
.account {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.account:hover { background: var(--bg-hover); }
.account__avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--text-on-accent);
    display: grid; place-items: center;
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    flex-shrink: 0;
}
.account__meta { display: flex; flex-direction: column; min-width: 0; }
.account__name { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-strong); line-height: 1.2; }
.account__role { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account__chevron { width: 16px; height: 16px; color: var(--text-faint); margin-left: auto; flex-shrink: 0; }

/* ==========================================================================
   Topbar — minimal, hairline bottom border
   ========================================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding-inline: var(--space-gutter);
    background: color-mix(in srgb, var(--bg-body) 80%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border-color);
}
.topbar__title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-strong); }

.icon-button {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-button:hover { background: var(--bg-hover); color: var(--text-strong); }

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.user-chip:hover { background: var(--bg-hover); }
.user-chip__avatar {
    width: 28px; height: 28px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--text-on-accent);
    display: grid;
    place-items: center;
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
}
.user-chip__name { font-weight: var(--font-medium); color: var(--text-strong); font-size: var(--text-base); }

/* ==========================================================================
   Responsive: off-canvas sidebar
   ========================================================================== */
.topbar__menu-toggle { display: none; }
@media (max-width: 1024px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        inset-block: var(--imp-bar-h, 0px) 0;
        inset-inline-start: 0;
        height: auto;
        width: min(82vw, var(--sidebar-width));
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-lg);
    }
    .sidebar[data-open="true"] { transform: translateX(0); }
    .topbar__menu-toggle { display: grid; }
}

/* The admin-interface accent theme (.theme-admin) is defined in tokens.css,
   alongside the org-brand accents — all colour token definitions live there. */

/* ==========================================================================
   Topbar: global search + notification bell
   ========================================================================== */
.topbar__search {
    display: flex; align-items: center; gap: var(--space-2);
    margin-inline-start: auto;
    background: var(--bg-sunken); border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-pill); padding-inline: var(--space-3);
    min-width: min(320px, 38vw);
}
.topbar__search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.topbar__search-icon { color: var(--text-faint); flex-shrink: 0; }
.topbar__search-input { background: none; border: none; outline: none; width: 100%; padding-block: var(--space-2); font-size: var(--text-sm); color: var(--text-default); }
@media (max-width: 720px) { .topbar__search { min-width: 0; flex: 1; } }

.topbar__bell { position: relative; }
.topbar__bell-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: var(--radius-pill); background: var(--color-danger-500, crimson);
    border: 2px solid var(--bg-surface);
}
.topbar__bell-menu {
    position: absolute; right: 0; top: calc(100% + var(--space-2));
    width: min(360px, 90vw); max-height: 70vh; overflow-y: auto;
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: var(--space-2); z-index: var(--z-dropdown, 30);
}
.topbar__bell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color-subtle); margin-block-end: var(--space-1); }
.topbar__bell-empty { padding: var(--space-4) var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.topbar__bell-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.topbar__bell-item:hover { background: var(--bg-sunken); }
.topbar__bell-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.topbar__bell-text { font-size: var(--text-sm); color: var(--text-default); line-height: 1.4; }
.topbar__bell-time { color: var(--text-faint); font-size: var(--text-xs); }