/*
 * responsive_ipad.css — AI Audit Scan
 * =====================================
 * Non-destructive responsive overrides for iPad (768-1024px) + mobile.
 * Applied ON TOP of existing Tailwind classes — never removes existing styles.
 *
 * Breakpoints:
 *   iPad landscape : max-width 1024px
 *   iPad portrait  : max-width 834px
 *   Mobile         : max-width 640px
 *
 * Target: Vivatech demo on iPad — Joelle pitches to enterprise clients.
 */

/* ── 0. Base resets ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 1024px) {

  /* ── 1. Global container ──────────────────────────────────────── */
  body { font-size: 14px; }
  .max-w-7xl, .max-w-6xl, .max-w-5xl { max-width: 100% !important; }
  main, .container, [class*="container"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── 2. Navigation — main tab bar ─────────────────────────────── */
  /* Tabs scroll horizontally instead of wrapping */
  .tab-btn-bar > div,
  #tour-tabs,
  [id="tour-tabs"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }
  .tab-btn-bar > div::-webkit-scrollbar,
  #tour-tabs::-webkit-scrollbar { display: none; }

  /* Tab buttons — slightly smaller on iPad */
  .tab-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── 3. Monitoring sub-navigation ─────────────────────────────── */
  /* Group tabs (Track/Analyze/Manage) */
  #group-tab-bar,
  #tour-monitoring-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }
  #group-tab-bar::-webkit-scrollbar,
  #tour-monitoring-nav::-webkit-scrollbar { display: none; }

  .group-tab-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Sub-tab buttons within groups */
  .sub-tab-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #group-track .flex,
  #group-analyze .flex,
  #group-manage .flex {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  /* ── 4. Hero score cards — 2×2 grid ───────────────────────────── */
  .hero-scores-section,
  #scores-section,
  [id="scores-section"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── 5. Trend section — stack vertically ──────────────────────── */
  .trend-section,
  [class*="trend-section"] {
    grid-template-columns: 1fr !important;
  }
  .lg\:col-span-2 { grid-column: span 1 !important; }

  /* ── 6. Monitoring content grids ──────────────────────────────── */
  /* 4-col KPI grids → 2 cols */
  .grid-cols-2.md\:grid-cols-4,
  .grid-cols-4,
  [class*="grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* 3-col grids → 2 cols */
  .grid-cols-3,
  [class*="md\:grid-cols-3"],
  [class*="lg\:grid-cols-3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 2-col grids → stay 2-col on iPad landscape, stack on portrait */
  .grid-cols-2:not(.hero-scores-section):not(#scores-section) {
    gap: 10px !important;
  }

  /* ── 7. Scan bar ──────────────────────────────────────────────── */
  #tour-scan form,
  .glass form {
    gap: 8px !important;
  }
  #tour-scan input[type="text"],
  #tour-scan input[name="url"] {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  #tour-scan button[type="submit"] {
    padding: 12px 20px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ── 8. Tables — horizontal scroll ───────────────────────────── */
  table {
    font-size: 11px !important;
  }
  /* Wrap tables in auto-scroll container */
  .glass table,
  .rounded-xl table,
  [class*="rounded"] table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 9. Minimum font sizes — prevent squinting ────────────────── */
  /* Bump 8px/9px/10px text up slightly for readability */
  .text-\[8px\]  { font-size: 10px !important; }
  .text-\[9px\]  { font-size: 10px !important; }
  .text-\[10px\] { font-size: 11px !important; }

  /* ── 10. Cards & panels padding ───────────────────────────────── */
  .glass.rounded-2xl,
  .rounded-2xl.p-6 { padding: 16px !important; }
  .rounded-xl.p-5  { padding: 12px !important; }

  /* ── 11. Expand button — hide on iPad (not needed for demo) ────── */
  #expand-label,
  [id*="expand-icon"] { display: none !important; }

  /* ── 12. Sidebar Your Plan + Score Evolution (monitoring hidden) ── */
  /* Already handled by switchTab JS — this is belt-and-suspenders */
  .lg\:col-span-2 { width: 100% !important; }

  /* ── 13. Citation gap table — horizontal scroll ───────────────── */
  #com-results table,
  [id*="results"] table {
    min-width: 500px !important;
  }
  [id*="results"] .overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 14. Button rows — wrap gracefully ────────────────────────── */
  .flex.gap-2.flex-wrap.items-end,
  .flex.gap-2.flex-wrap.items-center {
    gap: 8px !important;
  }
  .flex.gap-2.flex-wrap > button,
  .flex.gap-2.flex-wrap > .btn-sm {
    flex-shrink: 0 !important;
  }
}


/* ── iPad portrait (834px) ──────────────────────────────────────── */
@media (max-width: 834px) {

  /* ── Score cards — keep 2×2 ────────────────────────────────────── */
  .hero-scores-section,
  #scores-section {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 3-col → 1-col ─────────────────────────────────────────────── */
  .grid-cols-3,
  [class*="md\:grid-cols-3"],
  [class*="lg\:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Monitoring inputs — full width ─────────────────────────────── */
  #si-domain, #ba-domain, #aio-domain, #cc-domain,
  #com-domain, #com-industry, #com-category {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* ── Score pills row ─────────────────────────────────────────────── */
  .text-5xl { font-size: 36px !important; }
  .text-4xl  { font-size: 28px !important; }
}


/* ── Mobile (640px) ─────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Score cards → single column ──────────────────────────────── */
  .hero-scores-section,
  #scores-section {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── All 2-col grids → 1-col ──────────────────────────────────── */
  .grid-cols-2:not(.hero-scores-section) {
    grid-template-columns: 1fr !important;
  }

  /* ── Scan bar — stack vertically ───────────────────────────────── */
  #tour-scan form {
    flex-direction: column !important;
  }
  #tour-scan button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }

  .text-5xl { font-size: 28px !important; }
  .text-4xl  { font-size: 22px !important; }
  .text-3xl  { font-size: 18px !important; }
}


/* ════════════════════════════════════════════════════════════════
   COCKPIT — Authority Cockpit responsive
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Cockpit header ─────────────────────────────────────────────── */
  .ck-header { padding: 1.25rem 1.25rem 0 !important; }
  .ck-title   { font-size: 22px !important; }

  /* ── Cockpit tabs — horizontal scroll ──────────────────────────── */
  .ck-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
    gap: 4px !important;
  }
  .ck-tabs::-webkit-scrollbar { display: none; }
  .ck-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* ── Cockpit content padding ────────────────────────────────────── */
  .ck-body { padding: 1rem 1.25rem !important; }

  /* ── Cockpit 2-col grids → 1-col ───────────────────────────────── */
  .ck-grid-2,
  .ck-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* ── Header stats strip — 2-col wrap ───────────────────────────── */
  .ck-hstats {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ck-hstat-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px !important;
  }

  /* ── Entity form inputs — full width ───────────────────────────── */
  .ck-input-row {
    flex-direction: column !important;
  }
  .ck-input-row input,
  .ck-input-row textarea,
  .ck-input-row select {
    width: 100% !important;
  }

  /* ── Risk Explorer chart — full width ──────────────────────────── */
  #rx-chart,
  [id*="rx-chart"] {
    min-height: 180px !important;
  }

  /* ── Portfolio grid → 1-col ────────────────────────────────────── */
  #pf-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .ck-title   { font-size: 18px !important; }
  .ck-hstats  { gap: 6px !important; }
  .ck-hstat-card { flex: 1 1 calc(50% - 6px) !important; }
  .ck-body    { padding: 0.75rem 1rem !important; }
}