/* ============================================================
   responsive.css — Layout overrides for smaller screens
   Pasig City Civic Intelligence Dashboard
   ============================================================ */

/* ─── 1440px — Slightly narrower sidebar ───────────────────── */
@media (max-width: 1440px) {
  :root { --sidebar-w: 210px; }
}

/* ─── 1280px — Compact layout, regrid dense panels ─────────── */
@media (max-width: 1280px) {
  :root { --sidebar-w: 180px; }

  html { font-size: 14px; }

  .view         { padding: 18px 20px; }
  #view-heatmap { padding: 14px 18px 12px; }

  /* KPI: 4 → 2×2 */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Category cards: 6 → 3 */
  .cat-cards-grid { grid-template-columns: repeat(3, 1fr); }

  /* Overview: side-by-side → stacked */
  .overview-grid { grid-template-columns: 1fr; }
  /* Activity feed gets bounded height when stacked */
  .overview-grid > .card:last-child { max-height: 300px; overflow: hidden; }

  /* Charts row: 2fr/1fr → equal halves */
  .charts-row { grid-template-columns: 1fr 1fr; }

  /* Heatmap filter: narrow */
  .heatmap-shell             { grid-template-columns: 190px 1fr; }
  .heatmap-shell.detail-open { grid-template-columns: 190px 1fr 250px; }
}

/* ─── 1024px — Icon-only sidebar, collapse dense areas ──────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 58px; }

  /* ── Sidebar: icon-only ── */
  .logo-text,
  .city-badge,
  .nav-section-label,
  .nav-label,
  .user-info,
  .sidebar-footer .fa-ellipsis { display: none !important; }

  .sidebar-logo { padding: 14px; justify-content: center; }
  .nav-section  { padding: 8px 8px 4px; }
  .nav-item     { padding: 11px; justify-content: center; gap: 0; }
  .nav-badge    { position: absolute; top: 4px; right: 4px; }
  .sidebar-footer { padding: 10px 8px; }
  .sidebar-user   { justify-content: center; gap: 0; }

  /* ── Grids ── */
  .charts-row           { grid-template-columns: 1fr; }
  .command-charts-row   { grid-template-columns: 1fr; }
  .cat-cards-grid       { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid             { grid-template-columns: repeat(2, 1fr); }
  .overview-grid        { grid-template-columns: 1fr; }

  /* ── Heatmap: filter panel becomes a top strip ── */
  .heatmap-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .heatmap-shell.detail-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .heatmap-panel-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    overflow: visible;
    padding: 10px 12px;
  }
  .panel-section, .panel-section-grow { flex: 0 0 auto; }
  .panel-stats { margin-top: 0; flex: 0 0 auto; }

  /* Detail panel: full width below map when open */
  .heatmap-shell.detail-open .heatmap-main-area { display: none; }
  .detail-panel {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ─── 900px — Small tablets / narrow windows ────────────────── */
@media (max-width: 900px) {
  .cat-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
  .charts-row     { grid-template-columns: 1fr; }

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

  .topbar-title    { font-size: 14px; }
  .topbar-subtitle { display: none; }
  .clock-display   { display: none; }
}