/* Persistent sidebar and navigation styling. Uses existing shell IDs/events. */
#sidebar {
    display: flex; flex-direction: column; gap: 0;
    /* The sidebar is a three-row shell; only .sidebar-middle scrolls. */
    overflow: hidden !important;
    overscroll-behavior: none;
    min-height: 0;
    padding-bottom: 0;
    isolation: isolate;
    background: var(--brand, #008080); color: #fff;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
#sidebar *, #sidebar *::before, #sidebar *::after { box-sizing: border-box; }
#sidebar a { color: inherit; text-decoration: none; }
#sidebar a:hover { color: #fff; text-decoration: underline; }
#sidebar button { font-family: inherit; }
#sidebar .sidebar-header {
    flex: none; padding: calc(var(--safe-top, 0px) + 15px) 15px 13px;
    border-bottom: 1px solid rgba(255,255,255,.21);
    overflow: visible !important;
}
#sidebar .sidebar-online { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
#sidebar .sidebar-online #usersOnlineNow { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#sidebar .sidebar-online-dot { width: 8px; height: 8px; background: #83eed2; border-radius: 100%; box-shadow: 0 0 0 3px rgba(131,238,210,.16); }
#sidebar .sidebar-middle {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.4) transparent;
}
#sidebar .sidebar-middle::-webkit-scrollbar { width: 5px; }
#sidebar .sidebar-middle::-webkit-scrollbar-thumb { background: rgba(255,255,255,.36); border-radius: 4px; }
#sidebar .sidebar-content {
    padding: 14px 12px 0; margin: 0;
    flex: none; overflow: visible !important;
    min-width: 0;
}
#sidebar .sidebar-section { min-width: 0; border-radius: 13px; padding: 10px; margin-bottom: 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); }
#sidebar .sidebar-section h1, #sidebar .sidebar-section h2, #sidebar .sidebar-section h3,
#sidebar #recentViews h1, #sidebar #recentViews h2 { margin: 0 0 9px; font-size: 12px !important; font-weight: 800; color: #fff !important; line-height: 1.5; }
#sidebar #recentViews { font-size: 12px; line-height: 1.4; overflow: hidden; }
#sidebar #recentViews img { width: 33px; height: 33px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; object-fit: cover; }
#sidebar #recentViews a { display: inline-block; vertical-align: middle; }
#sidebar #recentViews a:hover img { border-color: #fff; }
#sidebar .sidebar-section-heading { margin: 0 0 8px; }
#sidebar .sidebar-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 750; }
#sidebar #userOnlineList { display: flex; flex-direction: column; gap: 5px; }
#sidebar #userOnlineList > div { min-width: 0; border-radius: 9px; padding: 5px 0; }
#sidebar #userOnlineList > div > div { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; overflow: visible !important; padding: 0 !important; }
#sidebar #userOnlineList > div > div > div { float: none !important; padding-left: 0 !important; min-width: 0; }
#sidebar #userOnlineList a { font-size: 12px; overflow-wrap: anywhere; }
#sidebar #savedlink { font-size: 12px; margin-top: 8px; }
#sidebar #savedlink a { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; }

#sidebar #desktopNav { padding: 4px 12px 12px; flex: none; }
/* Use this SAME navigation tree in the desktop sidebar and mobile drawer. */
#sidebar #desktopNav.desktop-nav {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}
#sidebar .sidebar-nav-group { min-width: 0; }
/* The group remains hidden while a session is being resolved/logged out. */
#sidebar .sidebar-nav-group { display: none !important; }
#sidebar.sidebar-user-authorized .sidebar-nav-group { display: block !important; }
#sidebar .desktop-nav-btn, #sidebar .desktop-sub-btn {
    width: 100%; min-width: 0; cursor: pointer; color: #fff;
    font-weight: 600; font-size: 13px; line-height: 1.35;
    text-align: left; border: 1px solid transparent; border-radius: 10px;
    background: transparent; padding: 11px 12px; gap: 11px;
    display: flex; align-items: center;
}
#sidebar .desktop-nav-btn i { width: 17px; font-size: 14px; text-align: center; }
#sidebar .desktop-nav-btn:hover, #sidebar .desktop-sub-btn:hover,
#sidebar .desktop-nav-btn:focus-visible, #sidebar .desktop-sub-btn:focus-visible {
    color: #fff; background: rgba(255,255,255,.14); outline: none;
}
/* Never hover-trigger or collapse these folders. Override legacy dropdown CSS,
   including its absolute positioning, opacity and pointer-events rules. */
#sidebar .sidebar-subnav {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    inset: auto !important;
    clip-path: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 0 3px 19px;
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 6px;
    background: transparent !important;
    box-shadow: none !important;
}
#sidebar .sidebar-profile-group .sidebar-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#sidebar .desktop-sub-btn { padding: 7px 10px; color: rgba(255,255,255,.85); }
/* Use one typographic scale for both sidebar modes. Some names are plain
   button text and others are child <span>s; set both explicitly so global
   button/span rules cannot make Home/Search differ from Messages/username. */
#sidebar #desktopNav .desktop-nav-btn,
#sidebar #desktopNav .desktop-nav-btn .sidebar-nav-label {
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}
#sidebar #desktopNav .desktop-nav-btn > i {
    font-size: 16px !important;
    line-height: 1.35 !important;
}
#sidebar #desktopNav .desktop-sub-btn,
#sidebar #desktopNav .desktop-sub-btn .sidebar-nav-label {
    font-size: 14px !important;
    font-weight: 550 !important;
    line-height: 1.35 !important;
}
#sidebar #sideButtons.sidebar-actions {
    flex: none; width: auto !important; margin: 0 12px; padding: 11px 0 calc(var(--safe-bottom,0px) + 12px) !important;
    position: relative !important; bottom: auto !important;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px;
    border-top: 1px solid rgba(255,255,255,.20);
    background: var(--brand, #008080);
    position: relative;
    z-index: 1;
}
/* Fail closed at first paint. Only ui-shell.js adds this class after checking
   appSession.super === 2. JS may still be loading during login/logout. */
#sidebar .sidebar-admin-actions { display: none !important; }
#sidebar.sidebar-admin-authorized .sidebar-admin-actions { display: contents !important; }
#sidebar.sidebar-admin-authorized .sidebar-admin-actions > .side-btn { display: inline-flex !important; }
#sidebar .side-btn {
    display: inline-flex; gap: 6px; align-items: center; justify-content: center;
    width: 100%; min-width: 0; height: auto; min-height: 38px;
    margin: 0; padding: 8px 5px; border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px; background: rgba(255,255,255,.08);
    color: #fff; font-size: 12px; font-weight: 650; text-align: center;
    cursor: pointer; overflow: visible;
}
#sidebar .side-btn:hover, #sidebar .side-btn:focus-visible { background: rgba(255,255,255,.17); outline: none; }
#sidebar .side-btn i { font-size: 12px; }
#sidebar .side-btn-logout { border-color: rgba(255,255,255,.26); }
#sidebar [data-auth].hidden, #sidebar .hidden { display: none !important; }

/* Keep floating shell controls legible without changing their navigation handlers. */
#bottomNav .nav-btn { border: 0; color: #fff; cursor: pointer; position: relative; }
#bottomNav .nav-btn i { position: relative; }
#bottomNav .nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media (min-width: 1024px) {
    #sidebar {
        width: 260px; max-width: 260px;
        /* Measure the real titlebar including native safe area. */
        top: var(--sidebar-banner-bottom, calc(var(--banner-height, 50px) + var(--safe-top, 0px)));
        /* Full-bleed teal sidebar, from below the titlebar to the bottom edge.
           Do not shorten the sidebar to make room for system navigation. */
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box;
    }
    #sidebar .sidebar-header { padding-top: 16px; }
    #sidebar #sideButtons.sidebar-actions { padding-bottom: 14px !important; }
}
@media (max-width: 1023px) {
    #sidebar .sidebar-header { padding-top: calc(var(--safe-top, 0px) + 16px); }
    #sidebar .sidebar-content { padding-top: 17px; }
    #sidebar .side-btn { min-height: 43px; }
}

/* Shared shell footer; leaves sidebar swipe transforms on #footer alone. */
#footer { height: auto; min-height: 64px; padding: 0 12px !important; }
#footer #footerContent {
    position: static; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 7px 18px; width: min(900px, 100%); height: auto;
    padding: 14px 15px; margin: 0 auto;
    border: 0; border-top: 1px solid #d7e4e5;
    color: #60767c; font-size: 11px;
}
#footer #footerContent p { margin: 0; }
#footer #footerContent a { color: var(--brand, #008080); }
@media (max-width: 1023px) {
    #footer { margin-bottom: calc(var(--navbar-height, 50px) + var(--safe-bottom, 0px) + 12px) !important; }
}
/* Match the main content's available desktop width, not just its 900px cap.
   Two fixed 260px panels occupy the left and right sides at >= 1024px.
   Keep #footer full width for SPA/sidebar transitions; size only its inner box. */
@media (min-width: 1024px) {
    #footer #footerContent {
        width: min(900px, calc(100vw - 520px));
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Don't display empty server-side placeholders before notifications arrive. */
#sidebar .sidebar-section:has(> #recentViews:empty) { display: none; }

/* Notification badges: shared across desktop/sidebar and the mobile navigation.
   Uses a dedicated class to avoid the old global .badge (10px-high) rules. */
#sidebar .sidebar-nav-label { min-width: 0; }
#sidebar .sidebar-nav-count { margin-left: auto; flex: none; }
#sidebar .sidebar-nav-count:empty,
#sidebar #viewNotificationCount:empty,
#sidebar #adminNotificationCount:empty,
#bottomNav #messageNotificationCount:empty,
#bottomNav #totalNotificationCount:empty { display: none !important; }

#sidebar .notification-badge,
#bottomNav .notification-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: auto;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.94);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.20);
    vertical-align: middle;
}
#sidebar .sidebar-nav-count .notification-badge {
    min-width: 19px; height: 19px; font-size: 10px;
}
#sidebar .side-btn #viewNotificationCount,
#sidebar .side-btn #adminNotificationCount { margin-left: 2px; flex: none; }

/* The old style.css applies bright-red circles to the OUTER placeholder IDs.
   Keep those containers transparent, and put all badge styling on their children. */
#sidebar #inboxNotificationCount,
#sidebar #otherNotificationCount,
#sidebar #messageNotificationCountDesktop,
#sidebar #viewNotificationCount,
#sidebar #adminNotificationCount,
#bottomNav #messageNotificationCount,
#bottomNav #totalNotificationCount {
    position: static;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    height: auto;
    width: auto;
    min-width: 0;
    right: auto;
    font-size: inherit;
    line-height: normal;
    transform: none;
    transition: none;
}
/* Counter bubbles sit on the envelope / menu icon, not in an oversized pill. */
#bottomNav .nav-btn > i { position: relative; display: inline-block; }
#bottomNav #messageNotificationCount,
#bottomNav #totalNotificationCount { position: absolute; left: calc(100% - 3px); top: -11px; }
#bottomNav .notification-badge { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }

/* Keep the teal backdrop behind the shifted titlebar on iOS landscape,
   but start the ONLINE CONTENT *below* that banner, not underneath it. */
@media (orientation: landscape) and (max-width: 1023px) {
    #sidebar.sidebar-ios { top: 0; bottom: 0 !important; height: auto !important; max-height: none !important; }
    #sidebar.sidebar-ios .sidebar-header {
        padding-top: calc(var(--sidebar-banner-bottom, 50px) + 12px);
    }
}

/* The shell itself fills the full available vertical extent. Any safe-area
   clearance belongs INSIDE the fixed action footer, not below the sidebar. */
@media (max-width: 1023px) {
    #sidebar {
        height: auto !important;
        max-height: none !important;
        bottom: 0 !important;
        box-sizing: border-box;
    }
    #sidebar #sideButtons.sidebar-actions {
        min-height: 0;
        padding-bottom: max(12px, var(--safe-bottom, 0px)) !important;
    }
}

/* Android WebView landscape may report safe-area-inset-bottom as 0 even with
   the 3-button navigation bar present. Reserve a reliable 48px minimum INSIDE
   the action area. The extra room comes from .sidebar-middle (the scroller).
   It is not a margin or a shorter #sidebar, so the teal background remains
   continuous all the way behind the Android system bar. */
@media (orientation: landscape) {
    #sidebar.sidebar-android #sideButtons.sidebar-actions {
        padding-bottom: calc(max(var(--safe-bottom, 0px), 48px) + 12px) !important;
    }
}


/* -------------------------------------------------------------------------
   Profile completion card: identical on desktop and in the mobile drawer.
   All completion visuals live here; the title banner remains solid teal.
   ------------------------------------------------------------------------- */
#topBanner { background: var(--brand, #008080) !important; background-image: none !important; }
#sidebar #profileProgressCard[hidden],
#sidebar #sidebarProgressAction[hidden] { display: none !important; }
#sidebar #profileProgressCard { padding: 13px 12px 12px; }
#sidebar #profileProgressCard .sidebar-progress-heading {
    margin: 0 0 10px;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    letter-spacing: normal;
}
#sidebar #profileProgressCard .sidebar-progress-heading strong {
    color: #fff;
    font-size: inherit;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
#sidebar .sidebar-progress-track {
    width: 100%; height: 11px; overflow: hidden;
    background: rgba(0, 53, 53, .40);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
}
#sidebar .sidebar-progress-fill {
    height: 100%; width: 0%; border-radius: inherit;
    background: #93f2dd;
    transition: width .35s ease;
}
#sidebar .sidebar-progress-next { margin-top: 11px; }
#sidebar .sidebar-progress-eyebrow {
    color: #c1f8ec; font-size: 10px; font-weight: 800;
    line-height: 1.35; letter-spacing: .05em;
}
#sidebar .sidebar-progress-task {
    margin: 4px 0 0; color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.45;
    overflow-wrap: anywhere;
}
#sidebar .sidebar-progress-action {
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 12px; font-weight: 750;
    display: inline-flex; gap: 7px; align-items: center;
    min-height: 32px; padding: 6px 10px; margin-top: 11px;
    cursor: pointer; text-align: left;
}
#sidebar .sidebar-progress-action:hover,
#sidebar .sidebar-progress-action:focus-visible {
    background: rgba(255,255,255,.23);
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 2px;
}
#sidebar .sidebar-progress-card.is-complete .sidebar-progress-fill { background: #baf5d3; }
@media (prefers-reduced-motion: reduce) {
    #sidebar .sidebar-progress-fill { transition: none; }
}