/* ==========================================================================
   PulseOS Shell Layout
   6-tab top-bar navigation shell replacing the 3-hub sidebar layout.
   Uses design tokens from tokens.css.
   ========================================================================== */

/* ── WCAG AA: Skip Link ────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    background: var(--brand-primary, #0072BC);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm, 0.8125rem);
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
}
.skip-link:focus {
    position: fixed;
    left: var(--sp-4, 1rem);
    top: var(--sp-4, 1rem);
    width: auto;
    height: auto;
    overflow: visible;
}

/* ── WCAG AA: Focus Visible ────────────────────────────────────────────── */

*:focus-visible {
    outline: 2px solid var(--brand-primary, #0072BC);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default focus ring for mouse users (keep for keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure interactive elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--brand-primary, #0072BC);
    outline-offset: 2px;
}

/* ── Top Bar ────────────────────────────────────────────────────────────── */

/* ── Shell header height ────────────────────────────────────────────────
   One source of truth for how tall the fixed top bar is.

   tokens.css sets --header-height: 48px for the LEGACY site-header, which is
   genuinely 48px tall. The shell's top bar is 90px, but the sidebar offsets
   and the toast container were reading the 48px token — so on every shell
   page the sidebar was positioned 42px too high and slid under the header,
   and toasts opened tucked behind it.

   Redefining the token here rather than in tokens.css keeps the change to
   pages that load this file: base_shell.html loads shell.css and never
   sidebar.css, while base_legacy.html and base_sidebar_compat.html load
   sidebar.css and never this. The legacy header stays 48px.
   ──────────────────────────────────────────────────────────────────────── */
:root {
    --header-height: 90px;
}

.shell-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Explicit, not inherited from frontend/css/site.css's global reset: the
       2px bottom border must be INSIDE --header-height, or the bar renders
       92px tall while everything positioned below it offsets by 90 and the
       routine drawer clips the header again. Not worth depending on another
       app's stylesheet for. */
    box-sizing: border-box;
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-5, 1.25rem);
    gap: var(--sp-4, 1rem);
    background: linear-gradient(90deg, #f8fafc, #eef4ff, #f0f9ff);
    border-bottom: 2px solid #dbeafe;
    /* Above the drawers. The bar creates a stacking context, so this also
       governs everything anchored to it -- the notifications dropdown is
       z-index:100 INSIDE this context, which is why it lost to the routine
       drawer's 10100 no matter what number it carried itself. */
    z-index: var(--z-header, 10200);
}

/* ── Logo ───────────────────────────────────────────────────────────────── */

.shell-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    flex-shrink: 0;
}

.shell-logo__img {
    height: 81px;
    width: auto;
    object-fit: contain;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.shell-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* `safe center` centres the tabs while they fit and falls back to
       start-alignment the moment they do not.
       Plain `center` centres the overflow too, which clips BOTH ends: at
       eleven tabs on a 1440px screen that hid My Day off the left edge --
       the home of the product, invisible, with no scrollbar to hint it was
       there. Losing the tail to a scroll is survivable; losing the first
       tab is not. */
    justify-content: safe center;
}

.shell-tabs::-webkit-scrollbar {
    display: none;
}

.shell-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Trimmed from 8px 16px when wave 3 took the bar from nine tabs to
       eleven. */
    padding: 8px 11px;
    white-space: nowrap;
    border-radius: 20px;
    text-decoration: none;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    white-space: nowrap;
    position: relative;
}

.shell-tab:hover {
    background: rgba(0, 114, 188, 0.06);
    color: #334155;
}

.shell-tab--active {
    color: #0072BC;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 114, 188, 0.12);
    border: 1px solid #bfdbfe;
}

.shell-tab__icon {
    font-size: 1rem;
    line-height: 1;
    color: inherit;
}

.shell-tab__label {
    font-size: inherit;
    line-height: 1.2;
}

.shell-tab__badge {
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full, 9999px);
    background: var(--danger, #c4321c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    position: absolute;
    top: 0;
    right: 0;
}

/* ── Actions (right side) ───────────────────────────────────────────────── */

.shell-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    flex-shrink: 0;
}

.shell-search-trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}

.shell-search-trigger:hover {
    background: #f0f9ff;
    border-color: #93c5fd;
}

.shell-search-hint {
    font-size: 0.65rem;
    color: #94a3b8;
    opacity: 1;
    padding: 1px 5px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.shell-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: var(--sp-2);
    border-radius: var(--radius-sm, 6px);
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.shell-action-btn:hover {
    background: var(--bg-1);
    color: var(--ink);
}

.shell-website-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: var(--sp-1);
}

/* ── User Menu ──────────────────────────────────────────────────────────── */

.shell-user-menu {
    position: relative;
}

.shell-user-chip {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sp-1);
    border-radius: var(--radius-sm, 6px);
    transition: background var(--duration) var(--ease);
}

.shell-user-chip:hover {
    background: rgba(0, 114, 188, 0.06);
}

.shell-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: #0072BC;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shell-user-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
}

.shell-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 180px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--glass-shadow-md);
    z-index: 100;
    padding: var(--sp-1);
    margin-top: var(--sp-1);
}

.shell-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none;
    color: var(--ink);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm, 6px);
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--duration) var(--ease);
}

.shell-dropdown__item:hover {
    background: var(--bg-1);
}

/* ── Shell Layout ───────────────────────────────────────────────────────── */

.shell-layout {
    display: flex;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

.shell-main {
    flex: 1;
    padding: var(--sp-6);
    min-height: calc(100vh - 60px);
    max-width: 100%;
    overflow-x: hidden;
}

.shell-footer {
    text-align: center;
    padding: var(--sp-4);
    font-size: var(--text-xs, 0.75rem);
    color: var(--ink-soft);
    margin-top: var(--sp-8);
}

/* ── Contextual Sidebar ─────────────────────────────────────────────────── */

.shell-sidebar {
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 48px;
    width: var(--sidebar-width);
    min-height: calc(100vh - var(--header-height, 90px));
    background: linear-gradient(180deg, #EAF6F8, #F5F8FA);
    border-right: 1px solid #D5E8EC;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    transition: width 200ms ease-out;
}

.shell-sidebar--collapsed {
    width: var(--sidebar-collapsed-width);
}

.shell-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--bg-2);
    gap: var(--sp-2);
}

.shell-sidebar--collapsed .shell-sidebar__header {
    justify-content: center;
    padding: var(--sp-3) var(--sp-2);
}

.shell-sidebar__back {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: #0072BC;
    font-size: 0.8rem;
    text-decoration: none;
    transition: color var(--duration, 200ms) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.shell-sidebar__back:hover {
    color: var(--ink);
}

.shell-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    flex-shrink: 0;
    transition: background var(--duration, 200ms) var(--ease),
                color var(--duration, 200ms) var(--ease);
}

.shell-sidebar__toggle:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.shell-sidebar__nav {
    padding: var(--sp-2) 0;
}

.shell-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    color: #475569;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    transition: background var(--duration, 200ms) var(--ease),
                color var(--duration, 200ms) var(--ease);
}

.shell-sidebar--collapsed .shell-sidebar__link {
    justify-content: center;
    padding: var(--sp-2) var(--sp-2);
}

.shell-sidebar__link:hover {
    background: #fff;
    color: var(--ink);
}

.shell-sidebar__link--active {
    background: #fff;
    border-left: 2px solid #27A9B8;
    box-shadow: 0 1px 3px rgba(0, 59, 122, 0.06);
    color: #003B7A;
    font-weight: 600;
}

.shell-sidebar__link-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
}

.shell-sidebar__link-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read-only marker. Muted rather than alarming: a locked module is a normal
   state for the role, not a fault the member should try to fix. */
.shell-sidebar__lock {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
    flex-shrink: 0;
}

.shell-sidebar__badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full, 9999px);
    background: var(--danger, #c4321c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}

.shell-sidebar__fav-icon {
    color: var(--warning, #f59e0b);
}

.shell-sidebar__link--compact {
    font-size: 0.75rem;
    padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-6);
}

.shell-sidebar--collapsed .shell-sidebar__link--compact {
    padding: var(--sp-1) var(--sp-2);
}

.shell-sidebar__section {
    border-top: 1px solid var(--bg-2);
    padding: var(--sp-2) 0;
}

.shell-sidebar__section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #0072BC;
    padding: var(--sp-2) var(--sp-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ── Dark Mode Overrides ────────────────────────────────────────────────── */

/* ── Responsive: Tablet (768-1023px) ───────────────────────────────────── */

@media (max-width: 1023px) and (min-width: 768px) {
    .shell-tab__label {
        display: none;
    }

    .shell-tab {
        padding: var(--sp-2);
    }

    .shell-tab__icon {
        font-size: 1.25rem;
    }

    .shell-search-trigger {
        max-width: 160px;
    }

    .shell-search-hint {
        display: none;
    }

    .shell-sidebar {
        position: fixed;
        left: 0;
        top: var(--header-height, 90px);
        bottom: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform var(--duration) var(--ease);
        box-shadow: var(--glass-shadow-lg);
    }

    .shell-sidebar--open {
        transform: translateX(0);
    }

    .shell-main {
        padding: var(--sp-4) var(--sp-5);
    }
}

/* ── Responsive: Mobile (<768px) ──────────────────────────────────────── */

@media (max-width: 767px) {
    .shell-topbar {
        padding: 0 var(--sp-2);
        gap: var(--sp-2);
        flex-wrap: nowrap;
    }

    /* Hide desktop tabs — replaced by bottom bar */
    .shell-tabs {
        display: none;
    }

    .shell-search-trigger {
        padding: var(--sp-2);
    }

    .shell-search-trigger .shell-search-hint,
    .shell-search-trigger span:not(.shell-search-hint) {
        display: none;
    }

    .shell-search-hint {
        display: none;
    }

    .shell-user-name,
    .shell-website-label {
        display: none;
    }

    .shell-sidebar {
        position: fixed;
        left: 0;
        top: var(--header-height, 90px);
        bottom: 56px; /* above bottom tab bar */
        z-index: 40;
        transform: translateX(-100%);
        transition: transform var(--duration) var(--ease);
        box-shadow: var(--glass-shadow-lg);
    }

    .shell-sidebar--open {
        transform: translateX(0);
    }

    .shell-main {
        padding: var(--sp-3);
        padding-bottom: 72px; /* space for bottom tab bar */
    }

    .shell-footer {
        padding-bottom: 72px;
    }

    /* ── Mobile Bottom Tab Bar ── */
    .shell-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--surface, rgba(255, 255, 255, 0.95));
        border-top: 1px solid var(--bg-2, #e4edf5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 50;
        justify-content: space-around;
        align-items: center;
        padding: 0 var(--sp-1);
    }

    .shell-bottom-tabs .shell-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--sp-1) 0;
        min-width: 0;
        border-radius: 0;
    }

    .shell-bottom-tabs .shell-tab__label {
        display: block;
        font-size: 0.6rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .shell-bottom-tabs .shell-tab__icon {
        font-size: 1.2rem;
    }
}

/* ── More trigger / popup (mobile bottom nav) ─────────────────────── */

.shell-more-trigger { position: relative; cursor: pointer; }
.shell-more-popup { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--card, #fff); border: 1px solid var(--bg-2); border-radius: 8px; box-shadow: 0 -4px 12px rgba(0,0,0,0.15); padding: var(--sp-2); min-width: 160px; margin-bottom: var(--sp-2); }
.shell-more-popup__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.85rem; }
.shell-more-popup__item:hover { background: var(--bg-1); }
.shell-more-popup__item--active { color: var(--brand-primary); font-weight: 600; }

/* Hide bottom tabs on desktop/tablet */
@media (min-width: 768px) {
    .shell-bottom-tabs {
        display: none;
    }
}

/* ── Dark mode: bottom tab bar ─────────────────────────────────────────── */

/* ── Messenger widget: mobile collapse to FAB ──────────────────────────── */

@media (max-width: 767px) {
    .messenger-panel {
        bottom: 72px; /* above bottom tab bar */
        max-height: calc(100vh - 128px); /* header + bottom bar */
    }

    .messenger-fab {
        bottom: 68px; /* above bottom tab bar */
    }

    .cp-dialog {
        top: 5%;
        width: 95%;
        max-height: 80vh;
    }

    .cp-results {
        max-height: 280px;
    }
}

/* ── Command Palette ────────────────────────────────────────────────────── */

.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cp-dialog {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 640px;
    background: var(--card, #fff);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cp-search {
    display: flex;
    align-items: center;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--bg-2);
    gap: var(--sp-3);
}

.cp-search-icon {
    color: var(--ink-soft);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cp-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
}

.cp-search-input::placeholder {
    color: var(--ink-soft);
}

.cp-kbd {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--bg-1);
    border: 1px solid var(--bg-2);
    border-radius: 4px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    line-height: 1.4;
}

.cp-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--bg-2);
}

.cp-tab {
    background: none;
    border: none;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
    font-family: var(--font-body);
}

.cp-tab:hover {
    background: var(--bg-1);
    color: var(--ink);
}

.cp-tab--active {
    background: var(--info-bg);
    color: var(--brand-primary);
    font-weight: 600;
}

.cp-results {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--sp-2) 0;
}

.cp-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-soft);
    padding: var(--sp-2) var(--sp-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cp-result {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.cp-result:hover,
.cp-result--active {
    background: var(--bg-1);
}

.cp-result__type {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--bg-1);
    border-radius: 4px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.cp-result__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-empty {
    text-align: center;
    padding: var(--sp-6);
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.cp-footer {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--bg-2);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Dark mode overrides for command palette */

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
    .shell-topbar,
    .shell-sidebar,
    .shell-footer {
        display: none;
    }

    .shell-layout {
        margin-top: 0;
    }

    .shell-main {
        padding: 0;
    }
}

/* ==========================================================================
   RTL Support — Arabic (dir="rtl")
   Flips directional properties for the shell layout.
   ========================================================================== */

html[dir="rtl"] .shell-topbar {
    direction: rtl;
}
html[dir="rtl"] .shell-logo {
    margin-right: 0;
    margin-left: auto;
}
html[dir="rtl"] .shell-actions {
    margin-left: 0;
    margin-right: auto;
}
html[dir="rtl"] .shell-user-name {
    margin-left: 0;
    margin-right: var(--sp-1, 0.25rem);
}
html[dir="rtl"] .shell-search-hint {
    margin-left: 0;
    margin-right: var(--sp-1, 0.25rem);
}

/* Sidebar RTL */
html[dir="rtl"] .shell-sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid var(--line, rgba(0,59,122,0.1));
    border-right: none;
}
html[dir="rtl"] .shell-sidebar__link {
    border-left: none;
    border-right: 2px solid transparent;
    text-align: right;
}
html[dir="rtl"] .shell-sidebar__link--active {
    border-right-color: var(--brand-teal, #27A9B8);
    border-left-color: transparent;
}

/* Dropdown RTL */
html[dir="rtl"] .shell-dropdown {
    left: 0;
    right: auto;
}
html[dir="rtl"] .notification-dropdown {
    left: 0;
    right: auto;
}

/* Content area RTL */
html[dir="rtl"] .shell-main {
    direction: rtl;
    text-align: right;
}

/* Bottom tabs RTL */
html[dir="rtl"] .shell-bottom-tabs {
    direction: rtl;
}
html[dir="rtl"] .shell-more-popup {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Empty state RTL */
html[dir="rtl"] .ed-empty-state {
    direction: rtl;
    text-align: center;
}
html[dir="rtl"] .ed-empty-state__clause {
    direction: rtl;
}

/* KPI card RTL */
html[dir="rtl"] .kpi-card {
    direction: rtl;
}

/* Font override for Arabic */
html[dir="rtl"] body,
html[dir="rtl"] .shell-tab__label,
html[dir="rtl"] .shell-user-name,
html[dir="rtl"] .shell-sidebar__label,
html[dir="rtl"] .shell-dropdown__item {
    font-family: var(--font-ar, 'IBM Plex Sans Arabic', 'DM Sans', sans-serif);
}

/* ── Mobile sidebar opener ────────────────────────────────────────────────
   The panel is translated off-screen below 1024px and .shell-sidebar--open
   brings it back. Nothing ever applied that class, so every drill-down
   module was unreachable on a phone or a narrow tablet. This is the control
   that applies it; it lives outside the panel, because a button inside
   something translated off-screen cannot be pressed.
   ---------------------------------------------------------------------- */
.shell-sidebar__mobile-toggle {
    display: none;
    position: fixed;
    left: var(--sp-3, 12px);
    bottom: var(--sp-3, 12px);
    z-index: 45;                 /* above the panel (40), below any modal */
    width: 44px;                 /* a real touch target */
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #e3e8f0);
    border-radius: 50%;
    background: #ffffff;
    color: var(--brand-navy, #0f2b5b);
    font-size: 1.15rem;
    box-shadow: 0 3px 12px rgba(15, 43, 91, .18);
    cursor: pointer;
}

.shell-sidebar__mobile-toggle:focus-visible {
    outline: 2px solid var(--brand-primary, #0072BC);
    outline-offset: 2px;
}

.shell-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 39;                 /* directly under the panel */
    background: rgba(15, 43, 91, .32);
}

@media (max-width: 1023px) {
    .shell-sidebar__mobile-toggle {
        display: flex;
    }

    .shell-sidebar__backdrop {
        display: block;
    }
}

@media (max-width: 767px) {
    /* Clear of the bottom tab bar. */
    .shell-sidebar__mobile-toggle {
        bottom: 68px;
    }
}

/* ── Language switcher ────────────────────────────────────────────────────
   Arabic is a first-class locale here and was reachable only from the public
   site and the retired legacy shell, so nobody signed in could get to it.
   ---------------------------------------------------------------------- */
.shell-lang { display: inline-flex; margin: 0 4px; }

.shell-lang__btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border, #e3e8f0);
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand-navy, #0f2b5b);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.shell-lang__btn:hover { background: #f4f7fb; }

.shell-lang__btn:focus-visible {
    outline: 2px solid var(--brand-primary, #0072BC);
    outline-offset: 2px;
}

/* ── Active workspace, and the way out of it ──────────────────────────────
   A role can carry several streams and a stream narrows what you can reach,
   so someone with two of them was locked into half their permissions for the
   session with nothing on screen saying so. This existed in the legacy
   sidebar and was never carried into this shell.
   ---------------------------------------------------------------------- */
.shell-stream {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-right: 4px;
    border: 1px solid var(--border, #e3e8f0);
    border-radius: 999px;
    background: #f4f7fb;
    max-width: 220px;
}

.shell-stream .stream-indicator__dot {
    width: 7px; height: 7px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-primary, #0072BC);
}

.shell-stream .stream-indicator__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.shell-stream .stream-indicator__role {
    font-size: 0.6875rem;
    color: var(--ink-soft, #5a6270);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shell-stream .stream-indicator__stream {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-navy, #0f2b5b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Superusers only. Quieter than the role above it: it is a footnote to the
   workspace, not another thing to read every time. */
.shell-stream .stream-indicator__note {
    font-size: 0.625rem;
    color: var(--ink-muted, #94a3b8);
    font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shell-clear-workspace { display: inline-flex; margin-right: 4px; }

/* The indicator is the first thing to go when the bar gets tight; the button
   that escapes the workspace is the last. */
@media (max-width: 900px) {
    .shell-stream { display: none; }
}

/* ── Report an issue: top bar on desktop, floating pill on phones ─────────
   The pill is centred so it clears the sidebar toggle (left), the My Day
   routine dock and the messenger button (right). Its z-index (38) keeps it above
   page content but below the 56px bottom tab bar (50), the sidebar toggle (45),
   and the open contextual sidebar with its backdrop (40, 39), so a drill-down
   page's open sidebar covers the pill instead of the pill floating over it. It
   sits above the tab bar by position (bottom: 68px), not by stacking. */
.shell-report-btn { gap: var(--sp-1); font-weight: 600; color: var(--brand-primary); }
.shell-report-btn .shell-report-label { font-size: 0.8rem; }
.shell-report-fab { display: none; }

@media (max-width: 767px) {
    .shell-report-btn { display: none; }
    .shell-report-fab {
        display: inline-flex; align-items: center; gap: 8px;
        position: fixed; bottom: 68px; left: 50%; transform: translateX(-50%);
        z-index: 38; min-height: 44px; padding: 0 18px;
        border-radius: var(--radius-full, 9999px);
        background: var(--brand-primary, #0072BC); color: #ffffff;
        font-weight: 600; text-decoration: none;
        box-shadow: 0 3px 12px rgba(15, 43, 91, .22);
    }
}

/* Below 1500px the labelled button squeezes the tab strip (Operations / People /
   Tools clip at 1280px); the icon alone keeps the title and aria-label. */
@media (max-width: 1499px) {
    .shell-report-btn .shell-report-label { display: none; }
}

@media print { .shell-report-btn, .shell-report-fab { display: none; } }