/* Source: design/approval-redesign/design-demos/v8-b-decision-card.html — bản thiết kế bước Phê duyệt đã được
   duyệt (direction-approved.md, «chọn hướng B»), đưa nguyên sang app theo DDR-005. Chỉ đổi selector
   #approvalSplit → #approvalPreview và bỏ các rule chỉ dùng để mockup đứng một mình. Mọi giá trị đều là
   token --bms-*; file nằm ngoài core cascade nên không thuộc phạm vi đóng băng thiết kế. */

/* Bước Phê duyệt chiếm trọn chiều ngang của lưới bao ngoài. */
#approvalPreview { grid-column: 1 / -1; }
/* ---- Đầu màn: giống .section-title của app, y hệt bước Tính giá ---- */
#approvalPreview .ap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bms-space-4); margin-bottom: var(--bms-space-4); }
#approvalPreview .ap-head h2 { color: var(--bms-text); font: 700 18px/1.3 var(--bms-font-display); }
#approvalPreview .ap-head .eyebrow { margin: 0 0 var(--bms-space-1); color: var(--bms-primary); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#approvalPreview .ap-head p { margin: var(--bms-space-1) 0 0; color: var(--bms-text-muted); font: 500 13px/1.4 var(--bms-font-ui); }

/* ---- Bố cục hai cột: đúng lưới của bước Tính giá ---- */
#approvalPreview .ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--bms-space-5); align-items: start; }
#approvalPreview .ap-left { display: flex; flex-direction: column; gap: var(--bms-space-4); min-width: 0; }

/* ---- Cột trái: hồ sơ đơn hàng, cùng thẻ .dashboard-insight-card ---- */
#approvalPreview .ap-card { padding: var(--bms-space-6); }
#approvalPreview .ap-group + .ap-group { padding-top: var(--bms-space-5); margin-top: var(--bms-space-5); border-top: 1px solid var(--bms-border); }
#approvalPreview .ap-group-head { display: flex; align-items: center; gap: var(--bms-space-3); margin-bottom: var(--bms-space-3); }
#approvalPreview .ap-group-head .ap-num { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--bms-radius-1); color: var(--bms-primary); background: var(--bms-primary-soft); font: 700 12px/1 var(--bms-font-data); }
#approvalPreview .ap-group-head h3 { flex: 1 1 auto; min-width: 0; color: var(--bms-text); font: 700 14px/1.3 var(--bms-font-ui); }
#approvalPreview .ap-group-head .ap-tag { flex: 0 0 auto; padding: 3px var(--bms-space-2); border-radius: var(--bms-radius-round); color: var(--bms-text-muted); background: var(--bms-surface-subtle); font: 600 12px/1.3 var(--bms-font-data); white-space: nowrap; }

#approvalPreview .table-wrap { border-radius: var(--bms-radius-1); }
#approvalPreview table.warehouse-table { min-width: 0; width: 100%; table-layout: fixed; }
#approvalPreview table.warehouse-table th:nth-child(1), #approvalPreview table.warehouse-table td:nth-child(1) { width: 38%; }
#approvalPreview .panel table.warehouse-table :is(th, td),
#approvalPreview table.warehouse-table :is(th, td) { padding: var(--bms-space-2) var(--bms-space-3); font-size: 13px; vertical-align: middle; }
#approvalPreview table.warehouse-table td:nth-child(1) { color: var(--bms-text-muted); font: 600 13px/1.4 var(--bms-font-ui); }
#approvalPreview table.warehouse-table td:nth-child(2) { color: var(--bms-text); font: 600 13px/1.4 var(--bms-font-data); text-align: right; }
#approvalPreview table.warehouse-table td .ap-sub { display: block; margin-top: 2px; color: var(--bms-text-muted); font: 500 12px/1.35 var(--bms-font-ui); }
#approvalPreview table.warehouse-table tbody tr { cursor: default; }
#approvalPreview table.warehouse-table tbody tr:hover { background: transparent; }
#approvalPreview table.warehouse-table tr.is-key td:nth-child(2) { color: var(--bms-text); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
#approvalPreview .ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Cài đặt chính sách: khối gấp riêng, cuối cột trái ---- */
#approvalPreview .ap-policy { min-height: 0; padding: var(--bms-space-4) var(--bms-space-6); }
#approvalPreview .ap-policy > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3); cursor: pointer; list-style: none; color: var(--bms-text); font: 700 13px/1.4 var(--bms-font-ui); }
#approvalPreview .ap-policy > summary::-webkit-details-marker { display: none; }
#approvalPreview .ap-policy > summary em { color: var(--bms-text-muted); font: 500 12px/1.4 var(--bms-font-ui); font-style: normal; }
#approvalPreview .ap-policy-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bms-space-3); margin-top: var(--bms-space-4); padding-top: var(--bms-space-4); border-top: 1px solid var(--bms-border); }
#approvalPreview .ap-policy-body label.ap-check { display: flex; align-items: center; gap: var(--bms-space-2); min-height: var(--bms-control-standard); color: var(--bms-text); font: 600 13px/1.4 var(--bms-font-ui); }
#approvalPreview .ap-policy-body label.ap-num-field { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }
#approvalPreview .panel .ap-policy-body input[type="number"],
#approvalPreview .ap-policy-body input[type="number"] { width: 96px; min-height: var(--bms-control-compact); padding: var(--bms-space-1) var(--bms-space-2); border-radius: var(--bms-radius-1); font: 600 13px/1.3 var(--bms-font-data); text-align: right; }
#approvalPreview .ap-policy-body .toolbar { margin-left: auto; }
#approvalPreview .ap-policy-note { flex: 1 0 100%; margin: 0; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }

/* ---- Hàng xem thử trạng thái (công cụ mockup) ---- */
#approvalPreview .ap-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bms-space-2); padding: var(--bms-space-3) var(--bms-space-4); border: 1px dashed var(--bms-border-strong); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); }
#approvalPreview .ap-preview-bar > span { margin-right: var(--bms-space-2); color: var(--bms-text-muted); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .06em; text-transform: uppercase; }
#approvalPreview .ap-preview-bar .btn[aria-pressed="true"] { border-color: var(--bms-primary); color: var(--bms-primary); background: var(--bms-primary-soft); }

/* ---- Cột phải: THẺ QUYẾT ĐỊNH tối dính, cùng họ .cs-result ---- */
#approvalPreview .ap-result { position: sticky; top: var(--bms-space-6); padding: var(--bms-space-6); border-radius: var(--bms-radius-3); color: var(--bms-frame-800); background: var(--bms-frame-950); box-shadow: var(--bms-shadow-2); }
#approvalPreview .ap-result h3 { margin: 0 0 var(--bms-space-1); color: color-mix(in srgb, var(--bms-frame-800) 62%, var(--bms-frame-950)); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#approvalPreview .ap-result .ap-order { margin: 0 0 var(--bms-space-4); color: var(--bms-frame-800); font: 700 16px/1.35 var(--bms-font-ui); }

#approvalPreview .ap-figure { padding-top: var(--bms-space-4); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 22%, transparent); }
#approvalPreview .ap-figure .ap-label { margin: 0 0 var(--bms-space-1); color: color-mix(in srgb, var(--bms-frame-800) 70%, var(--bms-frame-950)); font: 600 12px/1.3 var(--bms-font-ui); }
#approvalPreview .ap-figure .ap-rate { margin: 0; color: var(--bms-success); font: 700 44px/1.05 var(--bms-font-data); letter-spacing: -.04em; }
#approvalPreview .ap-figure .ap-gap { margin: var(--bms-space-2) 0 0; color: color-mix(in srgb, var(--bms-frame-800) 74%, var(--bms-frame-950)); font: 600 12px/1.45 var(--bms-font-ui); }

/* Thước ngang: vạch ngưỡng 10% và vị trí 10,52% — div + token */
#approvalPreview .ap-scale { position: relative; height: 12px; margin: var(--bms-space-4) 0 var(--bms-space-2); border-radius: var(--bms-radius-round); background: color-mix(in srgb, var(--bms-frame-800) 14%, transparent); overflow: hidden; }
#approvalPreview .ap-scale > .ap-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--bms-radius-round); background: var(--bms-success); }
#approvalPreview .ap-scale > .ap-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bms-frame-800); }
#approvalPreview .ap-scale-legend { position: relative; height: 32px; }
#approvalPreview .ap-scale-legend > b, #approvalPreview .ap-scale-legend > i { position: absolute; top: 0; font: 600 11px/1.35 var(--bms-font-ui); font-style: normal; white-space: nowrap; }
#approvalPreview .ap-scale-legend > b { transform: translateX(-50%); color: color-mix(in srgb, var(--bms-frame-800) 88%, var(--bms-frame-950)); }
#approvalPreview .ap-scale-legend > i { top: 16px; transform: translateX(-50%); color: var(--bms-success); }
#approvalPreview .ap-scale-ends { display: flex; justify-content: space-between; color: color-mix(in srgb, var(--bms-frame-800) 52%, var(--bms-frame-950)); font: 600 11px/1.3 var(--bms-font-data); }

#approvalPreview .ap-state { margin-top: var(--bms-space-4); padding-top: var(--bms-space-4); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 22%, transparent); }
#approvalPreview .ap-state .ap-pill { display: inline-block; padding: 3px var(--bms-space-3); border-radius: var(--bms-radius-round); color: var(--bms-warning); background: color-mix(in srgb, var(--bms-warning) 20%, transparent); font: 700 11px/1.5 var(--bms-font-ui); letter-spacing: .06em; text-transform: uppercase; }
#approvalPreview .ap-state.is-approved .ap-pill { color: var(--bms-success); background: color-mix(in srgb, var(--bms-success) 20%, transparent); }
#approvalPreview .ap-state.is-rejected .ap-pill { color: var(--bms-danger); background: color-mix(in srgb, var(--bms-danger) 20%, transparent); }
#approvalPreview .ap-state.is-auto .ap-pill { color: var(--bms-primary); background: color-mix(in srgb, var(--bms-primary) 24%, transparent); }
#approvalPreview .ap-state p { margin: var(--bms-space-2) 0 0; color: color-mix(in srgb, var(--bms-frame-800) 80%, var(--bms-frame-950)); font: 500 13px/1.5 var(--bms-font-ui); }

#approvalPreview .ap-actions { display: grid; gap: var(--bms-space-2); margin-top: var(--bms-space-4); }
#approvalPreview .ap-actions .btn { width: 100%; justify-content: center; }
#approvalPreview .ap-actions .btn.primary { background: var(--bms-success); border-color: var(--bms-success); color: var(--bms-frame-950); }
#approvalPreview .ap-actions .btn.ap-reject { border: 1px solid color-mix(in srgb, var(--bms-frame-800) 34%, transparent); background: transparent; color: color-mix(in srgb, var(--bms-frame-800) 86%, var(--bms-frame-950)); }
#approvalPreview .ap-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
#approvalPreview .ap-actions[hidden] { display: none; }
#approvalPreview .ap-note { margin: var(--bms-space-4) 0 0; color: color-mix(in srgb, var(--bms-frame-800) 58%, var(--bms-frame-950)); font: 500 11px/1.5 var(--bms-font-ui); }

@media (max-width: 900px) {
  #approvalPreview .ap-layout { grid-template-columns: minmax(0, 1fr); }
  #approvalPreview .ap-result { position: static; }
  #approvalPreview .ap-card { padding: var(--bms-space-4); }
}

/* --- Kiểm soát quyết định của đơn bán máy (DDR-021) — mục 7 phiếu tính giá vốn máy cũ.
   Nằm trong thẻ quyết định tối nên màu phải lấy theo nền tối, không dùng token bề mặt sáng. */
#approvalPreview .ap-checks[hidden] { display: none; }
#approvalPreview .ap-checks { margin-top: var(--bms-space-4); padding-top: var(--bms-space-4); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 22%, transparent); display: grid; gap: var(--bms-space-2); }
#approvalPreview .ap-checks h4 { margin: 0; color: color-mix(in srgb, var(--bms-frame-800) 62%, var(--bms-frame-950)); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#approvalPreview .ap-check { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-3); }
#approvalPreview .ap-check span { color: color-mix(in srgb, var(--bms-frame-800) 78%, var(--bms-frame-950)); font: 500 12px/1.45 var(--bms-font-ui); }
#approvalPreview .ap-check b { flex: 0 0 auto; font: 700 12px/1.45 var(--bms-font-ui); }
#approvalPreview .ap-check.is-yes b { color: var(--bms-success); }
#approvalPreview .ap-check.is-no b { color: var(--bms-danger); }
#approvalPreview .ap-checks .ap-decision { margin-top: var(--bms-space-2); padding-top: var(--bms-space-2); border-top: 1px solid color-mix(in srgb, var(--bms-frame-800) 14%, transparent); }