/* ═══════════════════════════════════════════════════════════════════════════
   EVENTFLOW — COMPREHENSIVE MOBILE ENHANCEMENTS
   Targets every gap found in the responsive audit. All rules either:
     • use @media(max-width:…) to avoid touching desktop layout
     • add base improvements (touch targets, iOS zoom prevention) that
       degrade gracefully on desktop
   Load order: after responsive.css
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   0. BASE — applies at all widths (safe progressive enhancements)
───────────────────────────────────────────────────────────────────────── */

/* Prevent text-size inflation on orientation change (iOS) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Momentum scrolling on all scrollable containers */
.app-main,
.sidebar,
.modal,
.notif-list,
.help-body,
.wa-messages-area,
.rsvp-table-wrap,
.activity-table-wrap,
.bcc-table-wrap,
.data-table-wrap { -webkit-overflow-scrolling: touch; }

/* Remove 300 ms tap delay everywhere.
   Exception: draggable task cards must NOT have touch-action:manipulation —
   that value disables the pan gesture the browser needs to initiate a
   touch drag. Cards get touch-action:none in the kanban drag rules below. */
* { touch-action: manipulation; }
.task-card[draggable="true"] { touch-action: none; }

/* Prevent callout on long-press for interactive elements */
button, a, [onclick] { -webkit-touch-callout: none; }

/* Consistent focus ring that works in dark mode */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. GLOBAL MOBILE TOKENS & TOUCH TARGETS  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Page never overflows horizontally */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* All interactive elements: 44 × 44 px minimum (WCAG 2.5.5) */
  .btn            { min-height: 44px; }
  .btn-sm         { min-height: 40px; padding: 9px 14px; }
  .btn-xs         { min-height: 36px; padding: 6px 10px; }
  .btn-icon       { min-width: 44px; min-height: 44px; }
  .nav-link       { min-height: 44px; }
  .tab-btn        { min-height: 40px; }
  .rsvp-tab       { min-height: 44px; padding: 10px 14px; }
  .toggle-switch  { width: 44px; height: 24px; }
  .toggle-slider::before { width: 18px; height: 18px; }
  input:checked + .toggle-slider::before { transform: translateX(20px); }

  /* Inputs never cause iOS zoom (font-size ≥ 16px) */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 11px 14px;
  }
  .form-select { padding-right: 36px; }

  /* Form groups: tighter spacing on mobile */
  .form-group { margin-bottom: 14px; }

  /* Input-prefix (currency symbol + input) — prevent overflow */
  .input-prefix { flex-wrap: nowrap; }
  .input-prefix .prefix-label { font-size: 14px; padding: 11px 10px; white-space: nowrap; }
  .input-prefix .form-input { min-width: 0; flex: 1; }

  /* Toast: above bottom nav, full width */
  .toast-container {
    bottom: calc(var(--bn-height, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    right: 12px; left: 12px;
    align-items: stretch;
  }
  .toast { min-width: 0; width: 100%; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. LANDING PAGE  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .landing-nav  { padding: 0 4%; height: 60px; }
  .nav-links    { display: none; }
  .nav-cta      { gap: 6px; }
  .nav-cta .btn { padding: 8px 14px; font-size: 12px; min-height: 40px; }

  .hero         { padding: 100px 5% 60px; }
  .hero-stats   { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero-stat-val{ font-size: 24px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .features-grid  { grid-template-columns: 1fr; }
  .roles-grid     { grid-template-columns: 1fr; }
  .role-card      { padding: 22px 18px; }
  .section-h2     { font-size: clamp(22px, 6vw, 34px); }
  .feat-p         { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. LOGIN SCREEN  ≤480px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-screen {
    align-items: flex-start;
    padding: 16px;
    padding-top: max(32px, env(safe-area-inset-top, 32px));
  }
  .login-card {
    padding: 28px 18px 24px;
    border-radius: 16px;
    max-width: 100%;
  }
  .login-btn { min-height: 50px; font-size: 15px; }
  .role-tab  { min-height: 42px; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. TOPBAR — ultra-compact at ≤480px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .app-topbar    { gap: 4px; padding: 0 8px; }
  .topbar-spacer { flex: 1; min-width: 0; }

  /* Logo: icon only */
  .topbar-logo {
    max-width: 32px;
    font-size: 0 !important;
    gap: 0;
    overflow: visible;
  }
  .topbar-logo .tl-mark { width: 28px; height: 28px; flex-shrink: 0; }

  /* User: avatar only */
  .topbar-user-name  { display: none !important; }
  .topbar-user-role  { display: none !important; }
  .topbar-user       { padding: 4px 6px; gap: 0; max-width: none; }
  .topbar-avatar     { width: 30px; height: 30px; font-size: 11px; }

  /* Sign-out: power icon only */
  .topbar-signout {
    font-size: 0 !important;
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--border);
  }
  .topbar-signout::after { content: "⏻"; font-size: 17px; color: var(--muted); display: block; }

  /* Icon buttons: compact squares */
  .search-btn, .notif-bell, .theme-toggle, .help-btn {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    flex-shrink: 0;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 16px;
  }
  .help-btn { display: none !important; } /* help accessible via sidebar */

  /* Event switcher: hide label, compress select */
  #team-event-switcher > span:first-child { display: none; }
  #team-event-select {
    font-size: 12px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    max-width: 140px;
  }
}

/* Landscape phones: compact topbar height */
@media (max-height: 500px) and (max-width: 900px) {
  .app-topbar    { height: 44px !important; padding-top: 4px; padding-bottom: 4px; }
  #screen-team .app-main    { height: calc(100vh - 44px) !important; }
  #team-bottom-nav          { display: none !important; }
  #screen-team .sidebar     { display: flex !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. ADMIN SCREEN — SIDEBAR & NAVIGATION  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #admin-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 8px;
    background: none; border: none; cursor: pointer;
    padding: 0; color: var(--ink); font-size: 22px;
    -webkit-tap-highlight-color: transparent;
  }

  #screen-admin .sidebar {
    display: block !important;
    position: fixed; top: 0; left: -260px; bottom: 0;
    width: 240px; z-index: 800;
    background: var(--surface); border-right: 1px solid var(--border);
    transition: left .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    overflow-y: auto;
  }
  #screen-admin .sidebar.open { left: 0 !important; }
  #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 299; }
  #sidebar-overlay.show { display: block; }

  /* Hide verbose status bars from topbar */
  #screen-admin #ably-status-wrap   { display: none !important; }
  #screen-admin #worker-status-pill { display: none !important; }
  #screen-admin #bridge-status-bar  { display: none !important; }
  #screen-admin .topbar-breadcrumb  { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. ADMIN SCREEN — MAIN CONTENT LAYOUT  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #screen-admin .app-main { padding: 12px; box-sizing: border-box; }
  #screen-admin .view     { padding: 16px 0 0; }
  #screen-admin .view-title { font-size: 20px; }

  /* View header: stack vertically */
  #screen-admin .view-header {
    flex-direction: column; align-items: flex-start;
    gap: 10px; margin-bottom: 16px;
  }
  #screen-admin .view-actions {
    width: 100%; display: flex; flex-wrap: wrap; gap: 6px;
  }
  #screen-admin .view-actions .btn { flex: 1; min-width: 120px; justify-content: center; }

  /* KPI row: 2 columns */
  #screen-admin .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  #screen-admin .kpi       { padding: 12px 14px; }
  #screen-admin .kpi-val   { font-size: 22px; }
  #screen-admin .kpi-label { font-size: 9px; }

  /* Events grid: single column */
  #screen-admin .events-grid { grid-template-columns: 1fr !important; }

  /* Generic 2-col inline grids → 1 col */
  #screen-admin div[style*="grid-template-columns:1fr 1fr"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #screen-admin div[style*="grid-template-columns:2fr 1fr"],
  #screen-admin div[style*="grid-template-columns: 2fr 1fr"],
  #screen-admin div[style*="grid-template-columns:1fr 2fr"],
  #screen-admin div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  #screen-admin div[style*="grid-template-columns:1fr 220px"],
  #screen-admin div[style*="grid-template-columns: 1fr 220px"] {
    grid-template-columns: 1fr !important;
  }

  /* Form rows */
  #screen-admin .form-row   { grid-template-columns: 1fr !important; }
  #screen-admin .form-row-3 { grid-template-columns: 1fr !important; }

  /* Members + vendor grids */
  #screen-admin .members-grid { grid-template-columns: 1fr 1fr !important; }
  #screen-admin .vendor-grid  { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. BCC (BUDGET COMMAND CENTRE)  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tab bar: horizontally scrollable, no wrapping */
  .tab-bar {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* BCC event switcher */
  #bcc-event-switcher { width: 100% !important; max-width: none !important; font-size: 15px !important; }

  /* BCC banner: stack top area vertically */
  .bcc-banner-top {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 12px;
  }
  .bcc-banner-amount { font-size: 28px; }

  /* BCC banner metrics: 3-col on tablet, 2-col on phone */
  .bcc-banner-metrics { grid-template-columns: repeat(3, 1fr) !important; }
  .bcc-metric         { padding: 12px 10px; }
  .bcc-metric-val     { font-size: 14px; }
  .bcc-metric-label   { font-size: 9px; }

  /* BCC mini widget metrics: 2-col */
  .bcc-mini-metrics { grid-template-columns: 1fr 1fr !important; }
  .bcc-mini-top     { grid-template-columns: 1fr !important; padding: 14px; }
  .bcc-mini-amount  { font-size: 24px; }

  /* BCC legend: wrap tightly */
  .bcc-legend { gap: 8px; }

  /* BCC filters row */
  #bcc-team-filter,
  #bcc-state-filter { width: 100% !important; max-width: none !important; }

  /* Activity table: horizontal scroll */
  .activity-table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .activity-table       { min-width: 700px; }

  /* Budget table: horizontal scroll */
  #bcc-budget-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .budget-row            { min-width: 560px; }

  /* Approval items: stack cleanly */
  .approval-item {
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    padding: 14px;
  }
  .ai-actions {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .ai-actions .btn { flex: 1; min-width: 100px; justify-content: center; }
  .ai-icon { width: 36px; height: 36px; font-size: 16px; }
  .ai-title { font-size: 13px; }
  .ai-detail{ font-size: 11px; }

  /* State flow: scrollable */
  .state-flow { overflow-x: auto; flex-wrap: nowrap; padding: 12px; }
  .sf-bubble  { width: 44px; height: 44px; font-size: 16px; }

  /* Analytics charts: single column */
  .chart-grid  { grid-template-columns: 1fr !important; }
  .chart-wrap  { height: 200px; }
  .chart-card  { padding: 14px; }

  /* Team allocation grid: single column */
  .team-alloc-grid { grid-template-columns: 1fr !important; }

  /* State cards: 1 col */
  #bcc-state-cards { grid-template-columns: 1fr !important; }

  /* Spend pipeline funnel */
  #analytics-spend-pipeline .funnel-row { flex-direction: column; gap: 4px; }
  .funnel-label { min-width: 0; text-align: left; width: 100%; font-size: 11px; }
  .funnel-amt   { min-width: 0; }
}

/* BCC banner metrics: 2-col on small phones */
@media (max-width: 480px) {
  .bcc-banner-metrics { grid-template-columns: 1fr 1fr !important; }
  .bcc-mini-metrics   { grid-template-columns: 1fr 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. INLINE JS-RENDERED GRIDS — admin screen  ≤768px
   These are rendered via template literals and cannot get CSS classes,
   so we target them with attribute selectors on style.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* repeat(4,1fr) and repeat(5,1fr) — BCC engine, issue-log, risk, etc. */
  #screen-admin div[style*="grid-template-columns:repeat(4,1fr)"],
  #screen-admin div[style*="grid-template-columns: repeat(4, 1fr)"],
  #screen-admin div[style*="grid-template-columns:repeat(5,1fr)"],
  #screen-admin div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* repeat(3,1fr) — checklist stats, payment schedule, etc. */
  #screen-admin div[style*="grid-template-columns:repeat(3,1fr)"],
  #screen-admin div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* BCC pipeline 2-col narrative */
  #screen-admin div[style*="grid-template-columns:1fr 1fr;gap:24px"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr; gap: 24px"] {
    grid-template-columns: 1fr !important;
  }

  /* Lifecycle phase detail: 1fr 1fr → 1fr */
  #screen-admin div[style*="grid-template-columns:1fr 1fr;gap:20px"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr; gap: 20px"] {
    grid-template-columns: 1fr !important;
  }

  /* RSVP manager: invitation token fields 1fr 1fr */
  #inv-token-fields { grid-template-columns: 1fr !important; }

  /* RSVP manager: overview 2-col top section */
  #screen-admin div[style*="grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px"] {
    grid-template-columns: 1fr !important;
  }

  /* Team lead budget: 3-col metrics */
  div[style*="grid-template-columns:1fr 1fr 1fr;gap:8px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  /* On tiny phones: even repeat(2,1fr) JS grids → single column for KPI-style stat blocks */
  #screen-admin div[style*="grid-template-columns:repeat(4,1fr)"],
  #screen-admin div[style*="grid-template-columns:repeat(5,1fr)"],
  #screen-admin div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. KANBAN  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #screen-admin .kanban {
    display: flex !important; overflow-x: auto; gap: 10px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #screen-admin .kanban-col {
    min-width: 82vw; max-width: 82vw;
    scroll-snap-align: start; flex-shrink: 0;
  }
  #screen-admin .kanban-col-head { font-size: 13px; }

  /* Task cards in kanban */
  .task-card { padding: 12px; }
  .task-card-name { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. DATA TABLES  ≤768px / ≤640px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #screen-admin .bcc-table-wrap,
  #screen-admin .data-table-wrap,
  #screen-admin .ros-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }
  #screen-admin .bcc-table  { min-width: 700px; }
  #screen-admin .data-table { min-width: 600px; }
}

/* Activity table: card-list on mobile */
@media (max-width: 640px) {
  #screen-admin .activity-table,
  #screen-admin .activity-table thead,
  #screen-admin .activity-table tbody,
  #screen-admin .activity-table th,
  #screen-admin .activity-table td,
  #screen-admin .activity-table tr { display: block; }
  #screen-admin .activity-table thead { display: none; }
  #screen-admin .activity-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px; padding: 12px 14px;
  }
  #screen-admin .activity-table td { padding: 3px 0; border: none; font-size: 13px; }
  #screen-admin .at-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
  #screen-admin .at-actions .btn { flex: 1; min-width: 90px; justify-content: center; }
}

/* Run-of-Show table: card-list on mobile */
@media (max-width: 640px) {
  #screen-admin .ros-table,
  #screen-admin .ros-table thead,
  #screen-admin .ros-table tbody,
  #screen-admin .ros-table th,
  #screen-admin .ros-table td,
  #screen-admin .ros-table tr { display: block; }
  #screen-admin .ros-table thead { display: none; }
  #screen-admin .ros-table tr {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 8px; padding: 14px;
    position: relative;
  }
  #screen-admin .ros-table td { padding: 3px 0; border: none; font-size: 13px; }
  #screen-admin .ros-time { font-size: 16px; font-weight: 700; display: block; margin-bottom: 4px; }
  #screen-admin .ros-table td:last-child {
    margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap;
  }
  #screen-admin .ros-table td:last-child .btn { flex: 1; min-width: 90px; justify-content: center; }
}

/* User management: card-list on mobile */
@media (max-width: 640px) {
  #screen-admin .user-table-wrap { overflow-x: visible; }
  #screen-admin .user-row.header { display: none; }
  #screen-admin .user-row {
    display: flex !important; flex-direction: column !important;
    gap: 10px; min-width: 0; padding: 14px;
    background: var(--surface); border-radius: var(--radius-sm);
    margin-bottom: 6px;
  }
  #screen-admin .user-name-cell { flex-direction: row; align-items: center; gap: 10px; }
  #screen-admin .user-actions   { display: flex; flex-wrap: wrap; gap: 6px; }
  #screen-admin .user-actions .btn { flex: 1; min-width: 90px; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. GANTT CHART  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gantt-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gantt-header { min-width: 700px; }
  .gantt-row    { min-width: 700px; }
  .gantt-controls { flex-wrap: wrap; gap: 8px; }
  .gantt-team-legend { flex-wrap: wrap; gap: 6px; }

  #screen-team #team-task-gantt-wrap { overflow-x: auto; }
  #screen-team #team-task-gantt      { min-width: 600px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   12. SETTINGS VIEW  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tab bar */
  .settings-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .settings-tab-btn { white-space: nowrap; flex-shrink: 0; min-height: 44px; }

  /* Settings rows: wrap when content is wide */
  .settings-row {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  /* Label area always full width when wrapped */
  .settings-row > div:first-child { flex: 1; min-width: 0; }

  /* Selects in settings rows: full width */
  .settings-row select,
  .settings-row .form-select { width: 100% !important; max-width: none !important; }

  /* Toggle switches stay on the right — don't stretch */
  .settings-row .toggle-switch { flex-shrink: 0; }

  /* Button pairs in settings rows */
  .settings-row > div:last-child > .btn,
  .settings-row > .btn { width: 100%; justify-content: center; }

  /* Danger zone items */
  .danger-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .danger-item .btn { width: 100%; justify-content: center; }

  /* Privacy section action buttons */
  #settings-panel-privacy .settings-row > div:last-child {
    display: flex; flex-direction: column; gap: 6px; width: 100%;
  }
  #settings-panel-privacy .settings-row > div:last-child .btn {
    width: 100%; justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. WHATSAPP HUB  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Admin WA hub: 3-col → single thread column */
  .wa-hub {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .wa-channels {
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .wa-tools   { display: none !important; }
  .wa-thread  { min-height: 380px; border-radius: 0 0 var(--radius) var(--radius); }

  /* Team WA panel */
  #screen-team .wa-wrap,
  #screen-team #team-wa-wrap {
    display: flex !important; flex-direction: column !important;
    height: calc(100vh - 52px - var(--bn-height, 64px) - 40px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important; overflow: hidden !important;
  }
  #screen-team .wa-left {
    display: flex !important; flex-direction: column !important;
    flex: 1 !important; min-height: 0 !important; height: auto !important;
  }
  #screen-team .wa-messages-area {
    flex: 1 !important; overflow-y: auto !important;
    min-height: 0 !important; max-height: none !important;
  }
  #screen-team .wa-input-wrap {
    flex-shrink: 0 !important; position: static !important;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  #screen-team .wa-right { display: none !important; }

  /* Inline WA hub on team screen */
  #team-wa-hub {
    grid-template-columns: 1fr !important;
    height: auto !important; max-height: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   14. NOTIFICATIONS PANEL  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .notif-panel {
    width: calc(100vw - 24px) !important;
    right: -8px;
    max-height: 70vh;
  }
  .notif-list { max-height: 55vh; }
  .notif-item { padding: 12px 14px; }
  .notif-msg  { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   15. MODAL — BOTTOM SHEET on mobile  ≤600px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh; min-height: 40vh;
    width: 100%; max-width: 100%;
    padding: 20px 18px 28px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .modal-lg     { max-width: 100%; }
  .modal-title  { font-size: 18px; }
  .modal-sub    { font-size: 13px; }
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px; padding-top: 16px;
  }
  .modal-footer .btn { width: 100%; justify-content: center; min-height: 50px; }

  /* Drag handle indicator */
  .modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: -8px auto 16px;
  }

  /* Modal form rows inside sheet */
  .modal .form-row { grid-template-columns: 1fr !important; }

  /* Input prefix inside modal */
  .modal .input-prefix { flex-wrap: nowrap; }
}

/* ─────────────────────────────────────────────────────────────────────────
   16. SEARCH OVERLAY  ≤600px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .search-overlay {
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .search-box {
    border-radius: 16px 16px 0 0;
    max-width: 100%; width: 100%;
    max-height: 80vh; overflow-y: auto;
    box-sizing: border-box;
  }
  .search-input-row { padding: 14px 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   17. HELP PANEL  ≤480px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #help-panel       { width: 100vw; right: -100vw; }
  #help-panel.open  { right: 0; }
  .help-topic-btn   { font-size: 13px; padding: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   18. TEAM PORTAL — BOTTOM NAV  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #screen-team .sidebar    { display: none !important; }
  #screen-team .app-body   { display: block; }
  #screen-team .app-main {
    padding: 12px 12px calc(var(--bn-height, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    height: calc(100vh - 52px);
    box-sizing: border-box;
  }

  #team-bottom-nav {
    display: grid;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom, 4px));
    z-index: 500;
    grid-template-columns: repeat(7, 1fr);
    box-shadow: 0 -2px 12px rgba(0,0,0,.1);
  }
  #team-bottom-nav .bn-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 4px 2px; cursor: pointer;
    border-radius: 8px; font-size: 9px;
    color: var(--muted); font-weight: 500;
    transition: color .15s;
    min-height: 52px; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  #team-bottom-nav .bn-item.active { color: var(--gold); }
  #team-bottom-nav .bn-item .bn-icon { font-size: 20px; line-height: 1; }

  /* Topbar: team portal */
  #screen-team .app-topbar {
    padding: 8px 12px; flex-wrap: nowrap; gap: 6px;
    height: 52px; flex-shrink: 0; overflow: visible;
  }
  #screen-team .topbar-signout { flex-shrink: 0; white-space: nowrap; }
  #screen-team .topbar-user    { flex-shrink: 1; min-width: 0; max-width: 130px; overflow: hidden; }
  #screen-team .topbar-user-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #screen-team .topbar-user-role { display: none; }
}

/* Smallest phones: tighter bottom nav */
@media (max-width: 360px) {
  #team-bottom-nav .bn-item { font-size: 8px; padding: 2px 1px; min-height: 48px; }
  #team-bottom-nav .bn-item .bn-icon { font-size: 17px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   19. TEAM PORTAL — VIEW CONTENT  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #screen-team .view         { padding: 16px 0 0; }
  #screen-team .view-title   { font-size: 20px; }
  #screen-team .view-header  {
    flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 4px;
  }
  #screen-team .view-header > div:last-child { width: 100%; display: flex; justify-content: flex-end; }

  /* KPI grid */
  #screen-team .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  #screen-team .kpi     { padding: 12px; }
  #screen-team .kpi-val { font-size: 22px; }

  /* Team overview 2-col → 1-col */
  #view-team-overview > div[style*="grid-template-columns:1fr 1fr"],
  #view-team-overview > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Forms */
  #screen-team .form-row { grid-template-columns: 1fr !important; }

  /* Members/vendor grids */
  #screen-team .members-grid { grid-template-columns: 1fr 1fr !important; }
  #screen-team .vendor-grid  { grid-template-columns: 1fr !important; }

  /* Timeline */
  #screen-team .tl-row { grid-template-columns: 64px 20px 1fr !important; gap: 0 8px; }
  #screen-team .tl-date-cell { font-size: 10px; }

  /* Charts */
  #screen-team .chart-grid { grid-template-columns: 1fr !important; }
  #screen-team .chart-wrap { height: 180px; }
  #screen-team .team-bcc-alloc-grid { grid-template-columns: 1fr 1fr !important; }

  /* Team BCC header */
  #screen-team .team-bcc-header { padding: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   20. TEAM BCC BUDGET HEADER  ≤480px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #screen-team .team-bcc-alloc-grid { grid-template-columns: 1fr 1fr !important; }
  #screen-team .team-bcc-val { font-size: 18px; }
  /* Inline JS-rendered grids in team budget view */
  #screen-team div[style*="grid-template-columns:repeat(3,1fr)"],
  #screen-team div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #screen-team div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   21. RUN-OF-SHOW TICK VIEW (team — day-of-event critical)  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Large tap targets for field staff */
  .ros-tick-item   { padding: 16px; margin-bottom: 10px; }
  .ros-tick-time   { font-size: 17px; }
  .ros-tick-title  { font-size: 15px; }
  .ros-tick-meta   { font-size: 13px; }
  .ros-tick-btns   { display: flex; gap: 8px; flex-wrap: wrap; }
  .ros-tick-btns .btn {
    flex: 1; justify-content: center;
    min-height: 50px; /* extra large for gloved/outdoor use */
    font-size: 14px;
  }

  /* ROS "now" line: stays prominent */
  .ros-now-line { padding: 8px 14px; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   22. RSVP / SCANNER (day-of-event critical)  ≤768px / ≤600px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* KPI row: 2 columns */
  .rsvp-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rsvp-kpi     { padding: 12px 14px; }
  .rsvp-kpi-val { font-size: 22px; }

  /* Tab bar */
  .rsvp-tab-bar {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rsvp-tab-bar::-webkit-scrollbar { display: none; }
  .rsvp-tab { white-space: nowrap; flex-shrink: 0; }

  /* Scanner directive cards */
  .scanner-directive {
    flex-direction: column; gap: 10px; padding: 14px;
  }
  .scanner-directive .directive-icon {
    width: 36px; height: 36px; font-size: 20px;
  }
  .directive-title  { font-size: 14px; }
  .directive-body   { font-size: 13px; }

  /* Zone picker buttons: large tap targets */
  #scanner-zone-picker .btn {
    padding: 18px 20px !important;
    font-size: 15px; min-height: 64px;
    border-radius: 12px !important;
    margin-bottom: 6px;
  }

  /* Manual search row */
  #scanner-tab-manual .form-group { margin-bottom: 12px; }

  /* Walk-in form inline grids */
  #scanner-tab-walkin div[style*="grid-template-columns:1fr 1fr"],
  #scanner-tab-walkin div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Scan result feedback: large, readable */
  #scan-result-feedback { font-size: 15px; }

  /* RSVP table: horizontal scroll */
  .rsvp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rsvp-table      { min-width: 560px; }

  /* Zone grid */
  .rsvp-zone-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Scanner: token yes/no buttons → stacked, very large */
  #scan-token-prompt .btn {
    min-height: 56px; font-size: 16px;
    width: 100%; justify-content: center;
  }
  /* Countdown timer */
  #scanner-card-countdown { font-size: 28px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   23. TODO / CHECKLIST  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .todo-add-row { flex-direction: column; gap: 8px; }
  .todo-add-row .form-input { width: 100%; }
  .todo-add-row .btn { width: 100%; justify-content: center; }

  .todo-item { padding: 12px 14px; }
  .todo-text { font-size: 14px; }
  .todo-del  { padding: 4px 8px; min-height: 36px; }

  /* Checklist section head */
  .cl-section-head { padding: 12px 16px; font-size: 14px; }
  .cl-item         { padding: 14px 16px; gap: 14px; }

  /* Checklist KPI grid: from JS repeat(3) → 2-col */
  #checklist-kpi-row { grid-template-columns: 1fr 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   24. ACTIVITY FEED  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .feed-item   { padding: 10px 0; gap: 8px; }
  .feed-actor,
  .feed-action,
  .feed-subject{ font-size: 13px; }
  .feed-time   { font-size: 11px; white-space: nowrap; }
  .feed-dot    { width: 24px; height: 24px; font-size: 11px; flex-shrink: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   25. ANALYTICS VIEW  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #analytics-event-filter { width: 100% !important; max-width: none !important; }
  #screen-admin .print-kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* Audit trail timeline */
  .audit-item { grid-template-columns: 72px 14px 1fr !important; }
  .audit-time strong { font-size: 11px; }
  .audit-time { font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   26. LIFECYCLE PHASES  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Phase card body: 2-col → 1-col */
  #view-lifecycle div[style*="grid-template-columns:1fr 1fr;gap:20px"],
  #view-lifecycle div[style*="grid-template-columns: 1fr 1fr; gap: 20px"],
  #screen-admin #view-lifecycle div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Phase header: wrap action buttons */
  #view-lifecycle div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-wrap: wrap; gap: 10px;
  }

  /* Phase approval buttons */
  #view-lifecycle .btn { min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   27. ISSUE LOG & RISK REGISTER  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* KPI rows from JS repeat(5) and repeat(4) → handled by rule 8 above */
  /* Risk matrix: horizontal scroll */
  #risk-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Risk/issue filter row */
  #issue-filter-row,
  #risk-filter-row {
    flex-direction: column; gap: 8px;
  }
  #issue-filter-row .form-select,
  #risk-filter-row .form-select,
  #issue-filter-row .form-input,
  #risk-filter-row .form-input {
    width: 100% !important;
  }
  #issue-filter-row .btn,
  #risk-filter-row .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   28. STAKEHOLDER REGISTER  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* repeat(4,1fr) KPI row from JS → handled by rule 8 */
  #stakeholder-filter-row {
    flex-direction: column; gap: 8px;
  }
  #stakeholder-filter-row .form-select,
  #stakeholder-filter-row .form-input { width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   29. BILLING VIEW  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #billing-plans-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   30. PRESENCE STRIP  ≤768px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .presence-strip .presence-avatar:nth-child(n+4) { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   31. SAFE-AREA INSETS  (notch / home indicator aware)
───────────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #team-bottom-nav {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  @media (max-width: 768px) {
    #screen-team .app-main {
      padding-bottom: calc(
        var(--bn-height, 64px) + 12px +
        env(safe-area-inset-bottom)
      ) !important;
    }
    .modal-overlay {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .search-overlay {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .fb-sync-banner,
    .fb-error-banner {
      padding-top: max(10px, calc(env(safe-area-inset-top) + 4px));
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   32. WA TEMPLATE GRID  ≤480px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wa-template-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   33. BRIDGE STATUS BAR  ≤400px
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  #bridge-status-bar .bridge-pill:nth-child(n+3) { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   34. DARK MODE mobile adjustments
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.dark .sidebar.open { background: var(--surface); }
  body.dark .modal { background: var(--surface); }
  /* Drag handle in dark mode */
  body.dark .modal::before { background: rgba(255,255,255,.15); }
}

/* ─────────────────────────────────────────────────────────────────────────
   35. PRINT — suppress all mobile chrome
───────────────────────────────────────────────────────────────────────── */
@media print {
  #team-bottom-nav,
  #admin-hamburger,
  .topbar-signout,
  .help-btn,
  .notif-bell { display: none !important; }
  body > *:not(#print-frame) { display: none !important; }
  #print-frame { display: block !important; position: static; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   36. MICRO-POLISH — card hover states disabled on touch devices
   (hover states can get "stuck" on iOS after a tap)
───────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .event-card:hover,
  .vendor-card:hover,
  .task-card:hover,
  .team-alloc-card:hover,
  .approval-item:hover { transform: none !important; box-shadow: var(--shadow) !important; }

  .btn-primary:hover { transform: none !important; }
  .btn-gold:hover    { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   37. SMOOTH SCROLLING — system preference aware
───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .sidebar, #help-panel, .modal { transition-duration: .25s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   38. MODALS — mobile-first sizing & padding
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal {
    padding: 20px 16px;
    border-radius: 16px 16px 0 0; /* bottom-sheet style */
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
  }
  .modal-lg { max-width: 100%; }
  .modal-title { font-size: 18px; }
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
  }
  .modal-footer .btn { width: 100%; justify-content: center; }
  .modal-close { top: 14px; right: 14px; }
  /* Form rows in modals: single column */
  .modal .form-row { grid-template-columns: 1fr !important; }
  .modal .form-row-3 { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   39. PROJECT BUILDER WIZARD — mobile layout
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Type pills: scroll horizontally instead of hiding */
  .pb-type-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    display: flex !important; /* override inline display:none */
  }
  .pb-type-pills::-webkit-scrollbar { display: none; }
  .pb-type-pill { flex-shrink: 0; }

  /* Header: stack title + pills vertically */
  .pb-header { flex-direction: column; gap: 10px; padding: 12px 16px 10px; }
  .pb-header-title { width: 100%; }

  /* Body: tighter padding */
  .pb-body { padding: 14px 14px; }
  .pb-footer { padding: 8px 14px; }

  /* Step bar: scrollable */
  .pb-step { padding: 8px 12px; font-size: 11px; }
  .pb-step-lbl { display: none; } /* show only step number on very small screens */

  /* All 2-col grids collapse */
  .pb-two-col,
  .pb-review-grid,
  .pb-form-row { grid-template-columns: 1fr !important; }

  /* Task detail grid: 2-col on mobile */
  .pb-task-detail-grid { grid-template-columns: 1fr 1fr !important; }

  /* Team grid: 2-col */
  .pb-team-grid { grid-template-columns: 1fr 1fr !important; }

  /* Risk matrix: wrap nicely */
  .pb-risk-matrix { flex-direction: column; gap: 8px; }
  .pb-risk-field { min-width: 0; width: 100%; }

  /* Budget row: stack amount under name */
  .pb-budget-row { flex-wrap: wrap; }
  .pb-budget-amount { width: 100%; }

  /* Milestone row: stack date below name */
  .pb-ms-row { flex-wrap: wrap; }
  .pb-ms-name { width: 100%; }

  /* Seed screen: comfortable padding */
  .pb-seed-screen { padding: 1.5rem 1rem; }

  /* Build CTA: stack */
  .pb-build-cta { flex-direction: column; gap: 12px; }
  .pb-build-cta .pb-btn { width: 100%; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   40. ADMIN EVENT VIEWS — new elements mobile treatment
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Critical path dashboard card: stack KPIs below title */
  #cp-dash-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #cp-dash-card > div:last-child { width: 100%; flex-wrap: wrap; }

  /* Sprint goal banner: proper wrapping */
  #sprint-goal-banner > div { flex-wrap: wrap; gap: 6px; }

  /* Sprint sidebar (DoD + Standup): full width when visible */
  #sprint-sidebar { width: 100% !important; flex-direction: column; }

  /* Tasks-sprint-layout: stack on mobile when sidebar is shown */
  #tasks-sprint-layout { flex-direction: column !important; }

  /* Lifecycle burndown: horizontal scroll */
  #lc-burndown-wrap,
  .lc-burndown-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #lc-burndown-wrap svg,
  .lc-burndown-wrap svg { min-width: 320px; }

  /* Lifecycle phase row: truncate long text */
  .lc-phase-title,
  .phase-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

  /* Governance health cards: single column */
  #screen-admin div:has(> #ev-issue-health-card),
  #screen-admin div:has(> #ev-phase-health-card) { grid-template-columns: 1fr !important; }

  /* Event dashboard KPI row + grid override */
  #ev-kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* WBS tree on mobile: smaller padding */
  .wbs-node { padding: 8px 10px !important; }
  .wbs-indent { margin-left: 16px !important; }

  /* Risk register row: stack columns */
  .risk-row { flex-direction: column !important; gap: 6px; }

  /* Issue log row: stack */
  .issue-row { flex-direction: column !important; }

  /* Stakeholder card grid */
  .stk-grid { grid-template-columns: 1fr !important; }

  /* Project builder "Open project" button on seed screen: full width */
  .pb-seed-screen .pb-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   41. DARK MODE — sidebar background fix
       Sidebar now uses --bg; dark mode bg is #0F1117 which already differs
       from surface (#181C28) — no override needed. Light mode sidebar used
       pure white before; now uses --bg for correct depth hierarchy.
───────────────────────────────────────────────────────────────────────── */
body.dark .sidebar { background: var(--bg); }
body.dark .nav-link:hover { background: rgba(255,255,255,.05); }
body.dark .nav-link.active { background: rgba(212,168,67,.1); }

/* ─────────────────────────────────────────────────────────────────────────
   42. PREMIUM FORM INPUTS — light mode refinement
       Forms on --surface background use --bg for inputs to create depth.
       The --bg is now #EDEEF6 which reads clearly against --surface #FAFBFF.
───────────────────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  background-color: var(--bg);
  border-color: var(--border);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,.12);
  outline: none;
  background-color: var(--surface);
}