.mobile-modal-close { display: none; }

/* Shared compact layout. Desktop schedule and print layouts remain unchanged. */
@media screen and (max-width: 900px) {
  #topbar.brand-menu-open { z-index: 50; }
  #modal-layer { z-index: 60; }
  #toasts { z-index: 70; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }
  #main, #main > section, .modal, .master-form > *, .master-form-pair > *, .form-grid > *, .month-settings-time > * { min-width: 0; }
  .table-wrap, .roster-scroll, #recurring-history-rows { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .table-wrap:focus-visible, .roster-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

@media screen and (max-width: 760px) {
  body { font-size: var(--text-body); }
  #main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  body.day-view #main, body.pattern-detail-mode #main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  h1 { overflow-wrap: anywhere; }
  /* Readable fields avoid iOS focus zoom; checkbox sizing stays separate. */
  body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea) {
    min-width: 0; max-width: 100%; font-size: var(--text-label); min-height: 44px;
  }
  body :is(button, .button-link, .master-panel-actions > a) { min-height: 44px; }
  body :is(button, select) { touch-action: manipulation; }
  :is(.toolbar, .actions, .master-panel-actions, .solver-settings-actions, .route-head-actions) { flex-wrap: wrap; }
  :is(.toolbar, .actions) > * { max-width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .form-grid > :is(input, select, textarea) { width: 100%; }
  .form-grid > label { margin-top: 6px; }
  .master-form-pair, .recurring-staff-grid { grid-template-columns: minmax(0, 1fr); }
  fieldset { min-inline-size: 0; }
  .modal pre, .modal code { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Full-height sheets keep the keyboard, bottom safe area and close actions reachable. */
  #modal-layer { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); align-items: center; }
  #modal-layer .modal { max-width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 18px 14px; border-radius: 14px; }
  #modal-layer .mobile-modal-close { display: block; position: sticky; top: -10px; float: right; width: 44px; min-height: 44px; margin: -8px -4px 0 8px; padding: 0; z-index: 4; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: var(--text-title); line-height: 1; }
  .modal[data-saving="true"] .mobile-modal-close { pointer-events: none; opacity: .45; }
  .modal .modal-actions { position: sticky; bottom: -18px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--surface); z-index: 2; }
  .modal .actions { gap: 8px; }
  .modal .actions > button { flex: 1 1 120px; white-space: normal; }
  .visit-detail-panel { grid-template-columns: minmax(0, 1fr); }
  .visit-detail-map-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
  .modal > table { display: block; max-width: 100%; overflow-x: auto; }
  #account-drawer { max-width: 100vw; max-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  #toasts { left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); pointer-events: none; }
  .toast { max-width: 100%; overflow-wrap: anywhere; }
  .toast button, .toast a { pointer-events: auto; }

  /* Daily agenda stays the primary view; the staff timeline scrolls independently. */
  .day-page-head h1 { font-size: var(--text-title); }
  .day-context summary { min-height: 44px; display: flex; align-items: center; }
  .day-timeline-toolbar { flex-wrap: wrap; }
  .day-timeline-toolbar > * { min-width: 0; max-width: 100%; }
  .day-page .board-scroll { max-width: 100%; overscroll-behavior-x: contain; }
  .day-tools-menu > div { top: calc(var(--header-h) + 8px); max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; }

  /* All master values remain visible, including totals previously hidden on phones. */




  .master-tabs { margin-inline: 0; padding-inline: 0; gap: 0; }
  .master-tabs button { flex: 1; min-width: 0; padding-inline: 5px; font-size: var(--text-body); white-space: normal; }
  .master-list-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .master-list-controls > label, .master-list-controls select { width: 100%; min-width: 0; }
  .master-list-controls > details { align-self: end; }
  .master-list-controls summary { min-height: 44px; display: flex; align-items: center; }
  .master-extra-filters { right: 0; left: auto; max-width: calc(100vw - 40px); }
  .master-table { width: 100%; max-width: 100%; margin-inline: 0; border: 0; border-radius: 0; }
  .master-table .mobile-record-table { display: block; min-width: 0; width: 100%; }
  .mobile-record-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-record-table > tbody { display: grid; gap: 12px; }
  .mobile-record-table tr.mobile-record { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .mobile-record-table tr[hidden] { display: none; }
  .master-table .mobile-record td { display: block; position: relative; min-height: 32px; padding: 6px 0 6px 104px; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .mobile-record td::before { content: attr(data-mobile-label); position: absolute; left: 0; top: 6px; width: 94px; color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-regular); }
  .master-table .mobile-record td:first-child { padding: 3px 0 10px; font-size: var(--text-label); border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
  .mobile-record td:first-child::before, .mobile-record td[data-mobile-label=""]::before { content: none; }
  .master-table .mobile-record td[data-mobile-label=""] { padding: 8px 0 0; }
  .master-table .mobile-record td code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-small); }
  .master-row-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .master-row-action { font-size: var(--text-small); }
  .mobile-record td:last-child > button { width: 100%; }
  .master-status { font-size: var(--text-small); }
  .master-workload-head { display: none; }
  .master-workload-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 4px; }
  .master-workload-row > span:first-child { grid-column: 1 / -1; font-size: var(--text-body); }
  .master-workload-row > div { grid-column: 1 / -1; }
  .master-workload-row > span:nth-child(4), .master-workload-row > span:nth-child(5) { display: block; }
  .master-stat-notes { flex-wrap: wrap; white-space: normal; gap: 12px; }
  .master-rehab-card { flex-wrap: wrap; }
  .master-settings-grid { grid-template-columns: minmax(0, 1fr); }

  /* Work matrices retain row/column meaning and pinned staff names. */
  .month-settings-board { height: auto; min-height: 0; }
  .month-settings-grid { flex: none; height: 300px; max-height: 50dvh; }
  .month-settings-tools { gap: 8px; }
  .month-settings-search { flex: 1 1 100%; max-width: none; }
  .month-settings-selection { white-space: normal; }
  .month-settings-selectors { gap: 4px; }
  .month-settings-selectors button { min-width: 36px; flex: 1 0 36px; }
  .month-settings-editor .month-settings-edit-panel, .month-settings-editor .month-settings-review-panel { max-height: none; overflow: visible; }
  .month-settings-grid th:first-child { width: 100px; min-width: 100px; max-width: 100px; }
  .roster-scroll th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 105px; }
  .roster-scroll td label { min-height: 60px; }
  .roster-weekdays { flex-wrap: wrap; }

  /* Map and detail list fit in succession instead of filling multiple phone screens. */
  .route-map-panel, #route-map { min-height: 320px; height: 52dvh; max-height: 460px; }
  .route-sidebar { max-height: none; }
  .route-person-head { min-height: 52px; }
  .route-map-toolbar .route-map-people button { flex-shrink: 0; }
  .route-date-switch input { width: 100%; }
  .pattern-select, .pattern-toolbar-main > * { min-width: 0; }
  .pattern-row-title strong { font-size: var(--text-body); }
  .pattern-row-meta > small { font-size: var(--text-dense); }
  .transfer-head, .transfer-actions { flex-wrap: wrap; }
  .doc-row, .doc-duplicate, .doc-selected-card { min-width: 0; }
  .doc-duplicate { grid-template-columns: auto minmax(0, 1fr); }
  .doc-duplicate > a { grid-column: 2; }
  .doc-editor-head h1 { overflow-wrap: anywhere; }
}

@media screen and (max-width: 380px) {
  .brand { padding-inline: 8px; gap: 5px; }
  #userbox { gap: 4px; padding-inline: 4px; }
  .month-overview-page .month-current-heading { min-width: 0; }
  .month-settings-head { flex-wrap: wrap; }
  .month-settings-month { width: 100%; }
  .month-settings-month input { max-width: 100%; width: 100%; }
}

/* Keep controls readable and the work matrix usable at tablet widths. */
.day-week-page .day-toolbar { flex-wrap: wrap; }
.day-week-page .date-switch { flex: 0 0 auto; }
.day-week-page .date-switch > button { width: auto; min-width: 44px; flex: none; white-space: nowrap; }
.modal:has(#regenerate-preset) > label { display: grid; gap: 8px; margin-block: 16px; }
#regenerate-preset { width: 100%; min-width: 0; }
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .month-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .month-settings-board { height: min(60dvh, 620px); min-height: 360px; }
  .month-settings-editor { min-height: 0; max-height: none; }
  .month-settings-edit-panel, .month-settings-review-panel { overflow: visible; }
  .month-settings-selectors button { min-height: 36px; min-width: 36px; }
}