/* ============================================================
   RESPONSIVE OVERRIDES — applies to all pages
   Loaded AFTER base.css and any page-specific styles.
   ============================================================ */

/* ── TABLET  (max-width: 1024px) ───────────────────────────── */
@media (max-width: 1024px) {

  /* Generic multi-column grids → 2 columns */
  .kpi-row,
  .charts-row,
  .reports-grid,
  .reports-banner,
  .stat-grid,
  .settings-grid,
  .connections-grid,
  .metric-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Bar/funnel/donut internal grids — allow wrap */
  .bar-row,
  .funnel-row {
    grid-template-columns: 120px 1fr 80px 100px !important;
    font-size: 12px !important;
  }

  /* Page content padding */
  .page-content {
    padding: 16px !important;
  }

  /* Tables — make them horizontally scroll instead of breaking */
  .table-wrap,
  .data-table,
  table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Login page on tablet */
  .login-card {
    padding: 28px 24px !important;
  }
}

/* ── MOBILE  (max-width: 768px) ────────────────────────────── */
@media (max-width: 768px) {

  /* All multi-col grids → single column */
  .kpi-row,
  .charts-row,
  .reports-grid,
  .reports-banner,
  .stat-grid,
  .settings-grid,
  .connections-grid,
  .metric-row,
  .hero-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bar/funnel rows — condense */
  .bar-row,
  .funnel-row {
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
  }
  .bar-row .bar-label-detail,
  .funnel-row .funnel-pct,
  .funnel-row .funnel-value {
    display: none !important;
  }

  /* Cards */
  .kpi-card,
  .report-card,
  .metric-card {
    padding: 14px !important;
  }
  .kpi-card .kpi-value,
  .metric-card .metric-value {
    font-size: 20px !important;
  }

  /* Donut/chart containers — full width on mobile */
  .donut-wrap,
  .chart-wrap {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .donut-svg,
  .donut canvas {
    width: 220px !important;
    height: 220px !important;
  }

  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* iOS won't auto-zoom on 16+ */
  }

  /* Buttons */
  .btn,
  button.primary,
  .primary-btn {
    padding: 12px 18px !important;
    font-size: 15px !important;
  }

  /* Login page */
  .login-card {
    margin: 16px !important;
    padding: 24px 20px !important;
    width: auto !important;
  }
  .login-card h1 {
    font-size: 22px !important;
  }

  /* Page content padding */
  .page-content {
    padding: 12px !important;
  }

  /* Tables — full-width scroll wrapper */
  table thead {
    font-size: 11px !important;
  }
  table th,
  table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* Modal / dialog boxes */
  .modal,
  .dialog {
    width: calc(100vw - 24px) !important;
    margin: 12px !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
}

/* ── SMALL MOBILE  (max-width: 480px) ──────────────────────── */
@media (max-width: 480px) {

  /* Even tighter padding */
  .page-content {
    padding: 10px !important;
  }

  /* KPI cards stack tightly */
  .kpi-card,
  .metric-card {
    padding: 12px !important;
  }
  .kpi-card .kpi-value {
    font-size: 18px !important;
  }

  /* Charts even smaller */
  .donut-svg,
  .donut canvas {
    width: 180px !important;
    height: 180px !important;
  }

  /* Hide non-essential labels on tiny screens */
  .kpi-label,
  .label-optional {
    font-size: 10px !important;
  }
}
/* ────────────────────────────────────────────────────────────
   CHAT  (chat_window.html, chat_expanded.html)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .chat-sidebar {
    width: 200px !important;
  }
}

@media (max-width: 768px) {
  /* Hide chat sidebar on mobile — toggle via button */
  .chat-sidebar {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .chat-sidebar.show { transform: translateX(0); }

  /* Agent chip row: allow horizontal scroll */
  .agent-switcher,
  .agent-chip-row {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .agent-switcher::-webkit-scrollbar { display: none; }
  .agent-chip { flex-shrink: 0; }

  /* Chat input area */
  .chat-input-area {
    padding: 10px !important;
  }
  .chat-input {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* Quick suggestion chips wrap */
  .quick-chips {
    flex-wrap: wrap !important;
  }
  .quick-chip {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   ONBOARDING / LOGIN  (login.html, onboard.html)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .login-page,
  .onboard-page {
    padding: 16px !important;
  }
  .login-card,
  .onboard-card {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }
  .login-form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   GRID OVERFLOW PROTECTION (apply to all sizes)
   ──────────────────────────────────────────────────────────── */
.kpi-row,
.charts-row,
.reports-grid,
.reports-banner,
.stat-grid,
.settings-grid,
.connections-grid,
.metric-row,
.hero-grid,
.card-grid {
  min-width: 0;
}
.kpi-row > *,
.charts-row > *,
.reports-grid > *,
.reports-banner > *,
.stat-grid > *,
.settings-grid > *,
.connections-grid > *,
.metric-row > * {
  min-width: 0;
}

/* Container should never be wider than viewport */
.shell,
.main,
.page-content,
.section-header {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tables — keep them contained in scroll wrapper */
table {
  table-layout: auto;
  max-width: 100%;
}