/* Mobile operational layout. CSS pixels, not device pixels; dvh follows browser chrome.
   No fixed subtraction for a particular iPhone or Safari toolbar. */
@media (max-width: 760px) {
  :root {
    --mobile-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
    --mobile-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  }
  html { scroll-padding-top: calc(64px + var(--mobile-safe-top)); }
  #adminApp { font-size: 14px; line-height: 1.5; }
  #adminApp .workspace { min-width: 0; padding-inline: 12px; padding-bottom: calc(20px + var(--mobile-safe-bottom)); }
  #adminApp .workspace > * { min-width: 0; max-width: 100%; }
  #adminApp :is(.page-head, .work-page-head) { gap: 12px; margin-bottom: 16px; padding-bottom: 12px; }
  #adminApp :is(.page-head, .work-page-head) h1 { font-size: 24px; line-height: 1.25; }
  #adminApp :is(.page-head, .work-page-head) p:not(.kicker) { font-size: 14px; line-height: 1.5; }
  #adminApp :is(.btn, .icon-btn, .admin-logout-button) { min-height: 44px; font-size: 14px; line-height: 20px; }
  #adminApp .btn { white-space: normal; padding: 10px 12px; }
  #adminApp .icon-btn { min-width: 44px; }
  #adminApp :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; font-weight: 400; line-height: 1.4; min-width: 0; max-width: 100%; }
  #adminApp :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; }
  #adminApp :is(.meta, .lead, .empty-inline) { font-size: 13px; line-height: 1.5; }
  #adminApp :is(.modal-close, .modal-close-button, .client-detail-close, .request-inspector-close) { min-width: 44px; min-height: 44px; }
  #localPreviewNotice { position: fixed; inset: 0 0 auto; z-index: 65; min-height: 56px; padding: 8px 12px 8px 64px; font-size: 12px; line-height: 18px; }

  /* Name + role form one block; avatar and logout stay vertically centred. */
  .admin-layout > .admin-nav { height: 100dvh; padding-bottom: max(12px, var(--mobile-safe-bottom)); }
  .admin-nav .sidebar-account { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 4px 0; }
  .sidebar-account .sidebar-account-avatar { width: 36px; height: 36px; grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
  .sidebar-account > div { display: grid; grid-column: 2; grid-row: 1; gap: 2px; min-width: 0; }
  .sidebar-account strong, .sidebar-account small { grid-column: auto; grid-row: auto; margin: 0; }
  .sidebar-account strong { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
  .sidebar-account small { font-size: 12px; line-height: 18px; }
  .sidebar-account .admin-logout-button { grid-column: 3; grid-row: 1; align-self: center; width: auto; padding-inline: 10px; }
  .admin-nav .nav-employee-item { min-height: 52px; }
  .admin-nav .sidebar-nav-list { scroll-padding-block: 8px; }

  /* One full-width timeline, with explicit staff/day selection instead of clipped columns. */
  .overview-workbench { display: block; }
  .mobile-planner-resources { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; }
  .mobile-planner-resources button { flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border: 1px solid var(--admin-border); border-radius: 8px; background: #fff; color: var(--admin-accent); font: 500 14px/20px Inter, system-ui, sans-serif; }
  .mobile-planner-resources button[aria-pressed=true] { background: var(--admin-selection); border-color: var(--admin-focus); }
  .figma-planner .overview-planner-grid { grid-template-columns: 44px minmax(0, 1fr) 0; min-width: 0; width: 100%; }
  .figma-planner .planner-time-right { visibility: hidden; width: 0; padding: 0; }
  .figma-planner .overview-planner-corner:first-child { position: sticky; left: 0; z-index: 45; font-size: 10px; padding-inline: 2px; }
  .figma-planner .overview-resource-head { padding: 10px 6px; }
  .figma-planner .overview-resource-head strong { font-size: 14px; line-height: 20px; }
  .figma-planner .overview-resource-head span:not(.planner-resource-mark) { font-size: 12px; line-height: 18px; }
  .figma-planner .planner-now-line { right: 6px; }
  .figma-planner .planner-event-delete { width: 32px; height: 32px; background: #b94b3f; }
  .figma-planner .planner-event-head small { padding-right: 28px; }
  .figma-planner .planner-event-resize { height: 16px; }
  .employee-schedule-page { display: block; min-width: 0; }
  .employee-schedule-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 0 12px; background: transparent; }
  .employee-schedule-period { display: grid; grid-column: 1 / -1; grid-row: 1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 8px; overflow: visible; }
  .employee-schedule-period > strong { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 600; text-align: center; white-space: normal; margin: 0; }
  .employee-schedule-period .today { grid-column: 1; grid-row: 1; min-height: 44px; font-size: 14px; padding-inline: 10px; }
  .employee-week-stepper { grid-column: 3; grid-row: 1; grid-template-columns: repeat(2, 44px); flex-shrink: 0; }
  .employee-week-stepper button { width: 44px; height: 44px; }
  .employee-schedule-period .employee-filter-chip { grid-column: 1 / -1; grid-row: 2; margin: 0; margin-right: 104px; background: #e9ecf0; color: var(--ink); grid-template-columns: 28px minmax(0, 1fr) 44px; padding: 0 4px 0 8px; border-radius: 8px; }
  .employee-filter-chip > b { background: #dce1e7; color: #59616f; border-radius: 50%; width: 28px; height: 28px; }
  .employee-filter-chip > span { overflow-wrap: anywhere; white-space: normal; font-weight: 600; font-size: 14px; }
  .employee-filter-chip button { color: var(--admin-accent); width: 44px; height: 44px; }
  .employee-schedule-tools { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; gap: 8px; overflow: visible; }
  .employee-toolbar-icon { width: 44px; height: 44px; }
  .mobile-employee-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 12px 0; }
  .mobile-employee-days button { display: grid; gap: 2px; justify-items: center; min-height: 52px; padding: 4px 0; border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--admin-muted); }
  .mobile-employee-days span { font-size: 12px; text-transform: capitalize; }
  .mobile-employee-days strong { font-size: 16px; font-weight: 600; }
  .mobile-employee-days button[aria-pressed=true] { background: var(--admin-selection); color: var(--ink); border-color: var(--admin-focus); }
  .overview-day-stepper { min-width: 0; }
  .overview-day-stepper button { min-width: 44px; min-height: 44px; }

  /* Filter bars scroll within the section and have touch-sized controls. */
  #adminApp :is(.segmented-tabs, .client-status-tabs, .finance-period-tabs) { display: flex; flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; padding: 4px; gap: 4px; }
  #adminApp :is(.segmented-tabs, .client-status-tabs, .finance-period-tabs) button { flex: 0 0 auto; width: auto; min-height: 44px; font-size: 14px; font-weight: 500; padding: 8px 12px; white-space: nowrap; }
  #adminApp .operations-list-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
  #adminApp .operations-list-toolbar > .btn { width: 100%; }
  #adminApp .client-database-head { padding: 12px; }
  .client-database-title { padding-left: 0; }
  #adminApp .client-database-actions { grid-template-columns: minmax(0, 1fr); margin: 0; width: 100%; }
  #adminApp .client-database-actions .btn { width: 100%; max-width: none; }
  #adminApp .client-database-head h1 { font-size: 24px; line-height: 1.25; }
  .client-database-head > div { min-width: 0; }
  .crm-stage-card span, .crm-conversion-flow small { font-size: 12px; }
  #adminApp .client-segments { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 4px; }
  #adminApp .client-segments button { min-height: 44px; flex: 0 0 auto; font-size: 13px; padding: 8px 12px; }
  #adminApp .client-database-segments { display: flex; flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%; gap: 4px; }
  #adminApp .client-database-segments button { width: auto; flex: 0 0 auto; min-height: 44px; font-size: 13px; font-weight: 500; padding: 8px 12px; white-space: nowrap; }
  #adminApp .client-database-segments small { font-size: 12px; }
  .client-mobile-row-summary { min-height: 68px; }
  .client-mobile-main strong { font-size: 16px; line-height: 22px; }
  .client-mobile-main small, .client-mobile-stage { font-size: 12px; line-height: 18px; }
  .erp-table-row :is(b, strong) { font-size: 14px; line-height: 20px; }
  .erp-table-row small { font-size: 12px; line-height: 18px; }
  .erp-table-row .btn { min-width: 0; }

  /* Settings and forms need full-width copy and input fields, not compressed columns. */
  .figma-settings, .workflow-page { padding: 16px 0; scroll-margin-top: calc(64px + var(--mobile-safe-top)); }
  .figma-settings .settings-page-head { padding: 0; gap: 12px; }
  .figma-settings .settings-directory-group { padding: 20px; }
  .figma-settings .settings-group { padding: 16px; }
  .figma-settings :is(.settings-template-field, .settings-field-row) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .figma-settings :is(.settings-template-field, .settings-field-row) > :is(input, select, textarea) { width: 100%; }
  .figma-settings textarea { min-height: 128px; }
  .figma-settings .settings-script-row { grid-template-columns: 76px minmax(0, 1fr) 44px; padding: 12px; gap: 8px; }
  .figma-settings .settings-script-remove { width: 44px; height: 44px; }
  .figma-settings [data-settings-back] { min-height: 44px; display: inline-flex; align-items: center; }
  .staff-page-heading { margin-bottom: 20px; }
  .staff-member-info { overflow-wrap: anywhere; }
  .staff-editor { padding: 16px; }
  .staff-editor-actions { padding-bottom: max(12px, var(--mobile-safe-bottom)); }
  .permission-option { min-height: 44px; }
  .migration-page { padding: 16px 0; }
  .migration-page .migration-section, .migration-page .migration-state { padding: 16px; }
  .sale-flow { padding: 16px; }
  .sale-workflow-actions { flex-wrap: wrap; gap: 12px; }
  #adminApp .sales-workflow .sale-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #adminApp .sale-choice { min-height: 52px; padding: 10px; text-align: left; }
  #adminApp .sale-choice span, #adminApp .sale-product-row strong { font-size: 14px; line-height: 20px; font-weight: 600; }
  #adminApp .sale-choice small, #adminApp .sale-product-row small { font-size: 12px; line-height: 18px; font-weight: 400; }
  #adminApp .sale-product-row > b { font-size: 14px; line-height: 20px; }
  #adminApp :is(.sale-choice, .sale-product-row).active { border-color: var(--admin-focus); background: var(--admin-selection); }
  #adminApp .sale-selector-label { font-size: 12px; line-height: 18px; }
  .workflow-footer { scroll-margin-bottom: 12px; }
  #adminApp .client-profile-editor.editing :is(.input, .textarea, select):not([aria-invalid=true]) { border-color: var(--admin-border); box-shadow: none; }
  #adminApp .client-detail-panel .btn-outline { border-color: var(--admin-border); color: var(--admin-accent); }
  #adminApp .client-detail-panel .kicker { font-size: 12px; letter-spacing: 0; }
  #adminApp .client-detail-panel .client-profile-grid label > span { font-size: 12px; line-height: 18px; font-weight: 500; }
  #adminApp .client-detail-panel :is(.inspector-head, .client-profile-head) p { font-size: 14px; line-height: 1.5; font-weight: 400; }
  .finance-expense-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  #adminApp .finance-expense-form .select { width: 100%; border: 1px solid var(--admin-border); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ink); }
  .finance-chart-head { flex-wrap: wrap; gap: 12px; }
  .finance-chart-switch button { min-height: 44px; min-width: 44px; }
  .finance-chart-legend { font-size: 12px; }
  .broadcast-audience-chip { min-height: 52px; }
  .broadcast-page :is(.broadcast-rule-note, .broadcast-empty-state) { font-size: 14px; line-height: 1.5; }
  .broadcast-page :is(input, select, textarea) { width: 100%; }
  #adminApp .broadcast-audience-chip strong { font-size: 14px; font-weight: 600; line-height: 20px; }
  #adminApp .broadcast-audience-chip small, #adminApp .broadcast-rule-note { font-size: 12px; line-height: 18px; font-weight: 400; }
  #adminApp .work-schedule-mobile-summary > header { flex-direction: column; align-items: flex-start; gap: 4px; }
  #adminApp .work-schedule-mobile-summary > header strong { font-size: 16px; font-weight: 600; line-height: 22px; }
  #adminApp .work-schedule-mobile-summary > header small { font-size: 12px; line-height: 18px; font-weight: 400; }
  #adminApp .work-schedule-mobile-off button { min-height: 44px; padding: 8px 12px; }
  #adminApp .work-schedule-inspector { z-index: 140; height: min(85dvh, 700px); max-height: calc(100dvh - 16px - var(--mobile-safe-top)); padding-bottom: var(--mobile-safe-bottom); overflow-y: auto; }
  #adminApp .work-detail-scrim { z-index: 139; }

  /* Modal content scrolls independently; actions remain reachable above browser chrome. */
  #adminApp :is(.modal-backdrop, .lesson-modal-backdrop) { padding: max(8px, var(--mobile-safe-top)) 8px max(8px, var(--mobile-safe-bottom)); height: 100dvh; align-items: start; }
  #adminApp :is(.modal-panel, .lesson-modal-panel, .planner-create-modal) { min-width: 0; width: 100%; max-height: calc(100dvh - 16px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
  #adminApp :is(.modal-head, .planner-create-modal-head) { padding-right: 48px; }
  #adminApp :is(.modal-panel, .lesson-modal-panel, .planner-create-modal) :is(.form-grid, .lesson-form-grid) { grid-template-columns: minmax(0, 1fr); }
  #adminApp .client-detail-drawer { max-width: 100%; height: 100dvh; padding: max(12px, var(--mobile-safe-top)) 12px max(12px, var(--mobile-safe-bottom)); }
  #adminApp .client-detail-panel { width: 100%; min-width: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .teacher-schedule { padding: 20px 16px max(20px, var(--mobile-safe-bottom)); }
  .teacher-schedule .teacher-page-heading { gap: 12px; margin-bottom: 20px; }
  .teacher-account-actions { justify-content: flex-start; }
  body:has(#localPreviewNotice:not([hidden])) :is(.teacher-schedule, .crm-login-screen) { padding-top: 72px; }

  /* Chat filters sit in normal flow, so all channels and the teacher selector are readable. */
  #adminApp .communications-page .communications-workbench:not(.mobile-thread-open) { grid-template-rows: auto minmax(0, 1fr) !important; }
  #adminApp .communications-page .communication-channel-nav { position: static; display: grid !important; grid-row: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; width: 100%; height: auto !important; padding: 8px; gap: 8px; border-radius: 0; z-index: auto; }
  #adminApp .communications-page .communication-channel-nav nav { overflow-x: auto; }
  #adminApp .communications-page .communication-channel-nav button { min-height: 44px; font-size: 13px; padding-inline: 8px; }
  #adminApp .communications-page .communication-teacher-filter select { font-size: 16px; height: 44px; }
  #adminApp .communications-page .communications-workbench:not(.mobile-thread-open) .communication-inbox { grid-row: 2; }
  #adminApp .communications-page .communications-workbench.mobile-thread-open .communication-channel-nav { display: none !important; }
  #adminApp .communications-page .message-thread { max-height: none; min-height: 0; }
  #adminApp .communications-page .message-bubble { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
  #adminApp .communications-page .message-bubble :is(p, .message-text) { font-size: 16px; line-height: 1.45; }
  #adminApp .communications-page .communication-compose { grid-template-columns: minmax(0, 1fr); }
  #adminApp .communications-page .communication-compose > textarea { grid-column: 1; }
  #adminApp .communications-page .communication-compose-actions { grid-column: 1; justify-content: flex-end; }
  #adminApp .communications-page .communication-compose-actions button { min-width: 44px; min-height: 44px; }
  #adminApp .communication-thread-title strong { font-size: 16px; }
  #adminApp .communication-mobile-back { min-width: 44px; min-height: 44px; }
  .toast { max-width: calc(100vw - 24px); bottom: max(12px, var(--mobile-safe-bottom)); }
}
@media (min-width: 761px) and (max-width: 980px) {
  /* The incumbent shell uses a drawer in this range as well (e.g. phone landscape). */
  .admin-layout > .admin-nav { padding-top: 64px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .admin-nav .sidebar-brand-lockup { display: none; }
  #localPreviewNotice { position: fixed; inset: 0 0 auto; margin: 0; padding: 8px 12px 8px 64px; min-height: 56px; z-index: 65; }
}