/* ── Solvexa: responsive layer for back-office pages ────────────
   Loaded by /RoleInsights, /Insights/*, /Stocks/Insights and any
   other back-office page that opts in via:
     <link rel="stylesheet" href="/css/responsive-back-office.css">
   Goal: stack horizontal panels, collapse multi-col grids to one
   column on phones, keep tap-targets ≥ 44px on touch.
─────────────────────────────────────────────────────────────── */

/* Tablet portrait — collapse 2-col grids to one */
@media (max-width: 1024px) {
  .twocol,
  .grid2,
  .two-col,
  .row-2col,
  [class*="cols-2"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* 3-col grids: drop to 2-col */
  [class*="cols-3"],
  .three-col,
  .forecast-grid,
  .abc-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* 4-/5-col KPI strips: 2 across */
  .kpis,
  [class*="cols-4"],
  [class*="cols-5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* Field labels stack above their inputs */
  .field-grid {
    grid-template-columns: 1fr !important;
  }
  /* Modal cards never wider than the screen */
  .modal-card,
  .modal,
  .modal-lg {
    width: 95vw !important;
    max-width: 600px;
    max-height: 90vh;
  }
}

/* Phone — single column everywhere */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .twocol,
  .grid2,
  .two-col,
  .row-2col,
  .three-col,
  .forecast-grid,
  .abc-grid,
  .kpis,
  [class*="cols-2"],
  [class*="cols-3"],
  [class*="cols-4"],
  [class*="cols-5"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Tables hide low-priority cols if class="hide-sm" present */
  .hide-sm { display: none !important; }
  /* Headings shrink */
  h1 { font-size: 28px !important; line-height: 1.15; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  /* Card padding tighter */
  .card, .widget, .panel { padding: 14px !important; }
  /* Sidebar nav (if any) becomes a top scrollable strip */
  .sidebar, .side-nav { width: 100% !important; max-width: none !important; }
  /* Charts inside widgets must scale down */
  canvas, svg { max-width: 100%; height: auto; }
  /* Modal close to fullscreen */
  .modal-card, .modal, .modal-lg { width: 98vw !important; border-radius: 10px !important; }
}

/* Touch input polish: bigger taps, no hover-only affordances */
@media (pointer: coarse) {
  button, .btn, [role="button"], a.btn { min-height: 44px; }
  /* Hover-only action bars become always visible */
  .actions, .toolbar, .row-actions { opacity: 1 !important; }
}

/* Make any iframe-embedded chart shrink with its container */
iframe { max-width: 100%; }