/* One phone layout for every NAS workspace. Desktop tables stay unchanged. */
.mobile-column-label { display: none; }

@media (max-width: 920px) {
  html {
    overflow-x: clip;
    scroll-snap-type: y proximity;
    scroll-padding-block: var(--mobile-top-inset, 85px) var(--mobile-bottom-inset, 90px);
  }
  body { overflow-x: clip; }
  #app, .app-shell, .workspace, .main-content, #modal-root { min-width: 0; max-width: 100%; }
  .main-content { padding: 18px 12px; padding-bottom: max(50svh, var(--mobile-bottom-inset, 100px)) !important; }
  .main-content *, .modal *, .public-form-page * { box-sizing: border-box; }
  .main-content :is(section, article, div, form, label, fieldset, nav, header, footer),
  .modal :is(section, article, div, form, label, fieldset) { min-width: 0; }
  .main-content :is(p, h1, h2, h3, h4, span, strong, small, dd, dt, a, button, summary),
  .modal :is(p, h1, h2, h3, span, strong, small, dd, a, button) { overflow-wrap: anywhere; }
  .main-content :is(input, select, textarea), .modal :is(input, select, textarea),
  .public-form-page :is(input, select, textarea) { min-width: 0; max-width: 100%; }
  .main-content :is(img, video, canvas, iframe), .modal :is(img, video, canvas, iframe) { max-width: 100%; }
  .main-content pre, .modal pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .main-content .panel { max-width: 100%; }
  [data-mobile-snap] { scroll-snap-align: center; scroll-snap-stop: normal; }
  html:has(.modal-backdrop), html:has(.app-shell.menu-open), html:has(input:not([type="checkbox"]):focus, textarea:focus, [contenteditable="true"]:focus) { scroll-snap-type: none; }

  /* Reflow tables instead of hiding the columns outside the screen. */
  .clinic-inbox-table-wrap, .recall-table-wrap, .practice-table { width: 100%; max-width: 100%; overflow: visible; }
  table.mobile-card-table { display: block; width: 100%; min-width: 0; max-width: 100%; border: 0; }
  .mobile-card-table > thead:not(.mobile-selection-header),
  .mobile-selection-header th:not(.mobile-select-all) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .mobile-card-table > tbody { display: grid; gap: 14px; width: 100%; }
  .mobile-card-table > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    min-width: 0; width: 100%; padding: 16px; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 7px #1c403508;
  }
  .mobile-card-table > tbody > tr > :is(td, th) {
    display: block; width: auto; min-width: 0; max-width: 100%; padding: 0;
    border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere;
    font-size: 13px; line-height: 1.5; background: transparent; box-shadow: none;
  }
  .mobile-card-table > tbody > tr > :first-child,
  .mobile-card-table > tbody > tr > .mobile-actions-cell { grid-column: 1 / -1; }
  .mobile-card-table > tbody > tr > :first-child { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .mobile-card-table > tbody > tr > :first-child > strong { font-size: 15px; }
  .mobile-card-table .mobile-column-label {
    display: block; margin-bottom: 4px; color: #70837b; font-size: 10px;
    font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .035em;
  }
  .mobile-card-table .mobile-column-label:empty { display: none; }
  .mobile-card-table .cw-actions, .recall-row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .mobile-card-table .button, .recall-row-actions .button { width: 44px; min-width: 44px; max-width: 44px; height: 44px; flex-basis: 44px; }
  .mobile-card-table .practice-pill { white-space: normal; }
  .mobile-card-table > tbody > tr.clinic-inbox-urgent { border-left: 3px solid #d58d62; }
  .mobile-card-table .mobile-selection-header, .mobile-selection-header > tr { display: block; }
  .mobile-selection-header .mobile-select-all { display: flex; align-items: center; gap: 10px; padding: 10px 0 16px; background: transparent; }
  .mobile-select-all .mobile-column-label { margin: 0; }
  .mobile-card-table > tbody > tr > .mobile-selection-cell { border: 0; padding: 0; }
  .mobile-selection-cell .mobile-column-label { display: none; }
  .mobile-card-table > tbody > tr:has(.mobile-selection-cell) > :nth-child(2) { grid-column: 1 / -1; }
  .recall-reason { max-width: 100%; }

  /* All navigation is visible and wraps; no sideways tab strips on phones. */
  .pw-tabs, .cw-record-tabs, .record-tabs, .admin-work-tabs,
  .segmented-filter, .clinic-mail-conversation {
    display: flex !important; flex-wrap: wrap; width: 100%; max-width: 100%;
    overflow: visible; scroll-snap-type: none;
  }
  .pw-tabs { justify-content: flex-start; gap: 6px; }
  .pw-tabs button { scroll-snap-align: none; }
  .admin-work-tabs button, .record-tabs button, .cw-record-tabs button,
  .clinic-mail-conversation button, .segmented-filter button { min-width: 0; max-width: 100%; white-space: normal; }
  .admin-work-tabs button { padding: 10px; }
  .mobile-bottom-nav { max-width: calc(100% - 12px); }
  .mobile-nav-item { overflow-wrap: anywhere; white-space: normal; }
  .mobile-bottom-nav .mobile-nav-item > span { font-size: clamp(7px, 1.8vw, 9px); overflow-wrap: normal; }
  .cw-mobile-section { display: none; }

  .recall-layout, .cw-two-col, .cw-summary-grid, .pw-overview-grid,
  .care-services, .care-portal-tiles, .practice-provider-grid, .practice-staff-grid,
  .practice-recall-grid, .care-vaccine-grid { grid-template-columns: minmax(0, 1fr); }
  .recall-categories { display: none; }
  .recall-mobile-category { display: flex; }
  .cw-summary-grid > .panel:last-child { grid-column: auto; }
  .recall-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recall-filters .field-label { min-width: 0; width: 100%; }
  .recall-filters .recall-search, .recall-selected { grid-column: 1 / -1; }
  .panel-header, .cw-row, .page-actions, .toolbar, .cw-filter-bar,
  .date-nav, .practice-recency, .care-credit, .care-comms-stats section { flex-wrap: wrap; }
  .cw-row-main, .pw-patient .cw-row-main { min-width: 0; flex: 1 1 130px; }
  .cw-row-end { max-width: 100%; flex-wrap: wrap; }
  .cw-row { margin-block: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .cw-row:last-child { border-bottom: 1px solid var(--line); }
  .pw-timeline-card .cw-row, .admin-debtor .cw-row { margin: 0; padding: 0 0 10px; border: 0; background: transparent; }
  .practice-recency > span { min-width: 0; flex-basis: 100%; }
  .cw-filter-bar > label { flex-wrap: wrap; max-width: 100%; }
  .cw-details, .clinician-profile-view .cw-details { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .practice-donut-layout { flex-wrap: wrap; }
  .admin-income-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .admin-income-chart > div { min-width: 0; }
  .practice-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; gap: 16px; }
  .practice-bar-month > div { min-height: 130px; }
  .form-grid, .form-grid.three-col { grid-template-columns: minmax(0, 1fr); }
  .form-grid > .full { grid-column: 1 / -1; }
  .modal { width: 100%; max-width: 100%; }
  .modal-header, .modal-footer { flex-wrap: wrap; }
  .modal-body { overflow-x: clip; }
  .recall-audience > div { flex-wrap: wrap; overflow-wrap: anywhere; }
  .clinic-mail-conversation { gap: 8px; }
  .clinic-mail-item > span { flex-wrap: wrap; }
  .care-portal { padding: 16px; }
  .care-portal-welcome { padding: 20px; }
}

@media (max-width: 380px) {
  .main-content { padding-inline: 8px; }
  .mobile-card-table > tbody > tr { padding: 12px; gap: 12px; }
  .recall-filters { grid-template-columns: minmax(0, 1fr); }
  .clinic-inbox-page > .panel { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
}

.demo-mode-label { color: #58705b; font-size: .68rem; white-space: normal; overflow-wrap: anywhere; }