/*
 * mobile.css — Responsive overrides
 * Linked last; only contains layout adjustments for smaller screens.
 *
 * ─── Current policy (2026-05-22 pivot) ─────────────────────────────────────
 *   Desktop/laptop is the design baseline (1440px). Mouse + keyboard are
 *   the primary input model — hover states are first-class UX. Phones get
 *   a working fallback. iPad is not a dedicated target.
 *
 *   Authoring breakpoints for NEW components:
 *     1440px  — design canvas (no media query needed)
 *     1024px  — light reflow for small laptops / large tablets
 *      768px  — kill heavy GPU (orbs / hue-rotate / starfield / Three.js)
 *      390px  — phone primary layout (stacked nav, single column)
 *
 *   See CLAUDE.md for the full policy + sacred invariants.
 *
 * ─── Legacy bands (kept as defensive fallback) ─────────────────────────────
 *   The rules below were tuned in the prior iPad-first era. They still work
 *   on iPads + small laptops; don't tear them out unless you're actively
 *   fixing a regression. New components don't need to match this scheme.
 *
 *     ≤ 768px    — phones: kill GPU animations + Three.js (active rule)
 *     641–1194px — touch targets + 16px inputs (defensive; was iPad band)
 *     ≤ 900px    — phone landscape + small tablet layout
 *     ≤ 640px    — phone primary layout
 *     ≤ 400px    — small phones
 */

/* ═══════════════════════════════════════════════════
   ≤ 768px  — phones only
   Kill GPU-heavy animations and Three.js canvas.
   (Was ≤1194px before the 2026-05-22 desktop-first pivot.)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Stop the gradient hue-rotate animation */
  body::before { animation: none; }

  /* Hide the starfield layer */
  body::after  { display: none; }

  /* Hide floating orbs (all 4) */
  .orb { display: none; }

  /* Hide Three.js overview canvas */
  #overview-canvas { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   641px – 1194px  — defensive touch/tablet band
   Legacy iPad-era rules: 44px touch targets, 16px inputs
   (prevents iOS zoom). Kept as defensive fallback only —
   new components should use @media (pointer: coarse) for
   touch-specific tweaks, not viewport width.
═══════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1194px) {

  /* Update nav-h so tab panels pad correctly */
  :root { --nav-h: 86px; }

  /* ── Nav: comfortable tap targets ───────── */
  .nav-top-row {
    padding: 0 16px;
    gap: 10px;
  }

  .nav-bottom-row {
    padding: 0 8px;
  }

  .nav-tab {
    padding: 6px 14px;
    font-size: 11px;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .nav-bug-btn,
  .theme-toggle {
    width: 38px;
    height: 38px;
  }

  .nav-logout-btn {
    padding: 8px 14px;
    min-height: 38px;
    font-size: 10px;
  }

  .nav-role-badge {
    padding: 6px 12px;
    min-height: 34px;
  }

  /* ── Overview header ────────────────────── */
  .ov-submit-btn {
    padding: 10px 16px;
    font-size: 12px;
    min-height: 44px;
  }

  /* Always show Submit Data label on touch/tablet widths */
  .ov-submit-btn span { display: inline; }

  /* ── Room panels ────────────────────────── */
  .room-panel-content {
    padding: 20px 24px 56px;
  }

  /* Room sub-tab buttons: bigger touch targets */
  .room-subtab {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  /* ── System selector ────────────────────── */
  .sys-btn {
    padding: 10px 20px;
    font-size: 11px;
    min-height: 44px;
  }

  /* ── View toggle (Summary / Raw data) ─── */
  .view-toggle-btn {
    padding: 10px 22px;
    font-size: 11px;
    min-height: 44px;
  }

  /* ── Filter bar ─────────────────────────── */
  .filter-input {
    font-size: 16px; /* prevents iOS Safari zoom on focus */
    padding: 10px 14px;
    min-height: 44px;
  }

  .filter-input[type="text"] { width: 130px; }

  .filter-dropdown-btn {
    padding: 10px 14px;
    font-size: 11px;
    min-height: 44px;
  }

  .filter-clear {
    padding: 10px 16px;
    font-size: 11px;
    min-height: 44px;
  }

  .fd-option {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }

  /* ── Data table ─────────────────────────── */
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .data-table td,
  .data-table th {
    padding: 12px 16px;
  }

  /* ── Alert sidebar ──────────────────────── */
  .alerts-sidebar {
    max-height: 420px;
  }

  .alert-clear-btn {
    min-height: 36px;
    padding: 6px 14px;
  }

  /* ── WIP pages ──────────────────────────── */
  .wip-card {
    padding: 48px 36px;
  }

  /* ── Bugs tab ───────────────────────────── */
  .bugs-wrap {
    padding: 20px 24px 56px;
  }

  /* ── Dev dashboard ──────────────────────── */
  .dev-wrap {
    padding: 20px 24px 56px;
  }

  /* ── Form modal: touch-optimized ───────── */

  /* All inputs: 16px prevents iOS Safari auto-zoom */
  .ftest-input {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }

  .ftest-textarea {
    font-size: 16px;
    padding: 11px 14px;
  }

  .ftest-room-trigger {
    font-size: 16px;
    padding: 8px 14px;
    min-height: 44px;
  }

  .ftest-room-opt {
    font-size: 14px;
    padding: 10px 14px;
    min-height: 44px;
  }

  /* Type selector cards: comfortable tap */
  .ftest-type-btn {
    padding: 14px 16px;
    min-height: 64px;
  }

  .ftest-type-name { font-size: 13px; }
  .ftest-type-desc { font-size: 11px; }

  /* System tabs: big enough to tap easily */
  .ftest-sys-tab {
    padding: 8px 16px;
    font-size: 11px;
    min-height: 36px;
  }

  /* Status buttons: tall finger-friendly targets */
  .ftest-status-btn {
    padding: 12px 4px;
    font-size: 11px;
    min-height: 44px;
  }

  /* Toggle buttons (Yes/No): same */
  .ftest-toggle-btn {
    padding: 12px 6px;
    font-size: 13px;
    min-height: 44px;
  }

  /* Footer action buttons */
  .ftest-btn-cancel,
  .ftest-btn-submit {
    padding: 12px 24px;
    font-size: 13px;
    min-height: 44px;
  }

  /* Form scroll: prevent page bounce when at scroll limits */
  .ftest-form-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Config row: allow wrap on narrow tablet widths */
  .ftest-config-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
  }

  /* Meta chips: slightly larger text */
  .ftest-meta-val {
    font-size: 12px;
  }

  /* Section spacing */
  .ftest-section {
    padding: 16px 20px 12px;
  }

  /* ── Auth: prevent iOS zoom on inputs ───── */
  #username-input,
  #password-input {
    font-size: 16px;
    padding: 12px 16px;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 900px  — large phones + small tablets: layout adjustments
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Overview: unlock fixed height so it scrolls ── */
  #tab-overview {
    height: auto;
    overflow: visible;
  }
  #tab-overview.active {
    display: block !important;
  }
  #tab-overview .tab-content {
    overflow: visible;
    padding: 14px 20px 32px;
  }
  .overview-main {
    overflow: visible;
    min-height: unset;
  }

  /* Alert sidebar: limit height so it doesn't dominate */
  .alerts-sidebar {
    max-height: 380px;
  }
  .alert-box {
    max-height: 300px;
  }

  /* ── Room panel ─────────────────────────── */
  .room-panel-content {
    padding: 16px 20px 48px;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 640px  — phones (landscape & portrait)
═══════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Nav ────────────────────────────────── */
  #main-nav {
    padding: 0 12px;
    gap: 6px;
  }

  /* Hide logo wordmark, keep icon */
  .nav-logo-text { display: none; }

  /* Tighter tab pills */
  .nav-tab {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* Icon buttons: slightly smaller */
  .nav-bug-btn { width: 30px; height: 30px; }

  /* Status pill: keep dot, drop text label */
  .status-label { display: none; }
  .nav-status   { padding: 6px 10px; }

  /* Role badge: shrink padding */
  .nav-role-badge {
    font-size: 8px;
    padding: 4px 8px;
    letter-spacing: 0.14em;
  }

  /* Logout: icon only — hide the "Log out" text */
  .nav-logout-btn span { display: none; }
  .nav-logout-btn { padding: 5px 8px; }

  /* ── Overview content ───────────────────── */
  #tab-overview .tab-content {
    padding: 10px 14px 24px;
  }

  .dashboard-header {
    margin-bottom: 10px;
  }

  .ov-submit-btn span { display: none; }
  .ov-submit-btn { padding: 7px 10px; }

  .page-title {
    font-size: clamp(18px, 6vw, 26px);
  }

  /* Gauges: slightly smaller cells */
  .gauge-cell {
    width: 92px;
    padding: 7px 5px 5px;
  }
  .gauge-svg {
    width: 72px;
    height: 72px;
  }

  /* ── Overview background text ───────────── */
  .overview-bg-text {
    font-size: clamp(60px, 22vw, 120px);
    opacity: 0.6;
  }

  /* ── Alert sidebar ──────────────────────── */
  .alerts-sidebar {
    max-height: 300px;
  }
  .alert-box {
    max-height: 240px;
  }

  /* ── Room panels ────────────────────────── */
  .room-panel-content {
    padding: 12px 14px 40px;
  }

  .room-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .room-header-left {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Slightly smaller sub-tab buttons */
  .room-subtab {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  /* Background watermark: less intrusive on small screens */
  .room-bg-text {
    font-size: clamp(56px, 18vw, 140px);
    opacity: 0.6;
  }

  /* ── Summary view (rooms) ───────────────── */
  .sum-metric-grid {
    grid-template-columns: 1fr;
  }

  /* Gauge cells in summary stretch to card width */
  .sum-metric-grid .gauge-cell {
    flex: 1 1 76px;
  }

  /* ── Raw data table ─────────────────────── */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 28px);
  }

  .data-table {
    min-width: 560px;
  }

  /* Filter bar: stack vertically on small screens */
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .filter-bar .filter-label:not(:first-child) { display: none; }

  .fp-date {
    width: 100%;
    max-width: 200px;
  }

  /* System selector: allow wrapping */
  .system-selector {
    gap: 5px;
  }

  /* ── WIP pages ──────────────────────────── */
  .wip-card {
    padding: 36px 24px;
    max-width: 100%;
  }

  .wip-title {
    font-size: 28px;
  }

  .wip-bg-text {
    font-size: clamp(52px, 18vw, 110px);
  }

  /* ── Bugs & Features tab ───────────────── */
  .bugs-wrap {
    padding: 16px 16px 40px;
  }

  /* ── Dev dashboard ──────────────────────── */
  .dev-wrap {
    padding: 16px 16px 40px;
  }

  .dev-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dev-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .dev-top-grid { grid-template-columns: 1fr; }
  .dev-mid-grid { grid-template-columns: repeat(2, 1fr); }

  .dev-log-row {
    grid-template-columns: 50px 90px 1fr;
  }
  .dev-log-src { display: none; }

  /* ── Auth screen ────────────────────────── */
  .auth-content {
    gap: 20px;
    padding: 0 16px;
    width: 100%;
  }

  .auth-icon {
    width: 56px;
    height: 56px;
  }

  .auth-form {
    max-width: 100%;
    padding: 24px 20px 20px;
    gap: 12px;
  }

  #username-input,
  #password-input {
    font-size: 16px;
    padding: 12px 16px;
  }

  /* ── Form modal: phone layout ───────────── */

  /* 16px on all inputs prevents iOS Safari from zooming in on focus */
  .ftest-input {
    font-size: 16px;
    padding: 9px 11px;
    min-height: 44px;
  }

  .ftest-textarea {
    font-size: 16px;
    padding: 10px 12px;
  }

  .ftest-room-trigger {
    font-size: 16px;
    min-height: 44px;
  }

  .ftest-room-opt {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 44px;
  }

  /* Stack type selector vertically — 3 wide cards too cramped on phone */
  .ftest-type-bar {
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
  }

  .ftest-type-btn {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 52px;
  }

  /* Hide description text in type buttons — redundant when stacked as rows */
  .ftest-type-desc { display: none; }

  /* System tabs */
  .ftest-sys-tab {
    padding: 8px 14px;
    font-size: 11px;
    min-height: 36px;
  }

  /* Status / toggle buttons: big enough to tap */
  .ftest-status-btn {
    padding: 12px 4px;
    font-size: 11px;
    min-height: 44px;
  }

  .ftest-toggle-btn {
    padding: 12px 6px;
    font-size: 13px;
    min-height: 44px;
  }

  /* Footer action buttons */
  .ftest-btn-cancel,
  .ftest-btn-submit {
    padding: 12px 20px;
    font-size: 13px;
    min-height: 44px;
  }

  /* Prevent page bounce when form scroll hits its edges */
  .ftest-form-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Config row: wrap so room selector doesn't overflow */
  .ftest-config-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  /* Compact section padding on phone */
  .ftest-section {
    padding: 12px 14px 10px;
  }

  .ftest-titlebar {
    padding: 11px 14px 10px;
  }

  .ftest-sys-bar {
    padding: 8px 14px;
  }

  /* ── Filter inputs: 16px prevents iOS zoom ── */
  .filter-input {
    font-size: 16px;
    padding: 9px 12px;
    min-height: 44px;
  }

  /* ── Sys/view buttons ───────────────────── */
  .sys-btn {
    padding: 9px 16px;
    min-height: 44px;
  }

  .view-toggle-btn {
    padding: 9px 18px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 400px  — small phones (SE, older Androids)
═══════════════════════════════════════════════════ */
@media (max-width: 400px) {

  /* ── Nav: minimal ───────────────────────── */
  #main-nav {
    padding: 0 10px;
    gap: 4px;
  }

  .nav-logo-icon {
    width: 26px;
    height: 26px;
  }

  .nav-tab {
    padding: 5px 7px;
    font-size: 9px;
  }

  /* Hide role badge entirely — too cramped */
  .nav-role-badge { display: none; }

  /* Bug icon button: minimal at 400px */
  .nav-bug-btn { width: 28px; height: 28px; }

  /* ── Gauges: smallest comfortable size ─── */
  .gauge-cell {
    width: 78px;
    padding: 6px 3px 4px;
  }
  .gauge-svg {
    width: 62px;
    height: 62px;
  }

  /* ── Room sub-tabs ──────────────────────── */
  .room-subtab {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  /* Hide badge to save space */
  .room-sys-badge { display: none; }

  /* ── Room panel content ─────────────────── */
  .room-panel-content {
    padding: 10px 10px 32px;
  }

  /* ── WIP card ───────────────────────────── */
  .wip-card {
    padding: 28px 18px;
  }
  .wip-title  { font-size: 22px; }
  .wip-body   { font-size: 12px; }

  /* ── Auth ───────────────────────────────── */
  .auth-icon { width: 48px; height: 48px; }
  .auth-content { gap: 14px; }

  .auth-form {
    padding: 20px 16px 18px;
  }

  /* ── Dev: collapse to 1 column ─────────── */
  .dev-stat-row  { grid-template-columns: 1fr; }
  .dev-top-grid  { grid-template-columns: 1fr; }
  .dev-mid-grid  { grid-template-columns: 1fr; }

  .dev-log-row {
    grid-template-columns: 44px 1fr;
    gap: 4px;
  }
  .dev-log-type { display: none; }

  /* ── Bugs: tighter wrap ─────────────────── */
  .bugs-wrap {
    padding: 12px 12px 32px;
  }

  .bugs-form-card {
    padding: 20px 16px 18px;
  }

  .bugs-resolved-meta {
    display: none;
  }
}