/* Mobile overrides only. Desktop rules and official branding stay in the
   existing shared stylesheets. Breakpoints follow each portal's navigation. */
@media (max-width: 900px) {
  body.workspace-navigation-open { overflow: hidden; }
  .admin-date-chip { display: none; }
  .admin-sidebar { width: min(300px, calc(100vw - 32px)); padding-top: max(20px, env(safe-area-inset-top)); }
  .admin-nav-item, .admin-logout { min-height: 48px; line-height: 1.35; }
  .admin-icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .admin-primary-button, .admin-secondary-button, .admin-text-button,
  .admin-row-action, .admin-row-action[data-service-toggle] { min-height: 44px; }
  .admin-field { min-width: 0; font-size: 13px; }
  .admin-field small { font-size: 12px; }
  .admin-field input, .admin-field select, .admin-field textarea,
  .admin-inline-select { font-size: 16px; min-height: 48px; min-width: 0; }
  .admin-app .workspace-pagination button, .admin-app .workspace-pagination select { min-height: 44px; }
  .admin-app .workspace-pagination select { font-size: 16px; }
  .admin-topbar { height: auto; min-height: 72px; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .admin-topbar-start { flex: 1; }
  .admin-topbar-actions { display: contents; }
  .admin-search { display: flex; order: 2; flex: 1 0 100%; width: 100%; height: 48px; }
  .admin-search input { display: block; font-size: 16px; }
  .admin-search kbd, .admin-avatar-top { display: none; }
  .admin-modal-card { padding: 20px; }
  .admin-modal-head > div { min-width: 0; overflow-wrap: anywhere; }
  .admin-modal-actions { flex-wrap: wrap; }
  .admin-modal-actions > button { flex: 1; padding: 10px 14px; white-space: normal; }
  .workspace-page-region:focus-visible { outline: 2px solid #8db9f5; outline-offset: -2px; }
}

@media (max-width: 850px) {
  .clinic-header-clock { display: none; }
  .clinic-sidebar { width: min(300px, calc(100vw - 32px)); padding-top: max(22px, env(safe-area-inset-top)); }
  .clinic-sidebar .clinic-brand { padding-right: 48px; padding-bottom: 20px; }
  .clinic-sidebar-close { position: absolute; right: 16px; top: 24px; color: #fff; background: #ffffff0c; border-color: #ffffff30; }
  .clinic-nav-label { margin-top: 18px; }
  .clinic-nav, .clinic-logout { min-height: 48px; }
  .clinic-top-start, .clinic-top-start > div, .clinic-heading > div,
  .clinic-panel-head > div, .clinic-field, .clinic-record-grid > div,
  .clinic-task-meta > div { min-width: 0; }
  .clinic-panel-head h2, .clinic-heading h1, .clinic-note,
  .clinic-check, .clinic-thread-button, .clinic-queue-row h3 { overflow-wrap: anywhere; }
  .clinic-top-start { gap: 10px; }
  .clinic-top-start p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clinic-top-start strong { display: block; font-size: 14px; line-height: 1.4; }
  .clinic-icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .clinic-button, .clinic-button.small { min-height: 44px; font-size: 13px !important; white-space: normal; line-height: 1.4; }
  .clinic-field { font-size: 13px; }
  .clinic-field input, .clinic-field select, .clinic-field textarea,
  .clinic-toolbar input, .clinic-toolbar select,
  .clinic-message-search input, .clinic-task-footer select { min-height: 48px; font-size: 16px; min-width: 0; }
  .clinic-task-footer select.clinic-button { font-size: 16px !important; }
  .clinic-field small, .clinic-note { font-size: 12px; }
  .clinic-form-footer .clinic-button { min-width: 0; }
  .clinic-dialog { width: min(650px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
  .clinic-dialog.wide { width: min(980px, calc(100vw - 24px)); }
  .clinic-dialog-head, #clinicDialogBody { padding: 18px; }
  .clinic-dialog-head > div { min-width: 0; overflow-wrap: anywhere; }
  .clinic-dialog-head h2 { font-size: 20px; line-height: 1.3; }
  .clinic-dialog .clinic-form-footer { position: sticky; bottom: 0; padding: 14px 0; background: #fff; box-shadow: 0 -8px 12px #fff; z-index: 1; }
  .clinic-rx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-rx .clinic-field:first-child { grid-column: 1 / -1; }
  .clinic-rx .clinic-field input { min-height: 48px; font-size: 16px; }
  .clinic-check { min-height: 48px; line-height: 1.5; }
  .clinic-check input { width: 20px; height: 20px; flex-shrink: 0; }
  .clinic-app[data-role=patient] .workspace-overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-next-visit { grid-column: 1 / -1; }
  .workspace-pagination button, .workspace-pagination select,
  .workspace-overview-panel .workspace-pagination button { min-height: 44px; }
  .workspace-pagination select { font-size: 16px; }
}

@media (max-width: 768px) {
  .clinic-content { padding: 24px 18px 40px; }
  .clinic-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .clinic-heading h1 { font-size: 28px; }
  .clinic-heading p { font-size: 14px; }
  .clinic-toolbar { padding: 16px; gap: 12px; }
  .clinic-toolbar > input[type=search] { flex-basis: 100%; min-width: 0; width: 100%; }
  .clinic-toolbar > select, .clinic-toolbar > label { flex: 1; min-width: 0; }
  .clinic-toolbar > label { flex-wrap: wrap; }
  .clinic-toolbar input[type=date] { width: 100%; }
  .clinic-form-grid, .clinic-record-grid { grid-template-columns: minmax(0, 1fr); }
  .clinic-field.wide { grid-column: auto; }
  .clinic-panel-head { padding: 18px; flex-wrap: wrap; gap: 12px; }
  .clinic-panel-head h2 { font-size: 17px; line-height: 1.4; }
  .clinic-panel-head p { font-size: 13px; line-height: 1.6; }
  .clinic-panel-body { padding: 18px; }
  .clinic-profile-grid { gap: 22px; }
  .clinic-table thead, .workspace-page-region .clinic-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .clinic-table, .clinic-table tbody, .clinic-table tr, .clinic-table td { display: block; width: 100%; }
  .clinic-table tr { padding: 10px 0; border-top: 1px solid #e4ebf3; }
  .clinic-table td { padding: 10px 18px; border: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .clinic-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #64758b; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .clinic-table small { font-size: 12px; }
  .clinic-table .clinic-actions { min-width: 0; }
  .clinic-table-wrap { overflow: visible; }
  .workspace-page-region.clinic-table-wrap { overflow: auto; }
  .clinic-panel-body > .clinic-table-wrap.workspace-page-region { height: auto; max-height: 400px; }
  .clinic-list-item { padding: 18px; gap: 10px; }
  .clinic-list-item h3 { font-size: 14px; line-height: 1.5; }
  .clinic-list-item p { font-size: 14px; }
  .clinic-list-item small { font-size: 12px; }
  .clinic-badge { font-size: 11px; }
  .clinic-queue-row { padding: 18px; flex-wrap: wrap; }
  .clinic-queue-row .clinic-actions { width: 100%; }
  .clinic-queue-row h3 { font-size: 15px; }
  .clinic-queue-row p { font-size: 13px; }
  .clinic-steps { display: grid; gap: 12px; padding: 16px; font-size: 13px; }
  .clinic-steps li { align-items: flex-start; line-height: 1.6; }
  .clinic-steps li::before { flex-shrink: 0; }
  .queue-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .queue-overview-metric { padding: 16px; }
  .queue-metric-label { overflow-wrap: anywhere; }
  .clinic-task-list { grid-template-columns: minmax(0, 1fr); }
  .clinic-task-footer select { width: 100%; }
  .clinic-reminder-date, .clinic-reminder-main { min-width: 0; overflow-wrap: anywhere; }
  .clinic-list-item.clinic-reminder-card { grid-template-columns: minmax(0, 1fr); }
  /* Use one breakpoint for both message panels to keep the conversation wide. */
  .clinic-thread-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .clinic-thread-sidebar { height: 320px; max-height: none; border-right: 0; border-bottom: 1px solid #dfe7f0; }
  .clinic-thread-sidebar .clinic-thread-list { max-height: none; }
  .clinic-thread-button, .clinic-thread-context, .clinic-chat-log > * { flex-shrink: 0; }
  .clinic-thread-body { height: 580px; max-height: none; padding: 18px; }
  .clinic-chat-log { min-height: 120px; padding-right: 4px; }
  .clinic-message { max-width: 95%; padding: 12px 14px; }
  .clinic-message p { font-size: 14px; }
  .clinic-message small { font-size: 11px; line-height: 1.5; }
  .clinic-thread-context h3 { font-size: 15px; line-height: 1.5; }
  .clinic-thread-context p { font-size: 12px; line-height: 1.5; }
  .clinic-thread-body textarea { max-height: 110px; }
  .workspace-pagination { padding: 12px; gap: 10px; font-size: 12px; }
  .workspace-pagination .page-summary { width: 100%; }
  .workspace-pagination .page-buttons { width: 100%; justify-content: space-between; gap: 6px; }
  .workspace-overview-panel > .workspace-pagination { height: 110px; min-height: 110px; }
  .clinic-notice { padding: 18px; }
  .clinic-notice h2 { line-height: 1.4; }
}

@media (max-width: 680px) {
  .admin-view:not(.admin-reports) .admin-table thead,
  .workspace-page-region .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .admin-view:not(.admin-reports) .admin-table,
  .admin-view:not(.admin-reports) .admin-table tbody,
  .admin-view:not(.admin-reports) .admin-table tr,
  .admin-view:not(.admin-reports) .admin-table td { display: block; width: 100%; }
  .admin-view:not(.admin-reports) .admin-table tr { padding: 12px 0; border-bottom: 1px solid #e4ebf3; }
  .admin-table td, [data-owner-overview=appointments] .admin-table td { padding: 9px 16px; border: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .admin-table td::before, [data-owner-overview=appointments] .admin-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #64758b; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .admin-person, .admin-person > div { min-width: 0; }
  .admin-person strong { font-size: 14px; }
  .admin-person small { max-width: 100%; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .admin-row-actions { flex-wrap: wrap; white-space: normal; gap: 8px; }
  .admin-row-action, .admin-row-action[data-service-toggle] { width: auto; min-width: 44px; padding: 10px 12px; font-size: 12px; }
  .admin-row-action span { display: inline; }
  .admin-primary-button, .admin-secondary-button { font-size: 13px; }
  .admin-inline-select { display: block; max-width: 100%; margin-top: 8px; }
  .admin-metric { min-width: 0; }
  .admin-metric p { font-size: 12px; line-height: 1.5; }
  .admin-record-count { font-size: 12px; }
  .admin-chart-row { font-size: 12px; grid-template-columns: minmax(0,124px) minmax(0,1fr) 24px; gap: 7px; }
  .admin-check-list strong { font-size: 14px; }
  .admin-check-list small, .admin-guidance p { font-size: 12px; }
  .admin-report-chart-body { min-height: 0; }
  .clinic-clock [data-clinic-clock-date] { font-size: 12px; }
}

@media (max-width: 520px) {
  .admin-report-filters .admin-field { flex-basis: 100%; max-width: none; }
}

@media (max-width: 600px) {
  .clinic-topbar { padding: 12px; }
  .clinic-top-start { gap: 8px; }
  .clinic-top-start strong { font-size: 13px; }
  .clinic-content { padding: 22px 14px 36px; }
  .clinic-heading > .clinic-actions { width: 100%; }
  .clinic-heading > .clinic-actions > .clinic-button { flex: 1; }
  .clinic-card { padding: 18px; }
  .clinic-card p { font-size: 14px; }
  .clinic-card h2 { line-height: 1.3; }
  .clinic-app[data-role=patient] .workspace-overview-cards { gap: 12px; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-next-visit { padding: 22px; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-card:not(.featured) { padding: 15px; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-kicker { min-height: 56px; margin-bottom: 12px; align-items: flex-start; gap: 8px; line-height: 1.5; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-kicker > span:first-child { flex: 1; min-width: 0; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-ticket { font-size: 36px !important; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-card > .clinic-button { width: 100%; min-height: 58px; }
  .clinic-app[data-role=patient] .workspace-overview-cards .clinic-card p { margin-bottom: 18px; }
  .clinic-card .clinic-eyebrow { font-size: 11px !important; }
  .clinic-record-grid h4 { font-size: 12px; }
  .clinic-record-grid p { font-size: 14px; }
  .clinic-rx, .clinic-vitals { grid-template-columns: minmax(0, 1fr); }
  .clinic-rx .clinic-field:first-child { grid-column: auto; }
  .clinic-form-footer .clinic-button { flex: 1; }
  .clinic-task-footer > label, .clinic-task-footer > .clinic-button { width: 100%; }
  .toast-stack { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); }
  .toast { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-height: 500px) and (max-width: 900px) {
  .clinic-sidebar, .admin-sidebar { padding-top: 12px; padding-bottom: 10px; }
  .clinic-brand, .admin-brand { padding-bottom: 10px; }
  .clinic-nav-label { margin: 12px; }
  .clinic-sidebar-bottom { padding-top: 10px; padding-bottom: 10px; }
  .clinic-logout { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .clinic-sidebar-close { top: 12px; }
  .clinic-topbar, .admin-topbar { position: relative; }
}

@media (max-width: 980px) {
  /* Readable text also prevents automatic zoom when typing on iOS. */
  .form-card input:not([type=checkbox]):not([type=radio]),
  .form-card select, .form-card textarea { font-size: 16px; min-height: 48px; }
  .toggle-eye { width: 44px; height: 44px; right: 3px; padding: 0; align-items: center; justify-content: center; }
  .switcher a, .switcher button { min-height: 44px; }
}