/* 彈窗內佈局與顯示控制（與 .modal 搭配，收斂 index 內聯 style） */
.modal .m-hidden {
  display: none !important;
}

/* 外殼寬度 */
.modal .mc.coach-modal-shell {
  max-width: 720px;
}
.modal .mc.m-mc-500 {
  max-width: 500px;
}
.modal .mc.m-mc-600 {
  max-width: 600px;
}
.modal .mc.m-mc-700 {
  max-width: 700px;
}
.modal .mc.m-mc-720 {
  max-width: 720px;
}
.modal .mc.m-mc-450 {
  max-width: 450px;
}
.modal .mc.m-mc-520 {
  max-width: 520px;
}
.modal .mc.m-mc-800 {
  max-width: 800px;
}
.modal .mc.m-mc-900 {
  max-width: 900px;
}

/* 教練表單：分頁列與分頁按鈕 */
#coachModal .coach-tab-nav {
  display: flex;
  border-bottom: 2px solid #eee;
  margin-bottom: 12px;
  gap: 4px;
}
#coachModal .coach-tab-nav .tab-btn {
  flex: 1;
  padding: 10px 6px;
  background: #f8f9fa;
  color: #666;
  border: none;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  cursor: pointer;
}
#coachModal .coach-tab-nav .tab-btn.active {
  background: var(--sw-primary);
  color: #fff;
}

#userManagementModal .tab-nav {
  display: flex;
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
  gap: 0;
}
#userManagementModal .tab-nav .tab-btn {
  flex: 1;
  padding: 12px;
  background: #f8f9fa;
  color: #666;
  border: none;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  cursor: pointer;
}
#userManagementModal .tab-nav .tab-btn.active {
  background: var(--sw-primary);
  color: #fff;
}

/* 教練表單小字提示 */
.coach-modal-kbd-hint {
  font-size: 11px;
  color: #888;
  margin: 0 12px 10px;
  line-height: 1.5;
}

/* flex 列 */
.modal .m-fx {
  display: flex;
}
.modal .m-fx--ac {
  align-items: center;
}
.modal .m-fx--wrap {
  flex-wrap: wrap;
}
.modal .m-fx--gap-4 {
  gap: 4px;
}
.modal .m-fx--gap-8 {
  gap: 8px;
}
.modal .m-fx--gap-10 {
  gap: 10px;
}
.modal .m-fx--gap-15 {
  gap: 15px;
}
.modal .m-fx--gap-16 {
  gap: 16px;
}
.modal .m-fx--gap-15 {
  gap: 15px;
}
.modal .m-fx--mt-5 {
  margin-top: 5px;
}
.modal .m-fx--mt-6 {
  margin-top: 6px;
}
.modal .m-fx--mt-10 {
  margin-top: 10px;
}
.modal .m-fx--mt-20 {
  margin-top: 20px;
}
.modal .m-fx1 > * {
  flex: 1;
}
.modal .m-fx1 > .btn {
  width: auto;
}
.modal .m-fx--auto .m-w-auto {
  width: auto;
}

/* grid */
.modal .m-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.modal .m-prog-student-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}
.modal .m-mb-15--block {
  margin-bottom: 15px;
}
.modal .m-grid-2--gap-10 {
  gap: 10px;
}
.modal .m-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 5px;
}
.modal .m-pm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.modal .m-pm-grid--mt-5 {
  margin-top: 5px;
}

/* margin / padding */
.modal .m-mt-4 {
  margin-top: 4px;
}
.modal .m-mt-5 {
  margin-top: 5px;
}
.modal .m-mt-6 {
  margin-top: 6px;
}
.modal .m-mt-8 {
  margin-top: 8px;
}
.modal .m-mt-10 {
  margin-top: 10px;
}
.modal .m-mt-12 {
  margin-top: 12px;
}
.modal .m-mt-15 {
  margin-top: 15px;
}
.modal .m-mb-8 {
  margin-bottom: 8px;
}
.modal .m-mb-20 {
  margin-bottom: 20px;
}
.modal .m-m-15-0-10 {
  margin: 15px 0 10px 0;
}
.modal .m-m-0-0-10 {
  margin: 0 0 10px 0;
}
.modal .m-m-10-0 {
  margin: 10px 0;
}
.modal .m-mb-15 {
  margin-bottom: 15px;
}
.modal .m-p-20 {
  padding: 20px;
}
.modal .m-px-20 {
  padding: 0 20px 20px;
}
.modal .m-px-20-all {
  padding: 20px;
}

/* 文字、游標、區塊只讀底 */
.modal .m-cursor-pointer {
  cursor: pointer;
}
.modal .m-ta-center {
  text-align: center;
}
.modal .m-ta-13 {
  text-align: center;
  color: #999;
  font-size: 13px;
}
.modal .m-readonly-surface,
.modal input.m-readonly-surface:read-only {
  background: #f8f8f8;
}
.modal .m-readonly-surface--soft,
.modal input.m-readonly-surface--soft:read-only {
  background: #f8f9fa;
}
.modal .m-nowrap-label {
  margin: 0;
  min-width: 80px;
}
.modal .m-sel--auto {
  flex: 1;
}
.modal .m-w-100 {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}
.modal .m-label-mute {
  display: block;
  margin-bottom: 6px;
  color: #666;
}
.modal .m-coach-bulk {
  min-height: 150px;
}
.modal .m-coach-cnotes {
  min-height: 52px;
}
.modal .m-imgup-area {
  min-height: 72px;
  padding: 10px;
}
.modal .m-imgup-label {
  font-size: 13px;
}
.modal .m-imgprev {
  display: none;
  max-height: 80px;
  margin-top: 6px;
}
.modal .m-file-off {
  display: none;
}
.modal .m-h-60 {
  min-height: 60px;
}
.modal .m-h-80 {
  min-height: 80px;
}
.modal .m-sen-notes {
  min-height: 80px;
}
.modal .m-fee-lg {
  font-size: 17px;
}
.modal .m-list-scroll-200 {
  max-height: 200px;
  overflow-y: auto;
}
.modal .m-status-history {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin-top: 5px;
}
.modal .m-status-disp {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-top: 5px;
}
.modal .m-csv-hint {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 12px;
}
.modal .m-pr-bg {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
.modal .m-preview-hold {
  margin: 10px 0;
  text-align: center;
}
.modal .m-sec-title {
  margin: 0 0 15px 0;
}

/* 進度評估分區 */
.modal .m-prog-sen {
  background: #fff3cd;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #ffc107;
}
.modal .m-prog-sen .m-sec-title,
.modal .m-prog-sen h4 {
  color: #856404;
}
.modal .m-prog-skill {
  background: #e3f2fd;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.modal .m-prog-skill .m-sec-title,
.modal .m-prog-skill h4 {
  color: #1976d2;
}
.modal .m-prog-comp {
  background: #f3e5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.modal .m-prog-comp .m-sec-title,
.modal .m-prog-comp h4 {
  color: #7b1fa2;
}
.modal .m-prog-port {
  background: #e8f5e8;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.modal .m-prog-port .m-sec-title,
.modal .m-prog-port h4 {
  color: #2e7d32;
}
.modal .m-prog-note {
  background: #fce4ec;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.modal .m-prog-note .m-sec-title,
.modal .m-prog-note h4 {
  color: #c62828;
}
.modal .m-sel-tight {
  width: auto;
}
.modal .m-sel-tight--time {
  width: auto;
  min-width: 120px;
}
.modal .m-btn-join {
  width: auto;
  padding: 8px 14px;
}

/* 鈕色（僅彈窗內輔助） */
.modal .m-btn-ghost {
  background: #9e9e9e;
  color: #fff;
}
.modal .m-btn-primary {
  background: var(--sw-primary);
  min-width: 120px;
}
.modal .m-btn-ok {
  background: #4caf50;
}
.modal .m-btn-ok--full {
  background: #4caf50;
  width: 100%;
}
.modal .m-btn-warn {
  background: #ff9800;
  color: #fff;
}
.modal .m-btn-csv {
  background: #4caf50;
}
.modal .m-btn-deny {
  background: #f44336;
  color: #fff;
}
.modal .m-btn-purple {
  background: #9c27b0;
}
.modal .m-btn-magenta {
  background: #9c27b0;
  flex: 1;
}
.modal .m-btn-blue {
  background: #2196f3;
  flex: 1;
}
.modal .m-btn-green {
  background: #4caf50;
  flex: 1;
}
.modal .m-btn-orange {
  background: #ff9800;
  flex: 1;
}
.modal .m-btn-slate {
  background: #6c757d;
  flex: 1;
}
.modal .m-btn-pdf {
  background: #dc3545;
  flex: 1;
}
.modal .m-btn-jpg {
  background: #007bff;
  flex: 1;
}
.modal .m-mb-0 {
  margin: 0 0 10px 0;
}

/* 會計類型一列 */
.modal .m-acct-type-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 日期兩欄 */
.modal .m-dates-pair {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.modal .m-dates-pair input {
  flex: 1;
}

/* 選填表單卡頂距 */
.modal .m-coach-opt-card {
  margin-top: 10px;
}

/* 教練專長欄上距 */
.modal .m-coach-spec-mt {
  margin-top: 12px;
}

/* 微邊註 */
.modal .m-micro-8 {
  margin-top: 8px;
}

/* 銀行區 h4 */
.modal .m-bank-h4 {
  margin: 15px 0 10px 0;
  color: var(--sw-primary);
}

/* 內邊 10 */
.modal .m-pad-10 {
  padding: 10px;
}

/* 佔位灰字 */
.modal .m-muted-center {
  text-align: center;
  color: #999;
  padding: 20px;
}
.modal .m-tpl-intro {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 13px;
}
.modal .m-template-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}
.modal .m-login-hint {
  margin: -8px 0 14px;
  color: #64748b;
  font-size: 12px;
}
.modal .m-link-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.45;
}
.modal .m-link-select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
}
.modal .m-link-foot {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.modal .m-btn-cancel-light {
  background: #e2e8f0;
  color: #334155;
}
.modal .m-small-muted {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
}
.modal .m-perm-matrix {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
}
.modal .m-color-full {
  width: 100%;
  height: 40px;
}
.modal .m-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal .m-mb-15 {
  margin-bottom: 15px;
}
.modal .m-mt-15 {
  margin-top: 15px;
}
.modal small.m-small-mute {
  color: #666;
}

/* 手機殼層：彈窗全寬、緊湊內距、底部安全區 */
@media (max-width: 768px), (max-height: 900px) and (orientation: portrait) {
  html.sw-mobile-ui .modal {
    align-items: flex-end;
    padding: 0;
  }

  html.sw-mobile-ui .modal .mc {
    width: 100%;
    max-width: 100%;
    max-height: min(92svh, 920px);
    margin: 0;
    border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
    padding: var(--sw-space-4) var(--sw-space-3) calc(var(--sw-space-4) + env(safe-area-inset-bottom, 0px));
  }

  html.sw-mobile-ui .modal .mh {
    margin-bottom: var(--sw-space-3);
    padding-bottom: var(--sw-space-2);
  }

  html.sw-mobile-ui .modal .mh h3 {
    font-size: var(--sw-font-xl);
  }

  html.sw-mobile-ui .modal .m-grid-2,
  html.sw-mobile-ui .modal .m-prog-student-row {
    grid-template-columns: 1fr;
    gap: var(--sw-space-3);
  }

  html.sw-mobile-ui .modal .btn,
  html.sw-mobile-ui .modal .m-btn-primary {
    min-height: var(--sw-btn-min-h);
    font-size: var(--sw-font-md);
  }

  html.sw-mobile-ui .modal .m-link-foot {
    flex-direction: column;
  }

  html.sw-mobile-ui .modal .m-link-foot .btn {
    width: 100%;
  }
}

/* fg 內上距 */
.modal .fg.m-fg-top-15 {
  margin-top: 15px;
}