/* CLINICOS-MEDICAL-RECEIPT-UI-PRINT-REPORT-B4B
 *
 * 醫療收據預覽 Modal 與報表分頁的樣式。
 *
 * 這裡只管「系統內的操作畫面」；正式收據的列印版型完全自帶樣式，寫在列印彈出頁裡，
 * 不受本檔與任何既有報表 CSS 影響（正式憑證不應被 App 佈景牽動）。
 * 一律沿用既有 --cos-* token，不新增色票、不改全域樣式。
 */

/* ---------- 預覽 / 查看 Modal ----------
 *
 * UI-POLISH-013：正式醫療文件的開立確認介面，不是工程測試畫面。
 * Modal 標題列本身已有唯一 Close，內容區不再放第二個關閉。
 */
.mr-modal-v1 {
  width: 100%;
  max-width: 780px;
}

/* 銷售單號是次要資訊，壓在主標題之下。 */
.mr-subheader-v1 {
  margin: 0 0 var(--cos-space-md);
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-doc-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-lg);
}

/* ---------- Summary：兩列四欄，label muted / value 深色，不做 KPI Card ---------- */
.mr-summary-v1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cos-space-md) var(--cos-space-xl);
  margin: 0;
  padding: var(--cos-space-md) 0;
  border-top: 1px solid var(--cos-border);
  border-bottom: 1px solid var(--cos-border);
}

.mr-summary-v1 > div { min-width: 0; }

.mr-summary-v1 dt {
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-summary-v1 dd {
  margin: 3px 0 0;
  font-size: 15px;
  color: var(--cos-text);
  word-break: break-word;
}

/* 收據編號稍作強調，但不放大成 KPI。 */
.mr-summary-no-v1 {
  font-size: 18px !important;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ---------- 區塊 ---------- */
.mr-block-title-v1 {
  margin: 0 0 var(--cos-space-sm);
  font-size: var(--cos-fs-section-title);
  font-weight: var(--cos-fw-section-title);
  color: var(--cos-text);
}

/* ---------- 可開立醫療項目 ---------- */
.mr-lines-v1 {
  width: 100%;
  border-collapse: collapse;
}

.mr-lines-v1 thead th {
  padding: 0 0 6px;
  text-align: left;
  font-size: var(--cos-fs-small);
  font-weight: 600;
  color: var(--cos-text-muted);
  border-bottom: 1px solid var(--cos-border);
}

.mr-lines-v1 tbody td {
  padding: 9px 0;
  color: var(--cos-text);
  border-bottom: 1px solid var(--cos-border);
  word-break: break-word;
}

.mr-lines-v1 .right {
  text-align: right;
  white-space: nowrap;
  width: 30%;
}

.mr-lines-v1 tfoot th {
  padding: 11px 0 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--cos-text);
}

.mr-lines-v1 tfoot th.right { text-align: right; }

.mr-empty-v1 { color: var(--cos-text-subtle); }

.mr-scope-v1 {
  margin: var(--cos-space-sm) 0 0;
  font-size: var(--cos-fs-small);
  color: var(--cos-text-subtle);
}

/* ---------- 開立診所：compact two-column description ---------- */
.mr-clinic-grid-v1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cos-space-sm) var(--cos-space-xl);
  margin: 0;
}

.mr-clinic-grid-v1 > div { min-width: 0; }
.mr-clinic-span-v1 { grid-column: 1 / -1; }

.mr-clinic-grid-v1 dt {
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-clinic-grid-v1 dd {
  margin: 2px 0 0;
  color: var(--cos-text);
  word-break: break-word;
}

/* ---------- 編號提示 ---------- */
.mr-provisional-note-v1,
.mr-issued-note-v1 {
  margin: 0;
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-issued-note-v1 { margin: 0 0 var(--cos-space-md); }

/* ---------- 列印確認列 ---------- */
.mr-confirm-v1 {
  margin-top: var(--cos-space-lg);
  padding-top: var(--cos-space-md);
  border-top: 1px solid var(--cos-border);
}

.mr-confirm-label-v1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cos-text);
}

.mr-confirm-label-v1 input { flex: 0 0 auto; }

.mr-confirm-v1 label:has(input:disabled) { color: var(--cos-text-subtle); }
.mr-confirm-v1 input:disabled { cursor: not-allowed; }

.mr-confirm-note-v1,
.mr-print-hint-v1 {
  margin: 5px 0 0 24px;
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-print-hint-v1 { margin-left: 24px; color: var(--cos-text-subtle); }

/* ---------- Action area ---------- */
.mr-actions-v1 {
  display: flex;
  gap: var(--cos-space-sm);
  justify-content: flex-end;
  margin-top: var(--cos-space-lg);
  padding-top: var(--cos-space-md);
  border-top: 1px solid var(--cos-border);
}

/* Save 停用時仍要看得出是主要動作，不能糊成一片。 */
.mr-actions-v1 .cos-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- 阻擋狀態：單一 Status Panel ---------- */
.mr-status-v1 {
  display: flex;
  gap: var(--cos-space-md);
  align-items: flex-start;
  max-width: 560px;
}

.mr-status-icon-v1 {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cos-danger);
  background: var(--cos-danger-bg);
  border: 1px solid var(--cos-danger-border);
}

.mr-status-body-v1 { min-width: 0; }

.mr-status-title-v1 {
  margin: 3px 0 var(--cos-space-sm);
  font-size: var(--cos-fs-card-title);
  font-weight: 600;
  color: var(--cos-text);
}

.mr-status-hint-v1 { margin: 0; color: var(--cos-text-muted); }

.mr-status-list-v1 {
  margin: var(--cos-space-xs) 0 0;
  padding-left: 20px;
  line-height: 1.9;
  color: var(--cos-text);
  font-weight: 600;
}

/* ---------- 窄螢幕 ---------- */
@media (max-width: 720px) {
  .mr-summary-v1,
  .mr-clinic-grid-v1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .mr-actions-v1 { flex-direction: column-reverse; }
  .mr-actions-v1 .cos-btn { width: 100%; }
}

/* ---------- 報表：compact toolbar ---------- */
.mr-report-toolbar-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--cos-space-sm);
  padding: var(--cos-space-md);
  margin-bottom: var(--cos-space-md);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-radius-sm);
  background: var(--cos-surface);
}

.mr-report-filters-v1,
.mr-report-advanced-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cos-space-sm) var(--cos-space-md);
}

.mr-report-advanced-v1 {
  padding-top: var(--cos-space-sm);
  border-top: 1px dashed var(--cos-border);
}

.mr-report-advanced-v1.hidden { display: none; }
.mr-report-field-v1.hidden { display: none; }

.mr-report-field-v1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mr-report-field-v1 > span {
  font-size: var(--cos-fs-small);
  color: var(--cos-text-muted);
}

.mr-report-field-v1 .cos-field__control {
  width: 168px;
  max-width: 100%;
}

.mr-report-check-v1 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  font-size: var(--cos-fs-small);
  color: var(--cos-text);
  white-space: nowrap;
}

/* 篩選與操作同一層 hierarchy —— 操作靠右，但仍在同一個 toolbar 內。 */
.mr-report-toolbar-actions-v1 {
  display: flex;
  align-items: center;
  gap: var(--cos-space-xs);
  margin-left: auto;
  padding-bottom: 1px;
}

.mr-report-toolbar-sep-v1 {
  width: 1px;
  height: 20px;
  margin: 0 var(--cos-space-xs);
  background: var(--cos-border);
}

/* ---------- 報表：compact summary bar（非 Dashboard KPI） ---------- */
.mr-report-summary-v1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--cos-space-xs);
  padding: 0 0 var(--cos-space-sm);
  margin-bottom: var(--cos-space-sm);
  border-bottom: 1px solid var(--cos-border);
  font-size: var(--cos-fs-body);
  color: var(--cos-text-muted);
}

.mr-report-summary-item-v1 { white-space: nowrap; }
.mr-report-summary-item-v1 b { color: var(--cos-text); font-weight: 700; }
.mr-report-summary-sep-v1 { color: var(--cos-border-strong); }
.mr-report-summary-range-v1 { color: var(--cos-text-subtle); }

/* ---------- 報表：table ---------- */
.mr-report-table-wrap-v1 {
  width: 100%;
  overflow-x: auto;
}

.mr-report-table-v1 {
  width: 100%;
  table-layout: auto;
}

.mr-report-table-v1 thead th {
  font-size: var(--cos-fs-small);
  font-weight: 600;
  color: var(--cos-text-muted);
  white-space: nowrap;
}

.mr-report-table-v1 tbody td { padding-top: 9px; padding-bottom: 9px; }

.mr-nowrap-v1 { white-space: nowrap; }

.mr-report-no-v1 { font-weight: 600; letter-spacing: 0.5px; }
.mr-report-amount-v1 { font-variant-numeric: tabular-nums; }

/* 醫療項目欄用 itemSummary，一列一張收據；長字串換行但不撐爆版面。 */
.mr-report-items-v1 {
  min-width: 200px;
  max-width: 320px;
  word-break: break-word;
}

.mr-report-actions-v1 { white-space: nowrap; }
.mr-report-actions-v1 .cos-btn { padding: 3px 10px; font-size: var(--cos-fs-small); }
.mr-report-actions-v1 .cos-btn + .cos-btn { margin-left: 6px; }

.mr-report-empty-v1 {
  padding: var(--cos-space-xl) 0 !important;
  text-align: center;
  color: var(--cos-text-subtle);
}

@media (max-width: 900px) {
  .mr-report-toolbar-actions-v1 { margin-left: 0; width: 100%; }
  .mr-report-field-v1 .cos-field__control { width: 100%; }
  .mr-report-field-v1 { flex: 1 1 160px; }
}