/* Vortex Page-specific overrides + responsive */

/* ---- Trends chart grid ---- */
.chart-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); margin-bottom: var(--sp-6);
}

/* ---- Compare side-by-side ---- */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); margin: var(--sp-6) 0;
}

/* ---- Wide screens (1440px+): let KPIs breathe ---- */
@media (min-width: 1440px) {
  .summary { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-4); }
  .dash-summary { margin: var(--sp-8) var(--sp-10); }
}

/* ---- Laptop breakpoint (1200px) ---- */
@media (max-width: 1200px) {
  .dash-summary-grid {
    grid-template-columns: auto 1fr 1fr;
  }
  .dash-summary-grid > :nth-child(4) {
    grid-column: 2 / -1;
  }
}

/* ---- Tablet breakpoint (768px) ---- */
@media (max-width: 768px) {
  .header { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .nav {
    display: none; flex-direction: column; width: 100%; order: 10;
    margin-left: 0; gap: 2px; padding-top: var(--sp-2);
    border-top: 1px solid var(--border-default);
  }
  .nav.nav-open { display: flex; }
  .nav a { padding: 10px var(--sp-4); font-size: var(--text-base); width: 100%; }
  .nav a.active::after { display: none; }
  .summary { padding: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpi-n { font-size: 22px; }
  .breadcrumb { padding: 10px var(--sp-4); }
  .sub-header { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .content { padding: var(--sp-4); }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar input { min-width: 140px; }
  .filter-bar select { min-width: auto; }
  .stats-strip { gap: var(--sp-2); }
  .completion-stats { gap: var(--sp-3); font-size: var(--text-base); }
  .chart-grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .dash-summary { margin: var(--sp-4); padding: var(--sp-4); }
  .dash-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  .dash-health { grid-column: 1 / -1; }
  .monitor-widget { flex-wrap: wrap; gap: var(--sp-2); }
  .monitor-last { margin-left: 0; width: 100%; }
  .hide-on-tablet { display: none !important; }
}

/* ---- Mobile breakpoint (480px) ---- */
@media (max-width: 480px) {
  .header { padding: var(--sp-2) var(--sp-3); }
  .logo { font-size: var(--text-md); }
  .summary { padding: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--sp-2); }
  .kpi { padding: 8px 10px; }
  .kpi-n { font-size: 18px; }
  .kpi-text .kpi-n { font-size: var(--text-base); max-width: 120px; }
  .kpi-l { font-size: 9px; }
  .breadcrumb { padding: 8px var(--sp-3); font-size: var(--text-sm); }
  .content { padding: var(--sp-3); }
  .sub-header { padding: var(--sp-2) var(--sp-3); }
  .filter-bar { gap: var(--sp-2); }
  .filter-bar select,
  .filter-bar input { width: 100%; min-width: 0; font-size: var(--text-sm); padding: var(--sp-2) 10px; }
  .filter-bar span[style*="margin-left:auto"] { margin-left: 0 !important; width: 100%; }
  .section-head { font-size: 10px; margin-bottom: 10px; }
  .run-row td { padding: 10px var(--sp-2); font-size: var(--text-sm); }
  thead th { padding: 8px var(--sp-2); font-size: 10px; }
  .badge { font-size: 10px; padding: 3px 8px; min-height: 24px; }
  .hide-on-mobile { display: none !important; }
  .stats-strip { gap: var(--sp-1); }
  .stat-item { padding: 8px var(--sp-2); }
  .stat-val { font-size: var(--text-xl); }
  .stat-lbl { font-size: 9px; }
  .pagination { gap: var(--sp-1); }
  .empty { padding: 40px var(--sp-4); }
  .empty p { font-size: var(--text-lg); }
  .tab-nav { flex-wrap: wrap; }
  .dash-summary { margin: var(--sp-3); padding: var(--sp-3); }
  .dash-summary-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .bar-wrap { min-width: 60px; }
}