/* ─── 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;
  }

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

  /* 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;
  }
}

/* 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;
  }

  .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 */
  .insights-sentiment-grid {
    grid-template-columns: 1fr;
  }

  .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;
  }

  /* Insights sentiment chart smaller on mobile */
  .insights-sentiment-chart-wrap {
    height: 200px;
  }

  /* 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;
  }
}

/* Small mobile (375px) */
@media (max-width: 480px) {
  .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;
  }

  .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;
  }

  /* Insights: smaller chart */
  .insights-sentiment-chart-wrap {
    height: 180px;
  }

  .insights-sentiment-total {
    font-size: 24px;
  }

  /* 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;
  }
}

/* ─── 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;
  }
}