/* ============================================================================
   SLAM app shell styles (extracted verbatim from base.html's first giant
   inline <style> block during the Phase-2 shell consolidation).
   Cascade position: loaded AFTER css/custom.css, css/style.css and the page's
   {% block extra_css %}, and BEFORE the Font Awesome CDN stylesheet and
   css/app-header.css — identical to where the inline block used to sit.
   Contents: global layout (sidebar/top-nav/#main-content), modals, dropdowns,
   responsive breakpoints, cards, tables, toasts, and theme plumbing.
   ============================================================================ */

    /* Select2 safety net: ensure the original <select> is visually hidden after Select2 initializes.
       This avoids the "double dropdown" look if the CDN CSS fails to load or is delayed. */
    select.select2-hidden-accessible {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    /* Some Select2 init paths (and some versions) rely on aria-hidden instead of the class. */
    select[aria-hidden="true"] {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    /* Our explicit hide marker used after dynamic Select2 init (helps prevent "two dropdowns"). */
    select.slam-select2-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .select2-container { width: 100% !important; }
    /* Prevent horizontal scroll on all devices */
    html {
      overflow-x: hidden;
      max-width: 100vw;
      box-sizing: border-box;
    }
    
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    :root {
      --sidebar-expanded-width: clamp(220px, 24vw, 300px);
      --sidebar-collapsed-width: 80px;
      --modal-horizontal-gutter: clamp(16px, 2vw, 32px);
      --modal-safe-left: var(--sidebar-collapsed-width);
    }

    body.sidebar-expanded {
      --modal-safe-left: var(--sidebar-expanded-width);
    }

    /* --modal-safe-left MUST mirror the sidebar rail's real width at every
       breakpoint (modals and the page action bar are both offset by it).
       The rail's width rules live further down this file; keep these in sync:
       - tablets (601-992px) expand the rail to min(320px, 40vw), wider than
         the desktop clamp() above;
       - tight landscape (<=1200px) widens the collapsed rail to 84px;
       - phones (<=600px) keep the rail off-canvas, so no offset at all. */
    @media (min-width: 601px) and (max-width: 992px) {
      body.sidebar-expanded {
        --modal-safe-left: min(320px, 40vw);
      }
    }

    @media (max-width: 1200px) and (orientation: landscape) {
      body:not(.sidebar-expanded) {
        --modal-safe-left: 84px;
      }
    }

    @media (max-width: 600px) {
      /* Selectors match the landscape rule above in specificity so the
         off-canvas (phone) zero always wins on <=600px viewports. */
      body:not(.sidebar-expanded),
      body.sidebar-expanded {
        --modal-safe-left: 0px;
      }
    }

    /* Remove forced inset so dropdowns can be positioned by Bootstrap/Popper */
    /* .nav-item.dropdown .dropdown-menu { min-width: 240px; } */

    @media (max-width: 1199.98px) {
      html {
        font-size: 15px;
      }
    }

    @media (max-width: 991.98px) {
      html {
        font-size: 14px;
      }
    }

    /* Left Icon Menu Styles */
    #icon-nav {
      width: 60px;
      /* narrower side bar */
      background: var(--sidebar-bg, #f8f9fa);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 9999;
      border-right: 1px solid var(--border-color, #ddd);
    }

    #icon-nav a {
      display: block;
      margin-bottom: 1rem;
      width: 40px;
      height: 40px;
      text-align: center;
      position: relative;
    }

    #icon-nav img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Tooltip styling (simple approach) */
    #icon-nav a:hover::after {
      content: attr(data-label);
      position: absolute;
      left: 60px;
      /* appears to the right of the icon */
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.9rem;
      white-space: nowrap;
    }

    /* Main content offset for the left icon nav */
    #main-content {
      margin-left: var(--sidebar-collapsed-width);
      margin-top: 56px;
      transition: margin-left 0.3s ease, width 0.3s ease;
      overflow-x: hidden;
      padding: 20px;
      position: relative;
      z-index: 1;
      width: calc(100% - var(--sidebar-collapsed-width));
      max-width: calc(100% - var(--sidebar-collapsed-width));
      box-sizing: border-box;
    }

    /* Responsive adjustments for mobile/tablet */
    @media (max-width: 768px) {
      #main-content {
        padding: 12px;
        width: calc(100% - var(--sidebar-collapsed-width));
        max-width: calc(100% - var(--sidebar-collapsed-width));
      }
    }

    /* Keep common media responsive without breaking complex widgets (e.g. Google Maps). */
    #main-content img,
    #main-content video,
    #main-content iframe {
      max-width: 100%;
      height: auto;
    }

    /* Ensure cards and their bodies fill container width */
    #main-content .card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    #main-content .card-body {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Ensure container-fluid uses full width */
    #main-content .container-fluid {
      width: 100%;
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
    }

    /* Ensure Bootstrap columns fill properly */
    #main-content .row {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
    }

    #main-content .col-12,
    #main-content .col-md-6,
    #main-content .col-lg-4,
    #main-content .col-lg-6,
    #main-content [class*="col-"] {
      padding-left: 15px;
      padding-right: 15px;
    }

    /* Stack columns properly on small screens */
    @media (max-width: 767px) {

      #main-content [class*="col-md-"],
      #main-content [class*="col-lg-"] {
        width: 100%;
        max-width: 100%;
      }
    }

    #main-content img,
    #main-content iframe,
    #main-content video {
      height: auto;
      max-width: 100%;
    }

    /* Make tables responsive and fill container width */
    #main-content table {
      width: 100%;
      max-width: 100%;
    }

    /* Ensure table-responsive wrapper works properly */
    #main-content .table-responsive {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    #main-content .table-responsive table {
      width: 100%;
      min-width: 100%;
    }

    /* Ensure forms and inputs fit properly */
    #main-content .form-control,
    #main-content .form-select,
    #main-content input,
    #main-content textarea,
    #main-content select {
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Breadcrumb styling */
    .breadcrumb {
      background: none;
      margin-bottom: 0;
      padding: 0.5rem 1rem;
    }

    /* Chat / floating icons etc. */
    .floating-chat-icon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: transparent;
      color: #fff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      z-index: 10050;
    }

    .chat-modal {
      display: none;
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 360px;
      height: 480px;
      background: #cfe8ff;
      border: 1px solid #ccc;
      z-index: 10000;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      overflow: hidden;
      flex-direction: column;
    }

    .chat-header {
      background: var(--slam-accent);
      color: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Scope chip: what Intellisite can see for this answer. Sits on the
       accent header, so it tints the header colour rather than introducing
       one. */
    .intellisite-scope-chip {
      display: inline-flex;
      align-items: center;
      max-width: 14rem;
      padding: 1px 8px;
      border: 1px solid rgba(var(--bs-white-rgb), .45);
      border-radius: 999px;
      background: rgba(var(--bs-white-rgb), .18);
      color: var(--bs-white);
      font-size: .72rem;
      font-weight: 600;
      line-height: 1.5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-messages {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Suggestion chips above the input. Capability nobody knows about is
       capability nobody uses, and an empty box hints at nothing. */
    .intellisite-chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 0 2px 8px;
    }

    .intellisite-chips-label {
      color: var(--slam-text-muted);
      font-size: .78rem;
    }

    .intellisite-chip {
      padding: 3px 10px;
      border: 1px solid var(--slam-border);
      border-radius: 999px;
      background: var(--slam-surface-1);
      color: var(--slam-text);
      font-size: .78rem;
      line-height: 1.4;
      cursor: pointer;
    }

    .intellisite-chip:hover,
    .intellisite-chip:focus-visible {
      border-color: var(--slam-accent);
      color: var(--slam-accent);
    }

    .chat-input {
      border-top: 1px solid #ccc;
      display: flex;
    }

    .chat-input input {
      flex: 1;
      border: none;
      padding: 10px;
    }

    /* Proper typography inside chat messages — the LLM sends HTML and
       we need paragraphs / lists / code to actually look like those
       instead of all running together. */
    .chat-messages > div {
      padding: 10px 12px;
      margin-bottom: 10px;
      line-height: 1.45;
    }
    .chat-messages > div > strong:first-child {
      display: inline-block;
      margin-bottom: 6px;
      color: var(--slam-accent);
    }
    .chat-messages p {
      margin: 0 0 8px 0;
    }
    .chat-messages p:last-child { margin-bottom: 0; }
    .chat-messages ul,
    .chat-messages ol {
      margin: 6px 0 8px 0;
      padding-left: 20px;
    }
    .chat-messages li {
      margin: 2px 0;
    }
    .chat-messages h2,
    .chat-messages h3,
    .chat-messages h4 {
      margin: 10px 0 6px 0;
      font-size: 1rem;
      font-weight: 600;
    }
    /* The citation and drill-down link. Set apart from the answer so it reads
       as a footnote the eye can skip, but stays legible when checked. */
    .chat-messages .intellisite-provenance {
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid var(--slam-border);
      color: var(--slam-text-muted);
      font-size: .82rem;
    }
    .chat-messages .intellisite-provenance + .intellisite-provenance {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
    .chat-messages .intellisite-provenance a {
      color: var(--slam-accent);
    }
    .chat-messages .intellisite-provenance a + a::before {
      content: '·';
      margin: 0 6px;
      color: var(--slam-text-muted);
    }

    .chat-messages code {
      background: rgba(0, 0, 0, 0.06);
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 0.88em;
    }
    .chat-messages a {
      color: var(--slam-accent);
      text-decoration: underline;
      word-break: break-word;
    }
    .chat-messages a:hover { color: var(--slam-accent-hover); }

    html[data-theme="dark"] .chat-messages > div > strong:first-child { color: #6ea8fe; }
    html[data-theme="dark"] .chat-messages code { background: rgba(255, 255, 255, 0.1); }
    html[data-theme="dark"] .chat-messages a { color: #6ea8fe; }

    .chat-input button {
      border: none;
      background: var(--slam-accent);
      color: #fff;
      padding: 0 20px;
      cursor: pointer;
    }
    .ai-page-help-card {
      margin: 8px 10px 0;
      padding: 9px 10px;
      border: 1px solid rgba(var(--slam-accent-rgb), 0.18);
      border-radius: 8px;
      background: rgba(var(--slam-accent-rgb), 0.08);
      font-size: 0.85rem;
    }
    .ai-page-help-card-title {
      font-weight: 600;
      margin-bottom: 4px;
    }
    .ai-page-help-card-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .ai-page-help-card button {
      border: 0;
      border-radius: 5px;
      padding: 4px 8px;
      background: var(--slam-accent);
      color: #fff;
      cursor: pointer;
      font-size: 0.8rem;
    }
    .ai-message-feedback {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }
    .ai-message-feedback button {
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 5px;
      padding: 2px 7px;
      background: rgba(0,0,0,.04);
      cursor: pointer;
      font-size: 0.8rem;
    }
    html[data-theme="dark"] .ai-page-help-card {
      background: rgba(110, 168, 254, 0.12);
      border-color: rgba(110, 168, 254, 0.25);
    }
    html[data-theme="dark"] .ai-message-feedback button {
      border-color: rgba(255,255,255,.2);
      background: rgba(255,255,255,.08);
      color: #f8f9fa;
    }

    /* Top navigation bar */
    .top-nav {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      height: 56px;
      background: var(--nav-bg);
      border-bottom: 1px solid var(--border-color);
      z-index: 8000;
      padding: 0 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      overflow: visible !important;
    }

    .top-nav::-webkit-scrollbar {
      height: 6px;
    }

    .top-nav::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.45);
      border-radius: 999px;
    }

    /* Weather widget in nav */
    .weather-nav-widget {
      position: relative;
      z-index: 1041;
      display: inline-block;
    }

    .weather-nav-widget .dropdown-menu {
      position: absolute !important;
      z-index: 1042;
      padding: 0;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: min(360px, calc(100vw - 16px));
      min-width: 280px;
      max-width: calc(100vw - 16px);
    }

    .weather-nav-widget .weather-widget.card {
      margin: 0;
      border: none;
      border-radius: 8px;
    }

    /* Prevent cramped/overlapping weather panes inside the nav dropdown */
    .weather-nav-widget .slam-weather-card.slam-weather-card--compact .slam-weather-card__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .weather-nav-widget .slam-weather-card.slam-weather-card--compact .slam-weather-stat {
      align-items: flex-start;
    }

    .weather-nav-widget .slam-weather-card.slam-weather-card--compact .slam-weather-stat__top {
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .weather-nav-widget .slam-weather-card.slam-weather-card--compact .slam-weather-stat__value {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      line-height: 1.2;
    }

    .weather-nav-widget .btn-link {
      color: var(--text-color);
      padding: 0.5rem;
      font-size: 1.1rem;
      position: relative;
      z-index: 1041;
    }

    .weather-nav-widget .btn-link:hover {
      color: var(--slam-accent);
    }

    /* Dropdown menus */
    .dropdown {
      position: relative;
      z-index: 2000;
      /* Above top-nav */
      display: inline-block;
    }

    .dropdown-toggle {
      position: relative;
      z-index: 2001;
    }

    .dropdown-menu {
      position: absolute !important;
      z-index: 6000;
      /* Higher than header and content */
      background-color: var(--bs-body-bg);
      border: 1px solid var(--bs-border-color);
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
      max-height: min(70vh, 480px);
      overflow-y: auto;
      animation: dropdownFade 0.16s ease;
    }

    .dropdown-menu::-webkit-scrollbar {
      width: 6px;
    }

    .dropdown-menu::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.5);
      border-radius: 999px;
    }

    @keyframes dropdownFade {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dropdown-item {
      padding: 0.5rem 1rem;
    }

    .dropdown-item:hover {
      background-color: #f8f9fa;
    }

    .dropdown-item.active,
    .dropdown-item:active {
      background-color: var(--slam-accent);
      color: var(--slam-accent-contrast);
      font-weight: 700;
    }

    /* Company logo in nav */
    .company-logo {
      max-height: 40px;
      max-width: 150px;
      object-fit: contain;
      margin-right: 15px;
    }

    .nav-company-display {
      display: flex;
      align-items: center;
    }

    /* Left side nav controls */
    .nav-controls-mount {
      flex: 1 1 auto;
      min-width: 0;
      overflow: visible;
      display: flex;
      align-items: center;
    }

    .nav-left-fixed {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 56px;
    }

    .nav-critical {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: 0.5rem;
    }

    .nav-critical a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    @media (max-width: 520px) {
      .nav-critical {
        gap: 0.35rem;
        margin-left: 0.25rem;
      }

      .nav-critical a {
        font-size: 1rem;
      }
    }

    .nav-label {
      margin-left: 0.35rem;
      font-weight: 500;
      white-space: nowrap;
      transition: opacity 0.15s ease, width 0.15s ease;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(320px, 30vw);
    }

    @media (max-width: 768px) {
      .nav-label.nav-label-critical {
        max-width: 60vw;
      }
    }

    .nav-label.nav-label-critical {
      font-weight: 600;
    }

    .nav-controls,
    .nav-utility,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      pointer-events: auto;
      flex: 1 1 auto;
      min-width: 0;
      flex-wrap: nowrap;
      scroll-snap-align: start;
      position: relative;
      overflow: visible;
      /* Allow dropdowns to escape */
    }

    .nav-controls>* {
      flex: 0 0 auto;
    }

    .nav-controls li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    body.nav-compact .nav-label.nav-label-soft {
      display: none;
    }

    body.nav-super-compact .nav-label.nav-label-critical {
      display: none;
    }

    .nav-overflow {
      display: none;
      align-items: center;
      position: relative;
      z-index: 6001;
    }

    .nav-overflow.active {
      display: flex;
    }

    .nav-overflow-btn {
      border: none;
      background: transparent;
      color: var(--text-color);
      padding: 0.35rem 0.6rem;
      border-radius: 8px;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-overflow-btn:hover,
    .nav-overflow-btn:focus {
      background: var(--hover-bg);
      color: var(--link-color);
    }

    .nav-overflow-menu {
      display: none;
      /* Fixed + right-anchored + viewport-clamped so the panel can never run
         off either edge of the screen. It used to be absolutely positioned and
         anchored to the "…" button (right: 0), which pushed it off the left
         edge on narrow / tablet widths when there wasn't ~460px of room to the
         button's left. --nav-overflow-top is set in JS from the toggle button's
         position; 64px is a safe fallback. */
      position: fixed;
      top: var(--nav-overflow-top, 64px);
      right: 8px;
      left: auto;
      background: var(--nav-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 14px 38px rgba(15, 23, 42, 0.25);
      padding: 0.75rem;
      width: min(460px, calc(100vw - 16px));
      max-width: calc(100vw - 16px);
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 6002;
    }

    .nav-overflow-menu.open {
      display: block;
    }

    /* Legacy modifier retained as an alias; the base style is already
       viewport-safe, so this just reaffirms the fixed positioning. */
    .nav-overflow-menu.open.nav-overflow-menu-fixed {
      position: fixed;
    }

    .nav-overflow-menu .nav-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      flex: 0 0 auto;
      width: 100%;
    }

    .nav-overflow-menu .nav-controls>* {
      width: 100%;
    }

    .nav-overflow-menu .nav-controls .ms-3 {
      margin-left: 0 !important;
    }

    .nav-overflow-menu .nav-label {
      display: inline-block !important;
    }

    .nav-overflow-menu [data-nav-priority-rank] {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0.65rem;
      border-radius: 8px;
      margin-bottom: 0.4rem;
    }

    .nav-overflow-menu [data-nav-priority-rank]:hover {
      background: var(--hover-bg);
    }

    .nav-overflow-menu [data-nav-priority-rank].weather-nav-widget {
      flex-direction: column;
      align-items: stretch;
      gap: 0.35rem;
    }

    .nav-overflow-menu [data-nav-priority-rank] .btn-link {
      justify-content: flex-start;
      width: 100%;
      text-align: left;
      padding-left: 0;
    }

    .nav-item.dropdown {
      position: relative;
    }

    .nav-utility>* {
      flex: 0 0 auto;
    }

    .nav-controls a,
    .nav-controls button,
    .nav-controls span,
    .nav-utility a,
    .nav-utility button,
    .nav-utility span {
      white-space: nowrap;
    }

    /* Horizontal scroll is handled by .top-nav; dropdowns must overlay, so child rows don't scroll */

    /* Home button */
    .home-btn {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border: none;
      background: none;
      color: var(--text-color);
      text-decoration: none;
      font-size: 1.1rem;
    }

    .home-btn:hover {
      background: var(--hover-bg);
      border-radius: 4px;
    }

    .home-btn i {
      margin-right: 5px;
    }

    /* Left hamburger menu */
    .left-menu {
      position: fixed;
      top: 56px;
      left: 0;
      height: calc(100vh - 56px);
      background-color: var(--sidebar-bg, #f8f9fa);
      transition: width 0.3s ease;
      overflow-x: hidden;
      overflow-y: scroll;
      padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
      width: 60px;
      border-right: 1px solid var(--border-color, #dee2e6);
      z-index: 1039;
    }

    /* Give the collapsed (icon-only) menu enough width to show icon + scrollbar without overlap */
    body:not(.sidebar-expanded) .left-menu {
      width: var(--sidebar-collapsed-width);
    }

    body:not(.sidebar-expanded) #main-content {
      margin-left: var(--sidebar-collapsed-width);
    }

    .left-menu.expanded {
      width: var(--sidebar-expanded-width);
      /* Responsive width when expanded */
    }

    /* Ensure scrollbar doesn't overlap content in expanded state */
    .left-menu.expanded .nav {
      padding-right: 16px;
    }

    .left-menu .nav-link {
      padding: 0.6rem 0.75rem;
      color: #333;
      display: flex;
      align-items: center;
      text-decoration: none;
      /* nowrap is only for the collapsed icon rail; expanded labels wrap
         further down so submenu names stay fully readable. */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .left-menu .nav-link:hover {
      background-color: #e9ecef;
    }

    .left-menu .nav-link i {
      width: 20px;
      text-align: center;
      margin-right: 0.5rem;
      /* tighten icon spacing for narrower menu */
      flex-shrink: 0;
    }

    .left-menu .nav-link span {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .left-menu.expanded .nav-link span {
      opacity: 1;
    }

    /* Collapsed menu: show icons-only column; hide labels, star buttons, and drag handles */
    .left-menu:not(.expanded) .nav-link-row {
      justify-content: center;
      width: 100%;
      position: relative;
    }

    .left-menu:not(.expanded) .nav-link {
      display: flex !important;
      align-items: center;
      justify-content: center;
      padding: 0.6rem 0;
      width: 100%;
      overflow: visible;
      min-height: 48px;
      flex: 1;
    }

    .left-menu:not(.expanded) .nav-link i {
      margin-right: 0 !important;
      width: 24px;
      flex-shrink: 0;
    }

    /* Hide all text, stars, headers, and drag handles when collapsed */
    .left-menu:not(.expanded) .nav-link span,
    .left-menu:not(.expanded) .star-item,
    .left-menu:not(.expanded) .drag-handle,
    .left-menu:not(.expanded) .nav-header span,
    .left-menu:not(.expanded) .remove-star {
      display: none !important;
    }

    /* Keep nav-header icons visible and centered */
    .left-menu:not(.expanded) .nav-header {
      justify-content: center;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .left-menu:not(.expanded) .nav-header i {
      margin-right: 0 !important;
    }

    .left-menu .collapse {
      background-color: rgba(0, 0, 0, 0.03);
    }

    /* Submenus stay collapsed by default - only show when .show class is added by Bootstrap */
    .left-menu:not(.expanded) .collapse:not(.show) {
      display: none !important;
    }

    /* When submenu is expanded (has .show class), display it with icon-only styling */
    .left-menu:not(.expanded) .collapse.show {
      display: block !important;
    }

    /* Make sure submenu items are also icon-only when collapsed */
    .left-menu:not(.expanded) .collapse .nav-link {
      padding: 0.5rem 0;
      min-height: 44px;
    }

    .left-menu:not(.expanded) .collapse .nav-link i {
      width: 20px;
      font-size: 0.85rem;
    }

    /* Add a subtle indicator to parent items that have submenus */
    .left-menu:not(.expanded) .nav-link[data-bs-toggle="collapse"]::after {
      content: '';
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      background-color: currentColor;
      border-radius: 50%;
      opacity: 0.5;
    }

    .left-menu:not(.expanded) .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
      opacity: 1;
    }

    /* Hide Main Menu toggle - center the switch when collapsed */
    .left-menu:not(.expanded) .nav-toggle-container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .left-menu:not(.expanded) .nav-menu-toggle {
      justify-content: center;
    }

    .left-menu:not(.expanded) .toggle-label {
      display: none !important;
    }

    /* Ensure the inner nav has breathing room at the bottom so last items are reachable */
    .left-menu .nav {
      padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
      padding-right: 4px;
      padding-left: 4px;
      /* nowrap is load-bearing for the favourite stars. Bootstrap's .nav is a
         wrapping flex container, and in a *multi-line* flex container items
         stretch to their flex line's cross size — which the widest item's
         content sets — instead of to the container's width. So one long row
         ("Create New Blank Timesheet" at submenu indent) made every row in the
         column 309px wide inside a 289px rail, and the rail's
         overflow-x: hidden cut the star column off the right-hand edge. Every
         submenu row lost its star while short top-level rows kept theirs.
         Single-line means items stretch to the rail instead, so long labels
         take the ellipsis they were always meant to and the star stays in view. */
      flex-wrap: nowrap;
    }

    /* Collapsed menu needs minimal horizontal padding for icons to be centered */
    .left-menu:not(.expanded) .nav {
      padding-right: 0;
      padding-left: 0;
    }

    /* Extra space in tight landscape viewports */
    @media (max-width: 1200px) and (orientation: landscape) {
      .left-menu {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
      }

      /* Slightly more width when collapsed on tight landscape screens */
      body:not(.sidebar-expanded) .left-menu {
        width: 84px;
      }

      body:not(.sidebar-expanded) #main-content {
        margin-left: 84px;
      }

      .left-menu .nav {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* Mobile & Tablet: Ensure collapsed nav icons are always visible */
    @media (max-width: 1200px) {
      .left-menu:not(.expanded) .nav-link {
        width: 100%;
        min-height: 48px;
        padding: 0.6rem 4px;
      }

      .left-menu:not(.expanded) .nav-link i {
        width: 24px;
        flex-shrink: 0;
      }
    }

    /* Add a subtle fade at the bottom to hint scrollability (non-interactive) */


    #main-content {
      margin-left: var(--sidebar-collapsed-width);
      /* Match minimized menu width */
      transition: margin-left 0.3s ease;
    }

    #main-content.shifted {
      margin-left: var(--sidebar-expanded-width);
      width: calc(100% - var(--sidebar-expanded-width));
      /* Match expanded menu width */
    }

    /* Adjust submenu styling */
    .left-menu .collapse .nav-link {
      padding-left: 0.5rem;
    }

    /* Hamburger button */
    .hamburger-btn {
      border: none;
      background: none;
      padding: 0.5rem;
      cursor: pointer;
    }

    /* Star button styling */
    .star-item,
    .remove-star {
      display: none;
      padding: 0;
      margin-left: auto;
      color: var(--bs-warning);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }

    /* The gold has to be declared on the icon, not just the button. These are
       .btn-link buttons, and slam/components.css (a later layer) sets
       `.btn-link { color: var(--bs-link-color) !important }`, which beats the
       button rule above on any specificity — that is why the favourite stars
       turned link-blue and stopped reading as stars. The <i> is not a .btn-link,
       so colouring it directly wins without another !important. Both states are
       gold; the filled (fas) vs outline (far) glyph carries starred/unstarred. */
    .star-item > i,
    .remove-star > i {
      color: var(--bs-warning);
    }

    .star-item:hover,
    .remove-star:hover {
      transform: scale(1.2);
    }

    /* When the menu is expanded, the (add/remove) star button must always be
       visible and must reserve its own fixed-width slot so it can never be
       pushed out of view or clipped by the sidebar's horizontal overflow.
       This applies equally to top-level items, submenu (e.g. Reports,
       Attendance) items, and the cloned rows in the Starred Items section. */
    .left-menu.expanded .star-item,
    .left-menu.expanded .remove-star {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto !important;
      width: 26px;
      min-width: 26px;
      height: 26px;
      font-size: 0.95rem;
      line-height: 1;
    }

    /* Nav header for starred items section */
    .nav-header {
      display: flex;
      align-items: center;
      font-weight: 600;
      color: var(--muted-text);
    }

    .nav-header i {
      margin-right: 0.5rem;
      color: #ffc107;
    }

    /* Group label inside a submenu, e.g. "Create & manage" within HSE.
       Separates links people act on from links people author with, so a
       coordinator looking for "where do I make one" has somewhere to look.
       Not a link and not starrable, so it opts out of the gold star icon
       colour the starred-items header uses. */
    .nav-subhead {
      padding: 0.5rem 0.75rem 0.2rem 1.25rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.72;
    }

    .nav-subhead i {
      color: inherit;
      font-size: 0.7rem;
    }

    .nav-subhead + .nav-link-row .nav-link {
      padding-top: 0.3rem;
    }

    /* In the collapsed rail every label is hidden, which would leave these
       headers as an unexplained icon between links. Drop them entirely. */
    .left-menu:not(.expanded) .nav-subhead {
      display: none !important;
    }

    /* Nested submenu indentation */
    .left-menu .collapse .collapse .nav-link {
      padding-left: 2.5rem;
    }

    /* Add these theme-related CSS rules */
    :root[data-theme="dark"] {
      --bg-color: #222;
      --text-color: #fff;
      --nav-bg: #333;
      --sidebar-bg: #2d2d2d;
      --border-color: #444;
      --card-bg: #333;
      --table-bg: #2d2d2d;
      --table-stripe: #383838;
      --input-bg: #2d2d2d;
      --input-text: #fff;
      --link-color: #8ab4f8;
      --hover-bg: #404040;
      --muted-text: #aaa;
    }

    :root[data-theme="light"] {
      --bg-color: #fff;
      --text-color: #333;
      --nav-bg: #f8f9fa;
      --sidebar-bg: #ffffff;
      --border-color: #ddd;
      --card-bg: #fff;
      --table-bg: #fff;
      --table-stripe: #f8f9fa;
      --input-bg: #fff;
      --input-text: #333;
      --link-color: #417893;
      --hover-bg: #e9ecef;
      --muted-text: #666;
    }

    /* Apply theme variables */
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    /* Card styling */
    .card {
      background-color: var(--card-bg);
      border-color: var(--border-color);
    }

    /* Table styling */
    .table {
      color: var(--text-color);
    }

    .table-striped tbody tr:nth-of-type(odd) {
      background-color: var(--table-stripe);
    }

    .table td,
    .table th {
      border-color: var(--border-color);
    }

    /* Form inputs */
    input:not([type="submit"]),
    textarea,
    select,
    .form-control {
      background-color: var(--input-bg);
      color: var(--input-text);
      border-color: var(--border-color);
    }

    /* Links */
    a {
      color: var(--link-color);
    }

    a:hover {
      color: var(--link-color);
      opacity: 0.8;
    }

    /* Navigation elements */
    #icon-nav,
    .top-nav {
      background: var(--nav-bg);
      border-color: var(--border-color);
    }

    .left-menu {
      background: var(--sidebar-bg, var(--nav-bg));
      border-color: var(--border-color);
    }

    .left-menu .nav-link {
      color: var(--text-color);
    }

    .left-menu .nav-link:hover {
      background: var(--hover-bg);
    }

    /* Dropdown menus */
    .dropdown-menu {
      background-color: var(--card-bg);
      border-color: var(--border-color);
    }

    .dropdown-menu .dropdown-item {
      color: var(--text-color);
    }

    .dropdown-menu .dropdown-item:hover {
      background-color: var(--hover-bg);
      color: var(--text-color);
    }

    .dropdown-divider {
      border-color: var(--border-color);
    }

    /* Chat modal */
    .chat-modal {
      background: var(--card-bg);
      border-color: var(--border-color);
    }

    .chat-messages {
      color: var(--text-color);
    }

    .chat-input input {
      background-color: var(--input-bg);
      color: var(--input-text);
      border-color: var(--border-color);
    }

    /* Breadcrumbs */
    .breadcrumb {
      background-color: var(--card-bg);
      color: var(--text-color);
    }

    /* Muted text */
    .text-muted {
      color: var(--muted-text) !important;
    }

    /* Button overrides for better contrast */
    .btn-secondary {
      background-color: var(--nav-bg);
      border-color: var(--border-color);
      color: var(--text-color);
    }

    .btn-secondary:hover {
      background-color: var(--hover-bg);
      border-color: var(--border-color);
      color: var(--text-color);
    }

    /* Show/hide theme icons based on current theme */
    [data-theme="light"] .theme-icon-when-light,
    [data-theme="dark"] .theme-icon-when-dark {
      display: inline-block;
    }

    [data-theme="light"] .theme-icon-when-dark,
    [data-theme="dark"] .theme-icon-when-light {
      display: none;
    }

    /* Ensure proper text contrast in dark mode for non-authenticated pages */
    [data-theme="dark"] body,
    [data-theme="dark"] .text-gray-900,
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6,
    [data-theme="dark"] p,
    [data-theme="dark"] label {
      color: var(--text-color) !important;
    }

    [data-theme="dark"] .bg-gray-50 {
      background-color: var(--bg-color) !important;
    }

    [data-theme="dark"] .bg-white {
      background-color: var(--card-bg) !important;
    }

    [data-theme="dark"] .text-gray-600 {
      color: var(--muted-text) !important;
    }

    /* Ensure proper button contrast */
    [data-theme="dark"] .btn-blue-600 {
      background-color: var(--slam-accent) !important;
      color: #ffffff !important;
    }

    [data-theme="dark"] .btn-blue-600:hover {
      background-color: var(--slam-accent-hover) !important;
    }

    /* Fix border colors in dark mode */
    [data-theme="dark"] .border-gray-300 {
      border-color: var(--border-color) !important;
    }

    /* Fix input backgrounds in dark mode */
    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea {
      background-color: var(--input-bg) !important;
      color: var(--input-text) !important;
      border-color: var(--border-color) !important;
    }

    [data-theme="dark"] input::placeholder {
      color: var(--muted-text) !important;
    }

    /* Fix select2 dropdown in dark mode */
    [data-theme="dark"] .select2-dropdown,
    [data-theme="dark"] .select2-container--default .select2-selection--single {
      background-color: var(--input-bg) !important;
      color: var(--input-text) !important;
      border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
      background-color: var(--hover-bg) !important;
    }

    [data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: var(--link-color) !important;
      color: #ffffff !important;
    }

    /* Notification badge styling */
    .position-relative {
      position: relative !important;
      z-index: 1;
    }

    .badge {
      font-size: 0.75rem;
      padding: 0.25em 0.6em;
    }

    /* Ensure icons are properly sized */
    .nav-controls i {
      font-size: 1.2rem;
    }

    /* Add hover effect */
    .nav-controls a:hover {
      opacity: 0.8;
    }

    /* Notification Styles */
    .notification-dropdown {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .notification-dropdown .dropdown-item {
      white-space: normal;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .notification-dropdown .dropdown-item:last-child {
      border-bottom: none;
    }

    .notification-dropdown .dropdown-item:hover {
      background-color: rgba(0, 0, 0, 0.02);
    }

    .notification-dropdown .dropdown-header {
      background-color: #f8f9fa;
      font-weight: 600;
      padding: 0.75rem 1rem;
    }

    .notification-dropdown .text-muted {
      font-size: 0.875rem;
    }

    /* Form dropdowns (for Critical Rating etc) */
    .form-group .dropdown,
    .form-control .dropdown {
      position: relative;
      z-index: 1030;
    }

    .form-group .dropdown-menu,
    .form-control .dropdown-menu {
      z-index: 1042;
    }

    .form-group .dropdown.show,
    .form-control .dropdown.show {
      z-index: 1041;
    }

    .form-group .dropdown.show .dropdown-menu,
    .form-control .dropdown.show .dropdown-menu {
      z-index: 1042;
    }

    /* Right navigation items container (QR invite, weather, theme, user menu).
       flex: 0 0 auto is load-bearing: the left group's children can't shrink,
       so if this cluster were allowed to compress, the left group would spill
       across it and bury the icons. Holding its width also keeps
       navRight.offsetWidth honest for the overflow calculation in base.html,
       which subtracts it to decide what to collapse. The z-index keeps these
       icons painted above the onboarding pill during the frame between an
       async item appearing and the header re-measuring. Spacing comes from
       this single gap — items in here deliberately carry no me-* margins. */
    .nav-right {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      gap: 0.5rem;
      position: relative;
      z-index: 1041;
    }

    /* A long display name must not be able to grow the cluster into the page
       content now that it no longer shrinks — truncate it instead. */
    #userMenu {
      max-width: min(240px, 22vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Notifications nav */
    .notifications-nav {
      position: relative;
      z-index: 1041;
    }

    /* User menu dropdown */
    .user-menu {
      position: relative;
      z-index: 1041;
    }

    .user-menu .dropdown-menu {
      position: absolute !important;
      right: 0;
      z-index: 1042;
    }

    /* Ensure all interactive elements in the nav are clickable */
    .top-nav a,
    .top-nav button,
    .dropdown-menu a,
    .dropdown-menu button {
      cursor: pointer;
    }

    /* Remove pointer-events: none from top-nav */
    .top-nav {
      pointer-events: auto !important;
    }

    /* Ensure dropdowns stay above content */
    .dropdown-menu.show {
      z-index: 7000 !important;
      display: block !important;
    }

    /* Weather widget specific fixes */
    .weather-nav-widget .dropdown-menu.show {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
    }

    @media (max-width: 575.98px) {
      .weather-nav-widget .dropdown-menu {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        margin-top: 0 !important;
      }

      .weather-nav-widget .slam-weather-card.slam-weather-card--compact .slam-weather-card__stats {
        grid-template-columns: 1fr;
      }
    }

    /* Ensure all content within main-content has a lower z-index */
    #main-content>* {
      position: relative;
      z-index: 1;
    }

    /* Add this CSS for the form-based dropdown items */
    .dropdown-item-form {
      margin: 0;
      padding: 0;
    }

    .dropdown-item-form .dropdown-item {
      text-align: left;
      width: 100%;
      border: none;
      background-color: transparent;
      padding: 0.25rem 1rem;
      font-weight: normal;
      color: var(--text-color);
    }

    .dropdown-item-form .dropdown-item.active,
    .dropdown-item-form .dropdown-item.active:hover,
    .dropdown-item-form .dropdown-item.active:focus {
      color: var(--slam-accent-contrast) !important;
      background-color: var(--slam-accent) !important;
      font-weight: 700;
    }

    .dropdown-item-form .dropdown-item:hover {
      background-color: var(--hover-bg);
      color: var(--text-color);
    }

    /* --- MOBILE RESPONSIVE ENHANCEMENTS --- */
    @media (max-width: 1200px) {
      .top-nav {
        padding: 0 0.75rem;
      }
    }

    /* Tablet (601px - 992px): Keep nav visible like PC */
    @media (min-width: 601px) and (max-width: 992px) {
      .left-menu {
        width: 80px;
        /* Show collapsed icons by default */
        left: 0;
        position: fixed;
      }

      .left-menu.expanded {
        width: min(320px, 40vw);
      }

      #main-content {
        margin-left: var(--sidebar-collapsed-width);
        padding: 15px;
        padding-top: 70px;
      }

      #main-content.shifted {
        margin-left: min(320px, 40vw);
      }

      /* Ensure icons are visible in collapsed state */
      .left-menu:not(.expanded) .nav-link i {
        display: inline-block !important;
        width: 24px;
      }
    }

    /* Small Mobile (below 600px): Hide nav by default */
    @media (max-width: 600px) {

      #icon-nav,
      .left-menu {
        left: -80px;
        width: 80px;
        position: fixed;
        z-index: 10500;  /* Increased to be above other elements */
        transition: left 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: var(--sidebar-bg, #ffffff) !important;
      }

      #icon-nav.open,
      .left-menu.open,
      .left-menu.expanded {
        left: 0;
        width: min(85vw, 320px);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
        background-color: var(--sidebar-bg, #ffffff) !important;
      }
      
      /* Show icons AND text when menu is opened on mobile */
      .left-menu.expanded .nav-link {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0.6rem 0.75rem !important;
      }
      
      .left-menu.expanded .nav-link i {
        display: inline-block !important;
        width: 24px;
        margin-right: 0.5rem !important;
        flex-shrink: 0;
      }
      
      .left-menu.expanded .nav-link span {
        display: inline-block !important;
        opacity: 1 !important;
        white-space: normal;
        overflow: visible;
      }
      
      /* Show star buttons (both add-star and remove-star) when expanded on mobile.
         Force visibility so users can always unstar items at any screen size. */
      .left-menu.expanded .star-item,
      .left-menu.expanded .remove-star {
        display: block !important;
        flex: 0 0 auto !important;
      }

      /* On narrow mobile widths, make sure starred-row contents share space
         without clipping the unstar button at the right edge. */
      .left-menu.expanded .starred-row {
        flex-wrap: nowrap;
      }

      .left-menu.expanded .starred-row .drag-handle {
        font-size: 1em;
        margin-right: 6px;
        flex: 0 0 auto;
      }

      .top-nav {
        left: 0;
        width: 100vw;
        min-width: 0;
        padding: 0 0.5rem;
        gap: 0.5rem;
      }

      .nav-controls,
      .nav-utility {
        overflow-x: auto;
      }

      /* Fix main-content width to prevent right-side cutoff */
      #main-content,
      #main-content.shifted {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px;
        padding-top: 66px;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        box-sizing: border-box;
      }

      .breadcrumb {
        padding: 0.25rem 0.5rem;
      }
      
      /* Ensure all cards and containers fit within viewport */
      #main-content .card,
      #main-content .container-fluid,
      #main-content .row {
        max-width: 100%;
        overflow-x: hidden;
      }
      
      /* Prevent horizontal scroll on mobile */
      body {
        overflow-x: hidden;
        max-width: 100vw;
      }
      
      /* Fix helper drawer and floating elements positioning */
      #help-drawer,
      #help-drawer-fab,
      .floating-chat-icon {
        right: 8px !important;
      }
      
      /* Ensure buttons and action elements are accessible */
      #main-content .btn-group,
      #main-content .card-header .btn,
      #main-content .d-flex.gap-2 {
        flex-wrap: wrap;
      }
      
      /* Force all images and media to fit */
      #main-content img,
      #main-content video,
      #main-content iframe {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Add backdrop when nav is open on mobile */
      .left-menu.expanded::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.25);
        z-index: -1;
        pointer-events: none;
        transition: background 0.2s ease;
      }

      html[data-theme="light"] .left-menu.expanded::before {
        background: rgba(0, 0, 0, 0.08);
      }
      
      /* Ensure floating action buttons don't interfere */
      .floating-chat-icon,
      #help-drawer-fab,
      #open-feedback-fab {
        z-index: 10499;  /* Below nav menu when open */
      }
      
      .left-menu.expanded ~ * .floating-chat-icon,
      .left-menu.expanded ~ * #help-drawer-fab,
      .left-menu.expanded ~ * #open-feedback-fab {
        pointer-events: none;
        opacity: 0.3;
      }
    }

    .nav-link-row {
      display: flex;
      align-items: center;
      width: 100%;
      /* Allow children to share space without star getting pushed off the edge */
      min-width: 0;
      /* Never wrap the star onto a clipped second line; keep it on the row */
      flex-wrap: nowrap;
    }

    .nav-link-row .star-item,
    .nav-link-row .remove-star {
      margin-left: 6px;
      /* bring star closer to label */
      margin-right: 4px;
      /* keep slight inset from right edge */
      z-index: 2;
      position: relative;
      /* Never shrink/wrap the star button; it must always reserve its space so it stays viewable */
      flex: 0 0 auto;
      min-width: 24px;
      width: auto;
    }

    .nav-link-row .nav-link {
      flex: 1 1 auto;
      padding-right: 0.25rem;
      /* free up space for star in narrow sidebar */
      /* Critical: allow the flex item to shrink below its intrinsic content width
         so long labels get truncated/wrapped instead of pushing the star off-screen */
      min-width: 0;
    }

    /* Let long label text truncate gracefully so the star always remains in view.
       Without flex:1 1 0 + min-width:0 the span (flex child) refuses to shrink,
       expanding the row beyond the sidebar width and clipping the star via
       overflow:hidden. Scoped to the expanded menu above the mobile breakpoint so
       phones (which intentionally wrap labels) are unaffected. */
    .left-menu .nav-link span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Expanded rail: wrap labels instead of ellipsizing them.
       nowrap + text-overflow:ellipsis live on .left-menu and .nav-link themselves,
       so they inherit into every submenu span ("Documents & Polic…",
       "Create Briefing or …"). -webkit-line-clamp made this worse: on a flex
       child without a definite width it collapses back to a single-line
       ellipsis. Plain wrapping, with nowrap lifted on the ancestors, is what
       actually keeps the destination readable. The star stays on the row
       because .nav-link-row is still flex-wrap:nowrap. */
    .left-menu.expanded {
      white-space: normal;
    }

    .left-menu.expanded .nav-link {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      align-items: flex-start;
    }

    .left-menu.expanded .nav-link > i {
      margin-top: 0.2em;
    }

    .left-menu.expanded .nav-link span:not(.badge),
    .left-menu.expanded .nav-subhead span,
    .left-menu.expanded .nav-header span {
      flex: 1 1 0;
      min-width: 0;
      display: block;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.25;
    }

    /* ...existing styles... */
    .starred-row {
      position: relative;
      display: flex;
      align-items: center;
      cursor: default;
      transition: box-shadow 0.2s, background 0.2s, margin 0.2s;
      /* Allow flex children to shrink so the unstar button stays visible */
      min-width: 0;
      /* Keep drag-handle, label and unstar button on a single row so the star
         is never wrapped onto a clipped line */
      flex-wrap: nowrap;
    }

    /* The favourites label (cloned nav-link) must shrink/truncate so the unstar
       star button is always reachable on the right. */
    .starred-row > .nav-link {
      flex: 1 1 auto;
      min-width: 0;
    }

    .starred-row .drag-handle {
      cursor: grab;
      margin-right: 8px;
      color: #888;
      font-size: 1.1em;
      transition: color 0.2s;
      /* Reserve the handle's space; never let it shrink and push the row wider */
      flex: 0 0 auto;
      min-width: 16px;
      text-align: center;
    }

    .starred-row .drag-handle:hover {
      color: var(--slam-accent);
    }

    .starred-row.dragging {
      opacity: 0.7;
      box-shadow: 0 4px 16px 0 rgba(var(--slam-accent-rgb), 0.15);
      z-index: 10;
      background: #e9f1ff;
    }

    .starred-row.placeholder {
      background: rgba(var(--slam-accent-rgb), 0.1);
      border: 2px dashed var(--slam-accent);
      min-height: 44px;
      transition: background 0.2s, border 0.2s, min-height 0.2s;
    }

    /* Drag placeholder styling */
    .drag-placeholder {
      height: 2px !important;
      background: var(--slam-accent) !important;
      margin: 2px 0 !important;
      border-radius: 1px !important;
      transition: all 0.2s ease !important;
    }

    /* New drag placeholder with better visual feedback */
    .drag-placeholder-space {
      background: linear-gradient(135deg, rgba(var(--slam-accent-rgb), 0.1), rgba(var(--slam-accent-rgb), 0.2));
      border: 2px dashed var(--slam-accent);
      border-radius: 8px;
      margin: 8px 0;
      padding: 12px;
      text-align: center;
      transition: all 0.3s ease;
      animation: pulseGlow 1.5s ease-in-out infinite;
    }

    .drag-placeholder-space .placeholder-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--slam-accent);
      font-size: 0.9rem;
      font-weight: 500;
    }

    .drag-placeholder-space .placeholder-content i {
      animation: bounce 1s ease-in-out infinite;
    }

    /* Modern toggle switch styling */
    .nav-toggle-container {
      background: rgba(0, 0, 0, 0.03);
      border-top: 1px solid var(--border-color);
      margin: 8px 0;
    }

    .nav-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
    }

    .toggle-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-color);
      user-select: none;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }

    .toggle-input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.3s;
      border-radius: 24px;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .toggle-input:checked+.toggle-slider {
      background-color: var(--slam-accent);
    }

    .toggle-input:focus+.toggle-slider {
      box-shadow: 0 0 0 3px rgba(var(--slam-accent-rgb), 0.2);
    }

    .toggle-input:checked+.toggle-slider:before {
      transform: translateX(20px);
    }

    /* Hover effect for toggle */
    .toggle-slider:hover {
      box-shadow: 0 0 8px rgba(var(--slam-accent-rgb), 0.3);
    }

    /* Animation keyframes */
    @keyframes pulseGlow {

      0%,
      100% {
        box-shadow: 0 0 5px rgba(var(--slam-accent-rgb), 0.3);
        transform: scale(1);
      }

      50% {
        box-shadow: 0 0 20px rgba(var(--slam-accent-rgb), 0.5);
        transform: scale(1.02);
      }
    }

    @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-4px);
      }

      60% {
        transform: translateY(-2px);
      }
    }

    @keyframes dropSuccess {
      0% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.4);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.6);
      }

      100% {
        transform: scale(1);
        box-shadow: none;
      }
    }

    /* Improved dragging states */
    .starred-row[draggable="true"] {
      cursor: move;
      transition: opacity 0.2s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
      position: relative;
      /* Ensure the entire row can accept drops */
      pointer-events: auto;
    }

    /* Make sure all child elements allow drop events to bubble up */
    .starred-row[draggable="true"] * {
      pointer-events: none;
    }

    /* Re-enable pointer events for interactive elements */
    .starred-row[draggable="true"] .star-item,
    .starred-row[draggable="true"] .drag-handle {
      pointer-events: auto;
    }

    .starred-row[draggable="true"]:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-1px);
    }

    .starred-row[draggable="true"].dragging {
      opacity: 0.8;
      z-index: 1000;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      cursor: grabbing;
    }

    /* Drag hover state */
    .starred-row.drag-hover {
      background: rgba(var(--slam-accent-rgb), 0.05);
      border-left: 3px solid var(--slam-accent);
      transform: translateX(3px);
      transition: all 0.2s ease;
    }

    /* Ensure drop zones work on the entire row */
    .starred-row {
      position: relative;
      min-height: 44px;
      width: 100%;
    }

    /* Create an invisible overlay for better drop detection */
    .starred-row::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }

    /* When dragging, make the overlay accept drops */
    body.dragging .starred-row::before {
      pointer-events: auto;
    }

    /* Smooth transitions for menu hiding/showing */
    .left-menu .nav-item,
    .left-menu .nav-link-row {
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s ease;
      /* overflow scoped to vertical only so the (un)star button on the right
         is never clipped at narrow widths */
      overflow-x: visible;
      overflow-y: hidden;
    }

    /* Better visual feedback for drag handles */
    .starred-row .drag-handle {
      opacity: 0.5;
      transition: opacity 0.2s, color 0.2s, transform 0.2s;
      cursor: grab;
    }

    .starred-row:hover .drag-handle {
      opacity: 1;
      color: var(--slam-accent);
      transform: scale(1.1);
    }

    .starred-row .drag-handle:active,
    .starred-row.dragging .drag-handle {
      cursor: grabbing;
      color: var(--slam-accent-hover);
      transform: scale(1.2);
    }

    /* --- MODAL OVERRIDES --- */
    .modal-backdrop.show {
      display: none !important;
    }

    .modal-backdrop.fade {
      display: none !important;
    }

    .modal-dialog {
      margin-top: 70px;
    }

    /* Global modal sizing: cap the dialog and center it with auto margins.
       IMPORTANT: no hand-computed margin-left from 100vw here. 100vw includes
       the scrollbar on Windows, and tall dialogs give .modal its own vertical
       scrollbar, so margin math based on 100vw shoved dialogs right of center
       and clipped their right edge (FLHA audit modal, etc). Percentages
       resolve against .modal's CLIENT width, which is always correct. */
    .modal .modal-dialog {
      --modal-target-width: min(
        calc(100% - (2 * var(--modal-horizontal-gutter))),
        var(--bs-modal-width, 60vw)
      );
      width: var(--modal-target-width);
      max-width: var(--modal-target-width);
      margin-left: auto;
      margin-right: auto;
    }

    /* The sidebar rail is docked from 601px up (tablets AND desktops), so
       reserve its width on the modal CONTAINER at all of those widths
       (padding participates in the auto-margin math and is immune to
       scrollbars / stale vw values). This also makes open modals shift when
       the sidebar is expanded/collapsed, because --modal-safe-left follows
       body.sidebar-expanded. Below 601px the rail is off-canvas and
       --modal-safe-left is 0, so phones center on the full viewport. */
    @media (min-width: 601px) {
      .modal {
        padding-left: var(--modal-safe-left);
        transition: padding-left 0.3s ease;
      }
    }

    /* Make modal bodies scroll within the viewport */
    .modal .modal-body {
      max-height: 80vh;
      overflow: auto;
    }

    /* Modal dark mode support - ensure text legibility */
    .modal-content {
      background-color: var(--card-bg);
      color: var(--text-color);
      border-color: var(--border-color);
    }

    .modal-header {
      background-color: var(--card-bg);
      color: var(--text-color);
      border-bottom-color: var(--border-color);
    }

    .modal-footer {
      background-color: var(--card-bg);
      color: var(--text-color);
      border-top-color: var(--border-color);
    }

    .modal-title {
      color: var(--text-color);
    }

    /* Ensure close button is visible in dark mode */
    [data-theme="dark"] .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Keep special modal header colors working (like danger) */
    .modal-header.bg-danger {
      background-color: #dc3545 !important;
      color: white !important;
    }

    .modal-header.bg-danger .modal-title {
      color: white !important;
    }

    /* Form elements within modals */
    .modal-body .form-control,
    .modal-body .form-select,
    .modal-body input,
    .modal-body textarea,
    .modal-body select {
      background-color: var(--input-bg);
      color: var(--input-text);
      border-color: var(--border-color);
    }

    .modal-body .form-label,
    .modal-body label {
      color: var(--text-color);
    }

    /* Ensure text inputs have proper contrast in dark mode */
    [data-theme="dark"] .modal-body .form-control::placeholder,
    [data-theme="dark"] .modal-body input::placeholder,
    [data-theme="dark"] .modal-body textarea::placeholder {
      color: var(--muted-text);
      opacity: 0.7;
    }

    /* Alert elements within modals */
    [data-theme="dark"] .modal-body .alert {
      background-color: var(--hover-bg);
      color: var(--text-color);
      border-color: var(--border-color);
    }

    /* Tablet: ensure modals don't get cut off by nav menu */
    @media (max-width: 992px) and (min-width: 769px) {
      .modal-content {
        max-width: 100%;
        overflow-x: hidden;
      }
    }

    /* Mobile & Tablet: tighten the gutters and let dialogs use the available
       width (on tablets that's the area right of the sidebar rail, reserved
       via the .modal padding-left above; on phones it's the full viewport). */
    @media (max-width: 992px) {
      .modal .modal-dialog {
        --modal-horizontal-gutter: clamp(12px, 4vw, 24px);
        --bs-modal-width: 100%;
      }

      /* Prevent modal horizontal overflow */
      .modal-body {
        overflow-x: auto;
        max-width: 100%;
      }

      .modal-header,
      .modal-footer {
        flex-wrap: wrap;
      }
    }

    /* Let Bootstrap's responsive fullscreen modals actually go fullscreen.
       Our global .modal .modal-dialog width/margin rules above are more
       specific than Bootstrap's .modal-fullscreen-*-down rules and were
       shrinking these dialogs to a floating box. Width is 100% of the .modal
       content box (not 100vw): on phones that IS the viewport, and on small
       tablets (601-767px) it fills the content area beside the sidebar rail
       instead of sliding underneath it. */
    @media (max-width: 767.98px) {
      .modal .modal-dialog.modal-fullscreen-md-down {
        width: 100%;
        max-width: 100%;
        margin: 0;
      }

      .modal .modal-dialog.modal-fullscreen-md-down .modal-body {
        max-height: none;
      }
    }

    @media (max-width: 575.98px) {
      .modal .modal-dialog.modal-fullscreen-sm-down {
        width: 100%;
        max-width: 100%;
        margin: 0;
      }

      .modal .modal-dialog.modal-fullscreen-sm-down .modal-body {
        max-height: none;
      }
    }

    /* Improve touch targets and wrapping on small screens */
    @media (max-width:576px) {
      .nav-controls {
        gap: 6px;
      }

      .nav-controls a,
      .nav-controls button {
        padding: 6px 6px;
      }

      .dropdown-menu {
        max-width: 95vw;
        overflow-x: auto;
      }
    }

    /* --- MOBILE NAV COMPACT --- */
    @media (max-width:576px) {
      .top-nav {
        padding: 0 0.25rem;
        height: auto;
        flex-wrap: wrap;
      }

      .nav-controls a,
      .nav-controls button {
        font-size: 0.9rem;
        padding: 4px 6px;
      }

      .top-nav .company-logo {
        max-height: 28px;
        max-width: 100px;
      }
    }

    /* Stock row selected highlight - very specific to override Bootstrap */
    table.table tr.stock-selected,
    table.table tr.stock-selected td,
    .table-striped tbody tr.stock-selected:nth-of-type(odd),
    .table-striped tbody tr.stock-selected:nth-of-type(even) {
      background-color: #e8fbe9 !important;
      /* light green */
      border-left: 3px solid #28a745 !important;
      /* bootstrap success green */
    }

    /* Row hover effect */
    table.table tr[data-stock-row]:hover,
    table.table tr[data-stock-row]:hover td {
      background-color: #f8f9fa !important;
    }

    /* Make rows clearly clickable */
    table.table tr[data-stock-row] {
      cursor: pointer;
      transition: background-color 0.2s ease;
      border-left: 1px solid transparent;
    }

    /* Ensure selected rows stay highlighted even on hover */
    table.table tr.stock-selected:hover,
    table.table tr.stock-selected:hover td {
      background-color: #d4f9d6 !important;
      /* slightly darker green */
    }


/* ============================================================================
   Standalone pages (login, register, password reset, employee login)
   ----------------------------------------------------------------------------
   These extend base.html for the head, scripts and theming, but they are not
   "inside" the app: there is no project selected and no navigation to offer.
   Historically each one re-solved that with its own !important block, and each
   one solved it slightly differently, which is where the grey frame and the
   scrollbar-with-nothing-to-scroll came from. The frame was #main-content's
   reserved nav gutter plus .container-fluid's gutters letting the body surface
   show around the artwork; the scrollbar was a 100vh child sitting below that
   reserved top offset, so the document was always a header taller than the
   viewport.

   Opt in with {% block body_class %}slam-standalone-page{% endblock %}.
   ========================================================================== */
body.slam-standalone-page {
  margin: 0;
  padding: 0 !important;
  overflow-x: hidden;
}

/* Chrome that has no meaning without a session or a project. */
body.slam-standalone-page .top-nav,
body.slam-standalone-page .left-menu,
body.slam-standalone-page #icon-nav,
body.slam-standalone-page .nav-controls,
body.slam-standalone-page .nav-utility,
body.slam-standalone-page #help-drawer,
body.slam-standalone-page #help-drawer-fab,
body.slam-standalone-page #open-feedback-fab,
body.slam-standalone-page .floating-chat-icon,
body.slam-standalone-page .chat-modal,
body.slam-standalone-page .project-setup-notification {
  display: none !important;
}

/* Give the page the whole viewport with no reserved gutters, so the artwork
   runs edge to edge instead of being matted by the body surface. */
body.slam-standalone-page #main-content,
body.slam-standalone-page:not(.sidebar-expanded) #main-content,
body.slam-standalone-page #main-content.shifted {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh;
}

body.slam-standalone-page #main-content > .container-fluid {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none;
  min-height: 100dvh;
}

body.slam-standalone-page .page-title:empty {
  display: none !important;
  margin: 0 !important;
}

/* The artwork wrapper measures against the viewport. dvh rather than vh so a
   mobile browser's collapsing URL bar cannot push the page a chrome-height
   taller than the screen and summon a scrollbar for empty space. */
body.slam-standalone-page .login-container,
body.slam-standalone-page .register-container,
body.slam-standalone-page .auth-container,
body.slam-standalone-page .password-reset-container,
body.slam-standalone-page .auth-page,
body.slam-standalone-page .mfa-container,
body.slam-standalone-page .min-h-screen {
  min-height: 100dvh;
}

/* password_reset_done / _complete were written against Tailwind utilities that
   this project does not ship, so their wrapper had no height, no centring and
   no surface of its own. Give the two of them the same plain treatment rather
   than leaving them as the only external pages on bare body background. */
body.slam-standalone-page .min-h-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  background: var(--slam-surface-2);
}