/**
 * intelligence-responsive.css
 * ═══════════════════════════════════════════════════════════════════
 * Mobile & tablet responsive styles for the Marketing Intelligence dashboard.
 * Desktop layout is NEVER modified here — all rules are gated behind max-width media queries.
 *
 * Approach: All table columns remain visible at every breakpoint.
 * Tables use min-width + overflow-x-auto + the gold "scroll-fade" indicator
 * (defined in admin.css / scroll-fade.js) to let users scroll horizontally.
 * No columns are hidden — the scroll-fade gold bar signals more data off-screen.
 *
 * Breakpoints:
 *   Mobile:  <640px   — tables scroll horizontally, touch-friendly sizing
 *   Tablet:  640-1023 — tables scroll horizontally, intermediate sizing
 *   Desktop: >=1024   — full density, no scroll needed on wide monitors
 *
 * See also:
 *   intelligence-responsive.js  — mobile period sync + chart resize handler
 *   ARCHITECTURE.md             — full system overview
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── Period Selector: Dropdown on Mobile, Pills on Desktop ───── */
/* Tailwind's sm:flex / sm:hidden aren't in the compiled CSS,
   so we handle visibility here with raw media queries. */

#period-select-mobile {
  display: none;
}

@media (max-width: 639px) {
  #period-selector {
    display: none !important;
  }
  #period-select-mobile {
    display: block;
  }
}

/* ── Content Width Constraint (Mobile + Tablet) ──────────────── */
/* The dashboard uses max-width:720px on .admin-main for an absolute width.
   The MI page uses flex layout with relative widths — nothing stops the
   1200px table from pushing everything wider. This gives #intel-content
   an absolute viewport-width constraint so overflow-x:auto on the table
   wrappers actually triggers scrolling instead of expanding the page. */

@media (max-width: 1023px) {
  #intel-content {
    width: 100%;
    max-width: 100vw;
  }
}

/* ── Table Min-Width ──────────────────────────────────────────── */
/* All responsive tables keep min-width at every breakpoint.
   Combined with overflow-x-auto on the wrapper + scroll-fade gold bar,
   this gives a consistent scrollable experience on mobile/tablet. */

.responsive-table {
  min-width: 1200px;
}

/* ── KPI Card Grid (Mobile) ────────────────────────────────────── */
/* On mobile, the KPI cards must not overflow. Force 2-column grid
   with percentage-based sizing instead of minmax px values. */

@media (max-width: 639px) {
  #stats-section .grid {
    grid-template-columns: 1fr 1fr !important;
  }
  #stats-section .kpi-card {
    min-width: 0;
  }
}

/* ── Touch Targets & Readability (Mobile) ─────────────────────── */

@media (max-width: 639px) {
  /* Larger padding + font on table cells for finger taps */
  .responsive-table td,
  .responsive-table th {
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Prevent iOS zoom on input focus (requires >=16px) */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Larger sidebar nav tap targets */
  #intel-sidebar .nav-link {
    padding: 12px 16px;
  }

  /* Chart container minimums so canvases don't collapse */
  #offers-chart,
  #partners-chart,
  #advertisers-chart {
    min-height: 120px;
    height: 120px !important;
  }

  #perf-chart {
    min-height: 150px;
  }

  /* Reduce chart heights ~25% on mobile */
  [id$="-chart"][style*="height:160px"] {
    height: 120px !important;
  }
  [style*="height:220px"] {
    height: 160px !important;
  }
  [style*="height:320px"] {
    height: 240px !important;
  }
  [style*="height:150px"] {
    height: 120px !important;
  }

  /* Fix fixed-width inputs/selects on mobile */
  #global-search,
  #report-search {
    width: 100% !important;
    min-width: 0 !important;
  }

  #saved-views-select {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Tooltip viewport constraint */
  #chart-tooltip {
    max-width: calc(100vw - 24px) !important;
  }

  /* Dropdown positioning */
  .search-dropdown-list {
    min-width: 140px !important;
  }
}

/* ── Sticky Name Column (All Breakpoints) ─────────────────────── */
/* Pins the first column (entity name) while the rest of the table scrolls.
   Applies at every viewport size — desktop tables scroll too.
   border-collapse:collapse (Tailwind reset) breaks position:sticky,
   so we switch to separate with zero spacing. */

.responsive-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* ── Sticky first column: panel + time tables (name IS first child) ── */
.responsive-table td:first-child,
.responsive-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #ffffff;
}

.responsive-table th:first-child {
  background: #f8fafc;
  z-index: 11;
}

/* ── Sticky first TWO columns: report table (arrow + name) ── */
#report-table td:first-child,
#report-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #ffffff;
}

#report-table th:first-child {
  background: #f8fafc;
  z-index: 11;
}

/* Name column — pinned after the arrow (left: 28px ≈ w-6 + px-2) */
#report-table td:nth-child(2),
#report-table th:nth-child(2) {
  position: sticky;
  left: 28px;
  z-index: 10;
  background: #ffffff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

#report-table th:nth-child(2) {
  background: #f8fafc;
  z-index: 11;
}

/* Shadow on the last pinned column (for single-pin tables) */
.responsive-table:not(#report-table) td:first-child,
.responsive-table:not(#report-table) th:first-child {
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* Hover/selected states — solid backgrounds so no bleed-through */
.responsive-table tr:hover td:first-child,
.responsive-table tr:hover td:nth-child(2),
.responsive-table tr.bg-blue-50 td:first-child,
.responsive-table tr.bg-blue-50 td:nth-child(2) {
  background: #eff6ff;
}