/* Source: tab Công nợ của BMS Xốp Mê Linh — panel data-panel="receivables"
   (frontend/index.html:769-782; hàm dựng frontend/app.js:3592-3603 renderReceivables(), 3620-3628 renderArTab()).
   CSS gốc nằm ở frontend/styles.css:44-90 và frontend/bms-rollout-wave5.css:164-359, 594-600 — hai tầng này ĐÃ có
   nguyên văn trong core cascade của Zamio, nhưng bị khoá sau tiền tố .bms-wave-5 .panel[data-panel="receivables"],
   trong khi bước 11 của Zamio nằm trong panel data-panel="workflow" nên không khớp. Cũng không thể lồng thêm một
   .panel[data-panel="receivables"] vì shell.js:649 gỡ class .active khỏi mọi .panel không phải panel đang mở
   → nội dung sẽ biến mất. Vì vậy file này chép lại đúng các rule đó, thân rule giữ nguyên từng ký tự, chỉ đổi
   tiền tố sang #debtConfirmPreview. Các rule phụ thuộc panel khác hoặc theme dark-executive được bỏ.
   Nhập theo DDR-009. Nằm ngoài core cascade. */

#debtConfirmPreview { grid-column: 1 / -1; }

/* ----- Nguồn: frontend/styles.css:44-90 ----- */
#debtConfirmPreview .ar-panel{position:relative}
#debtConfirmPreview .ar-header, #debtConfirmPreview .ar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px}
#debtConfirmPreview .ar-header{padding:4px 2px 18px}
#debtConfirmPreview .ar-header h2{margin:3px 0}
#debtConfirmPreview .ar-header p{margin:0;color:var(--muted)}
#debtConfirmPreview .ar-header-actions{display:flex;gap:8px;flex-wrap:wrap}
#debtConfirmPreview .ar-metrics{display:grid;grid-template-columns:repeat(5,minmax(125px,1fr));gap:10px;margin-bottom:14px}
#debtConfirmPreview .ar-metric{padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
#debtConfirmPreview .ar-metric span{display:block;color:var(--muted);font-size:11px}
#debtConfirmPreview .ar-metric strong{display:block;margin-top:4px;font-size:20px}
#debtConfirmPreview .ar-workspace{display:block;min-width:0}
#debtConfirmPreview .ar-main-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#debtConfirmPreview .ar-toolbar{padding:12px}
#debtConfirmPreview .ar-detail-nav{display:flex;align-items:end;justify-content:space-between;gap:14px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
#debtConfirmPreview .ar-tabs{display:flex;flex:1 1 auto;gap:5px;overflow:auto}
#debtConfirmPreview .ar-tabs button{padding:10px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700;white-space:nowrap}
#debtConfirmPreview .ar-tabs button.active{border-bottom-color:var(--bms-primary);color:var(--bms-primary)}
#debtConfirmPreview .ar-tab-content{min-height:120px}
#debtConfirmPreview .ar-schedule-table-wrap, #debtConfirmPreview .ar-payment-table-wrap{max-width:100%;overflow:auto}
#debtConfirmPreview .ar-schedule-table, #debtConfirmPreview .ar-payment-table{width:100%;min-width:1080px;border-collapse:collapse;background:var(--surface)}
#debtConfirmPreview .ar-schedule-table th, #debtConfirmPreview .ar-schedule-table td, #debtConfirmPreview .ar-payment-table th, #debtConfirmPreview .ar-payment-table td{font-size:12px;white-space:nowrap}
#debtConfirmPreview .ar-empty-state{padding:28px;color:var(--muted);text-align:center}
#debtConfirmPreview .ar-form-note{margin:0;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--surface-soft)}
#debtConfirmPreview .ar-metric small{display:block;margin-top:4px;color:var(--muted);font-size:11px}
#debtConfirmPreview .ar-metric.overdue strong{color:var(--bms-danger)}
#debtConfirmPreview .ar-metric.due strong{color:var(--bms-warning)}
#debtConfirmPreview .ar-payment-documents-card{margin-bottom:14px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#debtConfirmPreview .ar-payment-documents-card>header{display:flex;align-items:start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}
#debtConfirmPreview .ar-payment-documents-card h3{margin:3px 0;font-size:16px}
#debtConfirmPreview .ar-payment-documents-card p{margin:0;color:var(--muted);font-size:12px}
#debtConfirmPreview .ar-payment-documents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#debtConfirmPreview .ar-payment-document{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;padding:14px 16px;border-right:1px solid var(--line)}
#debtConfirmPreview .ar-payment-document:last-child{border-right:0}
#debtConfirmPreview .ar-payment-document-state{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;color:var(--muted);background:var(--bms-neutral-soft);font-weight:800}
#debtConfirmPreview .ar-payment-document.is-complete .ar-payment-document-state{color:var(--bms-success);background:var(--bms-success-soft)}
#debtConfirmPreview .ar-payment-document strong, #debtConfirmPreview .ar-payment-document small{display:block}
#debtConfirmPreview .ar-payment-document small{margin-top:3px;color:var(--muted);font-size:11px}
#debtConfirmPreview .ar-payment-document>.btn{min-height:32px;padding:5px 10px}
#debtConfirmPreview .ar-payment-document-files{display:grid;gap:5px;margin-top:9px}
#debtConfirmPreview .ar-payment-document-file{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:5px}
#debtConfirmPreview .ar-payment-document-file>span{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#debtConfirmPreview .ar-status{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--bms-neutral-soft);color:var(--bms-neutral);font-size:11px;font-weight:700}
#debtConfirmPreview .ar-status.paid{background:var(--bms-success-soft);color:var(--bms-success)}
#debtConfirmPreview .ar-status.overdue, #debtConfirmPreview .ar-status.on_hold{background:var(--bms-danger-soft);color:var(--bms-danger)}
#debtConfirmPreview .ar-status.partially_paid, #debtConfirmPreview .ar-status.due{background:var(--bms-warning-soft);color:var(--bms-warning)}
#debtConfirmPreview .ar-form{display:grid;gap:12px}
#debtConfirmPreview .ar-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#debtConfirmPreview .ar-ledger-entry{display:grid;grid-template-columns:110px 1fr 120px 120px 140px;gap:8px;padding:9px;border-bottom:1px solid var(--line);font-size:12px}
#debtConfirmPreview .ar-ledger-entry strong{text-align:right}
#debtConfirmPreview .ar-warning{padding:10px;border-radius:8px;color:var(--bms-warning);background:color-mix(in srgb,var(--surface) 88%,var(--bms-warning))}
#debtConfirmPreview .ar-payment-actions{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:1150px){
#debtConfirmPreview .ar-metrics{grid-template-columns:repeat(3,1fr)}
#debtConfirmPreview .ar-payment-documents{grid-template-columns:1fr}
#debtConfirmPreview .ar-payment-document{border-right:0;border-bottom:1px solid var(--line)}
#debtConfirmPreview .ar-payment-document:last-child{border-bottom:0}
}
@media(max-width:720px){
#debtConfirmPreview .ar-header, #debtConfirmPreview .ar-header-actions, #debtConfirmPreview .ar-toolbar, #debtConfirmPreview .ar-detail-nav{align-items:stretch;flex-direction:column}
#debtConfirmPreview .ar-metrics{grid-template-columns:repeat(2,1fr)}
#debtConfirmPreview .ar-form .form-grid{grid-template-columns:1fr}
#debtConfirmPreview .ar-payment-document{grid-template-columns:auto minmax(0,1fr)}
#debtConfirmPreview .ar-payment-document>.btn{grid-column:2;width:100%}
}
#debtConfirmPreview .ar-panel > .ar-drawer{ width:min(620px,100%); overflow-x:hidden; }
#debtConfirmPreview .ar-payment-form, #debtConfirmPreview .ar-payment-form *{ min-width:0; box-sizing:border-box; }
#debtConfirmPreview .ar-payment-form{ gap:14px; padding-bottom:4px; }
#debtConfirmPreview .ar-payment-overview{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(170px,.65fr); gap:10px; }
#debtConfirmPreview .ar-payment-overview > div{ display:grid; align-content:center; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
#debtConfirmPreview .ar-payment-overview span, #debtConfirmPreview .ar-payment-overview small{ color:var(--muted); font-size:11px; }
#debtConfirmPreview .ar-payment-overview strong{ color:var(--ink-strong); font-size:15px; line-height:1.25; }
#debtConfirmPreview .ar-payment-overview > div:last-child{ border-color:#b9d7f7; background:var(--brand-soft); }
#debtConfirmPreview .ar-payment-overview > div:last-child strong{ color:var(--blue); font-size:19px; }
#debtConfirmPreview .ar-payment-section{ margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
#debtConfirmPreview .ar-payment-section legend{ padding:0 6px; color:var(--ink-strong); font-size:12px; font-weight:800; }
#debtConfirmPreview .ar-payment-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; }
#debtConfirmPreview .ar-payment-grid label{ display:grid; align-content:start; gap:5px; color:var(--muted); font-size:11px; font-weight:700; }
#debtConfirmPreview .ar-payment-grid input, #debtConfirmPreview .ar-payment-grid select, #debtConfirmPreview .ar-payment-grid textarea{ width:100%; margin:0; }
#debtConfirmPreview .ar-payment-grid textarea{ min-height:64px; resize:vertical; }
#debtConfirmPreview .ar-payment-grid label > small{ color:var(--muted); font-size:10px; font-weight:400; line-height:1.35; }
#debtConfirmPreview .ar-payment-wide{ grid-column:1 / -1; }
#debtConfirmPreview .ar-payment-actions-bar{ position:sticky; bottom:-16px; display:flex; justify-content:flex-end; margin:0 -16px -16px; padding:12px 16px 16px; border-top:1px solid var(--line); background:linear-gradient(to bottom,rgba(255,255,255,.92),var(--surface) 28%); }
#debtConfirmPreview .ar-payment-actions-bar .btn{ min-width:170px; }
@media(max-width:640px){
#debtConfirmPreview .ar-payment-overview, #debtConfirmPreview .ar-payment-grid{ grid-template-columns:1fr; }
#debtConfirmPreview .ar-payment-wide{ grid-column:auto; }
#debtConfirmPreview .ar-payment-actions-bar .btn{ width:100%; }
}
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px){
#debtConfirmPreview .ar-panel > .ar-drawer{
    position: fixed;
    z-index: 140;
    inset: 4px 4px 4px auto;
    width: min(72vw, 620px);
    height: auto;
    max-height: calc(100dvh - 8px);
    padding: 10px;
    overflow: auto;
    border-radius: 10px 0 0 10px;
  }
}

/* ----- Nguồn: frontend/bms-rollout-wave5.css:164-359, 594-600 ----- */
#debtConfirmPreview .ar-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-3);
}
#debtConfirmPreview .ar-header-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--bms-space-2);
}
#debtConfirmPreview .ar-project-context{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bms-space-1);
  max-width: 640px;
  margin: var(--bms-space-1) 0 0;
  color: var(--muted);
  font-size: 12px;
}
#debtConfirmPreview .ar-project-context strong{ color: var(--bms-primary); }
#debtConfirmPreview .ar-metrics{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: var(--bms-space-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  background: var(--surface);
}
#debtConfirmPreview .ar-metric{
  min-width: 0;
  min-height: 82px;
  padding: var(--bms-space-3);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
#debtConfirmPreview .ar-metric:last-child{ border-right: 0; }
#debtConfirmPreview .ar-metric span{ color: var(--muted); font-size: 11px; }
#debtConfirmPreview .ar-metric strong{ display: block; margin-top: var(--bms-space-2); font-size: 18px; }
#debtConfirmPreview .ar-metric strong{ color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#debtConfirmPreview .ar-workspace{
  display: block;
  min-width: 0;
}
#debtConfirmPreview .ar-main-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--bms-radius-2);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
#debtConfirmPreview .ar-warning{
  border: 1px solid color-mix(in srgb, var(--bms-warning) 35%, var(--line));
  color: var(--bms-warning);
  background: color-mix(in srgb, var(--surface) 88%, var(--bms-warning));
}
#debtConfirmPreview .ar-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-3);
  padding: var(--bms-space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
#debtConfirmPreview .inventory-filters, #debtConfirmPreview .ar-tabs{
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: transparent;
  overscroll-behavior-inline: contain;
}
#debtConfirmPreview .ar-tabs{
  flex: 1 1 auto;
  border-bottom: 0;
}
#debtConfirmPreview :is(.inventory-filter, .ar-tabs button){
  min-height: var(--bms-control-standard);
  padding: 8px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}
#debtConfirmPreview :is(.inventory-filter.active, .ar-tabs button.active){
  border-bottom-color: var(--bms-primary);
  color: var(--bms-primary);
  background: color-mix(in srgb, var(--surface) 90%, var(--bms-primary));
}
#debtConfirmPreview .ar-tab-content{ min-height: 120px; }
#debtConfirmPreview .ar-tab-content:has(.table-wrap){ min-height: 0; }
#debtConfirmPreview :is(.ar-schedule-table-wrap, .ar-payment-table-wrap){ max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; scrollbar-gutter: auto; }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table){ width: 100%; min-width: 1080px; border-collapse: collapse; background: var(--surface); }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table) th{ position: sticky; top: 0; z-index: var(--bms-z-sticky); color: var(--muted); background: var(--surface-soft); }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table) :is(th, td){ border-bottom: 1px solid var(--line); white-space: nowrap; }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table) tbody td{ height: 62px; padding-block: var(--bms-space-3); vertical-align: middle; }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table) tbody tr:last-child td{ border-bottom: 0; }
#debtConfirmPreview :is(.ar-schedule-table, .ar-payment-table) tbody tr:hover{ background: color-mix(in srgb, var(--surface) 92%, var(--bms-primary)); }
#debtConfirmPreview .ar-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--bms-radius-round);
  color: var(--bms-neutral);
  background: var(--bms-neutral-soft);
  box-shadow: none;
  font-weight: 600;
}
#debtConfirmPreview .ar-status:is(.paid){ color: var(--bms-success); background: var(--bms-success-soft); }
#debtConfirmPreview .ar-status:is(.due, .partially_due, .partially_paid, .on_hold){ color: var(--bms-warning); background: var(--bms-warning-soft); }
#debtConfirmPreview .ar-status:is(.overdue, .disputed){ color: var(--bms-danger); background: var(--bms-danger-soft); }
#debtConfirmPreview .ar-detail-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-3);
  min-height: 54px;
  padding: var(--bms-space-2) var(--bms-space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
#debtConfirmPreview .ar-detail-nav #arAddScheduleBtn{ flex: 0 0 auto; min-height: 36px; margin: 0; padding-inline: 14px; }
#debtConfirmPreview .ar-detail-actions{ display: flex; align-items: center; justify-content: flex-end; gap: var(--bms-space-2); }
#debtConfirmPreview .ar-detail-actions .btn{ min-height: 36px; margin: 0; }
#debtConfirmPreview .ar-actions-cell{ min-width: 210px; }
#debtConfirmPreview .ar-payment-actions{ display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: var(--bms-space-1); }
#debtConfirmPreview .ar-payment-actions .btn{ min-height: 30px; padding: 5px 10px; border-radius: var(--bms-radius-2); font-size: 11px; }
#debtConfirmPreview #arTabContent .ar-payment-actions .ar-request-btn{ min-width: 92px; margin-left: auto; border-color: var(--bms-primary); color: var(--bms-surface); background: var(--bms-primary); }
#debtConfirmPreview #arTabContent .ar-payment-actions .btn.danger{ border-color: color-mix(in srgb, var(--bms-danger) 42%, var(--line)); color: var(--bms-danger); background: var(--surface); }
#debtConfirmPreview .ar-form-actions{ display: flex; justify-content: flex-end; gap: var(--bms-space-2); margin-top: var(--bms-space-3); }
#debtConfirmPreview .ar-form-actions .btn.primary{ flex: 1 1 auto; }
#debtConfirmPreview .ar-form-actions .btn.danger{ flex: 0 0 auto; border-color: color-mix(in srgb, var(--bms-danger) 42%, var(--line)); color: var(--bms-danger); background: var(--surface); }
#debtConfirmPreview .ar-drawer > header{ padding-bottom: 0; border-bottom: 0; }
#debtConfirmPreview .ar-drawer .ar-form{ margin-top: var(--bms-space-4); }
#debtConfirmPreview .ar-drawer.is-payment{ position: fixed; z-index: 140; top: 68px; right: 0; bottom: 0; width: min(620px, 100%); height: auto; max-height: none; padding: var(--bms-space-4); overflow-x: hidden; overflow-y: auto; border-left: 1px solid var(--line); border-radius: 0; }
#debtConfirmPreview .ar-drawer.is-payment #arDrawerBody{ min-height: calc(100% - 56px); }
#debtConfirmPreview .ar-drawer.is-payment .ar-payment-form{ min-height: 100%; align-content: start; gap: var(--bms-space-4); }
#debtConfirmPreview .ar-payment-grid label{ gap: var(--bms-space-2); color: var(--muted); font: 700 11px/1.35 var(--bms-font-ui); }
#debtConfirmPreview .ar-payment-grid :is(input, select, textarea){ font: 500 13px/1.4 var(--bms-font-ui); }
#debtConfirmPreview .ar-payment-grid textarea{ min-height: 96px; padding: 10px 12px; resize: vertical; }
#debtConfirmPreview .ar-payment-grid input[type="file"], #debtConfirmPreview .ar-invoice-form input[type="file"]{ padding: 6px 8px; color: var(--muted); background: var(--surface-soft); }
#debtConfirmPreview .ar-file-link{ min-height: 28px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--bms-primary) 35%, var(--line)); border-radius: var(--bms-radius-2); color: var(--bms-primary); background: var(--surface); font-size: 11px; font-weight: 700; }
#debtConfirmPreview .ar-payment-actions-bar{ margin-top: auto; }
#debtConfirmPreview .ar-invoice-history{ display: grid; gap: var(--bms-space-2); margin-top: var(--bms-space-4); }
#debtConfirmPreview .ar-invoice-file-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3); padding: var(--bms-space-3); border: 1px solid var(--line); border-radius: var(--bms-radius-2); background: var(--surface-soft); }
#debtConfirmPreview .ar-invoice-file-row strong, #debtConfirmPreview .ar-invoice-file-row small{ display: block; }
#debtConfirmPreview .ar-invoice-file-row small{ margin-top: 3px; color: var(--muted); }
#debtConfirmPreview .ar-invoice-file-row > div:last-child{ display: flex; gap: var(--bms-space-1); }
#debtConfirmPreview .ar-empty-state{ padding: var(--bms-space-6); color: var(--muted); text-align: center; }
#debtConfirmPreview .ar-form-note{ margin: 0; padding: var(--bms-space-3); border: 1px solid var(--line); border-radius: var(--bms-radius-2); color: var(--muted); background: var(--surface-soft); }
#debtConfirmPreview .ar-metric small{ display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
#debtConfirmPreview .ar-metric.overdue strong{ color: var(--bms-danger); }
#debtConfirmPreview .ar-metric.due strong{ color: var(--bms-warning); }
#debtConfirmPreview .ar-metric.overpaid small{ color: var(--bms-warning); font-weight: 700; }
#debtConfirmPreview .ar-drawer{
  border-left: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--bms-shadow-overlay);
}
#debtConfirmPreview .ar-status::before{
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--bms-radius-round);
  background: currentColor;
}
@media (max-width: 1199px){
#debtConfirmPreview .ar-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
#debtConfirmPreview .ar-metric{ border-bottom: 1px solid var(--line); }
#debtConfirmPreview .ar-metric:nth-child(3n){ border-right: 0; }
#debtConfirmPreview .ar-metric:nth-last-child(-n + 2){ border-bottom: 0; }
}
@media (max-width: 719px){
#debtConfirmPreview .ar-header{ align-items: stretch; flex-direction: column; }
#debtConfirmPreview .ar-header-actions{ width: 100%; }
#debtConfirmPreview .ar-header-actions .btn{ flex: 0 0 auto; width: 100%; }
#debtConfirmPreview .ar-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
#debtConfirmPreview .ar-metric:nth-child(3n){ border-right: 1px solid var(--line); }
#debtConfirmPreview .ar-metric:nth-child(2n){ border-right: 0; }
#debtConfirmPreview .ar-metric:nth-last-child(-n + 2){ border-bottom: 0; }
#debtConfirmPreview .ar-toolbar{ align-items: stretch; flex-direction: column; }
#debtConfirmPreview .ar-detail-nav{ align-items: stretch; flex-direction: column; }
#debtConfirmPreview .ar-detail-nav{ gap: 0; padding-bottom: var(--bms-space-3); }
#debtConfirmPreview .ar-detail-nav #arAddScheduleBtn{ width: 100%; margin: var(--bms-space-2) 0 0; }
#debtConfirmPreview .ar-detail-actions{ align-items: stretch; flex-direction: column; width: 100%; }
#debtConfirmPreview .ar-detail-actions .btn{ width: 100%; }
#debtConfirmPreview .ar-drawer{ position: fixed; z-index: 2147482500; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; }
}
@media (max-width: 479px){
#debtConfirmPreview .ar-metrics{ grid-template-columns: minmax(0, 1fr); }
#debtConfirmPreview .ar-metric{ border-right: 0; border-bottom: 1px solid var(--line); }
#debtConfirmPreview .ar-metric:last-child{ border-bottom: 0; }
}
@media (max-width: 899px) and (max-height: 480px){
#debtConfirmPreview .ar-drawer{ position: fixed; z-index: 2147482500; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; }
}

/* --- Bổ sung của Zamio (không có trong nguồn) ---------------------------------------------------
   Nguồn khoá cứng 5 cột chỉ số; bước 11 của Zamio chỉ có 4. Ghi chú dài làm tràn bảng vì nguồn để
   white-space:nowrap. Biểu mẫu ghi nhận nguồn mở bằng drawer riêng, Zamio gấp bằng [hidden]. */
#debtConfirmPreview .ar-metrics { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
#debtConfirmPreview .zdb-note-cell { max-width: 190px; white-space: normal; }
#debtConfirmPreview .zdb-entry-code { display: block; color: var(--bms-text-subtle); font-size: 11px; letter-spacing: .04em; }
#debtConfirmPreview #debtNoteForm { padding: var(--bms-space-4) 0; border-bottom: 1px solid var(--bms-border); }
#debtConfirmPreview #debtNoteForm[hidden] { display: none; }