.bonus-host-root {
  --sidebar-bg: #1f2937;
  --sidebar-text: #d1d5db;
  --sidebar-active: #2563eb;
  --content-bg: #f3f4f6;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
  --text-primary: #172033;
  --text-secondary: #596579;
  --success: #16a34a;
  --danger: #dc2626;
  --radius: 8px;

  /* ---- 獎金模組 Design Token（僅作用於本獨立模組） ---- */
  --font-family-ui: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;

  --font-size-page-title: 28px;
  --font-size-section-title: 22px;
  --font-size-card-title: 18px;
  --font-size-body: 16px;
  --font-size-label: 15px;
  --font-size-small: 14px;

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  --line-height-title: 1.3;
  --line-height-body: 1.65;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

.bonus-host-root,
.bonus-host-root * {
  box-sizing: border-box;
}

.bonus-host-root {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  background: var(--content-bg);
  color: var(--text-primary);
}

.bonus-host-root .app-shell {
  display: flex;
  min-height: 100vh;
}

/* 左側深色選單 */
.bonus-host-root .sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}

.bonus-host-root .sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-host-root .sidebar-header .system-name {
  font-size: 14px;
  color: #9ca3af;
}

.bonus-host-root .sidebar-header .module-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}

.bonus-host-root .sidebar-nav {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.bonus-host-root .sidebar-nav .nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 2px;
  user-select: none;
}

.bonus-host-root .sidebar-nav .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bonus-host-root .sidebar-nav .nav-item.active {
  background: var(--sidebar-active);
  color: #fff;
}

.bonus-host-root .nav-group-label {
  padding: 14px 12px 4px 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #6b7280;
  text-transform: uppercase;
}

.bonus-host-root .nav-group-label:first-child {
  padding-top: 4px;
}

.bonus-host-root .main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 上方系統列（靜態展示，非本階段功能範圍） */
.bonus-host-root .topbar {
  height: 56px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.bonus-host-root .topbar-clinic {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.bonus-host-root .topbar-chevron {
  color: var(--text-secondary);
  font-size: 11px;
}

.bonus-host-root .topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.bonus-host-root .topbar-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bonus-host-root .topbar-badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 2px;
}

/* 右側內容區 */
.bonus-host-root .content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

.bonus-host-root .page-title {
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.bonus-host-root .page-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-5);
}

/* 卡片 */
.bonus-host-root .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.bonus-host-root .card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
}

.bonus-host-root .card .card-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.bonus-host-root .card .card-value {
  font-size: 24px;
  font-weight: 700;
}

.bonus-host-root .panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  overflow: visible;
  min-width: 0;
}

/* Panel 標準結構（供固定高度＋可捲動內容場景使用；Header 固定、僅 Body 捲動） */
.bonus-host-root .panel-header {
  flex-shrink: 0;
}

.bonus-host-root .panel-body-scroll {
  overflow-y: auto;
  min-height: 0;
}

/* 預留給未來 searchable/自訂 dropdown 使用（目前表單一律採原生 select，尚未套用此類別） */
.bonus-host-root .dropdown-menu {
  position: absolute;
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.bonus-host-root .panel-title {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

/* 表格 */
.bonus-host-root table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bonus-host-root table.data-table th,
.bonus-host-root table.data-table td {
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  padding: 8px 10px;
}

.bonus-host-root table.data-table th {
  color: var(--text-secondary);
  font-weight: 600;
  background: #fafafa;
}

/* 按鈕 */
.bonus-host-root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.bonus-host-root .btn:hover {
  background: #f3f4f6;
}

.bonus-host-root .btn-primary {
  background: var(--sidebar-active);
  border-color: var(--sidebar-active);
  color: #fff;
}

.bonus-host-root .btn-primary:hover {
  background: #1d4ed8;
}

.bonus-host-root .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.bonus-host-root .form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* CLINICOS-V4-MANUAL-UAT-BATCH1（FIX-L）：flex-direction 必須寫出來。
   style.css:128 有一條全域 `label{display:flex;flex-direction:column;gap:6px;font-weight:700}`，
   而本規則原本沒有宣告 display／flex-direction，於是全域那條的 column 無人可擋 ——
   凡是 <label> 內含控制項或附屬文字的，都會被拆成上下兩層：
     · 「☐ 包含團體獎金（…）」「☐ 包含 KPI 獎金（…）」→ checkbox 在上、文字在下
     · 「資料開始日 <span class="required">*</span>」→ 必填星號被擠到第二行
   這與 UAT-FIX-006／008／010C 是同一個缺陷類型（模組規則只覆蓋了全域元素規則的一部分），
   處理方式也一致：把橫向列明白寫出來，讓本模組的版面契約自己完整，
   不改 style.css 的全域 label（其他頁面仍靠它排表單），也不用 !important。
   純 layout；不影響任何獎金計算邏輯或送出的欄位。 */
.bonus-host-root .form-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  min-width: 80px;
}

.bonus-host-root .form-row input,
.bonus-host-root .form-row select {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bonus-host-root .algo-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: #1e3a8a;
  margin-bottom: 16px;
  white-space: pre-line;
}

/* Modal */
.bonus-host-root .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.bonus-host-root .modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  min-width: 360px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.bonus-host-root .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bonus-host-root .modal-header h3 {
  margin: 0;
  font-size: 16px;
}

/* Toast */
.bonus-host-root #toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonus-host-root .toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

.bonus-host-root .toast.success {
  background: var(--success);
}

.bonus-host-root .toast.error {
  background: var(--danger);
}

.bonus-host-root .toast.info {
  background: #2563eb;
}

.bonus-host-root .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .badge.active {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .badge.disabled {
  background: #fee2e2;
  color: #991b1b;
}

/* ---- Sidebar footer：本月完成度（UI 佔位，無商業邏輯） ---- */
.bonus-host-root .sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-host-root .sidebar-footer-label {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.bonus-host-root .sidebar-footer-percent {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.bonus-host-root .sidebar-footer-detail {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  text-align: center;
}

.bonus-host-root .completion-ring {
  --ring-pct: 0%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--sidebar-active) var(--ring-pct), rgba(255, 255, 255, 0.12) 0);
}

.bonus-host-root .completion-ring::before {
  content: '';
  position: absolute;
}

.bonus-host-root .completion-ring-value {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- P1 計算批次 ---- */
.bonus-host-root .p1-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.bonus-host-root .flow-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.bonus-host-root .flow-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-color);
}

.bonus-host-root .flow-step.active {
  background: var(--sidebar-active);
  border-color: var(--sidebar-active);
  color: #fff;
  font-weight: 600;
}

.bonus-host-root .flow-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-size: 10px;
}

.bonus-host-root .flow-step.active .flow-step-index {
  background: rgba(255, 255, 255, 0.25);
}

.bonus-host-root .flow-step-ellipsis {
  color: #9ca3af;
  padding: 0 2px;
}

.bonus-host-root .p1-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.bonus-host-root .p1-main {
  min-width: 0;
}

.bonus-host-root .p1-side {
  min-width: 0;
}

@media (max-width: 1000px) {
  .bonus-host-root .p1-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .p1-form-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width: 1200px) {
  .bonus-host-root .p1-form-preview-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .p1-form-col .form-row label {
  min-width: 110px;
}

.bonus-host-root .required {
  color: var(--danger);
}

.bonus-host-root .field-error {
  min-height: 16px;
  color: var(--danger);
  font-size: 12px;
  margin: -4px 0 6px 110px;
}

.bonus-host-root .form-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 4px 0;
}

.bonus-host-root .form-error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  margin-top: 6px;
}

.bonus-host-root .btn-outline {
  background: #fff;
  border: 1px solid var(--sidebar-active);
  color: var(--sidebar-active);
}

.bonus-host-root .btn-outline:hover {
  background: #eff6ff;
}

.bonus-host-root .btn-sm {
  min-height: 32px;
  padding: 5px 12px;
  font-size: var(--font-size-small);
}

.bonus-host-root .preview-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bonus-host-root .preview-mini-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fafafa;
}

.bonus-host-root .preview-mini-card.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.bonus-host-root .preview-mini-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.bonus-host-root .preview-mini-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.bonus-host-root .preview-mini-value.warn {
  color: #c2410c;
}

.bonus-host-root .side-note-list,
.bonus-host-root .status-legend-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-secondary);
}

.bonus-host-root .side-note-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
}

.bonus-host-root .side-note-list li:last-child {
  border-bottom: none;
}

.bonus-host-root .status-legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border-color);
}

.bonus-host-root .status-legend-list li:last-child {
  border-bottom: none;
}

.bonus-host-root .status-legend-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.bonus-host-root .view-modal-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  row-gap: 10px;
  column-gap: 12px;
  font-size: 13px;
}

.bonus-host-root .view-modal-label {
  color: var(--text-secondary);
}

.bonus-host-root .delete-modal-body p {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

/* 狀態徽章 */
.bonus-host-root .status-badge.status-draft {
  background: #f3f4f6;
  color: #4b5563;
}

.bonus-host-root .status-badge.status-in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.bonus-host-root .status-badge.status-calculated {
  background: #ede9fe;
  color: #6d28d9;
}

.bonus-host-root .status-badge.status-reviewing {
  background: #ffedd5;
  color: #c2410c;
}

.bonus-host-root .status-badge.status-approved {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .status-badge.status-closed {
  background: #e5e7eb;
  color: #374151;
}

.bonus-host-root .status-badge.status-reversed {
  background: #fee2e2;
  color: #991b1b;
}

/* ---- P1 每月獎金方案（架構佔位頁） ---- */
.bonus-host-root .ui-pending-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.bonus-host-root .architecture-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.bonus-host-root .flow-node {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.bonus-host-root .flow-arrow {
  color: #9ca3af;
}

.bonus-host-root .completion-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.bonus-host-root .completion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fafafa;
}

.bonus-host-root .completion-item-label {
  font-size: 13px;
  color: var(--text-primary);
}

/* ---- P1 每月獎金方案（正式 UI） ---- */
.bonus-host-root .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 三階段流程指示（獎金方案／獎金計算／覆核與月結），純視覺不可跳轉 */
.bonus-host-root .stage-flow {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.bonus-host-root .stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
}

.bonus-host-root .stage-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
}

.bonus-host-root .stage-item.active .stage-circle {
  background: var(--sidebar-active);
  border-color: var(--sidebar-active);
  color: #fff;
}

.bonus-host-root .stage-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.bonus-host-root .stage-item.active .stage-label {
  color: var(--sidebar-active);
  font-weight: 600;
}

.bonus-host-root .stage-connector {
  width: 60px;
  height: 2px;
  background: var(--border-color);
  margin-top: 16px;
}

/* 方案狀態徽章（10 種，獨立命名空間，避免與計算批次頁狀態色混淆） */
.bonus-host-root .status-badge.plan-status-draft {
  background: #f3f4f6;
  color: #4b5563;
}

.bonus-host-root .status-badge.plan-status-editing {
  background: #dbeafe;
  color: #1d4ed8;
}

.bonus-host-root .status-badge.plan-status-ready {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .status-badge.plan-status-locked {
  background: #e0e7ff;
  color: #3730a3;
}

.bonus-host-root .status-badge.plan-status-calculating {
  background: #ffedd5;
  color: #c2410c;
}

.bonus-host-root .status-badge.plan-status-reviewing {
  background: #ede9fe;
  color: #6d28d9;
}

.bonus-host-root .status-badge.plan-status-closed {
  background: #e5e7eb;
  color: #374151;
}

.bonus-host-root .status-badge.plan-status-reversed {
  background: #fee2e2;
  color: #991b1b;
}

/* 七類規則完成狀態徽章 */
.bonus-host-root .status-badge.item-status-not-started {
  background: #ffedd5;
  color: #c2410c;
}

.bonus-host-root .status-badge.item-status-in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.bonus-host-root .status-badge.item-status-completed {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .status-badge.item-status-locked {
  background: #e5e7eb;
  color: #374151;
}

/* 建立方式：大型單選卡 */
.bonus-host-root .creation-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .bonus-host-root .creation-card-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .creation-card {
  position: relative;
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 14px 14px 14px;
  cursor: pointer;
  background: #fff;
}

.bonus-host-root .creation-card input[type='radio'] {
  position: absolute;
  top: 14px;
  left: 14px;
}

.bonus-host-root .creation-card:has(input:checked) {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .creation-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bonus-host-root .creation-card-icon {
  font-size: 22px;
  margin: 0 0 8px 22px;
}

.bonus-host-root .creation-card-title {
  font-weight: 700;
  font-size: 14px;
  margin-left: 22px;
  margin-bottom: 4px;
}

.bonus-host-root .creation-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 22px;
}

.bonus-host-root .info-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
}

/* 七類規則完成度標題列與進度條 */
.bonus-host-root .completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bonus-host-root .completion-summary {
  font-size: 13px;
  color: var(--text-secondary);
}

.bonus-host-root .progress-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 10px;
  overflow: hidden;
}

.bonus-host-root .progress-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* 鎖定方案操作區 */
.bonus-host-root .lock-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: var(--radius);
}

.bonus-host-root .lock-hint {
  font-size: 13px;
  color: #9a3412;
}

.bonus-host-root .char-counter {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 2px;
}

/* ---- P1 V1.1：方案首頁化版面 ---- */
.bonus-host-root .mp-page-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .mp-page-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .mp-main-col,
.bonus-host-root .mp-side-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bonus-host-root .mp-hint-panel {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  padding: 10px;
}

/* 方案摘要卡 */
.bonus-host-root .plan-summary-card {
  border-left: 4px solid var(--sidebar-active);
}

.bonus-host-root .plan-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.bonus-host-root .plan-summary-name {
  font-size: 17px;
  font-weight: 700;
}

.bonus-host-root .plan-summary-code {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.bonus-host-root .plan-summary-progress {
  margin-top: 14px;
}

/* 側邊「方案資訊」卡標題列 + 狀態說明入口按鈕 */
.bonus-host-root .panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bonus-host-root .info-trigger-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.bonus-host-root .info-trigger-btn:hover {
  background: #f3f4f6;
}

/* 獎金項目：卡片網格（桌面每列 3 張） */
.bonus-host-root .item-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1199px) {
  .bonus-host-root .item-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .bonus-host-root .item-card-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .item-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-height: 220px;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bonus-host-root .item-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.bonus-host-root .item-card.card-not-started {
  border-color: #fed7aa;
}

.bonus-host-root .item-card.card-in-progress {
  border-color: #bfdbfe;
}

.bonus-host-root .item-card.card-completed {
  border-color: #bbf7d0;
  background: #f7fdf9;
}

.bonus-host-root .item-card.card-locked {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.bonus-host-root .item-card.card-disabled {
  border-color: var(--border-color);
  background: #f9fafb;
  filter: grayscale(0.4);
}

.bonus-host-root .item-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bonus-host-root .item-card-icon {
  font-size: 26px;
}

.bonus-host-root .item-card-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-card-title);
  color: var(--text-primary);
  line-height: var(--line-height-title);
}

.bonus-host-root .item-card-desc {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--text-secondary);
  flex: 1;
  min-height: 44px;
}

.bonus-host-root .item-card-updated {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .item-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.bonus-host-root .status-badge.item-status-disabled {
  background: #f1f5f9;
  color: #64748b;
}

.bonus-host-root .lock-incomplete-list {
  list-style: disc;
  margin: 4px 0 0 18px;
  padding: 0;
  font-size: var(--font-size-small);
  color: #9a3412;
}

/* 啟用／停用 Toggle Switch */
.bonus-host-root .toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.bonus-host-root .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.bonus-host-root .toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bonus-host-root .toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bonus-host-root .toggle-switch input:checked + .toggle-slider {
  background: var(--success);
}

.bonus-host-root .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

.bonus-host-root .toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 方案摘要：完成度數字列 */
.bonus-host-root .plan-summary-stat-row {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.bonus-host-root .plan-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bonus-host-root .plan-summary-stat-value {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.bonus-host-root .plan-summary-stat-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .plan-summary-secondary {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-color);
}

.bonus-host-root .completion-pct {
  font-size: var(--font-size-card-title);
}

/* 左側選單群組展開／收合（僅顯示切換，不使用動畫） */
.bonus-host-root .nav-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 4px 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #9ca3af;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.bonus-host-root .nav-group-header:hover {
  color: #d1d5db;
}

.bonus-host-root .nav-group-caret {
  font-size: 10px;
}

.bonus-host-root .nav-group-items.collapsed {
  display: none;
}

/* ---- P2 操作費設定 ---- */
.bonus-host-root .breadcrumb {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.bonus-host-root .breadcrumb-sep {
  margin: 0 4px;
}

.bonus-host-root .plan-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.bonus-host-root .plan-context-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}

.bonus-host-root .plan-context-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .plan-context-value {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.bonus-host-root .of-three-col {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  grid-template-areas: 'list form side';
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .of-three-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'list form'
      'side side';
  }
}

@media (max-width: 899px) {
  .bonus-host-root .of-three-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      'list'
      'form'
      'side';
  }
}

.bonus-host-root .of-col-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bonus-host-root .of-col-form {
  grid-area: form;
  min-width: 0;
}

.bonus-host-root .of-col-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.bonus-host-root .of-full-width {
  width: 100%;
  margin-bottom: var(--space-3);
}

.bonus-host-root .of-search-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  margin-bottom: var(--space-3);
}

.bonus-host-root .of-rule-scroll {
  max-height: 560px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-host-root .of-rule-count {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  text-align: right;
}

.bonus-host-root .of-rule-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bonus-host-root .of-rule-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bonus-host-root .of-rule-card.selected {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .of-rule-card.disabled {
  opacity: 0.6;
}

.bonus-host-root .of-rule-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.bonus-host-root .of-rule-card-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .of-rule-card-meta {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-top: 2px;
}

.bonus-host-root .of-rule-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.bonus-host-root .of-form-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bonus-host-root .of-form-section-title {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
}

.bonus-host-root .of-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.bonus-host-root .of-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: var(--font-size-small);
}

.bonus-host-root .of-chip-remove {
  background: none;
  border: none;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.bonus-host-root .of-picker-scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.bonus-host-root .of-check-row {
  display: block;
  font-size: var(--font-size-label);
  color: var(--text-primary);
  padding: 5px 0;
}

.bonus-host-root .of-test-result-box {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.bonus-host-root .of-test-result-box.success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.bonus-host-root .of-test-result-box.fail {
  background: #fff7ed;
  border-color: #fed7aa;
}

.bonus-host-root .of-test-result-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
}

/* 規則優先層級（高優先／一般／低優先）：三張橫向單選卡 */
.bonus-host-root .of-priority-tier-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bonus-host-root .of-priority-tier {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--font-size-label);
  color: var(--text-primary);
  cursor: pointer;
}

.bonus-host-root .of-priority-tier:has(input:checked) {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .of-priority-tier-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bonus-host-root .of-priority-tier-title {
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .of-priority-tier-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  margin-left: 20px;
}

.bonus-host-root .of-priority-custom-note {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

/* 獎金認列方式（每筆明細／每張耗療單一次／每位客人每日一次／每位客人每月一次）：
   與 .of-priority-tier* 視覺樣式一致，獨立命名以免與規則優先層級（Frozen）互相影響 */
.bonus-host-root .of-recognition-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bonus-host-root .of-recognition-mode-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  flex: 1 1 180px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--font-size-label);
  color: var(--text-primary);
  cursor: pointer;
}

.bonus-host-root .of-recognition-mode-card:has(input:checked) {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .of-recognition-mode-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bonus-host-root .of-recognition-mode-title {
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .of-recognition-mode-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  margin-left: 20px;
}

/* P3.5 作業獎金判定規則（UI 確認階段，純前端示意骨架）*/
.bonus-host-root .orr-demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: #fffbeb;
  border-color: #fde68a;
}

.bonus-host-root .orr-demo-banner-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.bonus-host-root .orr-demo-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.bonus-host-root .orr-radio-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 1;
}

.bonus-host-root .orr-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

/* 部位分組方式／同部位命中策略：沿用 .of-recognition-mode-* 視覺語彙，尺寸放大符合「大型 Radio Card」要求 */
.bonus-host-root .orr-area-grouping-group,
.bonus-host-root .orr-hit-strategy-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-host-root .orr-area-grouping-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--font-size-label);
  color: var(--text-primary);
  cursor: pointer;
}

.bonus-host-root .orr-area-grouping-card.selected {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .orr-area-grouping-card.orr-option-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bonus-host-root .orr-key-info-card {
  background: #f8fafc;
}

.bonus-host-root .orr-key-list {
  margin: 0;
  padding-left: 20px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .orr-key-list li {
  margin-bottom: 3px;
}

.bonus-host-root .orr-case-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.bonus-host-root .orr-case-btn.active {
  border-color: var(--sidebar-active);
  background: #eff6ff;
  color: #1d4ed8;
}

/* 進階設定（預設收合，原生 details/summary，不使用動畫） */
.bonus-host-root .of-advanced-settings {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  background: #fafafa;
}

.bonus-host-root .of-advanced-settings summary {
  cursor: pointer;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  list-style: none;
}

.bonus-host-root .of-advanced-settings summary::-webkit-details-marker {
  display: none;
}

.bonus-host-root .of-advanced-settings summary::before {
  content: '▸ ';
  color: var(--text-secondary);
}

.bonus-host-root .of-advanced-settings[open] summary::before {
  content: '▾ ';
}

/* P4 醫師操作費設定：醫師／消耗項目挑選器摺疊用（UI 確認階段共用工具類別） */
.bonus-host-root .hidden {
  display: none;
}

/* P4 醫師操作費設定：規則測試面板欄位改為 Label 在上、Input 在下，避免與 .form-row 同列擠壓造成金額被裁切。
   獨立命名，僅供本頁使用，不修改共用 .form-row（P1/P2/P3 皆沿用該類別）。 */
.bonus-host-root .df-test-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
}

.bonus-host-root .df-test-field label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.bonus-host-root .df-test-field input,
.bonus-host-root .df-test-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  box-sizing: border-box;
}

.bonus-host-root .df-test-field input[type="number"] {
  text-align: right;
}

/* P4 醫師操作費設定 V1.3：計算基礎金額改為 type="text" 顯示千分位（如 20,000），
   沿用 .df-test-field input 的既有寬度／邊框樣式，僅補上右對齊。 */
.bonus-host-root .df-test-field input.df-test-amount {
  text-align: right;
}

/* P4 醫師操作費設定 V1.3：測試結果緊接在「開始測試」按鈕下方。
   .df-test-result-wrap 只負責按鈕與結果區的間距，內部的 .of-test-result-box／
   .view-modal-grid 皆沿用既有共用樣式，不修改其定義（P1/P2/P3/P5 仍共用原樣式）。 */
.bonus-host-root .df-test-result-wrap:empty {
  margin-top: 0;
}

.bonus-host-root .df-test-result-wrap {
  margin-top: 12px;
}

.bonus-host-root .df-test-result-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--text-primary);
  margin-bottom: 6px;
}

.bonus-host-root .df-test-result-wrap .of-test-result-box {
  margin-top: 0;
}

/* P5 個人銷售業績獎金：雙欄版面（主設定區／規則測試區），獨立命名，不影響 P1～P4 既有的三欄版面。 */
.bonus-host-root .spb-layout {
  display: grid;
  grid-template-columns: 60% 1fr;
  grid-template-areas: 'main side';
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .spb-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'main'
      'side';
  }
}

.bonus-host-root .spb-col-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.bonus-host-root .spb-col-side {
  grid-area: side;
  min-width: 0;
}

/* P5 獎金分類頁籤 */
.bonus-host-root .spb-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bonus-host-root .spb-cat-tab {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #fff;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
}

.bonus-host-root .spb-cat-tab.active {
  background: #eff6ff;
  border-color: var(--sidebar-active);
  color: #1d4ed8;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .spb-cat-tab.disabled-cat {
  opacity: 0.6;
}

/* P5 啟用狀態視覺化顯示（唯讀，實際切換透過「編輯分類資訊」） */
.bonus-host-root .spb-toggle-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .spb-toggle-display .spb-toggle-dot {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #d1d5db;
}

.bonus-host-root .spb-toggle-display.on .spb-toggle-dot {
  background: #22c55e;
}

.bonus-host-root .spb-toggle-display .spb-toggle-dot::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.bonus-host-root .spb-toggle-display.on .spb-toggle-dot::after {
  left: 18px;
}

/* P5 級距表格金額／比例輸入 */
.bonus-host-root .spb-tier-input,
.bonus-host-root .spb-tier-rate-input {
  width: 100%;
  min-width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  box-sizing: border-box;
  text-align: right;
}

/* P5 規則測試欄位：Label 在上、Input 在下，金額千分位、右對齊 */
.bonus-host-root .spb-test-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.bonus-host-root .spb-test-field label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.bonus-host-root .spb-test-field input,
.bonus-host-root .spb-test-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  box-sizing: border-box;
}

.bonus-host-root .spb-test-field input[type="text"] {
  text-align: right;
}

.bonus-host-root .spb-test-result-wrap:empty {
  margin-top: 0;
}

.bonus-host-root .spb-test-result-wrap {
  margin-top: 12px;
}

.bonus-host-root .spb-test-result-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--text-primary);
  margin-bottom: 6px;
}

.bonus-host-root .spb-total-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: var(--space-3) var(--space-4);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .spb-total-banner strong {
  color: #b45309;
  font-size: 16px;
}

/* P6 個人消耗業績獎金：消耗業績來源說明流程圖，獨立命名，不影響 P1～P5。 */
.bonus-host-root .cpb-flow-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.bonus-host-root .cpb-flow-box {
  flex: 1 1 140px;
  min-width: 120px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: #f8fafc;
  text-align: center;
}

.bonus-host-root .cpb-flow-box-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .cpb-flow-box-sub {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-top: 2px;
}

.bonus-host-root .cpb-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  padding: 0 2px;
}

.bonus-host-root .cpb-flow-notes {
  margin: 10px 0 0 0;
  padding-left: 18px;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .cpb-flow-notes li {
  margin-bottom: 4px;
}

/* P7 團體業績獎金：成員預覽列與合計列，獨立命名，不影響 P1～P6。 */
.bonus-host-root .tb-eligible-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}

.bonus-host-root .tb-summary-row td {
  font-weight: var(--font-weight-semibold);
  background: #fafafa;
}

/* P8 員工親友獎金：計算流程示意（圖示＋標籤＋數值），獨立命名，不影響 P1～P7。
   箭頭沿用 P6 既有的 .cpb-flow-arrow，不重複定義。 */
.bonus-host-root .rb-flow-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.bonus-host-root .rb-flow-step {
  flex: 1 1 110px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
  text-align: center;
}

.bonus-host-root .rb-flow-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.bonus-host-root .rb-flow-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .rb-flow-value {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* P0 獎金設定中心：頁首／版本摘要列／頁籤／內容區，獨立命名，不影響 P1～P8 舊入口或共用樣式。 */
.bonus-host-root .bsc-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.bonus-host-root .bsc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.bonus-host-root .bsc-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bonus-host-root .bsc-header-meta {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .bsc-version-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 44px;
  max-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  margin-bottom: 14px;
}

.bonus-host-root .bsc-version-bar-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .bsc-version-bar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bonus-host-root .bsc-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.bonus-host-root .bsc-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.bonus-host-root .bsc-tab:hover {
  color: var(--text-primary);
}

.bonus-host-root .bsc-tab.active {
  color: var(--sidebar-active);
  border-bottom-color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .bsc-tab-content {
  min-width: 0;
}

.bonus-host-root .bsc-tab-content [data-embedded-bonus-page="true"] {
  width: 100%;
  min-width: 0;
}

.bonus-host-root .bsc-placeholder {
  padding: var(--space-5);
}

.bonus-host-root .bsc-placeholder-error {
  color: var(--danger);
  border-color: var(--danger);
  background: #fff5f5;
}

.bonus-host-root .bsc-source-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.bonus-host-root .bsc-source-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: var(--font-size-label);
}

.bonus-host-root .bsc-flow-step {
  flex: 1 1 110px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: var(--font-size-label);
  color: var(--text-primary);
  text-align: center;
}

/* 獎金報表中心：頁首／三欄版面／報表清單／A4 紙張預覽，獨立命名，不影響其他頁面或共用樣式。 */
.bonus-host-root .brc-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.bonus-host-root .brc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.bonus-host-root .brc-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bonus-host-root .brc-header-meta {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.bonus-host-root .brc-layout {
  display: grid;
  grid-template-columns: 24% 28% 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .brc-layout {
    grid-template-columns: 1fr 1fr;
  }
  .bonus-host-root .brc-preview-panel-outer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .bonus-host-root .brc-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .brc-report-list,
.bonus-host-root .brc-filter-panel,
.bonus-host-root .brc-preview-panel-outer {
  min-width: 0;
}

.bonus-host-root .brc-report-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.bonus-host-root .brc-report-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  background: #fff;
}

.bonus-host-root .brc-report-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bonus-host-root .brc-report-item.selected {
  border-color: var(--sidebar-active);
  background: #eff6ff;
}

.bonus-host-root .brc-report-item-name {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.bonus-host-root .brc-report-item-meta {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-top: 2px;
}

.bonus-host-root .brc-preview-panel {
  background: #e5e7eb;
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.bonus-host-root .brc-paper {
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  padding: 28px 32px;
  position: relative;
  overflow-y: auto;
  width: 100%;
}

.bonus-host-root .brc-paper-portrait {
  max-width: 600px;
  aspect-ratio: 210 / 297;
}

.bonus-host-root .brc-paper-landscape {
  max-width: 920px;
  aspect-ratio: 297 / 210;
}

.bonus-host-root .brc-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 40px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  text-align: center;
  line-height: 1.4;
}

.bonus-host-root .brc-report-header,
.bonus-host-root .brc-report-body,
.bonus-host-root .brc-report-footer {
  position: relative;
  z-index: 1;
}

.bonus-host-root .brc-report-header {
  text-align: center;
  border-bottom: 2px solid var(--text-primary);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.bonus-host-root .brc-report-clinic {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .brc-report-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 4px 0;
}

.bonus-host-root .brc-report-meta-row {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bonus-host-root .brc-report-footer {
  border-top: 1px solid var(--border-color);
  margin-top: 16px;
  padding-top: 10px;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  text-align: center;
}

.bonus-host-root .brc-summary-table {
  font-size: 12px;
}

.bonus-host-root .brc-permission-note {
  margin-top: var(--space-5);
}

/* 獎金計算中心（Calculation Center）：頁首／工具列／三欄流程主體／Log／摘要，獨立命名，不影響其他頁面或共用樣式。 */
.bonus-host-root .calc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: var(--space-5);
}

.bonus-host-root .calc-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.bonus-host-root .calc-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  justify-content: flex-end;
}

.bonus-host-root .calc-meta-row strong {
  color: var(--text-primary);
}

.bonus-host-root .calc-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bonus-host-root .calc-btn-recalc {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.bonus-host-root .calc-btn-recalc:hover {
  background: #d97706;
}

.bonus-host-root .calc-body {
  display: grid;
  grid-template-columns: 30% 27% 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

@media (max-width: 1199px) {
  .bonus-host-root .calc-body {
    grid-template-columns: 1fr 1fr;
  }
  .bonus-host-root .calc-log-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .bonus-host-root .calc-body {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .calc-flow,
.bonus-host-root .calc-batch-panel,
.bonus-host-root .calc-log-panel {
  min-width: 0;
}

.bonus-host-root .calc-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-color);
}

.bonus-host-root .calc-step:last-child {
  border-bottom: none;
}

.bonus-host-root .calc-step-num {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .calc-step-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  background: #d1d5db;
}

.bonus-host-root .calc-step-icon.not-started {
  background: #d1d5db;
  color: #6b7280;
}

.bonus-host-root .calc-step-icon.running {
  background: var(--sidebar-active);
}

.bonus-host-root .calc-step-icon.done {
  background: #22c55e;
}

.bonus-host-root .calc-step-icon.warning {
  background: #f59e0b;
}

.bonus-host-root .calc-step-icon.error {
  background: var(--danger);
}

.bonus-host-root .calc-step-body {
  flex: 1;
  min-width: 0;
}

.bonus-host-root .calc-step-name {
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .calc-step-time {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .calc-step-time-muted {
  color: #9ca3af;
}

.bonus-host-root .calc-step-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-host-root .calc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .calc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bonus-host-root .calc-legend .calc-step-icon {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.bonus-host-root .calc-progress {
  margin-top: 6px;
}

.bonus-host-root .calc-progress-numbers {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 6px;
}

.bonus-host-root .calc-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.bonus-host-root .calc-progress-fill {
  height: 100%;
  background: var(--sidebar-active);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.bonus-host-root .calc-current-task {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  background: #eff6ff;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .calc-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 3px solid #bfdbfe;
  border-top-color: var(--sidebar-active);
  border-radius: 50%;
  animation: calc-spin 0.8s linear infinite;
}

@keyframes calc-spin {
  to {
    transform: rotate(360deg);
  }
}

.bonus-host-root .calc-log {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bonus-host-root .calc-log-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
}

.bonus-host-root .calc-log-time {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.bonus-host-root .calc-log-icon {
  flex-shrink: 0;
}

.bonus-host-root .calc-log-text {
  color: var(--text-primary);
  flex: 1;
}

.bonus-host-root .calc-log-success .calc-log-icon {
  color: #22c55e;
}

.bonus-host-root .calc-log-info .calc-log-icon {
  color: var(--sidebar-active);
}

.bonus-host-root .calc-log-warning {
  background: #fffbeb;
}

.bonus-host-root .calc-log-warning .calc-log-icon {
  color: #f59e0b;
}

.bonus-host-root .calc-log-error {
  background: #fff5f5;
}

.bonus-host-root .calc-log-error .calc-log-icon {
  color: var(--danger);
}

.bonus-host-root .calc-log-badge {
  background: #f59e0b;
}

.bonus-host-root .calc-summary-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 899px) {
  .bonus-host-root .calc-summary-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .calc-warning-num {
  color: #b45309;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .calc-kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bonus-host-root .calc-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
}

.bonus-host-root .calc-kpi-icon {
  font-size: 20px;
}

.bonus-host-root .calc-kpi-value {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.bonus-host-root .calc-kpi-warning {
  color: #b45309;
}

/* P11 人工調整中心（Adjustment Center）：頁首／頁籤／搜尋／清單／明細，獨立命名，不影響其他頁面或共用樣式。 */
.bonus-host-root .adj-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.bonus-host-root .adj-header-sub {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-left: 6px;
}

.bonus-host-root .adj-header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.bonus-host-root .adj-header-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .adj-header-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .adj-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.bonus-host-root .adj-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.bonus-host-root .adj-tab:hover {
  color: var(--text-primary);
}

.bonus-host-root .adj-tab.active {
  color: var(--sidebar-active);
  border-bottom-color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .adj-body {
  display: grid;
  grid-template-columns: 24% 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 899px) {
  .bonus-host-root .adj-body {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .adj-search-panel,
.bonus-host-root .adj-main-col {
  min-width: 0;
}

.bonus-host-root .adj-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.bonus-host-root .adj-kpi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 1199px) {
  .bonus-host-root .adj-kpi {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bonus-host-root .adj-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
}

.bonus-host-root .adj-kpi-icon {
  font-size: 20px;
}

.bonus-host-root .adj-kpi-value {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.bonus-host-root .adj-table {
  font-size: 12px;
}

.bonus-host-root .adj-row-selected {
  background: #eff6ff;
}

.bonus-host-root .adj-delta-pos {
  color: #16a34a;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .adj-delta-neg {
  color: var(--danger);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .adj-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.bonus-host-root .adj-pagination-btns {
  display: flex;
  gap: 4px;
}

.bonus-host-root .adj-detail-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.bonus-host-root .adj-detail-name {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.bonus-host-root .adj-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 899px) {
  .bonus-host-root .adj-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bonus-host-root .adj-detail-cell {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}

.bonus-host-root .adj-detail-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.bonus-host-root .adj-detail-value {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* P12 月結作業中心（Month Close Center）：頁首／月結流程／頁籤／篩選／清單／摘要／詳細，獨立命名，不影響其他頁面或共用樣式。 */
.bonus-host-root .mc-header {
  margin-bottom: var(--space-5);
}

.bonus-host-root .mc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.bonus-host-root .mc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-host-root .mc-header-icon {
  font-size: 20px;
}

.bonus-host-root .mc-header-sub {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-left: 6px;
}

.bonus-host-root .mc-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.bonus-host-root .mc-header-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .mc-header-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .mc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .mc-status-pending {
  color: #b45309;
}

.bonus-host-root .mc-status-done {
  color: #16a34a;
}

.bonus-host-root .mc-process-panel {
  margin-bottom: var(--space-5);
}

.bonus-host-root .mc-process {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 10px 0;
}

.bonus-host-root .mc-process-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 140px;
}

.bonus-host-root .mc-process-step-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #6b7280;
  background: #e5e7eb;
}

.bonus-host-root .mc-process-step-current .mc-process-step-icon {
  background: var(--sidebar-active);
  color: #fff;
}

.bonus-host-root .mc-process-step-done .mc-process-step-icon {
  background: #22c55e;
  color: #fff;
}

.bonus-host-root .mc-process-step-name {
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .mc-process-step-current .mc-process-step-name {
  font-weight: var(--font-weight-semibold);
  color: var(--sidebar-active);
}

.bonus-host-root .mc-process-step-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.bonus-host-root .mc-process-connector {
  flex: 1 1 24px;
  min-width: 24px;
  height: 2px;
  background: var(--border-color);
  margin: 0 6px;
}

.bonus-host-root .mc-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #92400e;
  font-size: var(--font-size-small);
}

.bonus-host-root .mc-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.bonus-host-root .mc-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.bonus-host-root .mc-tab:hover {
  color: var(--text-primary);
}

.bonus-host-root .mc-tab.active {
  color: var(--sidebar-active);
  border-bottom-color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .mc-batch-layout {
  display: grid;
  grid-template-columns: 22% 46% 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

@media (max-width: 1199px) {
  .bonus-host-root .mc-batch-layout {
    grid-template-columns: 1fr 1fr;
  }
  .bonus-host-root .mc-summary-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .bonus-host-root .mc-batch-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .mc-filter-panel,
.bonus-host-root .mc-list-panel,
.bonus-host-root .mc-summary-panel,
.bonus-host-root .mc-detail-panel {
  min-width: 0;
}

.bonus-host-root .mc-batch-table {
  font-size: 12px;
}

.bonus-host-root .mc-row-selected {
  background: #eff6ff;
}

.bonus-host-root .mc-pagination {
  margin-top: 10px;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .mc-run-check-btn {
  width: 100%;
  margin-top: 14px;
}

.bonus-host-root .mc-amount-pos {
  color: #16a34a;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .mc-amount-neg {
  color: var(--danger);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .mc-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .mc-detail-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .bonus-host-root .mc-detail-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .mc-check-table {
  font-size: 12px;
}

.bonus-host-root .mc-check-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .mc-check-status-pending {
  color: #9ca3af;
}

.bonus-host-root .mc-check-status-done {
  color: #16a34a;
}

.bonus-host-root .mc-check-status-warning {
  color: #b45309;
}

.bonus-host-root .mc-warning {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #92400e;
  font-size: var(--font-size-small);
}

.bonus-host-root .mc-run-close-btn {
  width: 100%;
  background: #d1d5db;
  border-color: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
}

.bonus-host-root .mc-run-close-btn:not(:disabled) {
  background: var(--sidebar-active);
  border-color: var(--sidebar-active);
  color: #fff;
  cursor: pointer;
}

.bonus-host-root .mc-payout-panel {
  text-align: center;
  padding: 40px 20px;
}

.bonus-host-root .mc-payout-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.bonus-host-root .mc-payout-icon {
  font-size: 32px;
}

.bonus-host-root .mc-payout-title {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* P13 報表中心（Bonus Report Center V1）：頁首／頁籤／KPI／圖表／篩選／表格，獨立命名，不影響其他頁面或共用樣式。 */
.bonus-host-root .rpt-header {
  margin-bottom: var(--space-5);
}

.bonus-host-root .rpt-header-top {
  display: flex;
  align-items: center;
}

.bonus-host-root .rpt-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-host-root .rpt-header-icon {
  font-size: 20px;
}

.bonus-host-root .rpt-header-sub {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-left: 6px;
}

.bonus-host-root .rpt-header-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.bonus-host-root .rpt-header-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .rpt-header-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .rpt-header-item select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
}

.bonus-host-root .rpt-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .rpt-status-pending {
  color: #b45309;
}

.bonus-host-root .rpt-status-done {
  color: #16a34a;
}

.bonus-host-root .rpt-notice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #92400e;
  font-size: var(--font-size-small);
}

.bonus-host-root .rpt-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.bonus-host-root .rpt-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.bonus-host-root .rpt-tab:hover {
  color: var(--text-primary);
}

.bonus-host-root .rpt-tab.active {
  color: var(--sidebar-active);
  border-bottom-color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .rpt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: var(--space-5);
}

.bonus-host-root .rpt-kpi-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199px) {
  .bonus-host-root .rpt-kpi-grid,
  .bonus-host-root .rpt-kpi-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899px) {
  .bonus-host-root .rpt-kpi-grid,
  .bonus-host-root .rpt-kpi-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bonus-host-root .rpt-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
  min-width: 0;
}

.bonus-host-root .rpt-kpi-icon {
  font-size: 20px;
}

.bonus-host-root .rpt-kpi-body {
  min-width: 0;
}

.bonus-host-root .rpt-kpi-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .rpt-kpi-value {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

.bonus-host-root .rpt-kpi-unit {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.bonus-host-root .rpt-kpi-delta {
  font-size: 11px;
  color: #16a34a;
  margin-top: 2px;
}

.bonus-host-root .rpt-main-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1199px) {
  .bonus-host-root .rpt-main-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .rpt-main-col,
.bonus-host-root .rpt-side-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.bonus-host-root .rpt-chart-card {
  min-width: 0;
}

.bonus-host-root .rpt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.bonus-host-root .rpt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bonus-host-root .rpt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bonus-host-root .rpt-legend-vertical {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.bonus-host-root .rpt-legend-vertical span {
  justify-content: space-between;
}

.bonus-host-root .rpt-legend-pct {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-left: auto;
  margin-right: 8px;
}

.bonus-host-root .rpt-legend-amount {
  color: var(--text-secondary);
}

.bonus-host-root .rpt-line-chart {
  width: 100%;
  height: auto;
}

.bonus-host-root .rpt-donut-wrap {
  display: flex;
  justify-content: center;
}

.bonus-host-root .rpt-donut-chart {
  width: 200px;
  height: 200px;
}

.bonus-host-root .rpt-bar-chart {
  width: 100%;
  height: auto;
}

.bonus-host-root .rpt-category-flex {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

.bonus-host-root .rpt-category-flex .rpt-legend-vertical {
  flex: 1 1 220px;
}

.bonus-host-root .rpt-total-row td {
  font-weight: var(--font-weight-semibold);
  background: #fafafa;
}

.bonus-host-root .rpt-amount-pos {
  color: #16a34a;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .rpt-amount-neg {
  color: var(--danger);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .rpt-export-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.bonus-host-root .rpt-quick-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bonus-host-root .rpt-row-selected {
  background: #eff6ff;
}

.bonus-host-root .rpt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.bonus-host-root .rpt-pagination-btns {
  display: flex;
  gap: 4px;
}

.bonus-host-root .rpt-reason-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bonus-host-root .rpt-reason-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-host-root .rpt-reason-label {
  width: 90px;
  flex-shrink: 0;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .rpt-reason-bar-track {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.bonus-host-root .rpt-reason-bar-fill {
  height: 100%;
  background: var(--sidebar-active);
  border-radius: 999px;
}

.bonus-host-root .rpt-reason-count {
  width: 50px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

/* ==================== P14 歷史查詢中心（History Center V1） ==================== */
.bonus-host-root .hist-header {
  margin-bottom: var(--space-5);
}

.bonus-host-root .hist-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-host-root .hist-header-icon {
  font-size: 20px;
}

.bonus-host-root .hist-header-sub {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-left: 6px;
}

.bonus-host-root .hist-quick-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.bonus-host-root .hist-quick-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-label);
  color: var(--text-primary);
}

.bonus-host-root .hist-quick-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  white-space: nowrap;
}

.bonus-host-root .hist-quick-item select,
.bonus-host-root .hist-quick-item input {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
}

.bonus-host-root .hist-notice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #92400e;
  font-size: var(--font-size-small);
}

.bonus-host-root .hist-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.bonus-host-root .hist-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.bonus-host-root .hist-tab:hover {
  color: var(--text-primary);
}

.bonus-host-root .hist-tab.active {
  color: var(--sidebar-active);
  border-bottom-color: var(--sidebar-active);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .hist-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

@media (max-width: 1099px) {
  .bonus-host-root .hist-layout {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .hist-search-col,
.bonus-host-root .hist-list-col {
  min-width: 0;
}

.bonus-host-root .hist-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.bonus-host-root .hist-pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bonus-host-root .hist-row-selected {
  background: #eff6ff;
}

.bonus-host-root .hist-detail-panel {
  margin-top: 0;
}

.bonus-host-root .hist-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1099px) {
  .bonus-host-root .hist-detail-grid {
    grid-template-columns: 1fr;
  }
}

.bonus-host-root .hist-detail-block {
  min-width: 0;
}

.bonus-host-root .hist-detail-block-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bonus-host-root .hist-timeline {
  display: flex;
  flex-direction: column;
}

.bonus-host-root .hist-timeline-item {
  display: flex;
  gap: 12px;
}

.bonus-host-root .hist-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bonus-host-root .hist-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.bonus-host-root .hist-timeline-dot.done {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .hist-timeline-dot.pending {
  background: #f3f4f6;
  color: #9ca3af;
}

.bonus-host-root .hist-timeline-connector {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--border-color);
  margin: 2px 0;
}

.bonus-host-root .hist-timeline-content {
  padding-bottom: 16px;
}

.bonus-host-root .hist-timeline-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.bonus-host-root .hist-timeline-time {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .hist-action-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.bonus-host-root .hist-action-panel .hist-detail-block-title {
  width: 100%;
}

.bonus-host-root .hist-amount-pos {
  color: #16a34a;
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .hist-amount-neg {
  color: var(--danger);
  font-weight: var(--font-weight-semibold);
}

.bonus-host-root .hist-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: var(--space-5);
}

.bonus-host-root .hist-kpi-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199px) {
  .bonus-host-root .hist-kpi-grid,
  .bonus-host-root .hist-kpi-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899px) {
  .bonus-host-root .hist-kpi-grid,
  .bonus-host-root .hist-kpi-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bonus-host-root .hist-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #f8fafc;
  min-width: 0;
}

.bonus-host-root .hist-kpi-icon {
  font-size: 20px;
}

.bonus-host-root .hist-kpi-body {
  min-width: 0;
}

.bonus-host-root .hist-kpi-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.bonus-host-root .hist-kpi-value {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

.bonus-host-root .hist-version-compare-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.bonus-host-root .hist-audit-detail {
  margin-top: 12px;
}

/* ==========================================================================
   退款獎金扣回紀錄（Phase 3.3-015B）
   ========================================================================== */

/* Lifecycle Stage Badge：POSTED／REVERSED 沿用既有 status-approved／status-reversed 色彩語意
   （見 Phase 3.3-015A 設計review），以 clawback-status-* 命名讓頁面程式碼自我說明業務語意，
   PENDING／UNKNOWN 為本階段新增色彩（既有 .status-badge.status-* 系統內尚無對應語意可沿用）。 */
.bonus-host-root .status-badge.clawback-status-pending {
  background: #ffedd5;
  color: #c2410c;
}

.bonus-host-root .status-badge.clawback-status-posted {
  background: #dcfce7;
  color: #166534;
}

.bonus-host-root .status-badge.clawback-status-reversed {
  background: #fee2e2;
  color: #991b1b;
}

.bonus-host-root .status-badge.clawback-status-unknown {
  background: #fef3c7;
  color: #92400e;
}

/* Summary Card：可點擊套用 Lifecycle 篩選 */
.bonus-host-root .rcc-summary-card {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.bonus-host-root .rcc-summary-card:hover {
  border-color: var(--primary, #2563eb);
}

.bonus-host-root .rcc-summary-card--active {
  border-color: var(--primary, #2563eb);
  border-width: 2px;
}

/* 主表：整列可點擊 */
.bonus-host-root .rcc-table tbody tr.rcc-row {
  cursor: pointer;
}

.bonus-host-root .rcc-table tbody tr.rcc-row:hover {
  background: #f9fafb;
}

.bonus-host-root .rcc-table .rcc-amount-cell {
  text-align: right;
  white-space: nowrap;
}

.bonus-host-root .rcc-table .rcc-warn-cell {
  width: 28px;
  text-align: center;
}

.bonus-host-root .rcc-table .rcc-chevron-cell {
  width: 24px;
  text-align: center;
  color: var(--text-secondary);
}

/* Pagination（比照既有 .hist-pagination 視覺樣式，本頁專屬） */
.bonus-host-root .rcc-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.bonus-host-root .rcc-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bonus-host-root .rcc-pagination-controls select {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
}

/* Detail Drawer 內容排版 */
.bonus-host-root .rcc-drawer-section {
  margin-bottom: 20px;
}

.bonus-host-root .rcc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.bonus-host-root .rcc-info-item {
  min-width: 0;
}

.bonus-host-root .rcc-info-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.bonus-host-root .rcc-info-value {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}

.bonus-host-root .rcc-id-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
}

.bonus-host-root .rcc-warning-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.bonus-host-root .rcc-warning-banner-title {
  font-weight: var(--font-weight-semibold);
  color: #9a3412;
  margin-bottom: 6px;
}

.bonus-host-root .rcc-warning-list {
  margin: 0 0 6px 18px;
  padding: 0;
  font-size: 13px;
  color: #9a3412;
}

.bonus-host-root .rcc-warning-hint {
  font-size: 12px;
  color: #9a3412;
}

/* ---- 共用 Right Drawer 元件 ---- */
.bonus-host-root .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}

.bonus-host-root .drawer-panel {
  background: #fff;
  width: 480px;
  max-width: 92vw;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  animation: rcc-drawer-slide-in 0.18s ease-out;
}

@keyframes rcc-drawer-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.bonus-host-root .drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bonus-host-root .drawer-header h3 {
  margin: 0;
  font-size: 16px;
}

.bonus-host-root .drawer-body {
  font-size: 14px;
}

/* ---- 共用 Stepper 元件 ---- */
.bonus-host-root .stepper {
  display: flex;
  align-items: flex-start;
}

.bonus-host-root .stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 76px;
}

.bonus-host-root .stepper-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #e5e7eb;
  margin-bottom: 6px;
}

.bonus-host-root .stepper-step--done .stepper-dot {
  background: #166534;
  border-color: #166534;
}

.bonus-host-root .stepper-step--active .stepper-dot {
  background: #fff;
  border-color: #2563eb;
}

.bonus-host-root .stepper-label {
  font-size: 12px;
  color: var(--text-primary);
}

.bonus-host-root .stepper-step--pending .stepper-label {
  color: var(--text-secondary);
}

.bonus-host-root .stepper-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  max-width: 96px;
}

.bonus-host-root .stepper-connector {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  margin-top: 7px;
  min-width: 12px;
}

.bonus-host-root .stepper-connector--done {
  background: #166534;
}

/* ---- 共用 Accordion 元件 ---- */
.bonus-host-root .accordion-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

.bonus-host-root .accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #fafafa;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.bonus-host-root .accordion-chevron {
  transition: transform 0.15s ease;
  color: var(--text-secondary);
}

.bonus-host-root .accordion-header.expanded .accordion-chevron {
  transform: rotate(90deg);
}

.bonus-host-root .accordion-body {
  padding: 12px;
  border-top: 1px solid var(--border-color);
}

/* ---- 共用 Loading 元件 ---- */
.bonus-host-root .loading-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  color: var(--text-secondary);
  font-size: 13px;
  justify-content: center;
}

.bonus-host-root .loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: rcc-spin 0.7s linear infinite;
}

@keyframes rcc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 共用 Empty State 元件 ---- */
.bonus-host-root .empty-state {
  text-align: center;
  padding: 40px 20px;
}

.bonus-host-root .empty-state-message {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.bonus-host-root .empty-state-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ==================== Refund Clawback Report（Phase 3.3-016） ====================
   本頁專屬樣式（.rcr- 前綴），刻意不覆寫任何既有全域 .btn／.data-table／:root 變數，
   避免影響其他既有頁面；僅在本頁範圍內滿足 Ticket 指定的 Design System 數值
   （本文 15–16px、標題 18–20px、按鈕高度 40px、Radius 12px）。 */
.bonus-host-root .rcr-panel .panel-title {
  font-size: 20px;
}

.bonus-host-root .rcr-summary-card {
  border-radius: 12px;
}

.bonus-host-root .rcr-summary-card .card-label {
  font-size: 15px;
}

.bonus-host-root .rcr-summary-card .card-value {
  font-size: 20px;
}

.bonus-host-root .rcr-table {
  font-size: 15px;
}

.bonus-host-root .rcr-table th,
.bonus-host-root .rcr-table td {
  padding: 10px 12px;
}

.bonus-host-root .rcr-btn {
  min-height: 40px;
  border-radius: 12px;
  font-size: 15px;
}

.bonus-host-root .rcr-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 列印專用檢視：畫面上永遠隱藏，僅 @media print 時顯示（見 refund-clawback-report.js
   renderPrintView()，內容為列印當下重新彙整的完整查詢結果，非目前畫面分頁）。 */
.bonus-host-root .rcr-print-only {
  display: none;
}

.bonus-host-root .rcr-print-header {
  margin-bottom: 12px;
}

.bonus-host-root .rcr-print-system-name {
  font-size: 13px;
  color: var(--text-secondary);
}

.bonus-host-root .rcr-print-report-name {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  margin: 4px 0;
}

.bonus-host-root .rcr-print-filter-summary,
.bonus-host-root .rcr-print-time {
  font-size: 13px;
  color: var(--text-secondary);
}

.bonus-host-root .rcr-print-summary {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
}

/* Phase 3.3-016A：A4 橫式，10mm 邊界（@page 為獨立 at-rule，不巢狀於 @media print 內，
   相容性較佳；本質上僅於列印／列印預覽時生效，行為等同於巢狀寫法）。 */
@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .bonus-host-root .sidebar,
  .bonus-host-root .topbar,
  .bonus-host-root .no-print,
  .bonus-host-root #drawer-root,
  .bonus-host-root #toast-container,
  .bonus-host-root #modal-root {
    display: none !important;
  }
  .bonus-host-root .rcr-print-only {
    display: block !important;
  }
  .bonus-host-root .app-shell,
  .bonus-host-root .main-column,
  .bonus-host-root .content {
    display: block !important;
    overflow: visible !important;
  }

  /* Summary Card 不得被拆頁（Phase 3.3-016A 第二節第 5 點）。 */
  .bonus-host-root .rcr-print-summary {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 列印表格：限定於 .rcr-print-only 內的 .rcr-table，避免影響其他頁面既有表格的列印行為
     （Minimal Change：僅調整本報表列印範圍，不做全域 thead／tfoot／tr 列印規則變更）。 */
  .bonus-host-root .rcr-print-only table.rcr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
  }

  .bonus-host-root .rcr-print-only table.rcr-table thead {
    display: table-header-group; /* 表頭每頁重複 */
  }

  .bonus-host-root .rcr-print-only table.rcr-table tfoot {
    display: table-footer-group; /* Footer（若有）每頁重複 */
  }

  .bonus-host-root .rcr-print-only table.rcr-table tr {
    break-inside: avoid;
    page-break-inside: avoid; /* 避免單列被切斷跨頁 */
  }

  .bonus-host-root .rcr-print-only table.rcr-table th,
  .bonus-host-root .rcr-print-only table.rcr-table td {
    padding: 4px 6px;
    white-space: normal;
    word-break: break-word; /* 不截斷退款單號／員工姓名／狀態文字，改為換行而非裁切 */
  }

  .bonus-host-root .rcr-print-only table.rcr-table .rcc-amount-cell {
    text-align: right;
  }
}

/* ===== BONUS-V2-PHASE1-IA ================================================
   設定中心子頁籤、計算中心前置條件列與計算結果處理、獎金查詢。
   全部掛在 .bonus-host-root 之下的既有 class 命名空間，不影響其它模組。
   視覺沿用 V4 語言：無漸層、無 Glassmorphism、無 KPI 卡牆。 */

/* 設定中心：設定區內的第二層子頁 */
.bonus-host-root .bsc-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;border-bottom:1px solid #e5e7eb;padding-bottom:8px}
.bonus-host-root .bsc-subtab{
  min-height:30px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  background:#f7f8fa;border:1px solid #e5e7eb;color:#344054;
}
.bonus-host-root .bsc-subtab:hover{background:#eef2f6}
.bonus-host-root .bsc-subtab.active{background:#eef6fe;border-color:#cfe3fb;color:#0f6cbd}

/* 計算中心：主資料同步（執行計算的前置條件） */
.bonus-host-root .bcc-prereq-v2{padding:12px 16px}
.bonus-host-root .bcc-prereq-row-v2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bonus-host-root .bcc-prereq-state-v2{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.bonus-host-root .bcc-prereq-state-v2::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.bonus-host-root .bcc-prereq-state-v2.is-ok{color:#0f7b3d}
.bonus-host-root .bcc-prereq-state-v2.is-warn{color:#b54708}
.bonus-host-root .bcc-prereq-meta-v2{flex:1 1 auto;min-width:0;font-size:12px;color:#667085}
.bonus-host-root .bcc-prereq-note-v2{margin:8px 0 0;max-width:80ch}
.bonus-host-root .bcc-error-v2{color:#b42318}

/* 計算中心：計算結果處理（退款扣回／未歸屬／人工調整） */
.bonus-host-root .bcc-followup-tabs-v2{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.bonus-host-root .bcc-followup-tab-v2{
  min-height:32px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  background:#f7f8fa;border:1px solid #e5e7eb;color:#344054;
}
.bonus-host-root .bcc-followup-tab-v2:hover{background:#eef2f6}
.bonus-host-root .bcc-followup-tab-v2.active{background:#eef6fe;border-color:#cfe3fb;color:#0f6cbd}
.bonus-host-root .bcc-followup-body-v2{min-height:80px}

/* 獎金查詢 */
.bonus-host-root .bq-page-v2{display:grid;gap:14px}
.bonus-host-root .bq-tabs-v2{display:flex;gap:6px;flex-wrap:wrap}
.bonus-host-root .bq-tab-v2{
  min-height:32px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  background:#f7f8fa;border:1px solid #e5e7eb;color:#344054;
}
.bonus-host-root .bq-tab-v2:hover{background:#eef2f6}
.bonus-host-root .bq-tab-v2.active{background:#eef6fe;border-color:#cfe3fb;color:#0f6cbd}
.bonus-host-root .bq-table-v2 th, .bonus-host-root .bq-table-v2 td{font-size:13px}
.bonus-host-root .bq-table-v2 .right{text-align:right}

/* PHASE-B2：每月獎金方案「本月採用制度」。沿用既有 panel/cos-card，僅補兩欄排版。 */
.mp-sel-group{border-top:1px solid var(--border-color,#e5e7eb);padding:12px 0;}
.mp-sel-group:first-child{border-top:0;}
.mp-sel-title{font-weight:700;margin-bottom:8px;}
.mp-sel-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.mp-sel-col-title{font-size:12px;color:var(--text-muted,#6b7280);margin-bottom:4px;}
.mp-sel-list{list-style:none;margin:0;padding:0;}
.mp-sel-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;}
.mp-sel-name{flex:1;min-width:0;overflow-wrap:anywhere;}
.mp-sel-empty{padding:4px 0;}

/* BONUS-SETTINGS-WIZARD：制度設定流程。沿用既有 panel/cos-card 與 progress-bar，僅補步驟列排版。 */
.bsc-progress{margin:8px 0 12px;}
.bsc-progress-pct{display:block;margin-bottom:6px;}
.bsc-step-list{list-style:none;margin:0;padding:0;}
.bsc-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--border-color,#e5e7eb);}
.bsc-step:first-child{border-top:0;}
.bsc-step-no{flex:0 0 24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--surface-2,#f3f4f6);font-size:12px;}
.bsc-step-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bsc-step-name{font-weight:600;}
.bsc-step-hint,.bsc-step-detail{font-size:12px;color:var(--text-muted,#6b7280);overflow-wrap:anywhere;}
.bsc-step-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* ===== 業績獎金分類設定（BONUS-RECOVERY-R6）=====
   沿用既有 .panel/.btn/.badge 視覺語彙，只補這個區塊需要的排版。
   所有寬度採 min-width:0 + 可捲動容器，長分類名稱與寬表格在 1366 也不會把版面撐破。 */
.pcm-root { min-width: 0; }
.pcm-mode { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
  margin-bottom: 12px; border: 1px solid var(--cos-border, #e2e8f0); background: var(--cos-bg-subtle, #f8fafc); }
.pcm-mode b { font-size: 14px; }
.pcm-mode span { font-size: 12px; color: var(--cos-text-muted, #64748b); }
.pcm-mode--category { border-left: 3px solid #2563eb; }
.pcm-mode--legacy { border-left: 3px solid #94a3b8; }
.pcm-mode--warn { border-left: 3px solid #d97706; margin-bottom: 12px; }
.pcm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pcm-list-title { font-weight: 600; }
.pcm-locked-hint { font-size: 12px; color: #b45309; }
.pcm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pcm-card { border: 1px solid var(--cos-border, #e2e8f0); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; background: #fff; }
.pcm-card.is-disabled { opacity: .65; }
.pcm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
/* 長分類名稱一律截斷，不允許把卡片撐開 */
.pcm-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pcm-card-metrics { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--cos-text-muted, #64748b); }
.pcm-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pcm-state { padding: 14px; border-radius: 8px; text-align: center; color: var(--cos-text-muted, #64748b);
  background: var(--cos-bg-subtle, #f8fafc); border: 1px dashed var(--cos-border, #e2e8f0);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pcm-state--error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.pcm-editor { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.pcm-section { border-top: 1px solid var(--cos-border, #e2e8f0); padding-top: 10px; min-width: 0; }
.pcm-section-title { font-weight: 600; margin-bottom: 8px; }
.pcm-basic { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.pcm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pcm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8; font-size: 12px; max-width: 100%; }
.pcm-chip-x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
.pcm-empty-inline { font-size: 12px; color: var(--cos-text-muted, #64748b); }
.pcm-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcm-add-row select, .pcm-add-row input { min-width: 0; flex: 1 1 180px; max-width: 100%; }
.pcm-note { font-size: 12px; color: var(--cos-text-muted, #64748b); margin-top: 6px; }
/* 級距表在窄視窗自行捲動，不讓整頁出現水平捲軸 */
.pcm-tier-table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.pcm-tier-table th, .pcm-tier-table td { border: 1px solid var(--cos-border, #e2e8f0); padding: 4px 6px; font-size: 12px; }
.pcm-tier-table input { width: 100%; min-width: 72px; box-sizing: border-box; }
.pcm-plan-workspace { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pcm-plan-basic { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.pcm-legacy-tiers { opacity: .9; }

/* ===== 團體獎金適用範圍（BONUS-RECOVERY-R8-UI-C）===== */
.tse-root { display:flex; flex-direction:column; gap:14px; min-width:0; }
.tse-semantics { padding:10px 12px; border-radius:8px; background:#eff6ff; color:#1e3a8a;
  font-size:13px; line-height:1.7; border-left:3px solid #2563eb; }
.tse-legacy { padding:10px 12px; border-radius:8px; background:#fffbeb; color:#92400e;
  font-size:12px; line-height:1.7; border-left:3px solid #d97706; }
.tse-legacy b { display:block; margin-bottom:2px; }
.tse-locked { padding:10px 12px; border-radius:8px; background:#f1f5f9; color:#475569; font-size:12px; }
.tse-section { border-top:1px solid #e2e8f0; padding-top:10px; min-width:0; }
.tse-title { font-weight:600; margin-bottom:8px; }
.tse-options { display:flex; flex-direction:column; gap:6px; }
.tse-opt { display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:6px; cursor:pointer; }
.tse-opt.is-disabled { opacity:.55; cursor:not-allowed; }
.tse-opt span { display:flex; flex-direction:column; min-width:0; }
.tse-opt em { font-style:normal; font-size:12px; color:#64748b; margin-top:2px; }
.tse-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.tse-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px;
  background:#eff6ff; color:#1d4ed8; font-size:12px; max-width:100%; }
.tse-chip.is-warn { background:#fef3c7; color:#92400e; }
.tse-chip em { font-style:normal; font-size:11px; opacity:.85; }
.tse-x { border:0; background:transparent; cursor:pointer; color:inherit; font-size:14px; line-height:1; }
.tse-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tse-add input, .tse-add select { flex:1 1 160px; min-width:0; max-width:100%; }
.tse-hint, .tse-note { font-size:12px; color:#64748b; line-height:1.6; }
.tse-note { color:#b45309; min-height:16px; }
.tse-actions { display:flex; justify-content:flex-end; }
.tse-error { color:#b91c1c; font-size:12px; min-height:16px; }

/* CLINICOS-V4-MANUAL-UAT-BATCH4（K）獎金方案清單 —— 只補這張清單自己的排版，
   表格本體沿用共用的 .cos-table.compact-table，不新增第二套表格樣式。 */
.mp-plan-list-wrap { margin-top:16px; }
.mp-plan-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mp-plan-list-table { width:100%; }
.mp-plan-list-table tr.is-current-plan { background:#eff6ff; }
.mp-plan-list-empty { text-align:center; color:#64748b; }

/* ===== CLINICOS-V4-KPI-LIBRARY-UI-014 —— KPI 指標庫（獎金設定中心 › KPI › KPI 指標）
   三欄：分類導覽／指標清單／已加入。沿用既有 .cos-toolbar／.cos-field／.cos-btn／.cos-empty，
   不新增第二套元件；顏色沿用本檔既有 hex 語彙，不引入新的 Design Token。
   刻意不做卡片包卡片：清單列本身就是內容，不再包一層 .panel。 */
.kpil-page { display:flex; flex-direction:column; min-width:0; }
.kpil-head { margin:0 0 16px; }
.kpil-title { margin:0 0 4px; font-size:20px; font-weight:700; color:#101828; }
.kpil-sub { margin:0; font-size:13px; color:#64748b; line-height:1.6; }
.kpil-toolbar { margin-bottom:16px; padding:16px 20px; row-gap:12px; }
.kpil-toolbar .cos-toolbar__filters { align-items:flex-end; gap:12px 16px; }
.kpil-field .cos-field__control { min-width:150px; }
.kpil-toolbar #kpilSearch { min-width:220px; }
.kpil-summary { display:flex; align-items:center; gap:16px; }
.kpil-count { font-size:13px; color:#475569; white-space:nowrap; }

.kpil-layout { display:grid; grid-template-columns:200px minmax(0,1fr) 260px; gap:16px; align-items:start; }

/* 分類導覽：清單式，不是一堆卡片 */
.kpil-cats { display:flex; flex-direction:column; gap:2px; position:sticky; top:12px; }
.kpil-cat { display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:9px 12px; border:0; border-radius:8px; background:transparent;
  font-size:13.5px; color:#334155; cursor:pointer; text-align:left; }
.kpil-cat:hover { background:#f1f5f9; }
.kpil-cat.is-active { background:#eff6ff; color:#1d4ed8; font-weight:600; }
.kpil-cat-count { font-size:12px; color:#94a3b8; font-variant-numeric:tabular-nums; }
.kpil-cat.is-active .kpil-cat-count { color:#1d4ed8; }

/* 指標清單：一列一個能力，不是資料庫欄位表 */
.kpil-list { display:flex; flex-direction:column; gap:8px; min-width:0; }
.kpil-item { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; }
.kpil-item.is-added { border-color:#bfdbfe; background:#f8fbff; }
.kpil-item-main { min-width:0; flex:1 1 auto; }
.kpil-item-name { display:block; padding:0; border:0; background:none; cursor:pointer;
  font-size:15px; font-weight:600; color:#0f172a; text-align:left; }
.kpil-item-name:hover { color:#1d4ed8; text-decoration:underline; }
.kpil-item-desc { margin:4px 0 8px; font-size:12.5px; color:#64748b; line-height:1.6; }
.kpil-tags { display:flex; flex-wrap:wrap; gap:6px; }
.kpil-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px;
  background:#f1f5f9; color:#475569; font-size:11.5px; white-space:nowrap; }
.kpil-tag--cap { background:#ecfdf5; color:#047857; }
.kpil-tag--cap.is-derivable { background:#eff6ff; color:#1d4ed8; }
.kpil-item-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.kpil-added { display:inline-flex; align-items:center; gap:4px; padding:0 8px;
  font-size:13px; font-weight:600; color:#047857; white-space:nowrap; }

/* 已加入面板 */
.kpil-selected { position:sticky; top:12px; padding:16px; background:#fff;
  border:1px solid #e5e7eb; border-radius:10px; }
.kpil-sel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpil-sel-head--legacy { margin-top:16px; padding-top:12px; border-top:1px solid #e5e7eb; }
.kpil-sel-title { margin:0; font-size:14px; font-weight:700; color:#101828; }
.kpil-sel-count { min-width:22px; padding:0 7px; border-radius:999px; background:#eff6ff;
  color:#1d4ed8; font-size:12px; font-weight:700; text-align:center; }
.kpil-sel-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.kpil-sel-item { padding-left:10px; border-left:2px solid #bfdbfe; }
.kpil-sel-item.is-legacy { border-left-color:#e2e8f0; }
.kpil-sel-name { font-size:13.5px; font-weight:600; color:#0f172a; }
.kpil-sel-meta { font-size:11.5px; color:#64748b; line-height:1.5; }
.kpil-sel-empty, .kpil-sel-note { margin:10px 0 0; font-size:12px; color:#64748b; line-height:1.6; }

/* 狀態 */
.kpil-loading { padding:32px; text-align:center; color:#64748b; font-size:13px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; }
.kpil-empty { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:32px 20px; }
.kpil-empty.is-error { border-color:#fecaca; }

/* 詳細 Drawer */
.kpil-detail { display:flex; flex-direction:column; gap:14px; }
.kpil-dt-desc { margin:0; font-size:13.5px; color:#334155; line-height:1.7; }
.kpil-dt-note { margin:0; padding:10px 12px; border-radius:8px; background:#eff6ff;
  color:#1d4ed8; font-size:12.5px; line-height:1.6; }
.kpil-dt-list { margin:0; display:flex; flex-direction:column; gap:8px; }
.kpil-dt-row { display:flex; gap:12px; align-items:baseline; }
.kpil-dt-row dt { flex:0 0 76px; font-size:12px; color:#64748b; }
.kpil-dt-row dd { margin:0; font-size:13px; color:#0f172a; }
.kpil-dt-tech { border-top:1px solid #e5e7eb; padding-top:10px; }
.kpil-dt-tech summary { font-size:12.5px; color:#64748b; cursor:pointer; }
.kpil-dt-techbody { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.kpil-dt-techbody div { display:flex; gap:10px; align-items:baseline; }
.kpil-dt-techbody span { flex:0 0 68px; font-size:11.5px; color:#94a3b8; }
.kpil-dt-techbody code { font-size:11.5px; color:#475569; word-break:break-all; }

@media (max-width:1280px) {
  .kpil-layout { grid-template-columns:180px minmax(0,1fr) 230px; }
}
/* 窄畫面：分類 → 清單 → 已加入 依序堆疊（不動 Global Mobile Shell） */
@media (max-width:1024px) {
  .kpil-layout { grid-template-columns:minmax(0,1fr); }
  .kpil-cats { position:static; flex-direction:row; flex-wrap:wrap; }
  .kpil-cat { width:auto; }
  .kpil-selected { position:static; }
  .kpil-item { flex-direction:column; align-items:stretch; }
  .kpil-item-actions { justify-content:flex-end; }
}

/* ==================== 員工親友獎金設定（CLINICOS-V4-...-BONUS-01-CLOSEOUT） ==================== */
/* 全部以 .bonus-host-root 開頭：本模組的 CSS 契約要求所有 top-level selector 都限定在
   Bonus 掛載容器內，避免 Native Mount 時樣式外洩到主系統（bonus-native-mount-static-contract）。
   .erb-field-v1 是 <label>。專案的全域 label 規則（public/style.css）已經設定
   display:flex;flex-direction:column;font-weight:700 —— 欄位排版正好是要的，但 700 會讓整個
   欄位（含說明文字與錯誤訊息）全部變粗。因此這裡把 label 自身還原為一般字重，
   只讓 .erb-label-v1 維持粗體。 */
.bonus-host-root .erb-form-v1 { display:flex; flex-direction:column; gap:18px; margin-top:16px; max-width:520px; }
.bonus-host-root .erb-field-v1 { display:flex; flex-direction:column; gap:6px; font-weight:400; }
.bonus-host-root .erb-label-v1 { font-weight:700; font-size:13.5px; color:#0f172a; }
.bonus-host-root .erb-field-v1 input { padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }
.bonus-host-root .erb-field-v1 select { padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }
.bonus-host-root .erb-field-v1 input:disabled { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.bonus-host-root .erb-field-v1 select:disabled { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.bonus-host-root .erb-field-error-v1 { color:#b91c1c; font-size:12.5px; }
.bonus-host-root .erb-actions-v1 { margin-top:20px; display:flex; gap:10px; }