/* ===================================================================
   responsive.css — cross-prototype phone / tablet / desktop layer.
   Load after tokens.css + components.css + shell.css.

   Breakpoints (canonical):
     phone   max-width: 767px
     tablet  768px–1023px
     desktop min-width: 1024px
   Shell sidebar still uses 768 so Me / shell stay aligned.
=================================================================== */

/* ---- Always-on safety ------------------------------------------------ */
.app, .main, .page, .card, .table-wrap { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Bare tables (no .table-wrap): scroll the table without breaking layout */
.page > table.table,
.card > table.table,
.card__body > table.table {
  display: table;
  max-width: 100%;
}

/* ---- Tablet (≤1023) -------------------------------------------------- */
@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .form-grid--2,
  .form-grid--3 { grid-template-columns: 1fr; }

  .page__head {
    align-items: flex-start;
  }
  .page__head > .row-flex,
  .page__head > .btn-row,
  .page__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  /* Common multi-col page shells */
  .split,
  .master-detail,
  .two-col,
  .layout-2,
  .layout--2 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .nav__search { max-width: 220px; }
  .tweaks { width: min(280px, calc(100vw - 32px)); }
}

/* ---- Phone (≤767) — align with shell.css sidebar cutoff -------------- */
@media (max-width: 767px) {
  html, body {
    overflow-x: clip;
  }
  .app, .main, .page {
    min-width: 0;
    max-width: 100%;
  }

  .page {
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  }
  .page__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .page__title { font-size: 24px; }

  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }

  /* Touch targets */
  .btn:not(.btn--ghost):not(.icon-btn) { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .input, .select, .textarea {
    min-height: 44px;
    font-size: 16px; /* avoid iOS focus zoom */
  }

  /* Modal panels / drawers → full-bleed sheets (not the overlay scrim) */
  .modal__panel,
  .amodal,
  .pu-drawer,
  .drawer,
  .sheet,
  .sym-drawer,
  .ar-drawer,
  aside.drawer,
  [data-drawer] {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  }
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal__panel {
    max-height: 92dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  }
  .pu-drawer,
  .ar-drawer,
  .sym-drawer {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: min(92dvh, 100%);
    transform: translateY(100%);
  }
  .pu-drawer[data-open="true"],
  .ar-drawer[data-open="true"],
  .sym-drawer[data-open="true"] {
    transform: translateY(0);
  }

  /* Toolbars / filter rows */
  .toolbar,
  .filters,
  .seg-row,
  .page-tools,
  .btn-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .toolbar .search,
  .filters .search {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100%;
  }

  /* Tabs scroll instead of blowing out page width */
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wide tables scroll inside the wrap — never shift the page */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    display: table !important;
  }

  /* Stats / KPI strips */
  .stats,
  .stat-row,
  .kpi-row,
  .sym-stats,
  .hrd .hero__stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Auth split panels */
  .auth { grid-template-columns: 1fr !important; }
  .auth__right { display: none !important; }
  .auth__left { padding: 24px 20px !important; }
}

/* ---- Very small phones ----------------------------------------------- */
@media (max-width: 430px) {
  .stats,
  .stat-row,
  .kpi-row,
  .sym-stats,
  .hrd .hero__stats {
    grid-template-columns: 1fr !important;
  }
  .page__title { font-size: 22px; }
}