/* Touch and narrow-screen refinements, loaded after the feature styles. */
@media (max-width: 1024px) {
  .topbar .breadcrumb { flex: 1; min-width: 0; overflow: hidden; }
  .topbar .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .workspace-label, .topbar .profile { display: none; }
  .topbar-right { flex-shrink: 0; gap: 8px; }
  #app .topbar .top-search { width: 44px; min-width: 44px; padding: 10px; justify-content: center; }
  .topbar .top-search span, .topbar .top-search kbd { display: none; }
  /* The rules simulator needs the whole content column beside the tablet sidebar. */
  .grid-2:has([data-rule-test]), .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .grid-2:has([data-rule-test]) > .card,
  .grid-2:has([data-rule-test]) .card-body { min-width: 0; }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  #app, .workspace, .customer-shell, .page-heading > div,
  .card-header > div, .customer-account, .role-controls > label { min-width: 0; }

  /* Keep native fields readable without triggering iOS focus zoom. */
  #app :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
  #modal-root :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;
    min-height: 44px;
    max-width: 100%;
  }
  #app textarea, #modal-root textarea { min-height: 112px; }
  #app button, #modal-root button,
  #app summary, #modal-root summary { min-height: 44px; touch-action: manipulation; }
  #app .icon-btn, #modal-root .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  #app :is(.btn, .customer-button), #modal-root .btn { font-size: 12px; }
  .checkbox-option, .commerce-scope-checks label,
  .commerce-active-option, .customer-friend-option {
    min-height: 44px;
    align-items: center;
  }
  .checkbox-option input, .commerce-scope-checks input,
  .commerce-active-option input, .customer-friend-option input {
    width: 21px;
    height: 21px;
  }

  .topbar { gap: 8px; }
  .topbar .breadcrumb { min-width: 0; gap: 5px; }
  .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; }
  #app .top-search { width: 44px; min-width: 44px; justify-content: center; padding: 10px; }
  .topbar-right { gap: 3px; flex-shrink: 0; }
  .role-switch-bar { align-items: stretch; }
  .role-context { width: 100%; }
  .role-controls { width: 100%; gap: 8px; }
  .role-controls > label { flex: 1; }
  .role-controls .form-select { width: 100%; max-width: none; padding-right: 20px; }
  .role-controls label:has([data-coach-switch]) { flex-basis: 100%; }
  .sidebar { padding-bottom: max(16px, env(safe-area-inset-bottom)); height: 100dvh; }
  .sidebar .nav-item { padding-top: 11px; padding-bottom: 11px; }
  .sidebar .brand { padding-bottom: 18px; }
  .sidebar .sidebar-bottom { margin-top: 8px; }
  .sidebar .sidebar-footer { margin-top: 8px; padding-top: 10px; }
  .sidebar .support-btn { padding-top: 10px; padding-bottom: 10px; }

  .heading-actions { gap: 8px; }
  .date-switch { max-width: 100%; padding: 0; }
  #app .date-switch input { width: 150px; padding-inline: 3px; }
  .page-toolbar .field { min-width: 0; }
  .page-toolbar .toolbar-left > .field:first-child { flex: 1 1 190px; }
  .page-toolbar .toolbar-left > .field:last-child { flex: 1 1 100px; }
  .filter-tabs, .schedule-tabs { gap: 16px; overscroll-behavior-x: contain; min-width: 0; max-width: 100%; overflow-x: auto; }
  .filter-tabs { width: 100%; }
  .filter-tabs button, .schedule-tabs button { flex: 0 0 auto; }
  .filter-tabs button, .schedule-tabs button { padding-top: 8px; padding-bottom: 8px; }
  .segment button { min-width: 44px; }
  .table-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-color: #a8bcae #f1f5f1; scrollbar-width: thin; }
  .table-wrap:has(> table)::before {
    content: '左右滑動查看完整資料 ↔';
    display: block;
    position: sticky;
    left: 0;
    padding: 8px 15px;
    width: 100%;
    font-size: 11px;
    color: #637d69;
    background: #f3f7f2;
    border-bottom: 1px solid #e4ece2;
  }
  .table-wrap::-webkit-scrollbar { height: 7px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #a8bcae; border-radius: 6px; }
  .table-footer { gap: 12px; flex-wrap: wrap; }
  .table-footer .pagination { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  #app .page-btn { min-width: 44px; height: 44px; }
  .card-header { flex-wrap: wrap; }
  .list-heading, .coach-card-footer, .venue-footer { flex-wrap: wrap; gap: 10px; }
  .coach-meta-item span, .detail-value, .cell-sub,
  .feedback-card-top strong, .feedback-card-top > div > span { overflow-wrap: anywhere; }
  .rule-row { flex-wrap: wrap; }
  .rule-row .rule-content { flex-basis: calc(100% - 44px); }
  .rule-row .rule-actions { width: 100%; justify-content: flex-end; }
  #app .toggle { position: relative; width: 44px; height: 44px; padding: 0; background: transparent; }
  #app .toggle::after { content: ''; position: absolute; width: 33px; height: 19px; left: 5px; top: 12px; border-radius: 20px; background: #dce4de; }
  #app .toggle-on::after { background: #5f876c; }
  #app .toggle::before { position: absolute; left: 7px; top: 14px; z-index: 1; }
  .work-card-bottom, .work-payroll-header { flex-wrap: wrap; }
  .work-payroll-person { flex: 1 1 170px; }
  .work-payroll-amount { margin-left: auto; }
  .work-payroll-breakdown > div { min-width: 0; }
  .work-payroll-breakdown strong { overflow-wrap: anywhere; }
  .feedback-card-actions { flex-wrap: wrap; }
  .feedback-card-actions > div { flex: 1 1 200px; }
  .report-navigation { flex-wrap: wrap; }
  .report-tabs { flex: 1 1 190px; }
  .report-filter-footer { flex-wrap: wrap; }

  /* Dialog header and actions stay visible while the form scrolls. */
  .modal-backdrop { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .modal { max-height: calc(100dvh - 16px); border-radius: 12px; }
  .modal-header, .modal-footer { flex-shrink: 0; }
  .modal-header { padding: 16px; align-items: flex-start; }
  .modal-header > div { min-width: 0; }
  .modal-header h2 { overflow-wrap: anywhere; }
  .modal-header .icon-btn { margin-top: -6px; margin-right: -7px; }
  .modal form { overflow: hidden; }
  .modal-body { padding: 18px 16px; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-block: 16px; }
  .modal-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 8px; }
  .modal-footer .btn { min-width: 0; white-space: normal; flex: 1; }
  .modal-error { margin-inline: 16px; max-height: 100px; overflow-y: auto; flex-shrink: 0; }
  .toast { bottom: max(18px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); }

  .customer-account { flex-wrap: wrap; justify-content: flex-end; }
  .customer-member-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-demo-strip { gap: 10px; }
  .customer-demo-strip > button { padding-block: 10px; }
  .customer-nav button { min-width: 88px; }
  .customer-stage-footer { flex-wrap: wrap; }
  .customer-stage-footer > .customer-button { margin-left: auto; }
  .customer-booking-card-bottom { flex-wrap: wrap; }
  .customer-booking-card-bottom > span { flex: 1 1 130px; max-width: none; }
  .customer-booking-card-bottom > button { margin-left: auto; }
  .customer-progress button > strong { font-size: 10px; }
  .customer-progress button:not(:last-child)::after { top: 12px; }
  .customer-time-chip > span { font-size: 9px; }
  .customer-date-chip > span, .customer-date-chip > small { font-size: 9px; }
}

/* Date strings and native selects need a full row on the smallest phones. */
@media (max-width: 420px) {
  .topbar .demo-badge { display: none; }
  .feedback-toolbar, .report-filter-grid { grid-template-columns: 1fr; }
  .work-toolbar > .field { flex-basis: 100%; }
  .commerce-toolbar > .field,
  .commerce-coupon-toolbar .commerce-toolbar > .field { min-width: 100%; }
  .change-compare { grid-template-columns: 1fr; }
  .feedback-distribution > div:first-child { align-items: flex-start; flex-direction: column; }
  .work-card-bottom .btn { white-space: normal; }
  .customer-header { gap: 8px; }
  .customer-account { gap: 5px; }
  .customer-member-name { max-width: 75px; }
  .customer-account > .customer-member-mark { display: none; }
  .customer-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-course-info { min-width: 0; }
  .customer-payment-title { flex-wrap: wrap; gap: 8px; }
}

.resource-terms { display: grid; gap: 16px; margin-block: 20px; }
.resource-course-terms { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
.resource-course-terms legend { max-width: 100%; padding-inline: 6px; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.resource-course-terms .form-grid-3 { margin: 8px 0 0; }
.resource-schedule-list { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px 20px; }
.resource-schedule-list .btn { white-space: normal; text-align: left; }
.resource-config-summary { margin: 15px 0 0; padding: 12px; border-radius: 7px; background: #f4f7f2; font-size: 11px; line-height: 1.8; color: #778d75; }
@media (max-width: 760px) {
  .resource-course-terms { padding: 12px; }
  .resource-course-terms .form-grid-3 { grid-template-columns: 1fr; }
}

@media(max-width:760px){.sidebar:not(.is-open){visibility:hidden;pointer-events:none}.sidebar.is-open{visibility:visible;pointer-events:auto}}