/* ================================================================
   Responsive Breakpoints
   ================================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .nav-item { font-size: .72rem; padding: 3px 14px; }
  .nav-item-sub { padding-left: 28px; font-size: .64rem; }
  .main-inner { padding: 20px 24px; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 272px; }

  .topbar-hamburger { display: block; }

  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .main {
    margin-left: 0;
  }
  .main-inner { padding: 16px; }

  /* overlay when sidebar open */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 90;
  }
  .sidebar.is-open ~ .sidebar-overlay { display: block; }

  /* stack KPIs */
  .kpi-row { flex-direction: column; }
  .wf-chart-row { flex-direction: column; }

  /* pillar band cards stack */
  .pillar-band-body { flex-direction: column; }

  /* split pane becomes vertical */
  .split-pane { flex-direction: column; }
  .split-left, .split-right { width: 100%; }
  .split-left { border-right: none; border-bottom: 1px solid var(--n-200); }
  .split-handle { display: none; }
}