/* static/css/responsive.css — Mobile & tablet responsive layer.
   Loaded after all component CSS in base.html so it can override them. */

/* ─── Sidebar toggle button (hidden on desktop) ──────────────────────────── */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.sidebar-toggle svg { width: 20px; height: 20px; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: calc(var(--z-sidebar) - 1);
}

/* ─── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main-content { padding: var(--space-5); }
  .card__header { padding: var(--space-3) var(--space-5); }
  .card__body   { padding: var(--space-5); }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-toggle { display: inline-flex; }

  .sidebar {
    width: min(85vw, 320px);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.sidebar--open .sidebar-backdrop { display: block; }

  .topbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .topbar__title { font-size: var(--text-lg); }
  .topbar__actions { gap: var(--space-2); }

  .main-content { padding: var(--space-4); }

  .card__header { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .card__body   { padding: var(--space-4); }

  /* Collapse fixed-column inline grids to a single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 2fr auto"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Key-value rows: wrap the value under its label instead of overflowing */
  [style*="display:flex;justify-content:space-between"] {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  /* Tables scroll horizontally inside their cards */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th,
  .data-table td { white-space: nowrap; }

  /* Touch-friendly controls; 16px inputs stop iOS auto-zoom */
  .input, .select, .textarea { font-size: 16px; }
  .btn { min-height: 40px; }

  /* Auth screens */
  .auth-card { padding: var(--space-8) var(--space-6); }

  /* Public marketing site header: stack logo + nav */
  .site-header__row { flex-wrap: wrap; }
  .site-header__nav { flex-wrap: wrap; gap: var(--space-3); }
}

/* ─── Small phones ───────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .card__header { flex-direction: column; align-items: flex-start; }
  .topbar__actions { width: 100%; justify-content: flex-end; }
}