/* Portal chrome: header, sidebar menu, footer, floating help button, Sojo chat panel, accessibility
   panel, tooltips. Moved out of Utils/PageBuilder.py's inline <style> blocks (~37 KB repeated in every
   page's HTML) so browsers cache it; PageBuilder.build_header_style links it. */

/* ===== Header, menu, footer (was build_header_style) ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
        }
        /* Header, .container and footer stack in a column at least one
           screen tall; .container takes whatever the header and footer
           leave, so the footer can grow without the page overflowing. */
        body {
            background-color: var(--color-bg, #f8fafc);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        /* Header styles */
        /* --color-header-* / --color-footer-*: set only by a light-header theme (Seashell Cove, apex
           web_themes.py); everything else falls back to the primary fill and white ink it always had. */
        header {
            height: 70px;
            background-color: var(--color-header-bg, var(--color-primary, #1e3a5f));
            color: var(--color-header-text, #ffffff);
            display: flex;
            align-items: center;
            padding: 0 24px;
            box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.07));
            position: relative;
            z-index: 100;
        }
        .header-logo {
            font-size: 1.25em;
            font-weight: 500;
            letter-spacing: -0.01em;
        }
        .header-actions {
            margin-left: auto;
            display: flex;
            gap: 20px;
            align-items: center;
        }
        .user-profile {
            font-size: 0.875em;
            opacity: 0.9;
            position: relative;
            cursor: pointer;
            user-select: none;
        }
        .user-profile-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            color: var(--color-header-text, #ffffff);
            font-size: 0.875em;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: var(--radius-sm, 6px);
            transition: background 0.2s ease;
        }
        .user-profile-btn:hover {
            background: color-mix(in srgb, var(--color-header-text, #ffffff) 12%, transparent);
        }
        .user-profile-btn .material-icons {
            font-size: 1.125em;
        }
        .user-profile-name {
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-profile-btn .dropdown-arrow {
            transition: transform 0.2s ease;
        }
        .user-profile.open .user-profile-btn .dropdown-arrow {
            transform: rotate(180deg);
        }
        .user-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: white;
            border-radius: var(--radius-md, 8px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
            min-width: 180px;
            z-index: 200;
            overflow: hidden;
        }
        .user-profile.open .user-dropdown {
            display: block;
        }
        .user-dropdown a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            color: #334155;
            text-decoration: none;
            font-size: 0.875em;
            transition: background 0.15s ease;
        }
        .user-dropdown a:hover {
            background: #f1f5f9;
        }
        .user-dropdown a .material-icons {
            font-size: 1.125em;
            color: #64748b;
        }
        .user-dropdown .dropdown-divider {
            height: 1px;
            background: #e2e8f0;
            margin: 4px 0;
        }
        /* Main content area */
        .content {
            flex: 1;
            padding: 20px;
            min-width: 0;
        }
        /* Footer styles */
        footer {
            background-color: var(--color-footer-bg, var(--color-primary, #1e3a5f));
            color: var(--color-footer-text, #ffffff);
            padding: 12px 24px;
            font-size: 0.8125em;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .footer-disclaimer {
            /* Same size as the footer links (was 0.72em, ~9.4px): it says who
               runs the portal and for whom, and app-store reviewers read it. */
            font-size: 1em;
            line-height: 1.45;
            color: var(--color-footer-text, #ffffff);
        }
        .footer-disclaimer a {
            color: var(--color-footer-text, #ffffff);
            text-decoration: underline;
        }
        .copyright {
            color: var(--color-footer-text, #ffffff);
        }
        .footer-links {
            display: flex;
            gap: 20px;
        }
        .footer-links a {
            color: var(--color-footer-text, #ffffff);
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .footer-links a:hover {
            color: var(--color-footer-text, #ffffff);
            text-decoration: underline;
        }
        /* Hamburger button - hidden on desktop */
        .hamburger-btn {
            display: none;
            background: none;
            border: none;
            color: var(--color-header-text, #ffffff);
            cursor: pointer;
            padding: 8px;
            margin-right: 8px;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            min-height: 44px;
        }
        .hamburger-btn .material-icons {
            font-size: 1.75em;
        }
        /* Sidebar overlay - hidden on desktop */
        .sidebar-overlay {
            display: none;
        }
        .container {
            display: flex;
            flex: 1 0 auto;
        }

        /* The expanded sidebar pushes page content (it is a flex child)
           rather than overlaying it with a negative margin. An overlay —
           steady or mid-animation — covers page controls and fails WCAG
           2.4.11 (focus-not-obscured) and 2.5.8 (target partially
           obscured); with push, no state can cover a control, so both
           directions of the animation are safe.
           Expansion is never triggered by :hover: a hover-driven push
           reflows page content (e.g. tables collapsing columns), which
           fails WCAG 1.4.13 — content revealed on hover vanishes when the
           pointer moves toward it. It expands only on an explicit toggle
           (.open, via the Main Menu button) or keyboard focus on a nav
           link. The :has() form (not :focus-within) keeps focus on the
           toggle button itself from expanding the sidebar, so clicking
           the toggle closed doesn't get overridden by its own focus.
           .esc-collapsed suppresses the focus-driven expansion: WCAG
           1.4.13 requires content shown on focus to be dismissible with
           Escape WITHOUT moving focus, so Escape adds the class (menu
           script) and the next focus change clears it — tabbing to
           another link is a new trigger and may legitimately re-expand. */
        .sidebar {
            width: 56px;
            flex-shrink: 0;
            overflow-x: hidden;
            background: var(--color-primary, #1e3a5f);
            color: white;
            transition: width 0.3s ease, box-shadow 0.3s ease;
            z-index: 1000;
            position: relative;
        }
        .sidebar.open, .sidebar:not(.esc-collapsed):has(.nav-menu :focus) {
            width: 240px;
            box-shadow: 4px 0 15px rgba(0,0,0,0.2);
        }
        /* Escape-dismissal must be instant: a 0.3s closing animation
           keeps the focus-revealed (reflowed) content on screen after
           the keypress, which still fails 1.4.13's dismissal check.
           Also snap the label clipping so no text lingers mid-collapse. */
        .sidebar.esc-collapsed,
        .sidebar.esc-collapsed .logo-text,
        .sidebar.esc-collapsed .nav-text {
            transition: none;
        }
        .sidebar .logo {
            background: none;
            border: none;
            color: inherit;
            font: inherit;
            width: 100%;
            text-align: left;
            cursor: pointer;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .sidebar .logo .material-icons {
            font-size: 1.5em;
            margin-right: 14px;
            flex-shrink: 0;
        }
        /* Collapsed labels are hidden by clipping (max-width) rather than
           opacity so the text is always full-contrast when any of it is
           rendered (WCAG 1.4.3 — a mid-fade frame scans as ~1:1 contrast),
           while staying in the accessibility tree for link names. */
        .sidebar .logo-text {
            max-width: 0;
            overflow: hidden;
            transition: max-width 0.3s ease;
            font-weight: 500;
            font-size: 0.875em;
        }
        .sidebar.open .logo-text, .sidebar:not(.esc-collapsed):has(.nav-menu :focus) .logo-text {
            max-width: 200px;
        }
        .sidebar .nav-menu {
            list-style: none;
        }
        .sidebar .nav-item {
            position: relative;
        }
        .sidebar .nav-link, .sidebar .nav-parent {
            display: flex;
            align-items: center;
            padding: 10px 16px;
            color: rgba(255,255,255,0.85);
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s ease;
            cursor: pointer;
            font-size: 0.875em;
        }
        .sidebar .nav-link:hover, .sidebar .nav-parent:hover {
            background: rgba(255,255,255,0.08);
            color: #ffffff;
        }
        .sidebar .nav-link .material-icons, .sidebar .nav-parent .material-icons {
            font-size: 1.25em;
            margin-right: 14px;
            flex-shrink: 0;
        }
        .sidebar .nav-item.selected, .sidebar .nav-parent.selected {
            border-left: 4px solid var(--color-nav-selected);
        }
        .sidebar .nav-item.selected .nav-link {
            color: #ffffff;
            background: rgba(255,255,255,0.15);
            font-weight: 600;
        }
        .sidebar .nav-text {
            max-width: 0;
            overflow: hidden;
            transition: max-width 0.3s ease;
        }
        .sidebar.open .nav-text, .sidebar:not(.esc-collapsed):has(.nav-menu :focus) .nav-text {
            max-width: 200px;
        }
        .sidebar .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.9s ease;
            background: rgba(0,0,0,0.15);
        }
        .sidebar.open .nav-item:hover .submenu,
        .sidebar:not(.esc-collapsed):has(.nav-menu :focus) .nav-item:hover .submenu {
            max-height: 500px;
        }
        .sidebar .submenu .nav-link {
            padding-left: 54px;
        }
        .sidebar .nav-parent::after {
            content: '\203A';
            position: absolute;
            right: 15px;
            transform: rotate(90deg);
            transition: transform 0.3s ease;
            opacity: 0;
        }
        .sidebar.open .nav-parent::after, .sidebar:not(.esc-collapsed):has(.nav-menu :focus) .nav-parent::after {
            opacity: 1;
        }
        .sidebar.open .nav-item:hover .nav-parent::after,
        .sidebar:not(.esc-collapsed):has(.nav-menu :focus) .nav-item:hover .nav-parent::after {
            transform: rotate(0deg);
        }
        /* The collapsed sidebar's label on mouse hover (menu script). It sits
           flush against the sidebar's edge so the pointer can move onto it
           (WCAG 1.4.13 hoverable), in the sidebar's own colours, which the
           nav links already use in every theme. */
        .nav-tooltip {
            position: fixed;
            display: none;
            z-index: 1001;
            background: var(--color-primary, #1e3a5f);
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.6);
            border-left: none;
            border-radius: 0 4px 4px 0;
            padding: 6px 12px;
            font-size: 0.875em;
            white-space: nowrap;
            box-shadow: 4px 0 12px rgba(0,0,0,0.2);
        }
        .nav-tooltip.visible {
            display: block;
        }
        li.cart .material-icons {
            position: relative;
            display: inline-block;
        }
        .cart-badge {
            background-color: var(--color-danger-fill, #dc2626);
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 0.6875em;
            font-weight: 600;
            line-height: 1;
            min-width: 18px;
            text-align: center;
            position: absolute;
            top: -6px;
            right: -8px;
            z-index: 10;
            display: none;
    }
        /* Responsive styles */
        @media (max-width: 768px) {
            .hamburger-btn {
                display: flex;
            }
            .header-logo {
                font-size: 1em;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                min-width: 0;
            }
            .sidebar {
                position: fixed;
                left: -260px;
                top: 0;
                height: 100vh;
                width: 260px;
                z-index: 1000;
                transition: left 0.3s ease;
                overflow-y: auto;
            }
            .sidebar.open, .sidebar:not(.esc-collapsed):has(.nav-menu :focus) {
                width: 260px;
            }
            .sidebar.open {
                left: 0;
            }
            /* Mobile drawer is full-width; labels are never clipped. */
            .sidebar .nav-text,
            .sidebar .logo-text {
                max-width: none;
            }
            .sidebar .nav-link, .sidebar .nav-parent {
                padding: 14px 16px;
                min-height: 44px;
            }
            .sidebar .submenu.open {
                max-height: 500px;
            }
            .sidebar.open .nav-parent::after {
                opacity: 1;
            }
            .sidebar-overlay.active {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                z-index: 999;
            }
            .container {
                flex-direction: column;
            }
            footer {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }
            .footer-top {
                flex-direction: column;
                gap: 8px;
            }
            .footer-links {
                justify-content: center;
                /* Five links don't fit one row at phone width (centred, the
                   row ran off both edges); wrap them onto more rows. */
                flex-wrap: wrap;
                gap: 6px 20px;
            }
        }
        .hc-toggle {
            background: none;
            border: 1px solid color-mix(in srgb, var(--color-header-text, #ffffff) 30%, transparent);
            color: color-mix(in srgb, var(--color-header-text, #ffffff) 85%, transparent);
            border-radius: var(--radius-sm);
            cursor: pointer;
            padding: 4px 6px;
            display: inline-flex;
            align-items: center;
            transition: var(--transition);
            margin-right: 12px;
        }
        .hc-toggle:hover {
            background: color-mix(in srgb, var(--color-header-text, #ffffff) 15%, transparent);
            border-color: color-mix(in srgb, var(--color-header-text, #ffffff) 50%, transparent);
        }
        .hc-toggle[aria-pressed="true"] {
            background: color-mix(in srgb, var(--color-header-text, #ffffff) 20%, transparent);
            border-color: var(--color-header-text, #ffffff);
            color: var(--color-header-text, #ffffff);
        }
        .hc-toggle .material-icons {
            font-size: 1.25em;
        }
        .notif-bell-link {
            margin-right: 12px;
        }
        /* WCAG 1.4.10 reflow: the authenticated header (language toggle +
           accessibility button + bell + user menu) must compress to fit a
           320px viewport, so at narrow widths drop the stacked margins, shrink
           the gaps, and collapse the user menu to icon-only (the button keeps
           its accessible name via aria-label). Selectors are qualified with
           .header-actions to outrank the same-specificity component rules
           emitted later in the body by build_header(). */
        @media (max-width: 480px) {
            .header-logo {
                font-size: 0.875em;
                margin-right: 8px;
            }
            header {
                height: 56px;
                padding: 0 12px;
            }
            .header-actions {
                gap: 8px;
            }
            .header-actions .lang-toggle {
                margin-right: 0;
            }
            .header-actions .lang-toggle-btn {
                padding: 4px 7px;
            }
            .header-actions .hc-toggle {
                margin-right: 0;
            }
            .header-actions .notif-bell-link {
                margin-right: 0;
            }
            .header-actions .user-profile-btn {
                padding: 6px;
                gap: 4px;
            }
            .header-actions .user-profile-name {
                display: none;
            }
        }