/* ─── Responsive Breakpoints ─── */

/* Tablet & below — collapse sidebar */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0;
  }

  .hamburger {
    display: block;
  }

  .kanban-board {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Results tab: 2-col grids → 1 col */
  .grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* Results KPI grid: 3 cols → 2 cols */
  #results-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Results GSC KPI grid: 4 cols → 2 cols */
  #results-gsc-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* AI Visibility tab: stat cards 2-col below gauge */
  #tab-ai-visibility .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Local tab: 5 cols → 3 cols */
  .local-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Work tab: in-progress grid → 1 column */
  .work-in-progress-grid {
    grid-template-columns: 1fr;
  }

  /* Work tab: timeline week labels stack above cards */
  .work-week {
    flex-direction: column;
    gap: 10px;
  }

  .work-week-label {
    min-width: auto;
  }

  /* Plan 27.5-03: .insights-sentiment-grid rule removed (orphan from 27.4-02) */

  /* Insights tab: ideas grid single column */
  .insights-ideas-cards {
    grid-template-columns: 1fr;
  }

  /* Insights tab: autocomplete 2 columns */
  .insights-autocomplete-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Overview tab: GBP grid stack */
  #overview-gbp-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Competitors tab: table scroll wrapper */
  #tab-competitors .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Traffic charts stack */
  .traffic-charts {
    grid-template-columns: 1fr;
  }

  /* Phase 25-04: Recently Shipped 3 → 2 cols on tablet */
  .work-shipped-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .tab-content {
    padding: 20px 16px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .kpi-card {
    padding: 14px;
  }

  .kpi-value {
    font-size: 24px;
  }

  .tab-title {
    font-size: 20px;
  }

  .header {
    padding: 0 16px;
  }

  .header-client-name {
    font-size: 13px;
  }

  .header-divider,
  .header-updated {
    display: none;
  }

  /* Phase 64-05: condense the QA pill on narrow viewports —
     hide the "Data verified" label, keep icon + count for the signal. */
  .qa-pill {
    padding: 4px 8px;
  }
  .qa-pill .qa-pill-label {
    display: none;
  }

  .data-table {
    font-size: 13px;
  }

  .data-table thead th,
  .data-table tbody td {
    padding: 8px 10px;
  }

  .filter-bar {
    gap: 6px;
  }

  .filter-btn {
    padding: 5px 12px;
    font-size: 12px;
  }

  .category-name {
    width: 100px;
    font-size: 12px;
  }

  .chart-wrapper {
    height: 250px;
  }

  .gauge-svg {
    width: 160px;
    height: 100px;
  }

  .gauge-score {
    font-size: 32px;
  }

  .modal {
    width: 95%;
    padding: 20px;
  }

  .search-input {
    max-width: 100%;
  }

  /* Results tab: KPI grids → 2 col on mobile */
  #results-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #results-gsc-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Reduce chart heights on mobile */
  #results-rankings-chart,
  #results-gsc-chart {
    height: 200px !important;
  }

  /* Results tab: inline gauges column → full width */
  #tab-results .grid-2col > div {
    min-width: 0 !important;
  }

  /* Section header stacks */
  .section-header {
    flex-direction: column;
    gap: 4px;
  }

  /* Work tab: full vertical layout */
  .work-week {
    margin-left: 0;
    flex-direction: column;
    gap: 10px;
  }

  .work-week::before,
  .work-timeline > .section-title ~ .work-week::before {
    display: none;
  }

  .work-week::after {
    left: 12px;
    top: 16px;
    width: 8px;
    height: 8px;
  }

  .work-card {
    min-width: 0;
    max-width: none;
  }

  /* Work tab: completed cards stack at mobile */
  #work-completed-cards {
    grid-template-columns: 1fr;
  }

  /* Audit tab: CWV cards stack on mobile */
  .cwv-grid {
    grid-template-columns: 1fr;
  }

  /* Local tab: 3 cols → 2 cols, smaller review score, hide rank column */
  .local-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .local-rank-col {
    display: none;
  }

  .local-terms-table td,
  .local-terms-table th {
    padding: 8px 10px;
  }

  .local-review-score {
    font-size: 36px;
  }

  /* AI Visibility tab: categories single column, tables scroll */
  #tab-ai-visibility .grid-2 {
    grid-template-columns: 1fr;
  }

  #tab-ai-visibility .grid-4 {
    grid-template-columns: 1fr;
  }

  .ai-vis-rec-card {
    padding: 14px 16px;
  }

  /* Insights tab: all single column + horizontal scroll on tables */
  /* Plan 27.5-03: .insights-sentiment-grid rule removed (orphan from 27.4-02) */

  .insights-ideas-cards {
    grid-template-columns: 1fr;
  }

  .insights-autocomplete-grid {
    grid-template-columns: 1fr;
  }

  #insights-gaps-table .data-table,
  #insights-opp-table .data-table {
    min-width: 600px;
  }

  /* Plan 27.5-03: .insights-sentiment-chart-wrap mobile rule removed (orphan) */

  /* Lighthouse gauges wrap tighter */
  .lighthouse-gauge-row {
    gap: 10px;
  }

  /* All tabs: contain overflow on mobile */
  .tab-content {
    overflow-x: hidden;
  }

  .tab-content .card,
  .tab-content .section,
  .tab-content .section-container {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Tables scroll horizontally on mobile — wrapper provides scroll */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 500px;
  }

  /* Charts constrained on mobile */
  .chart-wrapper canvas,
  .chart-container canvas {
    max-width: 100%;
  }

  /* Chart containers prevent overflow */
  .chart-container {
    overflow: hidden;
  }

  /* Traffic section responsive */
  .traffic-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .traffic-charts {
    grid-template-columns: 1fr;
  }

  /* Overview tab: GBP KPIs */
  #overview-gbp-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Overview tab: section spacing */
  .section {
    margin-bottom: 24px;
  }

  /* Competitor table needs scroll */
  #tab-competitors .card[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Heatmap responsive */
  .heatmap-layout {
    grid-template-columns: 1fr;
  }
  .heatmap-sidebar {
    max-height: none;
  }
  .hm-stats {
    flex-wrap: wrap;
  }

  /* Phase 23: Work tab hero + next-week responsive */
  .work-hero-card {
    padding: 18px;
  }

  .work-hero-title {
    font-size: 19px;
  }

  .work-hero-header {
    gap: 10px;
  }

  .work-hero-progress {
    margin-left: 0;
  }

  .work-current-week-tasks,
  .work-next-tasks {
    grid-template-columns: 1fr;
  }

  .work-next-card {
    padding: 14px 16px;
  }

  /* Phase 25-04: Recently Shipped collapses to 1 col on mobile */
  .work-shipped-cards {
    grid-template-columns: 1fr;
  }

  .work-shipped-card {
    padding: 12px 14px;
  }
}

/* Small mobile (375px) */
@media (max-width: 480px) {
  /* Phase 27.6-03: reduce card padding + enforce min-width:0 on grid
     children so long content (URLs, site preview image, KPI number
     clusters) can shrink instead of pushing the grid wider than viewport. */
  .card {
    padding: 16px;
  }
  .grid-2 > *, .grid-3 > *, .grid-4 > *, .kpi-grid > * {
    min-width: 0;
  }
  /* Kill any stray text overflow */
  .site-preview-url, .site-preview-url span,
  .kpi-label, .card-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .tab-content {
    padding: 16px 12px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Results KPI: single column on small mobile */
  #results-kpis {
    grid-template-columns: 1fr !important;
  }

  #results-gsc-kpis {
    grid-template-columns: 1fr !important;
  }

  .header-logo {
    height: 24px;
  }

  .header-client-name {
    font-size: 12px;
  }

  .finding-meta {
    flex-direction: column;
    gap: 6px;
  }

  /* Smaller gauge on very small screens */
  .gauge-svg {
    width: 140px;
    height: 90px;
  }

  .gauge-score {
    font-size: 28px;
  }

  .kpi-value {
    font-size: 22px;
  }

  /* Plan 27.4-06 Task 7 (UAT-032): at 375px, Overview's 5 full-width KPI
     tiles become a 2-column grid with centered, dominant values so the row
     stops feeling like grey filler. Label still subordinate, but values
     carry proper hierarchy. */
  #overview-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #overview-kpis .kpi-card {
    text-align: center;
    padding: 12px 8px;
    align-items: center;
  }
  #overview-kpis .kpi-value {
    font-size: 28px;
    font-weight: 700;
    display: block;
    line-height: 1.1;
    margin: 4px 0 2px;
  }
  #overview-kpis .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
  }
  /* Last tile takes full width when count is odd (5 → 2+2+1 centered) */
  #overview-kpis .kpi-card:nth-child(5):last-child {
    grid-column: 1 / -1;
  }

  .tab-title {
    font-size: 18px;
  }

  .tab-subtitle {
    font-size: 13px;
  }

  /* Local tab: single column KPIs */
  .local-kpi-grid {
    grid-template-columns: 1fr;
  }

  /* Traffic KPIs single column */
  .traffic-kpis {
    grid-template-columns: 1fr;
  }

  /* Section titles smaller */
  .section-title {
    font-size: 15px;
  }

  /* Filter buttons wrap better */
  .filter-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Chart wrapper shorter */
  .chart-wrapper {
    height: 200px;
  }

  /* Inline chart heights */
  #results-rankings-chart,
  #results-gsc-chart {
    height: 180px !important;
  }

  /* Work card text */
  .work-card-title {
    font-size: 12px;
  }

  /* Plan 27.5-03: .insights-sentiment-chart-wrap + .insights-sentiment-total mobile rules removed (orphan) */

  /* Local review score */
  .local-review-score {
    font-size: 30px;
  }

  .local-pack-number {
    font-size: 28px;
  }

  /* Category bar labels */
  .category-name {
    width: 80px;
    font-size: 11px;
  }

  /* Modal full width on small screens */
  .modal {
    width: 98%;
    padding: 16px;
  }

  /* Heatmap small mobile */
  .heatmap-select {
    max-width: 100%;
    font-size: 12px;
  }

  /* Phase 23: Work tab hero + next-week small mobile */
  .work-hero-card {
    padding: 14px;
    border-radius: var(--border-radius-sm);
  }

  .work-hero-title {
    font-size: 17px;
  }

  .work-hero-dates {
    display: none;
  }

  .work-hero-eyebrow {
    font-size: 10px;
    letter-spacing: 1.2px;
  }

  .work-next-dates {
    display: none;
  }

  .work-next-title {
    font-size: 14px;
  }

  /* Phase 25-04: Recently Shipped — hide date, keep phase badge, shrink title */
  .work-shipped-title {
    font-size: 13px;
  }

  .work-shipped-date {
    display: none;
  }
}

/* ─── Print Styles ─── */

@media print {
  .sidebar,
  .header,
  .hamburger,
  .sidebar-backdrop,
  .filter-bar,
  .btn,
  .search-wrapper,
  .modal-backdrop {
    display: none !important;
  }

  .main {
    margin: 0 !important;
  }

  .tab-content {
    display: block !important;
    padding: 20px !important;
    page-break-after: always;
  }

  .tab-content:not(.print-active) {
    display: none !important;
  }

  body {
    background: white;
    color: #1a1a1a;
  }

  .card,
  .kpi-card,
  .finding-card,
  .chart-container,
  .ai-category-card,
  .ai-vis-rec-card,
  .work-card,
  .work-next-month-list,
  .local-kpi-grid .kpi-card {
    background: white;
    border-color: #ddd;
    box-shadow: none;
  }

  /* Work tab: hide drag handles in print */
  .work-card {
    cursor: default;
  }

  .work-next-month-list {
    border-style: solid;
    opacity: 1;
  }

  .tab-title,
  .kpi-value,
  .finding-title,
  .section-title,
  .kanban-card-title {
    color: #1a1a1a;
  }

  .tab-subtitle,
  .finding-description,
  .kpi-label,
  .text-muted {
    color: #666;
  }
}

/* ─── v2-theme mobile collapse (Fable-5 review P1) ────────────────────────────
   The v2 renderers use fixed multi-column grids with NO mobile overrides, so at
   375px the score hero + tile strips overflowed a hidden-overflow tab (probe:
   .tab-content scrollWidth 812 vs clientWidth 375) — the Visibility sub-scores
   and Performance Radar were clipped and unreachable. Collapse the fixed grids
   below 640px; wrap the score row; let wide tables scroll within their card. */
@media (max-width: 640px) {
  .tab-content.v2-theme .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .tab-content.v2-theme .score-card {
    grid-column: auto;
    grid-row: auto;
  }
  .tab-content.v2-theme .score-top {
    flex-wrap: wrap;
  }
  .tab-content.v2-theme .movers-strip,
  .tab-content.v2-theme .gsc-tile-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tab-content.v2-theme .serp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tab-content.v2-theme .table-trio,
  .tab-content.v2-theme .two-col,
  .tab-content.v2-theme .two-col.equal,
  .tab-content.v2-theme .lkt,
  .tab-content.v2-theme .lkt-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .tab-content.v2-theme .sev-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* wide data tables scroll inside their card instead of pushing the page wide */
  .tab-content.v2-theme .section-body {
    overflow-x: auto;
  }
}

/* v2 mobile: any data table scrolls within itself (parents vary — section-body,
   table-wrap, bare zone divs — so the table is its own scroll container). */
@media (max-width: 640px) {
  .tab-content.v2-theme .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-content.v2-theme .table-wrap {
    overflow-x: auto;
    min-width: 0;
  }
}

/* v2 mobile: stack the inline-styled multi-column card rows (inline
   grid-template-columns beats any stylesheet rule, hence !important), and let
   EVERY table scroll within itself (rank-table has an intentional 1100px
   min-width for legibility — it scrolls inside its own box on a phone). */
@media (max-width: 640px) {
  .tab-content.v2-theme .v2-mob-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tab-content.v2-theme table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* v2 mobile: sub-score strip wraps to 2-up; jump-pill nav scrolls horizontally */
@media (max-width: 640px) {
  .tab-content.v2-theme .v2-score-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tab-content.v2-theme .lr-jump {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .tab-content.v2-theme .page-head,
  .tab-content.v2-theme .page-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* v2 mobile: long unbreakable domain strings wrap instead of overflowing */
@media (max-width: 640px) {
  .tab-content.v2-theme .domain-line,
  .tab-content.v2-theme .score-meta {
    overflow-wrap: anywhere;
    min-width: 0;
  }
}