/* ─────────────────────────────────────────────────────────────
   Responsive breakpoints and mobile adaptations.
   ───────────────────────────────────────────────────────────── */

/* ── Tablet (< 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-rail { width: 64px; min-width: 64px; }
  .nav-rail .nav-label,
  .nav-rail .nav-group-title,
  .nav-rail .nav-rail-footer-text,
  .nav-rail .tenant-name,
  .nav-rail .tenant-plan { display: none; }
  .nav-rail .nav-item { justify-content: center; padding: 10px 0; }
  .nav-rail .nav-item .nav-icon-wrap { margin-right: 0; }
  .nav-rail .tenant-selector { padding: 12px 8px; }
  .nav-rail .tenant-pill { justify-content: center; padding: 8px; }
  .nav-rail .tenant-pill .tenant-chevron { display: none; }

  .content-area { padding: 20px 16px; }
  .topbar { padding: 0 16px; }
  .search-box { width: 200px; }

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

/* ── Mobile (< 640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  .app-shell { flex-direction: column; }
  .nav-rail {
    width: 100%; min-width: 100%; height: auto; max-height: 56px;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .nav-rail-header,
  .nav-rail-footer,
  .tenant-selector,
  .nav-group-title { display: none; }

  .nav-section {
    display: flex; flex-direction: row; padding: 4px 8px; gap: 2px;
  }
  .nav-item {
    padding: 8px 10px; justify-content: center;
    flex-direction: column; gap: 2px; font-size: 10px;
  }
  .nav-item .nav-label { display: block; }
  .nav-item.active::before {
    top: auto; bottom: 0; left: 6px; right: 6px;
    width: auto; height: 3px; border-radius: 2px 2px 0 0;
  }

  .content-area { padding: 16px 12px; }
  .topbar { height: 48px; min-height: 48px; padding: 0 12px; }
  .search-box { display: none; }
  .view-title { font-size: 20px; }

  .metric-grid { grid-template-columns: 1fr; }
  .modal { max-width: 100%; margin: 8px; }
  .drawer { width: 100%; max-width: 100%; }

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

/* ── Compact density overrides ────────────────────────────── */
[data-density="compact"] .data-table thead th { padding: 6px 10px; }
[data-density="compact"] .data-table tbody td { padding: 5px 10px; font-size: 12px; }
[data-density="compact"] .run-event { padding: 4px 8px; }
[data-density="compact"] .metric-card { padding: 14px; }
[data-density="compact"] .card { padding: var(--space-3); }

/* ── Comfortable density overrides ────────────────────────── */
[data-density="comfortable"] .metric-card { padding: 28px; }
[data-density="comfortable"] .card { padding: var(--space-6); }
[data-density="comfortable"] .data-table tbody td { padding: 14px 16px; }