/* Shared responsive foundation for the public, publisher and admin routes. */
html.metro-modal-open, html.metro-modal-open body { overflow: hidden !important; }
.responsive-dialog { max-height: calc(var(--metro-dialog-height, 100dvh) - 32px); min-width: 0; min-height: 0; }
.responsive-dialog > .flex-1, .wa-reminders-layout, .wa-reminders-results, .wa-reminders-list { min-height: 0; min-width: 0; }
.wa-reminders-panel { max-height: calc(var(--metro-dialog-height, 100dvh) - 32px); }
.wa-reminders-shortcuts { flex-shrink: 0; padding: 8px 12px; gap: 8px; background: #f0fdf4; border-bottom: 1px solid #bbf7d0; }
.wa-reminders-shortcuts button { flex: 1; border: 1px solid #86efac; border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700; background: white; color: #166534; }
.wa-reminder-card { overflow-wrap: anywhere; }
.wa-composer > div { min-width: 0; min-height: 0; }
.wa-composer textarea { min-height: 180px; }

@media (max-width: 767px) {
  #root main, #root section, #root form, #root .flex-1 { min-width: 0; }
  #root input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), #root select, #root textarea { font-size: 16px !important; max-width: 100%; min-height: 44px; }
  #root input[type="checkbox"], #root input[type="radio"] { min-width: 20px; min-height: 20px; }
  #root button, #root a[href] { touch-action: manipulation; }
  #root button:not(.weekly-assignment-card), #root a[href]:not(.weekly-assignment-card) { min-height: 44px; }
  #root textarea { min-height: 120px; }
  #root main .p-6, #root main .p-8 { padding: 16px; }
  .responsive-settings-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .responsive-settings-tabs button { padding: 10px 4px !important; font-size: 12px; min-width: 0; overflow-wrap: normal; }
  .responsive-shift-settings { padding: 12px !important; }
  .responsive-shift-settings > div:first-child { flex-direction: column; align-items: stretch; gap: 12px; }
  #root .flex:has(> input[type="time"]) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  #root .flex:has(> input[type="time"]) > input[type="text"] { grid-column: 1 / -1; width: 100%; }
  #root .flex:has(> input[type="time"]) > input[type="time"] { width: 100%; min-width: 0; }
  #root .flex:has(> input[type="time"]) > span { display: none; }
  #root .flex:has(> input[type="time"]) > button { grid-column: 1 / -1; border: 1px solid #fecaca; background: #fff1f2; display: flex; align-items: center; justify-content: center; }
  #root h1, #root h2, #root h3, #root h4, #root p { overflow-wrap: anywhere; }
  #root img, #root video, #root canvas { max-width: 100%; }
  #root .w-64:not(aside), #root .w-80:not(aside), #root .w-96 { max-width: 100%; }
  .responsive-overlay { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) !important; height: var(--metro-dialog-height,100dvh); bottom: auto !important; overflow: hidden; }
  .responsive-dialog { max-height: calc(var(--metro-dialog-height,100dvh) - 24px) !important; width: 100%; overflow-y: auto !important; overscroll-behavior: contain; }
  .responsive-dialog > header, .responsive-dialog > footer, .responsive-dialog > .border-b, .responsive-dialog > .border-t { flex-shrink: 0; }
  .responsive-dialog .overflow-y-auto { min-height: 0; -webkit-overflow-scrolling: touch; }
  .responsive-dialog > .p-8, .responsive-dialog > .p-6 { padding: 16px; }
  .wa-reminders-overlay { padding: 0 !important; }
  .wa-reminders-panel { height: var(--metro-dialog-height,100dvh) !important; max-height: var(--metro-dialog-height,100dvh) !important; border-radius: 0 !important; overflow: hidden !important; }
  .wa-reminders-shortcuts { display: flex; }
  .wa-reminders-layout { display: block !important; overflow-y: auto !important; flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .wa-reminders-settings { max-height: none !important; overflow: visible !important; display: block !important; width: 100%; padding: 16px; }
  .wa-reminders-settings textarea { display: block; min-height: 180px !important; height: 180px !important; resize: vertical; }
  .wa-reminders-results { display: block !important; width: 100%; }
  .wa-reminders-list { overflow: visible !important; height: auto; padding: 12px; }
  .wa-reminder-card { padding: 12px; }
  .wa-reminder-card > div:first-child { flex-direction: column; gap: 12px; }
  .wa-reminder-card > div:first-child > div { min-width: 0; width: 100%; }
  .wa-reminder-card > div:first-child > div:first-child { align-items: flex-start; }
  .wa-reminder-card > div:first-child > div:first-child > div:last-child { min-width: 0; flex: 1; }
  .wa-reminder-card p.flex { flex-wrap: wrap; font-size: 12px; }
  .wa-reminder-card a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .wa-composer { padding-bottom: 20px; }
  .wa-composer > div { width: 100%; max-height: none !important; }
  .wa-composer > div:first-child > div:last-child { max-height: 45dvh; min-height: 120px; flex: none; overflow-y: auto; }
  .wa-composer > div:nth-child(2) { padding: 16px; }
  .wa-composer > div:last-child > div:nth-child(2) { overflow: visible; }
  .wa-composer a, .wa-composer button { min-width: 44px; }
  .wa-composer .flex.justify-between { gap: 8px; flex-wrap: wrap; }
  .internal-messages { height: 75dvh !important; min-height: 360px !important; max-height: none; }
  .internal-messages > div { min-height: 0; }
  .internal-messages textarea { min-height: 80px !important; }
  /* Dynamic data tables become labelled cards, including reports/settings. */
  .responsive-table-wrap { overflow: visible !important; }
  .responsive-data-table { display: block; width: 100% !important; min-width: 0 !important; white-space: normal !important; }
  .responsive-data-table thead { display: block; position: static; }
  .responsive-data-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
  .responsive-data-table th { display: none; }
  .responsive-data-table th[data-mobile-sort] { display: block; padding: 8px; min-height: 44px; font-size: 11px; background: #f1f5f9; border-radius: 8px; }
  .responsive-data-table tbody, .responsive-data-table tfoot { display: block; width: 100%; padding: 8px; }
  .responsive-data-table tbody > tr, .responsive-data-table tfoot > tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid #cbd5e1; border-radius: 10px; margin-bottom: 12px; padding: 6px; width: 100%; }
  .responsive-data-table td { display: block; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 8px !important; white-space: normal !important; overflow-wrap: anywhere; text-align: left; }
  .responsive-data-table td::before { content: attr(data-mobile-label); display: block; font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 6px; }
  .responsive-data-table td:first-child, .responsive-data-table td[colspan] { grid-column: 1 / -1; }
  .responsive-data-table td:has(textarea), .responsive-data-table td:has(select) { grid-column: 1 / -1; }
  .responsive-data-table td button { min-width: 44px; }
  .responsive-data-table td input[type="number"] { width: 100%; }
}
@media (max-width: 359px) {
  #root .flex:has(> input[type="time"]) { grid-template-columns: minmax(0,1fr); }
  .dashboard-header > div > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .responsive-data-table tbody > tr { grid-template-columns: minmax(0,1fr); }
}