/* ── 1440px+ ──────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .repo-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ── 1024px to 1439px ─────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .topbar-search input { width: 160px; }
}

@media (max-width: 1100px) {
  .deploy-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 1024px ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-width: 220px; }
  .file-explorer { width: 240px; }
  .topbar-search { display: none; }
}

/* ── 768px (Tablet) ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar becomes overlay on mobile */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-width) !important; transform: translateX(-100%); }
  .sidebar.collapsed .sidebar-title { opacity: 1; width: auto; }
  .sidebar.collapsed .nav-label { opacity: 1; width: auto; }
  .sidebar.collapsed .nav-section-label { opacity: 1; }
  .sidebar.collapsed .sidebar-accounts { opacity: 1; pointer-events: auto; }

  .hamburger { display: flex; }
  .sidebar-toggle-btn { display: none; }

  .page { padding: 20px 16px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .repo-grid { grid-template-columns: 1fr; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-group { flex-wrap: wrap; }
  .filter-group .select-field { flex: 1; }

  .vault-toolbar { flex-direction: column; }

  /* Editor on mobile */
  .editor-layout { flex-direction: column; height: auto; }

.file-explorer {
  width: 100%;
  height: 60vh;
  max-height: 600px;
  border-right: none;
  border-bottom: 1px solid var(--border);
  position: static;
}

  .explorer-repo-selector { flex-direction: row; }
  .explorer-field { flex: 1; min-width: 0; }

  .editor-panel { min-height: 420px; margin-top: 16px; }
  .monaco-container { min-height: 360px; }
  .editor-toolbar { flex-wrap: wrap; gap: 8px; }
  .editor-actions { flex-wrap: wrap; }

  /* Tables */
  .logs-table th:nth-child(2),
  .logs-table td:nth-child(2),
  .logs-table th:nth-child(3),
  .logs-table td:nth-child(3) { display: none; }

  /* Repo rows */
  .repo-row-branch, .repo-row-size, .repo-row-updated { display: none; }
}

/* ── 425px ────────────────────────────────────────────────────────────────── */
@media (max-width: 425px) {
  .page { padding: 16px 12px; }
  .page-title { font-size: 1.4rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 1.4rem; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-status .status-label { display: none; }
  .auth-card { padding: 36px 24px; }

  .modal { padding: 12px; }
  .modal-body { padding: 18px 16px; }
  .modal-footer { padding: 12px 16px; }

  .toast-container { bottom: 16px; right: 16px; left: 16px; }
  .toast { min-width: unset; }

  /* Editor — tighten further at phone widths */
  .file-explorer { max-height: 260px; }
  .explorer-path { font-size: 0.6875rem; padding: 7px 10px; }
  .editor-file-info span#current-file-name { max-width: 140px; }
  .editor-actions .btn-sm span,
  .editor-actions .btn-sm { font-size: 0; gap: 0; padding: 8px 10px; }
  .editor-actions .btn-sm i { font-size: 0.875rem; }
}

/* ── 375px ────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .section-header { flex-wrap: wrap; gap: 8px; }
  .breadcrumb { display: none; }
}

/* ── 320px ────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { flex-direction: column; text-align: center; }
}

/* ── Large screens ────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .page { padding: 40px 48px; }
  .stats-grid { gap: 20px; }
  .repo-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* ── Touch devices ────────────────────────────────────────────────────────── */
@media (hover: none) {
  .tree-item-actions { display: flex; }
  .btn:hover { transform: none; }
}

/* ── Safe areas (iPhone notch etc.) ──────────────────────────────────────── */
@supports (padding: max(0px)) {
  .topbar { padding-left: max(20px, env(safe-area-inset-left)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .toast-container { bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); }
}