/* ═══════════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════════ */
    @media (max-width: 991px) {
      .btn-icon-mobile { display: flex; }

      aside.navbar {
        position: fixed !important;
        top: 0;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        flex-direction: row;
        z-index: 1050 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        overflow: visible !important; /* allow dropdown outside bar bounds */
      }

      aside.navbar .container-fluid {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 14px !important;
        height: auto !important;
        gap: 8px;
      }

      /* Brand takes remaining space, pushing controls to the right */
      .sc-brand {
        padding: 12px 0 !important;
        border-bottom: none !important;
        flex: 1;
        margin-right: 0 !important;
      }

      /* Target both collapse and collapsing so position:fixed persists during animation */
      aside.navbar .collapse,
      aside.navbar .collapsing {
        position: fixed !important;
        left: 0;
        top: 56px;
        right: 0;
        /* No width: left and right already size it. 100vw counts the
           scrollbar, so it measured slightly wider than the space actually
           available and clipped its own right edge. */
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        flex-direction: column !important;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0);
      }

      /* Nav items: vertical list on mobile */
      aside.navbar .navbar-nav {
        padding: 8px 12px !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 2px;
      }

      /* Bootstrap .collapse:not(.show) handles hide. Force flex when shown,
         and while animating in or out, so the menu has one layout throughout.
         align-items must be stretch: Tabler gives .navbar-collapse
         align-items:center, which in a column shrinks the list and the footer
         to their content — the menu opened full width while .collapsing was
         display:block, then narrowed the moment .show made it flex. */
      aside.navbar .collapse.show,
      aside.navbar .collapsing {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
      }

      aside.navbar .nav-link {
        margin: 0 !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
      }

      /* Show sidebar footer inside mobile collapse */
      .sidebar-footer {
        margin-top: 0 !important;
        padding: 12px 14px 16px !important;
        border-top: 1px solid var(--border) !important;
        display: flex !important;
        flex-direction: column;
        gap: 10px;
      }

      .page-wrapper {
        margin-left: 0 !important;
        margin-top: 56px;
        padding-bottom: env(safe-area-inset-bottom, 0);
      }

      .page-header {
        padding: 12px 0 !important;
      }

      .page-title {
        font-size: 20px !important;
      }

      /* Source selector: horizontal scroll on narrow screens */
      .source-selector {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
      .source-selector::-webkit-scrollbar { display: none; }

      /* An association row stacks: the origin badge moves under the text. */
      .lib-row { flex-wrap: wrap; }
      .lib-row-main { flex-basis: 100%; }
      .lib-origin { margin-right: auto; }

      /* Always show file manager actions on mobile */
      .fm-actions { opacity: 1 !important; }

      /* Bigger touch targets */
      .btn-sm { min-height: 34px; }
      .fm-check { width: 18px !important; height: 18px !important; }

    }

    @media (max-width: 575px) {
      aside.navbar .container-fluid {
        padding: 0 10px !important;
        gap: 6px;
      }

      .sc-brand {
        gap: 8px !important;
        padding: 10px 0 !important;
      }

      .brand-icon {
        width: 30px !important;
        height: 30px !important;
      }

      .brand-text {
        font-size: 17px !important;
        letter-spacing: 2px !important;
      }

      .sc-searchbar {
        max-width: 100% !important;
        padding: 4px 4px 4px 14px !important;
      }

      .sc-searchbar .sc-search-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
      }

      .page-body {
        padding-top: 16px !important;
      }

      /* Job cards: prevent overflow on tiny screens */
      .job-card .fw-medium {
        font-size: 12.5px !important;
      }

      /* File manager: smaller font */
      .fm-row { font-size: 13px; }
      .fm-meta { font-size: 11px; }

      /* Toast: full-width at bottom on phones */
      .sc-toast-wrap {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.75rem;
        min-width: 0 !important;
        width: auto;
      }
    }

    /* Touch devices: always show file manager actions */
    @media (hover: none) {
      .fm-actions { opacity: 1 !important; }
    }