/* ==========================================================================
   WardDesk — Responsive rules
   Breakpoints: 1280 (wide), 1024 (tablet / drawer nav), 720 (phone)
   ========================================================================== */

/* Hidden by default; shown inside the breakpoints below */
.sidebar__close { display: none !important; }
.topbar__search-btn { display: none !important; }

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main-side { grid-template-columns: minmax(0, 1fr); }
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-filters__actions { grid-column: 1 / -1; justify-content: flex-end; }
  .verify-layout { grid-template-columns: 320px minmax(0, 1fr); }
}

/* Tablet & below: sidebar becomes a slide-out drawer ----------------------- */
@media (max-width: 1024px) {
  :root { --content-pad: var(--space-5); }

  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);
  }
  .app.is-collapsed .sidebar { width: 280px; }
  .app.is-collapsed .brand__name,
  .app.is-collapsed .nav-item__label,
  .app.is-collapsed .nav-item__badge,
  .app.is-collapsed .nav-section__label,
  .app.is-collapsed .user-card__meta,
  .app.is-collapsed .sidebar__logout { display: revert; }
  .app.is-collapsed .sidebar__brand { padding: 0 var(--space-3) 0 var(--space-5); justify-content: space-between; flex-direction: row; }
  .app.is-collapsed .sidebar__brand .brand { display: flex; }
  .app.is-collapsed .nav-item { justify-content: flex-start; padding: 0 var(--space-3); }
  .app.is-collapsed .user-card { justify-content: flex-start; padding: var(--space-2); }
  .app.is-collapsed .nav-section + .nav-section { border-top: 0; padding-top: 0; margin-top: var(--space-5); }

  .sidebar__collapse { display: none; }
  .sidebar__close { display: inline-grid !important; }

  .app.drawer-open .sidebar { transform: none; }
  .app.drawer-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
    z-index: calc(var(--z-drawer) - 1);
  }

  .main,
  .app.is-collapsed .main { margin-left: 0; }

  .icon-btn.topbar__menu { display: inline-grid; }
  .topbar__user-meta { display: none; }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-side-main { grid-template-columns: minmax(0, 1fr); }
  .form-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }

  .verify-layout { grid-template-columns: minmax(0, 1fr); }
  .verify-detail { position: static; }
  .queue__list { max-height: 360px; }
}


/* Phone --------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --content-pad: var(--space-4); }

  .content { padding-top: var(--space-5); }
  .topbar { gap: var(--space-2); }
  .topbar__search { display: none; }
  .topbar__search-btn { display: inline-grid !important; }
  .topbar__divider { display: none; }

  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header__title { font-size: var(--text-xl); }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }

  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--space-4); }
  .stat { padding: var(--space-4); }
  .stat__value { font-size: var(--text-2xl); }

  .quick-actions { grid-template-columns: minmax(0, 1fr); }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .choice-group { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: minmax(0, 1fr); }

  .toolbar { padding: var(--space-3); }
  .toolbar__search { max-width: none; flex-basis: 100%; }
  .toolbar .select { flex: 1; min-width: 0; }

  .pagination { justify-content: center; }
  .pagination__info { width: 100%; text-align: center; }

  .hbar { grid-template-columns: 84px minmax(0, 1fr) 48px; }
  .ward-row { grid-template-columns: minmax(0, 1fr) 64px; }
  .ward-row .progress { display: none; }

  .report-filters { grid-template-columns: minmax(0, 1fr); }

  .dropzone { flex-direction: column; align-items: flex-start; }
  .form-section { padding: var(--space-5) var(--space-4); }
  .form-actions { padding: var(--space-3) var(--space-4); }
  .form-actions__status { display: none; }
  .form-actions__buttons { width: 100%; }
  .form-actions__buttons .btn { flex: 1; }

  .modal-root { align-items: end; padding: 0; }
  .modal { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; }
  .modal__footer { border-radius: 0; }
  .modal__footer .btn { flex: 1; }

  .profile-hero { gap: var(--space-4); padding: var(--space-5); }
  .profile-hero__photo { width: 80px; height: 80px; }
  .profile-hero__actions { width: 100%; }
  .profile-hero__actions .btn { flex: 1; }

  .verify-detail__photo { width: 100%; height: 220px; }
  .verify-detail__actions .btn { flex: 1; }

  .auth__card { padding: var(--space-6) var(--space-5); }

  /* People table → card list on phones */
  .table--responsive thead { display: none; }
  .table--responsive,
  .table--responsive tbody,
  .table--responsive tr,
  .table--responsive td { display: block; width: 100%; }
  .table--responsive tr {
    position: relative;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  .table--responsive tbody tr:last-child { border-bottom: 0; }
  .table--responsive td {
    height: auto;
    padding: 2px 0;
    border: 0;
  }
  .table--responsive td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 96px;
    color: var(--text-3);
    font-size: var(--text-xs);
  }
  .table--responsive td.col-check { position: absolute; left: var(--space-4); top: 22px; width: auto; }
  .table--responsive td.col-check + td,
  .table--responsive tr.has-check td.cell-lead { padding-left: 28px; margin-bottom: 6px; }
  .table--responsive td.col-actions { position: absolute; right: var(--space-2); top: var(--space-3); width: auto; }
  .table--responsive td.hide-mobile { display: none; }
}


/* Card-mode labels always use the UI font, even in monospace cells */
@media (max-width: 720px) {
  .table--responsive td[data-label]::before { font-family: var(--font-sans); letter-spacing: var(--tracking-tight); }
}