/* ──────── Responsive ──────── */

/* Below this width the inline module tabs no longer fit alongside the brand,
   search, session and logout controls (they forced the topbar — and the whole
   page — to ~950px on a phone). Collapse them behind a nav toggle instead. */
@media (max-width: 1024px) {
  .topbar { position: relative; gap: 12px; padding: 0 16px; }
  .nav-toggle { display: inline-flex; }

  /* Tabs become a slide-down panel anchored under the topbar. */
  .module-tabs {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--bfc-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-elev);
  }
  .topbar.nav-open .module-tabs { display: flex; }
  /* boot.js keeps .module-tabs at opacity:0 during boot; the boot overlay
     covers the topbar, so force it interactive once the panel is opened. */
  body.booting .topbar.nav-open .module-tabs { opacity: 1; pointer-events: auto; }

  .module-tab {
    width: 100%;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14px;
  }
  .module-tab-classic { margin-left: 0; color: rgba(255, 255, 255, 0.72); }

  /* Groups expand inline inside the panel instead of opening as dropdowns. */
  .module-group { position: static; }
  .module-group .group-btn {
    width: 100%;
    justify-content: space-between;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 14px;
  }
  .module-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 4px 8px;
    padding: 2px 0 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .module-menu a { color: rgba(255, 255, 255, 0.82); padding: 10px 13px; }
  .module-menu a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .module-menu a.active { background: rgba(255, 255, 255, 0.16); color: #fff; }

  /* Reclaim width: search collapses to an icon, session sheds its subtitle. */
  .topbar-search-label,
  .topbar-search-kbd { display: none; }
  .topbar-search { padding: 8px; gap: 0; }
  .topbar-session .ctx { display: none; }
}

@media (max-width: 900px) {
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 14px; }
  .boot-main { padding: 14px; }
  .boot-topbar { padding: 0 16px; gap: 12px; }
  /* the middle nav pills are hidden behind the toggle on the real bar */
  .boot-topbar-nav i:nth-child(n+2) { display: none; }
  .boot-sk-search { width: 40px; }
}
@media (max-width: 560px) {
  .metric-strip { grid-template-columns: 1fr; }
  .drawer { width: 100vw; }
  .boot-status { bottom: 22px; }
}