/* FBMCPB-123 — shared responsive shell for /admin and every admin sub-page.
 *
 * Loaded on: admin.html, admin-bugs.html, admin-contributions.html, admin-founders.html,
 * admin-robustness.html, FeatureBoard/analytics.html, crm.html, registrations.html,
 * telemetry.html, health_dashboard.html.
 *
 * Goals: no page-level horizontal scroll down to 390px, the tab/nav bar wraps or scrolls
 * instead of overflowing, wide tables scroll inside their own box instead of blowing out the
 * page, fixed-width cards/modals shrink on narrow screens, and grids collapse to one column
 * under 720px. This file is intentionally generic (class names shared across the admin shell
 * and every embedded pane's own .fbadmin-bar) so one file covers all ten pages.
 */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Top nav / tab bars ──────────────────────────────────────────────────────
   .admin-tabs is the /admin shell's own tab row; .fbadmin-bar is the bar each
   embedded sub-page builds for itself when opened standalone (outside the iframe). */
.admin-tabs,
.fbadmin-bar {
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
}

.admin-bar,
.fbadmin-bar {
  flex-wrap: wrap;
  height: auto;
  min-height: 56px;
  row-gap: 6px;
}

@media (max-width: 768px) {
  .admin-tab,
  .fbadmin-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  /* CADSF-1454: `.admin-bar .admin-tabs-toggle` — one level more specific than the
     base `.admin-tabs-toggle { display:none }` further down, which used to win
     (same specificity, later in the sheet) and left phones with no menu at all. */
  .admin-bar .admin-tabs-toggle {
    display: inline-flex;
  }

  .admin-tabs {
    flex-basis: 100%;
    display: none;
    order: 10;
    margin-left: 0;
  }

  .admin-tabs.open {
    display: flex;
  }

  .admin-bar {
    padding: 8px 12px;
  }

  .bar-spacer {
    display: none;
  }
}

@media (min-width: 769px) {
  .admin-tabs-toggle {
    display: none;
  }
}

/* Hamburger toggle — hidden by default, shown under 768px above. */
.admin-tabs-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: none;
  border: 1px solid var(--border, #38414a);
  border-radius: 4px;
  color: var(--text, #b6c2cf);
  font-size: 1.1rem;
  cursor: pointer;
  margin-left: 8px;
}
.admin-tabs-toggle:hover {
  color: var(--text-hi, #e8edf2);
}

/* ── Fixed-width cards / modals → clamp to the viewport ─────────────────── */
.login-box,
.modal,
.modal-content {
  max-width: calc(100vw - 32px);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.fb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Bare <table>s with no wrapper: scoped to narrow viewports only so desktop
   layout (which relies on tables sitting inline with surrounding content) is
   untouched. */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── Grids collapse to one column on small screens ──────────────────────── */
@media (max-width: 720px) {
  .lic-grid,
  .form-row,
  .chart-container,
  .condensed-layout {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .booking-card {
    grid-template-columns: 1fr !important;
  }
}

/* ── Embedded iframe panes ──────────────────────────────────────────────── */
.admin-embed {
  width: 100%;
  max-width: 100%;
}

/* ── Misc small-screen niceties ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .page {
    padding: 20px 16px;
  }

  .sched-toolbar,
  .settings-row {
    flex-wrap: wrap;
  }

  .btn-create {
    margin-left: 0;
  }
}