/* ============================================================
   VNFISA CMS — pages.css
   Style riêng theo màn hình: dashboard funnel, KYC compare, ledger,
   allocation, workflow builder, scorecard, content preview, reports.
   ============================================================ */

/* ---------- Dashboard ---------- */
.funnel { display: flex; flex-direction: column; gap: var(--sp-2); }
.funnel-step { display: flex; align-items: center; gap: var(--sp-3); }
.funnel-bar {
  height: 38px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; padding: 0 var(--sp-3);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); min-width: 60px;
  transition: width var(--transition);
}
.funnel-step:nth-child(1) .funnel-bar { background: var(--color-primary); }
.funnel-step:nth-child(2) .funnel-bar { background: #fc542f; }
.funnel-step:nth-child(3) .funnel-bar { background: #fd6f4e; }
.funnel-step:nth-child(4) .funnel-bar { background: #fe8a6e; }
.funnel-step:nth-child(5) .funnel-bar { background: var(--color-success); }
.funnel-label { width: 150px; flex: 0 0 150px; font-size: var(--fs-sm); color: var(--color-text); }
.funnel-pct { font-size: var(--fs-caption); color: var(--color-muted); width: 54px; text-align: right; flex: 0 0 54px; }

.chart-bars { display: flex; align-items: flex-end; gap: var(--sp-3); height: 180px; padding-top: var(--sp-4); }
.chart-bars .cb-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); height: 100%; justify-content: flex-end; }
.chart-bars .cb { width: 60%; max-width: 44px; border-radius: 4px 4px 0 0; background: var(--color-primary); position: relative; }
.chart-bars .cb.g1 { background: var(--color-success); }
.chart-bars .cb.g2 { background: var(--color-primary); }
.chart-bars .cb.g3 { background: var(--color-warning); }
.chart-bars .cb.g4 { background: var(--color-danger); }
.chart-bars .cb-val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; }
.chart-bars .cb-label { font-size: 11px; color: var(--color-muted); text-align: center; }

.donut-wrap { display: flex; align-items: center; gap: var(--sp-6); }
.donut { width: 140px; height: 140px; border-radius: 50%; flex: 0 0 140px; position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; background: #fff; border-radius: 50%; }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.donut-center b { font-size: 20px; font-weight: var(--fw-bold); }
.donut-center span { font-size: 11px; color: var(--color-muted); }
.legend { display: flex; flex-direction: column; gap: var(--sp-2); }
.legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }

.alert-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft); margin-bottom: var(--sp-2);
}
.alert-row .sev { width: 4px; align-self: stretch; border-radius: 4px; }
.alert-row .sev.danger { background: var(--color-danger); }
.alert-row .sev.warning { background: var(--color-warning); }
.alert-row .sev.info { background: var(--color-info); }
.alert-row .ar-body { flex: 1; }
.alert-row .ar-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.alert-row .ar-sub { font-size: var(--fs-caption); color: var(--color-muted); }

/* SLA countdown */
.sla { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.sla.ok { color: var(--color-success); }
.sla.warn { color: var(--color-warning); }
.sla.over { color: var(--color-danger); }

/* ---------- Loan detail ---------- */
.checklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.checklist-item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); }
.check-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 22px; }
.check-ico.done { background: var(--color-success-tint); color: var(--color-success); }
.check-ico.pending { background: var(--color-warning-tint); color: var(--color-warning); }
.check-ico.na { background: var(--color-neutral-tint); color: var(--color-neutral); }
.checklist-item .ci-body { flex: 1; font-size: var(--fs-sm); }
.checklist-item .ci-sub { font-size: 11px; color: var(--color-muted); }

.factor-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-soft); }
.factor-row:last-child { border-bottom: none; }
.factor-name { flex: 1; font-size: var(--fs-sm); }
.factor-bar { flex: 0 0 120px; }
.factor-score { flex: 0 0 60px; text-align: right; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.doc-preview {
  width: 100%; aspect-ratio: 4/3; background: var(--color-surface-2);
  border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--color-faint); text-align: center; gap: var(--sp-2);
}
.score-ring {
  width: 120px; height: 120px; border-radius: 50%; flex: 0 0 120px;
  display: grid; place-items: center; position: relative;
}
.score-ring::after { content: ""; position: absolute; inset: 12px; background: #fff; border-radius: 50%; }
.score-ring .sr-inner { position: relative; z-index: 1; text-align: center; }
.score-ring .sr-inner b { font-size: 28px; font-weight: var(--fw-bold); display: block; }
.score-ring .sr-inner span { font-size: 11px; color: var(--color-muted); }

/* ---------- KYC compare ---------- */
.kyc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.kyc-doc { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.kyc-doc-img {
  aspect-ratio: 16/10; background: repeating-linear-gradient(45deg, #f0eff3, #f0eff3 12px, #e8e7ec 12px, #e8e7ec 24px);
  display: grid; place-items: center; color: var(--color-faint); position: relative;
}
.kyc-doc-img .watermark { position: absolute; font-size: 11px; font-weight: var(--fw-bold); color: rgba(123,122,138,.5); transform: rotate(-12deg); letter-spacing: 2px; }
.mismatch-flag { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-radius: var(--radius-sm); background: var(--color-danger-tint); color: #b13437; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.match-flag { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-radius: var(--radius-sm); background: var(--color-success-tint); color: #16924b; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

/* ---------- Ledger ---------- */
.balance-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.balance-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-4); }
.balance-card label { font-size: var(--fs-caption); color: var(--color-muted); display: block; margin-bottom: 4px; }
.balance-card b { font-size: 20px; font-weight: var(--fw-bold); }
.balance-card.locked b { color: var(--color-warning); }
.balance-card.available b { color: var(--color-success); }
.ledger-debit { color: var(--color-danger); font-weight: var(--fw-semibold); }
.ledger-credit { color: var(--color-success); font-weight: var(--fw-semibold); }

/* ---------- Allocation / opportunity ---------- */
.fill-bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; position: relative; }
.fill-bar > span { display: block; height: 100%; background: var(--color-primary); }
.fill-bar.high > span { background: var(--color-success); }
.fill-bar.low > span { background: var(--color-warning); }
.alloc-preview td.plus { color: var(--color-success); font-weight: var(--fw-semibold); }

/* ---------- Workflow builder ---------- */
.wf-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.wf-step { display: flex; align-items: stretch; gap: var(--sp-3); }
.wf-step-num { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary-dark); display: grid; place-items: center; font-weight: var(--fw-bold); }
.wf-step-card { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.wf-connector { width: 34px; display: grid; place-items: center; color: var(--color-faint); }
.wf-arrow { text-align: center; color: var(--color-faint); padding: 2px 0; }

/* ---------- Scorecard ---------- */
.band-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); }
.band-chip { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: var(--fw-bold); color: #fff; flex: 0 0 44px; }
.band-A { background: #16924b; } .band-B { background: #28C76F; } .band-C { background: var(--color-warning); } .band-D { background: #fb7a4a; } .band-E { background: var(--color-danger); }

/* ---------- Content preview ---------- */
.phone-mock {
  width: 280px; border: 8px solid #2f2b3d; border-radius: 28px; overflow: hidden;
  background: #fff; margin: 0 auto; box-shadow: var(--shadow-md);
}
.phone-notch { height: 22px; background: #2f2b3d; border-radius: 0 0 12px 12px; width: 120px; margin: 0 auto; }
.phone-screen { padding: var(--sp-3); min-height: 380px; }
.banner-mock { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.banner-mock-img { aspect-ratio: 16/6; background: var(--color-primary-tint); display: grid; place-items: center; color: var(--color-primary-dark); font-weight: var(--fw-semibold); }
.news-cover { aspect-ratio: 16/9; background: var(--color-surface-2); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--color-faint); }
.richtext-toolbar { display: flex; gap: 2px; padding: 6px; border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface-2); }
.richtext-toolbar .rt-btn { width: 30px; height: 28px; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--color-muted); font-weight: var(--fw-bold); }
.richtext-toolbar .rt-btn:hover { background: #fff; color: var(--color-text); }
.richtext-area { border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 160px; }

/* ---------- Permission matrix ---------- */
.perm-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.perm-matrix th, .perm-matrix td { padding: 8px var(--sp-3); border: 1px solid var(--color-border-soft); text-align: center; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; font-weight: var(--fw-medium); }
.perm-matrix thead th { background: var(--color-surface-2); color: var(--color-muted); font-size: var(--fs-caption); text-transform: uppercase; }
.perm-yes { color: var(--color-success); }
.perm-no { color: var(--color-faint); }

/* ---------- Reports ---------- */
.report-tile { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.report-tile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.report-tile .rt-ico { width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-primary-tint); color: var(--color-primary); display: grid; place-items: center; flex: 0 0 40px; }

/* aging buckets */
.aging { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.aging-cell { border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); padding: var(--sp-3); text-align: center; }
.aging-cell label { font-size: 11px; color: var(--color-muted); display: block; }
.aging-cell b { font-size: 17px; font-weight: var(--fw-bold); }
.aging-cell.b1 b { color: var(--color-text); }
.aging-cell.b2 b { color: var(--color-warning); }
.aging-cell.b3 b, .aging-cell.b4 b, .aging-cell.b5 b { color: var(--color-danger); }

/* ============================================================
   Responsive (mobile ≤768px) — override cho lớp thuộc components.css/pages.css.
   Đặt ở cuối pages.css (nạp sau cùng) để thắng thứ tự cascade.
   ============================================================ */
@media (max-width: 768px) {
  /* Lưới → 1 cột */
  .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: 1fr; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .field.col-span-2 { grid-column: auto; }
  .kv-list { grid-template-columns: 42% 1fr; gap: 8px var(--sp-3); }

  /* Bảng */
  .table-toolbar { padding: var(--sp-3) var(--sp-4); }
  .table-toolbar .tt-title { flex: 1 1 100%; margin-bottom: 4px; }
  .table-search { min-width: 0; flex: 1 1 140px; }
  .table-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  /* Modal / Drawer full-width */
  .overlay { padding: var(--sp-4) var(--sp-2); }
  .modal, .modal.md, .modal.lg { max-width: 100%; }
  .modal-body { max-height: 66vh; }
  .drawer { width: 100vw; max-width: 100vw; }

  /* Widget theo màn */
  .balance-cards { grid-template-columns: 1fr; }
  .kyc-compare { grid-template-columns: 1fr; }
  .aging { grid-template-columns: repeat(2, 1fr); }
  .stepper { overflow-x: auto; padding-bottom: 4px; }
  .step { min-width: 82px; }
  .funnel-label { width: 96px; flex: 0 0 96px; }
  .funnel-pct { width: 40px; flex: 0 0 40px; }
  .perm-matrix { min-width: 560px; }
  .phone-mock { width: 100%; max-width: 300px; }
}
@media (max-width: 480px) {
  .aging { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 22px; }
  .btn { padding: 0 var(--sp-3); }
}