/* OpenDesign V8 / Quiet Operations owner for IFM. */
body.bms-opendesign-v8 .panel[data-panel="ifm"] {
  min-width: 0;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-3);
  background: var(--bms-surface);
  padding: var(--bms-space-5);
  color: var(--bms-text);
  box-shadow: var(--bms-shadow-1);
}

body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bms-space-4);
  min-height: 70px;
  margin: 0 0 var(--bms-space-4);
  border: 0;
  border-bottom: 1px solid var(--bms-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 var(--bms-space-4);
  box-shadow: none;
}

body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title h2 {
  margin: var(--bms-space-1) 0;
  color: var(--bms-text);
  font: 700 1.45rem/1.25 var(--bms-font-display);
  letter-spacing: -0.02em;
}

body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--bms-text-muted);
  font-size: 0.82rem;
}

body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title .eyebrow {
  color: var(--bms-primary);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.09em;
}

.ifm-panel .relationship-content,
.ifm-pane {
  display: grid;
  min-width: 0;
  gap: var(--bms-space-4);
}

.ifm-tabs {
  display: flex;
  gap: var(--bms-space-1);
  margin: 0;
  border-bottom: 1px solid var(--bms-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.ifm-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--bms-control-standard);
  border: 0;
  border-radius: var(--bms-radius-2) var(--bms-radius-2) 0 0;
  background: transparent;
  padding: var(--bms-space-2) var(--bms-space-3);
  color: var(--bms-text-muted);
  font: 650 0.82rem/1.3 var(--bms-font-ui);
  cursor: pointer;
  white-space: nowrap;
}

.ifm-tabs button:hover { background: var(--bms-surface-subtle); color: var(--bms-text); }
.ifm-tabs button:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: -2px; }
.ifm-tabs button.active { background: var(--bms-primary-soft); color: var(--bms-primary); box-shadow: inset 0 -2px var(--bms-primary); }

.ifm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bms-space-3);
}

.ifm-kpi-grid.is-supporting { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ifm-kpi {
  display: grid;
  align-content: space-between;
  min-width: 0;
  min-height: 108px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  padding: var(--bms-space-3);
  color: var(--bms-text);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.ifm-kpi:hover:not(:disabled) { border-color: var(--bms-primary); background: var(--bms-primary-soft); }
.ifm-kpi:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: 2px; }
.ifm-kpi:disabled { cursor: default; }
.ifm-kpi.is-unavailable { border-style: dashed; background: var(--bms-surface-subtle); }
.ifm-kpi > span, .ifm-kpi > small { color: var(--bms-text-muted); font-size: 0.72rem; }
.ifm-kpi > strong { overflow: hidden; color: var(--bms-text); font: 700 1.32rem/1.2 var(--bms-font-data); text-overflow: ellipsis; white-space: nowrap; }

.ifm-card {
  min-width: 0;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  padding: var(--bms-space-4);
  box-shadow: none;
}

.ifm-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bms-space-3);
  margin-bottom: var(--bms-space-3);
}

.ifm-card h3 { margin: var(--bms-space-1) 0 0; color: var(--bms-text); font: 700 1rem/1.25 var(--bms-font-display); }
.ifm-card header small { color: var(--bms-text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; }
.ifm-count { display: inline-flex; align-items: center; min-height: var(--bms-control-compact); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-round); padding: 0 var(--bms-space-3); color: var(--bms-text-muted); font: 700 0.75rem/1 var(--bms-font-data); }

.ifm-toolbar,
.ifm-filter-bar,
.ifm-detail-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--bms-space-2);
}

.ifm-toolbar .bms-search-box { width: min(420px, 100%); margin-right: auto; }
.ifm-toolbar .bms-search-box input { width: 100%; }
.ifm-check { display: inline-flex; align-items: center; min-height: var(--bms-control-standard); gap: var(--bms-space-2); color: var(--bms-text-muted); font-size: 0.8rem; cursor: pointer; }
.ifm-check input { width: 18px; height: 18px; accent-color: var(--bms-primary); }
.ifm-filter-bar label { display: grid; gap: var(--bms-space-1); color: var(--bms-text-muted); font-size: 0.72rem; font-weight: 650; }
.ifm-filter-bar select { min-height: var(--bms-control-standard); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: 0 var(--bms-space-3); color: var(--bms-text); }

.ifm-table-wrap {
  max-width: 100%;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface);
  overflow: auto;
}

.ifm-table-wrap table { width: 100%; min-width: 820px; border-collapse: collapse; color: var(--bms-text); }
.ifm-table-wrap th { background: var(--bms-surface-subtle); color: var(--bms-text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ifm-table-wrap th, .ifm-table-wrap td { border-bottom: 1px solid var(--bms-border); padding: var(--bms-space-3); text-align: left; vertical-align: middle; }
.ifm-table-wrap tbody tr:hover { background: var(--bms-surface-subtle); }
.ifm-table-wrap tbody tr:last-child td { border-bottom: 0; }
.ifm-table-wrap .ifm-number { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ifm-mono { font-family: var(--bms-font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ifm-record-link {
  display: grid;
  gap: var(--bms-space-1);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--bms-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ifm-record-link small { color: var(--bms-text-muted); }
.ifm-record-link:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: 3px; }
.ifm-payment-account { display: block; margin-top: 4px; color: var(--bms-text-muted); overflow-wrap: anywhere; user-select: text; }
.ifm-payment-account.is-warning { color: var(--bms-warning); }

.ifm-status,
.ifm-severity,
.ifm-quality {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  border-radius: var(--bms-radius-round);
  padding: var(--bms-space-1) var(--bms-space-2);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.ifm-status.is-success, .ifm-severity.is-low, .ifm-severity.is-info { background: var(--bms-success-soft); color: var(--bms-success); }
.ifm-status.is-neutral { background: var(--bms-neutral-soft); color: var(--bms-neutral); }
.ifm-status.is-danger { background: var(--bms-danger-soft); color: var(--bms-danger); }
.ifm-status small { display:block; margin-top:2px; font-size:.64rem; font-weight:600; opacity:.8; }
.ifm-status:has(> small) { flex-direction: column; align-items: flex-start; justify-content: center; }
.ifm-severity.is-medium, .ifm-severity.is-warning, .ifm-quality.is-partial, .ifm-quality.is-stale { background: var(--bms-warning-soft); color: var(--bms-warning); }
.ifm-severity.is-high, .ifm-severity.is-critical { background: var(--bms-danger-soft); color: var(--bms-danger); }
.ifm-quality-bar { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); }

.ifm-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: var(--bms-space-4); }
.ifm-list, .ifm-alert-list, .ifm-exception-list { display: grid; gap: var(--bms-space-2); }
.ifm-list article, .ifm-alert-list article, .ifm-exception-list button { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3); min-width: 0; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: var(--bms-space-3); color: var(--bms-text); }
.ifm-exception-list button { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ifm-exception-list button:hover { border-color: var(--bms-primary); background: var(--bms-primary-soft); }
.ifm-list article > div, .ifm-alert-list article > div, .ifm-exception-list button > span:nth-child(2) { display: grid; min-width: 0; gap: var(--bms-space-1); }
.ifm-list small, .ifm-alert-list small, .ifm-exception-list small { color: var(--bms-text-muted); }
.ifm-alert-list p { margin: var(--bms-space-1) 0; color: var(--bms-text-muted); }

.ifm-chart { min-height: 240px; overflow-x: auto; }
.ifm-chart svg { display: block; width: 100%; min-width: 620px; height: 240px; color: var(--bms-border-strong); }
.ifm-chart line { stroke: currentColor; stroke-width: 1; }
.ifm-chart-in { fill: var(--bms-primary); }
.ifm-chart-out { fill: var(--bms-warning); }
.ifm-data-alternative { margin-top: var(--bms-space-3); }
.ifm-data-alternative summary { color: var(--bms-primary); font-weight: 700; cursor: pointer; }

.ifm-empty,
.ifm-error {
  display: grid;
  place-items: center;
  min-height: 160px;
  gap: var(--bms-space-3);
  border: 1px dashed var(--bms-border-strong);
  border-radius: var(--bms-radius-2);
  background: var(--bms-surface-subtle);
  padding: var(--bms-space-5);
  color: var(--bms-text-muted);
  text-align: center;
}

.ifm-error { border-color: var(--bms-danger); color: var(--bms-danger); }
.ifm-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-3); }
.ifm-skeleton span { min-height: 108px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); animation: ifm-pulse 1.2s ease-in-out infinite alternate; }
.ifm-skeleton span:last-child { grid-column: 1 / -1; min-height: 260px; }
@keyframes ifm-pulse { to { background: var(--bms-neutral-soft); } }

.ifm-account-detail { display: grid; gap: var(--bms-space-5); }
.ifm-account-detail section { min-width: 0; }
.ifm-account-detail h4 { margin: 0 0 var(--bms-space-3); }
.ifm-account-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-4); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); padding: var(--bms-space-4); }
.ifm-account-hero > div { display: grid; gap: var(--bms-space-1); }
.ifm-account-hero > strong { font: 700 1.5rem/1.2 var(--bms-font-data); }
.ifm-form input, .ifm-form select, .ifm-form textarea { width: 100%; min-width: 0; }
.ifm-import-result { display: grid; gap: var(--bms-space-3); margin-top: var(--bms-space-4); border-top: 1px solid var(--bms-border); padding-top: var(--bms-space-4); }
.ifm-import-result h4 { margin: 0; }
.ifm-import-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-2); }
.ifm-import-metrics span { display: grid; gap: var(--bms-space-1); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); padding: var(--bms-space-3); color: var(--bms-text-muted); }
.ifm-import-metrics strong { color: var(--bms-text); font-family: var(--bms-font-data); }
.ifm-payment-approvals header p { margin: var(--bms-space-1) 0 0; color: var(--bms-text-muted); font-size: 0.76rem; }
.ifm-payment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-4); margin-bottom: var(--bms-space-4); }
.ifm-payment-heading h3 { margin: var(--bms-space-1) 0 0; }
.ifm-payment-board { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--bms-space-4); }
.ifm-payment-board:not(.shows-to-approve) .ifm-payment-lane.is-to-approve,
.ifm-payment-board:not(.shows-to-pay) .ifm-payment-lane.is-to-pay,
.ifm-payment-board:not(.shows-schedule) .ifm-payment-lane.is-schedule,
.ifm-payment-board:not(.shows-paid) .ifm-payment-lane.is-paid { display: none; }
.ifm-payment-board .ifm-payment-lane > header { display: none; }
.ifm-payment-board .ifm-payment-card-list { display: none; }
/* Hướng B (Huashu, như Tác vụ › Phê duyệt): nút gạt trạng thái + tìm kiếm một hàng, chip lọc nhanh, bảng có tiêu đề cố định. */
.ifm-payment-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bms-space-3) var(--bms-space-4); margin-bottom: var(--bms-space-3); }
.ifm-payment-toolbar > * { min-width: 0; max-width: 100%; }
.ifm-lane-switch { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--bms-radius-3); background: var(--bms-neutral-soft); }
.ifm-lane-switch button { display: inline-flex; align-items: center; gap: var(--bms-space-2); min-height: var(--bms-control-standard); border: 0; border-radius: var(--bms-radius-2); background: transparent; padding: 0 var(--bms-space-4); color: var(--bms-text-muted); font: 700 13px/1.2 var(--bms-font-ui); white-space: nowrap; cursor: pointer; }
.ifm-lane-switch button strong { display: inline-grid; place-items: center; min-width: 22px; height: 20px; border-radius: var(--bms-radius-round); background: var(--bms-surface-subtle); padding: 0 6px; color: var(--bms-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.ifm-lane-switch button:hover { color: var(--bms-text); }
.ifm-lane-switch button:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: -2px; }
.ifm-lane-switch button.is-active { background: var(--bms-surface); color: var(--bms-text); box-shadow: var(--bms-shadow-1); }
.ifm-lane-switch button.is-active strong { background: var(--bms-primary); color: var(--bms-surface); }
.ifm-lane-switch .is-short { display: none; }
.ifm-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--bms-space-3); }
.ifm-filter-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-round); background: var(--bms-surface); padding: 4px 10px; color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); white-space: nowrap; cursor: pointer; }
.ifm-filter-chip b { color: var(--bms-text); font-variant-numeric: tabular-nums; }
.ifm-filter-chip i { color: var(--bms-text-subtle); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.ifm-filter-chip.is-overdue b { color: var(--bms-danger); }
.ifm-filter-chip.is-due-soon b { color: var(--bms-warning); }
.ifm-filter-chip.is-unseen span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--bms-danger); vertical-align: 1px; }
.ifm-filter-chip[aria-pressed="true"] { border-color: var(--bms-primary); background: var(--bms-primary-soft); color: var(--bms-primary); }
.ifm-filter-chip:not(:disabled):hover { border-color: var(--bms-border-strong); }
.ifm-filter-chip:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: 2px; }
.ifm-filter-chip:disabled { cursor: default; opacity: .5; }
.ifm-payment-board .ifm-topay-stats { display: none; }
.ifm-payment-board .ifm-card.ifm-payment-lane { border: 0; background: transparent; box-shadow: none; padding: 0; }
.ifm-payment-table { max-height: min(640px, calc(100dvh - 260px)); }
.ifm-payment-table table { min-width: 1000px; border-collapse: separate; border-spacing: 0; }
.ifm-payment-table.is-plans table { min-width: 900px; }
.ifm-payment-table thead th { position: sticky; top: 0; z-index: 1; padding-block: var(--bms-space-2); }
.ifm-payment-table td { padding-block: 9px; background: var(--bms-surface); }
.ifm-payment-table tbody tr:hover td { background: var(--bms-surface-subtle); }
.ifm-payment-table tbody tr.is-selected td { background: var(--bms-primary-soft); }
.ifm-payment-table tbody tr:last-child td { border-bottom: 1px solid var(--bms-border); }
.ifm-payment-table tfoot td { position: sticky; bottom: 0; border-bottom: 0; background: var(--bms-surface-subtle); font-weight: 700; }
.ifm-payment-table td > small,.ifm-payment-table .ifm-col-content > small { display: block; margin-top: 2px; color: var(--bms-text-muted); font-size: .72rem; }
.ifm-payment-table .ifm-nowrap { white-space: nowrap; }
.ifm-payment-table .ifm-col-content { min-width: 280px; max-width: 420px; }
.ifm-payment-table .ifm-col-code { min-width: 150px; }
.ifm-payment-table .ifm-row-title { display: inline; border: 0; background: transparent; padding: 0; color: var(--bms-text); font: inherit; text-align: left; cursor: pointer; }
.ifm-payment-table .ifm-row-title strong { font-weight: 600; overflow-wrap: anywhere; }
.ifm-payment-table .ifm-row-title:hover strong { color: var(--bms-primary); text-decoration: underline; }
.ifm-payment-table .ifm-row-title:focus-visible { outline: 2px solid var(--bms-focus); outline-offset: 2px; }
.ifm-payment-table .ifm-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.ifm-payment-table .ifm-row-code { color: var(--bms-text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ifm-payment-table .ifm-row-tag { border-radius: 4px; background: var(--bms-primary-soft); padding: 0 6px; color: var(--bms-primary); font-size: .68rem; font-weight: 600; white-space: nowrap; }
.ifm-payment-table .ifm-row-tag.is-warning { background: var(--bms-warning-soft); color: var(--bms-warning); }
.ifm-payment-table .ifm-inline-muted { color: var(--bms-text-muted); }
.ifm-payment-table .ifm-col-select { width: 40px; }
.ifm-payment-table .ifm-col-select input { width: 16px; height: 16px; accent-color: var(--bms-primary); }
.ifm-payment-table .ifm-status { white-space: nowrap; }
.ifm-payment-table .ifm-number strong { font-size: .9rem; }
.ifm-payment-table tr.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--bms-danger); }
.ifm-payment-table tr.is-due-soon > td:first-child { box-shadow: inset 3px 0 0 var(--bms-warning); }
.ifm-payment-table th.ifm-col-actions { text-align: left; }
.ifm-payment-table td.ifm-col-actions { width: 184px; min-width: 184px; }
.ifm-payment-table .ifm-col-actions { position: sticky; right: 0; z-index: 1; }
.ifm-payment-table thead th.ifm-col-actions { z-index: 2; }
.ifm-payment-table td.ifm-col-actions:has(.ifm-row-more[open]) { z-index: 5; }
/* Menu Khác đang mở: ẩn nút cuộn ngang dùng chung để không đè lên menu. */
body:has(.ifm-payment-table .ifm-row-more[open]) .bms-hs-nav { opacity: 0; pointer-events: none; }
.ifm-payment-table td.ifm-col-actions { box-shadow: inset 1px 0 0 var(--bms-border); }
.ifm-payment-table td.ifm-col-recipient, .ifm-payment-table.is-plans tbody tr > td:nth-last-child(6) { min-width: 140px; }
.ifm-row-actions { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 6px; width: 168px; margin-left: 0; }
.ifm-row-actions > .btn,.ifm-row-more > summary { width: 100%; white-space: nowrap; }
.ifm-row-more > summary { list-style: none; }
.ifm-row-more > summary::-webkit-details-marker { display: none; }
.ifm-row-more > summary::after { content: ""; width: 6px; height: 6px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ifm-row-more[open] > summary { background: var(--bms-surface-subtle); }
.ifm-row-menu { position: fixed; z-index: 60; display: grid; min-width: 200px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: 4px; box-shadow: var(--bms-shadow-overlay); }
.ifm-row-menu button { border: 0; border-radius: var(--bms-radius-1); background: transparent; padding: 8px 10px; color: var(--bms-text); font: 500 13px/1.3 var(--bms-font-ui); text-align: left; cursor: pointer; }
.ifm-row-menu button:hover,.ifm-row-menu button:focus-visible { background: var(--bms-surface-subtle); outline: 0; }
.ifm-row-menu button.is-danger { color: var(--bms-danger); }
.ifm-unseen-mark { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--bms-danger); vertical-align: 1px; }
.ifm-payment-table.is-plans table { min-width: 820px; }
.ifm-payment-lane { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); align-content: start; }
.ifm-payment-card-list { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; gap: var(--bms-space-3); }
.ifm-payment-request-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--bms-space-3); min-width: 0; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: var(--bms-space-3); }
.ifm-payment-request-card.has-selection { grid-template-columns: auto minmax(0,1fr); }
.ifm-payment-card-body { display: grid; gap: var(--bms-space-3); min-width: 0; }
.ifm-payment-select { display: flex; align-items: flex-start; padding-top: 2px; }
.ifm-payment-select input { width: 18px; height: 18px; accent-color: var(--bms-primary); }
.ifm-payment-request-card.is-paid { border-color: color-mix(in srgb,var(--bms-success) 34%,var(--bms-border)); }
.ifm-payment-request-card.is-overdue { border-color: color-mix(in srgb,var(--bms-danger) 42%,var(--bms-border)); background: var(--bms-danger-soft); }
.ifm-payment-request-card.is-due-soon { border-color: color-mix(in srgb,var(--bms-warning) 42%,var(--bms-border)); background: var(--bms-warning-soft); }
.ifm-payment-request-card.is-overdue .ifm-payment-compact-facts > div:first-child { border-left-color: var(--bms-danger); }
.ifm-payment-request-card.is-due-soon .ifm-payment-compact-facts > div:first-child { border-left-color: var(--bms-warning); }
.ifm-due-hint { display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; }
.is-overdue .ifm-due-hint { color: var(--bms-danger); }
.is-due-soon .ifm-due-hint { color: var(--bms-warning); }
.ifm-unseen-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border: 2px solid var(--bms-surface); border-radius: 50%; background: var(--bms-danger); box-shadow: 0 0 0 3px color-mix(in srgb,var(--bms-danger) 18%,transparent); }
.ifm-topay-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--bms-space-2); margin-bottom: var(--bms-space-3); }
.ifm-topay-stat { display: grid; gap: 2px; min-width: 0; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: var(--bms-space-2) var(--bms-space-3); color: var(--bms-text); font: inherit; text-align: left; cursor: pointer; }
.ifm-topay-stat span { color: var(--bms-text-muted); font-size: .72rem; }
.ifm-topay-stat strong { font-size: 1.25rem; line-height: 1.2; }
.ifm-topay-stat small { overflow: hidden; color: var(--bms-text-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.ifm-topay-stat.is-overdue { border-color: color-mix(in srgb,var(--bms-danger) 36%,var(--bms-border)); background: var(--bms-danger-soft); }
.ifm-topay-stat.is-overdue strong { color: var(--bms-danger); }
.ifm-topay-stat.is-due-soon { border-color: color-mix(in srgb,var(--bms-warning) 36%,var(--bms-border)); background: var(--bms-warning-soft); }
.ifm-topay-stat.is-due-soon strong { color: var(--bms-warning); }
.ifm-selection-total { display: block; color: var(--bms-text-muted); font-size: .78rem; font-weight: 700; }
.ifm-topay-stat.is-mine { border-color: color-mix(in srgb,var(--bms-primary) 32%,var(--bms-border)); background: color-mix(in srgb,var(--bms-primary) 7%,var(--bms-surface)); }
.ifm-topay-stat.is-mine strong { color: var(--bms-primary); }
.ifm-topay-stat.is-unseen span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--bms-danger); vertical-align: 1px; }
.ifm-topay-stat.is-active { box-shadow: 0 0 0 2px var(--bms-primary); }
.ifm-topay-stat:disabled { cursor: default; opacity: .55; }
.ifm-topay-stat:not(:disabled):hover { border-color: var(--bms-border-strong); }
.ifm-payment-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-3); }
.ifm-payment-card-body > header > div { display: grid; min-width: 0; gap: 2px; }
.ifm-payment-lane.is-to-approve,.ifm-payment-lane.is-to-pay { container-type: inline-size; }
@container (max-width: 460px) { .ifm-payment-card-body > header { flex-direction: column-reverse; gap: var(--bms-space-2); } .ifm-payment-card-body > header > .ifm-status { align-self: flex-start; } }
.ifm-payment-card-body > header small,.ifm-payment-card-body > header span,.ifm-payment-reference span { color: var(--bms-text-muted); font-size: .72rem; }
.ifm-payment-card-body > header strong { overflow-wrap: anywhere; }
.ifm-payment-request-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bms-space-2); margin: 0; }
.ifm-payment-request-card dt { color: var(--bms-text-muted); font-size: .68rem; }
.ifm-payment-request-card dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.ifm-payment-card-body footer { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); }
.ifm-quick-decisions { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); margin-left: auto; }
.ifm-payment-reference { display: grid; gap: 2px; margin: 0; }
.ifm-payment-compact-facts > div { border-left: 2px solid var(--bms-border); padding-left: var(--bms-space-2); }
.ifm-payment-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-2); margin: 0 calc(var(--bms-space-4) * -1) var(--bms-space-4); border-top: 1px solid var(--bms-border); border-bottom: 1px solid var(--bms-border-strong); background: var(--bms-surface); padding: var(--bms-space-3) var(--bms-space-4); }
.ifm-payment-plan-card { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; gap: var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: var(--bms-space-3); }
.ifm-payment-plan-card > header,.ifm-payment-plan-total { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-2); }
.ifm-payment-plan-card > header > div { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.ifm-payment-plan-card > header > .ifm-status { flex: none; white-space: nowrap; }
.ifm-payment-plan-card li strong,.ifm-payment-plan-total strong { flex: none; white-space: nowrap; }
.ifm-payment-plan-total span { flex: 1 1 auto; min-width: 0; }
.ifm-payment-plan-card > header small,.ifm-payment-plan-card li span { color: var(--bms-text-muted); font-size: .72rem; }
.ifm-payment-plan-card ul { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ifm-payment-plan-card li { display: flex; min-width: 0; justify-content: space-between; gap: var(--bms-space-2); }
.ifm-payment-plan-card li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifm-payment-plan-card footer { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); }
.ifm-payment-plan-preview { display: grid; gap: var(--bms-space-2); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); padding: var(--bms-space-3); }
.ifm-payment-plan-preview > b { color: var(--bms-primary); font-size: 1.1rem; }
.ifm-payment-plan-preview ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ifm-payment-plan-preview li { display: flex; justify-content: space-between; gap: var(--bms-space-2); }
.ifm-payment-filter { display:grid; grid-template-columns:minmax(240px,1fr) repeat(2,minmax(148px,auto)) auto auto; align-items:end; gap:var(--bms-space-2); border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface-subtle); padding:var(--bms-space-3); }
.ifm-payment-filter label { display:grid; gap:5px; min-width:0; color:var(--bms-text-muted); font-size:.72rem; font-weight:700; }
.ifm-payment-filter input { width:100%; min-width:0; }
.ifm-payment-plan-detail-list { display: grid; gap: var(--bms-space-2); }
.ifm-payment-plan-detail-list article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--bms-space-3); border-bottom: 1px solid var(--bms-border); padding: var(--bms-space-2) 0; }
.ifm-payment-plan-detail-list button { display: grid; gap: 2px; min-width: 0; border: 0; padding: 0; color: var(--bms-primary); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ifm-payment-plan-detail-list button small { color: var(--bms-text-muted); }
.relationship-drawer:has(.ifm-payment-plan-detail)>aside,.relationship-drawer[data-variant="payment-plan"]>aside,body.bms-wave-4 #relationshipDrawer[data-variant="payment-plan"]>aside { inset:50% auto auto 50%; width:min(1120px,calc(100vw - 56px)); max-width:none; max-height:calc(100dvh - 56px); transform:translate(-50%,-50%); overflow:hidden; border:1px solid var(--bms-border); border-radius:var(--bms-radius-3); }
.relationship-drawer:has(.ifm-payment-plan-detail) #relationshipDrawerBody,.relationship-drawer[data-variant="payment-plan"] #relationshipDrawerBody { max-height:calc(100dvh - 126px); overflow:auto; padding:var(--bms-space-4); }
.ifm-payment-plan-table { overflow-x: visible; }
.ifm-payment-plan-table table { width: 100%; min-width: 0; table-layout: fixed; }
.ifm-payment-plan-table th,.ifm-payment-plan-table td { padding: 10px 8px; overflow-wrap: anywhere; white-space: normal; }
.ifm-payment-plan-table th:nth-child(1),.ifm-payment-plan-table td:nth-child(1) { width: 4.5%; }
.ifm-payment-plan-table th:nth-child(2),.ifm-payment-plan-table td:nth-child(2) { width: 17%; }
.ifm-payment-plan-table th:nth-child(3),.ifm-payment-plan-table td:nth-child(3) { width: 17%; }
.ifm-payment-plan-table th:nth-child(4),.ifm-payment-plan-table td:nth-child(4),.ifm-payment-plan-table th:nth-child(5),.ifm-payment-plan-table td:nth-child(5),.ifm-payment-plan-table th:nth-child(6),.ifm-payment-plan-table td:nth-child(6) { width: 10%; }
.ifm-payment-plan-table th:nth-child(7),.ifm-payment-plan-table td:nth-child(7) { width: 10%; }
.ifm-payment-plan-table th:nth-child(8),.ifm-payment-plan-table td:nth-child(8) { width: 10%; }
.ifm-payment-plan-table th:nth-child(9),.ifm-payment-plan-table td:nth-child(9) { width: 11.5%; }
.ifm-payment-plan-table .ifm-number { white-space: normal; }
.ifm-payment-plan-table td { vertical-align: middle; }
.ifm-payment-plan-table td > small { display:block; margin-top:4px; color:var(--bms-text-muted); }
.ifm-payment-plan-table tfoot th { border-top:2px solid var(--bms-border); background:var(--bms-surface-muted); }
.ifm-payment-item-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.ifm-proof-dropzone { display:grid; place-items:center; gap:6px; min-height:132px; border:1px dashed var(--bms-primary); border-radius:var(--bms-radius-2); padding:var(--bms-space-4); background:var(--bms-primary-soft); color:var(--bms-text); text-align:center; cursor:pointer; }
.ifm-proof-dropzone input { width:min(100%,360px); }
.ifm-proof-dropzone small,.ifm-proof-dropzone [data-ifm-proof-preview] { color:var(--bms-text-muted); }
.ifm-proof-preview { display:grid; width:min(100%,620px); grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); align-items:start; gap:var(--bms-space-2); }
.ifm-proof-preview:empty { display:none; }
.ifm-proof-preview-item { display:grid; min-width:0; gap:6px; border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface); padding:8px; }
.ifm-proof-preview img { display:block; width:100%; height:92px; object-fit:contain; border-radius:var(--bms-radius-1); background:var(--bms-surface-subtle); }
.ifm-proof-preview span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ifm-proof-preview .ifm-proof-clear { min-width:96px; justify-content:center; }
.ifm-proof-list { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.ifm-proof-chip { display:inline-flex; min-width:0; align-items:stretch; }
.ifm-proof-chip .btn { min-width:0; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:var(--bms-radius-1) 0 0 var(--bms-radius-1); }
.ifm-proof-remove { width:30px; border:1px solid var(--bms-border); border-left:0; border-radius:0 var(--bms-radius-1) var(--bms-radius-1) 0; background:var(--bms-surface); color:var(--bms-danger); font-weight:800; cursor:pointer; }
.ifm-payment-detail { display: grid; gap: var(--bms-space-4); }
.ifm-payment-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-3); }
.ifm-detail-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ifm-detail-amount strong { font-size: 1.5rem; line-height: 1.2; }
.ifm-detail-amount span { color: var(--bms-text-muted); font-size: .82rem; }
.ifm-detail-amount em { margin-left: 4px; border-radius: 999px; padding: 1px 8px; font-style: normal; font-size: .72rem; font-weight: 700; }
.ifm-detail-amount.is-overdue em { border: 1px solid currentColor; background: var(--bms-danger-soft); color: var(--bms-danger); }
.ifm-detail-amount.is-due-soon em { border: 1px solid currentColor; background: var(--bms-warning-soft); color: var(--bms-warning); }
.ifm-payment-detail h4, .ifm-payment-detail h5 { margin: 0; color: var(--bms-text); }
.ifm-payment-detail header p { margin: var(--bms-space-1) 0 0; color: var(--bms-text-muted); }
.ifm-payment-facts, .ifm-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-2); margin: 0; }
.ifm-payment-facts > div, .ifm-payment-fields > div { min-width: 0; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); padding: var(--bms-space-3); }
.ifm-linked-request { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--bms-primary); font: inherit; text-align: left; cursor: pointer; }
.ifm-linked-request strong { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ifm-linked-request span, .ifm-linked-request small { color: var(--bms-text-muted); overflow-wrap: anywhere; }
.ifm-linked-request:focus-visible { outline: 2px solid var(--bms-primary); outline-offset: 2px; border-radius: var(--bms-radius-1); }
.ifm-linked-back { justify-self: start; margin-bottom: var(--bms-space-3); }
.ifm-payment-detail dt { color: var(--bms-text-muted); font-size: 0.72rem; }
.ifm-payment-detail dd { margin: var(--bms-space-1) 0 0; color: var(--bms-text); font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.ifm-payment-flow { display: grid; gap: var(--bms-space-2); margin: 0; padding: 0; list-style: none; }
.ifm-payment-flow li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--bms-space-2); }
.ifm-payment-flow li > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: var(--bms-radius-round); background: var(--bms-primary-soft); color: var(--bms-primary); font-weight: 750; }
.ifm-payment-flow strong, .ifm-payment-flow small { display: block; }
.ifm-payment-flow small { color: var(--bms-text-muted); }
.ifm-payment-files { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); }
.ifm-payment-files .btn { display: grid; max-width: 100%; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--bms-space-2); text-align: left; }
.ifm-payment-files .btn > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifm-payment-files .btn small { color: var(--bms-primary); font-weight: 750; }
.ifm-file-preview-dialog { width: min(920px, calc(100vw - 32px)); max-width: none; height: min(760px, calc(100dvh - 32px)); max-height: none; border: 0; border-radius: var(--bms-radius-3); background: var(--bms-surface); padding: 0; color: var(--bms-text); box-shadow: var(--bms-shadow-overlay); }
.ifm-file-preview-dialog::backdrop { background: var(--bms-backdrop); }
.ifm-file-preview-dialog > article { display: grid; height: 100%; grid-template-rows: auto minmax(0,1fr) auto; }
.ifm-file-preview-dialog header,.ifm-file-preview-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3); border-bottom: 1px solid var(--bms-border); padding: var(--bms-space-4); }
.ifm-file-preview-dialog footer { justify-content: flex-end; border-top: 1px solid var(--bms-border); border-bottom: 0; }
.ifm-file-preview-dialog header small { color: var(--bms-primary); font-weight: 750; text-transform: uppercase; }
.ifm-file-preview-dialog h3 { max-width: min(680px, 70vw); margin: var(--bms-space-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifm-file-preview-dialog header > button { display: grid; width: var(--bms-control-touch); min-width: var(--bms-control-touch); height: var(--bms-control-touch); place-items: center; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-round); background: var(--bms-surface); color: var(--bms-text); font-size: 1.6rem; cursor: pointer; }
.ifm-file-preview-body { min-height: 0; overflow: auto; background: var(--bms-surface-subtle); padding: var(--bms-space-4); }
.ifm-file-preview-body iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; border-radius: var(--bms-radius-2); background: var(--bms-surface); }
.ifm-file-preview-body img { display: block; max-width: 100%; height: auto; margin: auto; border-radius: var(--bms-radius-2); }
.ifm-file-preview-body pre { min-height: 100%; margin: 0; overflow-wrap: anywhere; color: var(--bms-text); font: 0.86rem/1.6 var(--bms-font-body); tab-size: 4; white-space: pre-wrap; word-break: break-word; }
.ifm-file-preview-unavailable { display: grid; min-height: 100%; place-content: center; justify-items: center; gap: var(--bms-space-3); text-align: center; }
.ifm-file-preview-unavailable > span { font-size: 3rem; }
.ifm-file-preview-unavailable p { max-width: 520px; margin: 0; color: var(--bms-text-muted); }
.ifm-spreadsheet-preview { display:grid; min-height:100%; grid-template-rows:auto minmax(0,1fr); gap:var(--bms-space-3); }
.ifm-spreadsheet-preview nav { display:flex; gap:var(--bms-space-2); overflow-x:auto; padding-bottom:var(--bms-space-1); }
.ifm-spreadsheet-preview nav button { flex:0 0 auto; border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface); color:var(--bms-text-muted); padding:8px 12px; cursor:pointer; }
.ifm-spreadsheet-preview nav button.active { border-color:var(--bms-primary); background:var(--bms-primary-soft); color:var(--bms-primary); font-weight:700; }
.ifm-spreadsheet-canvas { min-width:0; overflow:auto; border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface); }
.ifm-spreadsheet-canvas table { width:max-content; min-width:100%; border-collapse:collapse; font-size:.82rem; }
.ifm-spreadsheet-canvas th,.ifm-spreadsheet-canvas td { min-width:110px; max-width:360px; border:1px solid var(--bms-border); padding:7px 9px; overflow-wrap:anywhere; text-align:left; vertical-align:top; white-space:pre-wrap; }
.ifm-spreadsheet-canvas th { position:sticky; top:0; z-index:1; background:var(--bms-surface-subtle); color:var(--bms-text); font-weight:700; }
.ifm-spreadsheet-empty,.ifm-spreadsheet-limit { margin:var(--bms-space-4); color:var(--bms-text-muted); }
.ifm-payment-decision { display: grid; gap: var(--bms-space-3); border-top: 1px solid var(--bms-border); padding-top: var(--bms-space-4); }
.ifm-payment-decision label { display: grid; gap: var(--bms-space-1); color: var(--bms-text-muted); font-size: 0.76rem; font-weight: 700; }
.ifm-payment-decision textarea { width: 100%; }
.ifm-payment-decision > div { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--bms-space-2); }
.ifm-payment-evidence { display: grid; gap: var(--bms-space-3); border-top: 1px solid var(--bms-border); padding-top: var(--bms-space-4); }
.ifm-payment-evidence .btn { justify-self: start; }
.ifm-payment-execute-action { display: flex; justify-content: flex-start; border-top: 1px solid var(--bms-border); padding-top: var(--bms-space-4); }

@media (max-width: 1199px) {
  .ifm-kpi-grid.is-supporting { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ifm-split { grid-template-columns: 1fr; }
}

@media (max-width: 900px), (orientation: landscape) and (min-width: 901px) and (max-width: 950px) and (max-height: 500px) {
  body.bms-opendesign-v8 .panel[data-panel="ifm"] { padding: var(--bms-space-4); }
  .ifm-kpi-grid, .ifm-kpi-grid.is-supporting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ifm-tabs button, .ifm-toolbar :is(button, input, label), .ifm-filter-bar :is(button, select), .ifm-record-link, .ifm-card .btn { min-height: var(--bms-control-touch); }
}

@media (max-width: 700px) {
  .ifm-card.ifm-payment-lane > header { align-items: flex-start; flex-direction: row; }
  .ifm-lane-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); padding: 4px; box-shadow: var(--bms-shadow-1); }
  .ifm-lane-switch button { display: grid; justify-items: center; gap: 0; min-height: var(--bms-control-touch); margin: 0; border: 0; border-radius: calc(var(--bms-radius-2) - 2px); background: transparent; padding: 4px 2px; color: var(--bms-text-muted); font: inherit; font-size: .7rem; font-weight: 400; line-height: 1.2; text-align: center; cursor: pointer; }
  .ifm-lane-switch button strong { min-width: 0; background: transparent; padding: 0; color: var(--bms-text); font-size: 1rem; }
  .ifm-lane-switch button.is-active { background: color-mix(in srgb, var(--bms-primary) 12%, var(--bms-surface)); color: var(--bms-primary); font-weight: 700; }
  .ifm-lane-switch button.is-active strong { background: transparent; color: var(--bms-primary); }
  .ifm-lane-switch .is-short { display: inline; }
  .ifm-lane-switch .is-long { display: none; }
  .ifm-payment-board .ifm-payment-card-list { display: grid; }
  .ifm-payment-board .ifm-payment-table { display: none; }
  .ifm-topay-stats { gap: 6px; }
  .ifm-topay-stat { padding: var(--bms-space-2); }
  .ifm-topay-stat span { min-height: 2.4em; line-height: 1.2; }
  .ifm-topay-stat small { white-space: normal; overflow-wrap: anywhere; font-size: .68rem; }
  body.bms-opendesign-v8 .panel[data-panel="ifm"] { border-inline: 0; border-radius: 0; padding: var(--bms-space-3); }
  body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title { align-items: stretch; flex-direction: column; }
  body.bms-opendesign-v8 .panel[data-panel="ifm"] .relationship-title .btn { width: 100%; }
  .ifm-tabs { margin-inline: calc(var(--bms-space-3) * -1); padding-inline: var(--bms-space-3); }
  .ifm-toolbar, .ifm-filter-bar { align-items: stretch; flex-direction: column; }
  .ifm-toolbar .bms-search-box, .ifm-toolbar .btn, .ifm-filter-bar label, .ifm-filter-bar .btn { width: 100%; }
  .ifm-kpi { min-height: 96px; }
  .ifm-kpi > strong { font-size: 1.08rem; }
  .ifm-card { padding: var(--bms-space-3); }
  .ifm-card > header { align-items: stretch; flex-direction: column; }
  .ifm-account-hero { align-items: flex-start; flex-direction: column; }
  .ifm-import-metrics { grid-template-columns: 1fr; }
  .ifm-payment-facts, .ifm-payment-fields { grid-template-columns: 1fr; }
  .ifm-payment-heading,.ifm-payment-card-body > header { align-items: stretch; flex-direction: column; }
  .ifm-payment-filter { grid-template-columns:1fr 1fr; }
  .ifm-payment-filter .is-search { grid-column:1/-1; }
  .ifm-payment-selection-bar { align-items: stretch; flex-direction: column; }
  .ifm-payment-selection-bar .btn { width: 100%; }
  .ifm-payment-plan-detail-list article { grid-template-columns: 1fr; }
  body.bms-wave-4 #relationshipDrawer[data-variant="payment-plan"]>aside { inset:12px; width:calc(100vw - 24px); max-height:calc(100dvh - 24px); transform:none; }
  .relationship-drawer:has(.ifm-payment-plan-detail) #relationshipDrawerBody,.relationship-drawer[data-variant="payment-plan"] #relationshipDrawerBody { max-height:calc(100dvh - 92px); padding:var(--bms-space-3); }
  .ifm-payment-plan-table { margin:0; padding:0; overflow:visible; border:0; background:transparent; }
  .ifm-payment-plan-table table,.ifm-payment-plan-table tbody,.ifm-payment-plan-table tfoot,.ifm-payment-plan-table tr,.ifm-payment-plan-table td,.ifm-payment-plan-table th { display:block; width:100%; }
  .ifm-payment-plan-table th:nth-child(n),.ifm-payment-plan-table td:nth-child(n) { width:100%; }
  .ifm-payment-plan-table tbody td > small { grid-column:2; margin-top:0; }
  .ifm-payment-plan-table thead { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ifm-payment-plan-table tbody { display:grid; gap:var(--bms-space-3); }
  .ifm-payment-plan-table tbody tr { overflow:hidden; border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface); }
  .ifm-payment-plan-table tbody td { display:grid; grid-template-columns:minmax(96px,36%) minmax(0,1fr); gap:var(--bms-space-2); border-bottom:1px solid var(--bms-border); padding:var(--bms-space-2) var(--bms-space-3); text-align:left; }
  .ifm-payment-plan-table tbody td:last-child { border-bottom:0; }
  .ifm-payment-plan-table tbody td::before,.ifm-payment-plan-table tfoot th[data-label]::before { content:attr(data-label); color:var(--bms-text-muted); font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
  .ifm-payment-plan-table tbody .ifm-number { text-align:left; }
  .ifm-payment-plan-table tfoot { margin-top:var(--bms-space-3); overflow:hidden; border:1px solid var(--bms-border); border-radius:var(--bms-radius-2); background:var(--bms-surface-muted); }
  .ifm-payment-plan-table tfoot tr { display:grid; grid-template-columns:1fr; }
  .ifm-payment-plan-table tfoot th { display:grid; grid-template-columns:minmax(96px,36%) minmax(0,1fr); gap:var(--bms-space-2); border-bottom:1px solid var(--bms-border); padding:var(--bms-space-2) var(--bms-space-3); text-align:left; }
  .ifm-payment-plan-table tfoot th:first-child { display:block; }
  .ifm-payment-plan-table tfoot th[data-label] { text-align:left; }
  .ifm-payment-plan-table tfoot th:last-child { border-bottom:0; }
  .ifm-proof-dropzone { min-height:108px; }
  .ifm-payment-filter .btn { width:100%; }
  .ifm-payment-request-card dl { grid-template-columns: 1fr; }
  .ifm-file-preview-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .ifm-file-preview-dialog h3 { max-width: 62vw; }
  .ifm-file-preview-dialog header,.ifm-file-preview-dialog footer { padding: var(--bms-space-3); }
  .ifm-file-preview-body { padding: 0; }
  .ifm-file-preview-body iframe { min-height: 100%; border-radius: 0; }
}

@media (max-width: 420px) {
  .ifm-kpi-grid, .ifm-kpi-grid.is-supporting, .ifm-skeleton { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ifm-skeleton span { animation: none; }
}
.ifm-payment-purpose { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: .78rem; }
.ifm-payment-purpose span { color: var(--bms-text-muted); font-size: .7rem; }
.ifm-payment-purpose strong { border-radius: var(--bms-radius-round); background: var(--bms-primary-soft); color: var(--bms-primary); padding: 1px 8px; font-weight: 700; }
.ifm-payment-dossier-flag { margin: 0; color: var(--bms-warning); font-size: .72rem; font-weight: 700; }
/* Khoản chi đào tạo: nhãn riêng để người duyệt phân biệt với các đề nghị thanh toán khác */
.ifm-payment-training { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: .78rem; }
.ifm-payment-training span, .ifm-payment-training-tag { border-radius: var(--bms-radius-round); background: var(--bms-info-soft); color: var(--bms-info); padding: 1px 8px; font-size: .7rem; font-style: normal; font-weight: 700; }
.ifm-payment-training strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ifm-payment-purpose-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ifm-payment-purpose-list li { display: flex; justify-content: space-between; gap: var(--bms-space-2); border-left: 2px solid var(--bms-primary); padding-left: var(--bms-space-2); }
.ifm-payment-purpose-list li div { display: grid; min-width: 0; }
.ifm-payment-purpose-list small { color: var(--bms-text-muted); }
.ifm-payment-purpose-list li > span { white-space: nowrap; font-weight: 700; }
.ifm-payment-dossier.is-missing { border-left: 3px solid var(--bms-warning); background: var(--bms-warning-soft); padding: var(--bms-space-2) var(--bms-space-3); }
/* Đề nghị cước xe từ SRM: nhãn nguồn, nhãn đủ hồ sơ, ô hồ sơ còn thiếu trong tệp đính kèm và lịch sử xử lý. */
.ifm-source-pill { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; margin-bottom: 4px; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--bms-primary) 35%, var(--bms-border)); border-radius: 999px; background: var(--bms-primary-soft); color: var(--bms-primary-active, var(--bms-primary)); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.ifm-payment-dossier-flag.is-complete { color: var(--bms-success); }
.ifm-payment-file-missing { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px dashed color-mix(in srgb, var(--bms-warning) 55%, var(--bms-border)); border-radius: var(--bms-radius-2); background: var(--bms-warning-soft); color: var(--bms-warning); font-size: .75rem; font-weight: 600; }
.ifm-payment-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ifm-payment-history li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: .78rem; }
.ifm-payment-history li > small { color: var(--bms-text-muted); }
.ifm-payment-history li div { display: grid; gap: 2px; }
.ifm-payment-history li span { color: var(--bms-text-muted); }
.ifm-payment-history li p { margin: 0; color: var(--bms-text); }

/* Duyệt thanh toán trên điện thoại: một cột mỗi lần, thẻ đề nghị gọn */
@media (max-width: 700px) {
  .ifm-payment-heading p { display: none; }
  .ifm-payment-filter { grid-template-columns: 1fr 1fr auto; gap: 6px; padding: var(--bms-space-2); }
  .ifm-payment-filter .is-search { grid-column: 1 / 3; }
  .ifm-payment-filter .is-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ifm-payment-filter label:not(.is-search) > span { font-size: .68rem; }
  .ifm-payment-filter label:not(.is-search) input { min-height: 38px; font-size: .8rem; padding-inline: 8px; }
  .ifm-payment-filter .btn.primary { grid-column: 3; grid-row: 1; min-height: 44px; padding-inline: 14px; }
  .ifm-payment-filter .btn.secondary { grid-column: 3; grid-row: 2; align-self: end; min-height: 38px; padding-inline: 10px; font-size: .75rem; }
  .ifm-payment-board .ifm-card.ifm-payment-lane { border: 0; background: transparent; box-shadow: none; padding: 0; }
  .ifm-payment-board .ifm-payment-lane > header { display: none; }
  .ifm-payment-board .ifm-payment-card-list { gap: 10px; }
  .ifm-topay-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .ifm-topay-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center; padding: 6px 8px; }
  .ifm-topay-stat strong { grid-row: 1 / 3; font-size: 1.35rem; }
  .ifm-topay-stat span { min-height: 0; font-size: .68rem; line-height: 1.15; }
  .ifm-topay-stat small { grid-column: 2; font-size: .64rem; }
  .ifm-payment-selection-bar { display: none; }
  .ifm-payment-selection-bar.has-selection { position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; flex-direction: row; align-items: center; margin: 0; border: 0; border-top: 1px solid var(--bms-border-strong); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--bms-shadow-2); }
  .ifm-payment-selection-bar.has-selection .btn { width: auto; }
  .ifm-payment-board.shows-to-pay { padding-bottom: 84px; }
  .ifm-payment-request-card { gap: 8px; padding: 12px; }
  .ifm-payment-request-card.has-selection { grid-template-columns: 26px minmax(0, 1fr); }
  .ifm-payment-request-card .ifm-payment-select input { width: 22px; height: 22px; }
  .ifm-payment-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: start; }
  .ifm-payment-card-body > * { grid-column: 1 / -1; margin: 0; }
  .ifm-payment-card-body > header, .ifm-payment-card-body > dl.ifm-payment-compact-facts { display: contents; }
  .ifm-payment-card-body > header > div { grid-column: 1; grid-row: 1; gap: 1px; }
  .ifm-payment-card-body > header > div > small { display: none; }
  .ifm-payment-card-body > header > div > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .92rem; line-height: 1.3; }
  .ifm-payment-card-body > header > div > span { font-size: .68rem; }
  .ifm-payment-compact-facts > div { border: 0; padding: 0; }
  .ifm-payment-compact-facts > div:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .ifm-payment-compact-facts > div:nth-child(2) dt { display: none; }
  .ifm-payment-compact-facts > div:nth-child(2) dd { margin: 0; font-size: 1rem; white-space: nowrap; }
  .ifm-payment-compact-facts > div:first-child { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ifm-payment-compact-facts > div:first-child dt { display: none; }
  .ifm-payment-compact-facts > div:first-child::before { content: "Hạn"; color: var(--bms-text-muted); font-size: .72rem; }
  .ifm-payment-compact-facts > div:first-child dd { display: contents; font-size: .8rem; }
  .ifm-payment-compact-facts > div:first-child .ifm-due-hint { border-radius: 999px; padding: 1px 7px; font-size: .68rem; font-weight: 700; }
  .ifm-payment-request-card.is-overdue .ifm-due-hint { border: 1px solid currentColor; background: var(--bms-surface); color: var(--bms-danger); }
  .ifm-payment-request-card.is-due-soon .ifm-due-hint { border: 1px solid currentColor; background: var(--bms-surface); color: var(--bms-warning); }
  .ifm-payment-card-body > header > .ifm-status { display: block; grid-column: 1 / -1; grid-row: 3; justify-self: start; border-radius: 0; background: none; padding: 0; color: var(--bms-text-muted); font-size: .72rem; line-height: 1.3; }
  .ifm-payment-card-body > header > .ifm-status small { display: inline; margin-left: 0; color: inherit; font-size: inherit; }
  .ifm-payment-card-body > header > .ifm-status small::before { content: " · "; }
  .ifm-payment-lane.is-to-pay .ifm-payment-card-body > header > .ifm-status { display: none; }
  .ifm-payment-purpose { font-size: .72rem; }
  .ifm-payment-card-body > footer { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 2px; }
  .ifm-payment-card-body > footer .btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding-inline: 4px; font-size: .74rem; white-space: nowrap; }
  .ifm-payment-card-body > footer .ifm-quick-decisions { display: contents; }
  .ifm-payment-card-body > footer > .btn:only-child { flex: 0 0 auto; min-height: 34px; padding-inline: 14px; }
}

/* Chi tiết đề nghị trên điện thoại: tóm tắt trên cùng, danh sách thông tin gọn, nút xử lý luôn ở đáy */
@media (max-width: 700px) {
  .ifm-payment-detail { gap: 14px; }
  .ifm-payment-detail > header { position: static; flex-direction: column; gap: 6px; }
  .ifm-payment-detail > header h4 { font-size: 1.05rem; line-height: 1.3; }
  .ifm-payment-detail > header p { display: none; }
  .ifm-payment-detail > header .ifm-status { align-self: flex-start; font-size: .72rem; }
  .ifm-detail-amount { border-bottom: 1px solid var(--bms-border); padding-bottom: 12px; }
  .ifm-payment-detail h5 { margin-bottom: 6px; color: var(--bms-text-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
  .ifm-payment-detail .ifm-payment-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ifm-payment-detail .ifm-payment-facts > div, .ifm-payment-detail .ifm-payment-fields > div { border: 0; border-radius: 0; background: none; padding: 0; }
  .ifm-payment-detail .ifm-payment-facts dd { margin-top: 2px; font-size: .88rem; }
  .ifm-payment-detail .ifm-payment-fields { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
  .ifm-payment-detail .ifm-payment-fields > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--bms-border); padding: 9px 12px; }
  .ifm-payment-detail .ifm-payment-fields > div:last-child { border-bottom: 0; }
  .ifm-payment-detail .ifm-payment-fields dt { font-size: .74rem; }
  .ifm-payment-detail .ifm-payment-fields dd { margin: 0; font-size: .84rem; font-weight: 600; }
  .ifm-payment-flow { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .ifm-payment-flow li { grid-template-columns: 22px auto; gap: 6px; }
  .ifm-payment-flow li > span { width: 22px; height: 22px; font-size: .72rem; }
  .ifm-payment-flow strong { font-size: .84rem; }
  .ifm-payment-flow small { font-size: .7rem; }
  .ifm-payment-files { display: grid; gap: 6px; }
  .ifm-payment-files .btn { width: 100%; min-height: 44px; grid-template-columns: auto auto minmax(0, 1fr); justify-content: start; justify-items: start; text-align: left; }
  .ifm-payment-history li { grid-template-columns: 78px minmax(0, 1fr); }
  .ifm-payment-decision { position: sticky; bottom: 0; z-index: 2; gap: 8px; margin: 0 calc(var(--bms-space-3) * -1) calc(var(--bms-space-3) * -1); border-top: 1px solid var(--bms-border-strong); background: var(--bms-surface); padding: 10px var(--bms-space-3) calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--bms-shadow-2); }
  .ifm-payment-decision label { font-size: 0; }
  .ifm-payment-decision textarea { min-height: 40px; height: 40px; font-size: .85rem; }
  .ifm-payment-decision > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ifm-payment-decision > div .btn { min-height: 44px; padding-inline: 4px; white-space: nowrap; }
  .ifm-payment-decision > div [data-ifm-payment-decision="APPROVE"] { order: 1; }
  .ifm-payment-decision > div [data-ifm-payment-decision="REQUEST_INFORMATION"] { order: 2; }
  .ifm-payment-decision > div [data-ifm-payment-decision="REJECT"] { order: 3; }
}

/* Tên tab đã nói rõ "Duyệt thanh toán": tiêu đề chỉ giữ cho trình đọc màn hình để vùng hiển thị gọn hơn. */
.ifm-payment-approvals > .ifm-payment-heading { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Duyệt thanh toán hướng B: chip lọc nhanh, ô tìm và nút Lọc ngày chung một hàng dưới nút gạt trạng thái */
.ifm-payment-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bms-space-2) var(--bms-space-3); margin-bottom: var(--bms-space-3); }
.ifm-payment-filterbar .ifm-quick-filters { flex: 1 1 auto; min-width: 0; margin: 0; }
.ifm-payment-filterbar .ifm-payment-filter { display: flex; flex: 0 1 480px; align-items: center; gap: 6px; margin-left: auto; border: 0; background: transparent; padding: 0; }
/* Thanh tìm kiếm có nút Lọc (bms-search.css): bảng lọc chứa Từ ngày / Đến ngày và Xóa lọc / Áp dụng. */
.ifm-payment-filterbar .ifm-payment-filter .bms-search { --bms-search-width: 100%; }
.ifm-filter-field { display: grid; gap: 4px; color: var(--bms-text-muted); font-size: .72rem; font-weight: 700; }
.ifm-filter-field input { width: 100%; min-height: var(--bms-control-standard); }
/* Cả hàng lọc cùng một kích thước: cao 36px, bo tròn, viền mảnh, chữ 13px. Quá hạn đỏ, đến hạn cam, luôn có nền màu để phân biệt. */
.ifm-payment-filterbar .ifm-quick-filters { gap: var(--bms-space-2); }
.ifm-payment-filterbar .ifm-filter-chip { box-sizing: border-box; height: var(--bms-control-standard); min-height: var(--bms-control-standard); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-round); background: var(--bms-surface); box-shadow: none; padding: 0 14px; color: var(--bms-text); font: 600 13px/1 var(--bms-font-ui); }
.ifm-payment-filterbar .ifm-filter-chip.is-overdue { border-color: var(--bms-danger); background: var(--bms-danger-soft); color: var(--bms-danger); }
.ifm-payment-filterbar .ifm-filter-chip.is-due-soon { border-color: var(--bms-warning); background: var(--bms-warning-soft); color: var(--bms-warning); }
.ifm-payment-filterbar .ifm-filter-chip:is(.is-overdue, .is-due-soon) :is(b, i) { color: inherit; }
.ifm-payment-filterbar .ifm-filter-chip:disabled { opacity: .5; cursor: default; }
.ifm-payment-filterbar .ifm-filter-chip[aria-pressed="true"] { border-color: var(--bms-primary); background: var(--bms-primary-soft); color: var(--bms-primary); box-shadow: inset 0 0 0 1px var(--bms-primary); }
.ifm-payment-filterbar .ifm-filter-chip.is-overdue[aria-pressed="true"] { border-color: var(--bms-danger); background: var(--bms-danger-soft); color: var(--bms-danger); box-shadow: inset 0 0 0 1px var(--bms-danger); }
.ifm-payment-filterbar .ifm-filter-chip.is-rejected { color: var(--bms-danger); }
.ifm-payment-filterbar .ifm-filter-chip.is-due-soon[aria-pressed="true"] { border-color: var(--bms-warning); background: var(--bms-warning-soft); color: var(--bms-warning); box-shadow: inset 0 0 0 1px var(--bms-warning); }
/* Nút Tạo kế hoạch chi nằm cùng hàng với các tab trạng thái (máy tính); điện thoại vẫn là thanh cố định ở đáy khi đã chọn. */
@media (min-width: 701px) {
  .ifm-payment-toolbar .ifm-payment-selection-bar { margin: 0 0 0 auto; border: 0; background: transparent; padding: 0; gap: var(--bms-space-3); }
  .ifm-payment-toolbar .ifm-payment-selection-bar > span { display: inline-flex; align-items: baseline; gap: 6px; color: var(--bms-text-muted); font-size: 13px; white-space: nowrap; }
  .ifm-payment-toolbar .ifm-payment-selection-bar.has-selection > span { color: var(--bms-text); }
  .ifm-payment-toolbar .ifm-payment-selection-bar .ifm-selection-total { color: var(--bms-primary); font-weight: 700; }
  /* Cao đúng bằng khung tab trạng thái cạnh nó (nút tab + đệm 3px trên dưới). */
  body.bms-opendesign-v8 .ifm-payment-toolbar .ifm-payment-selection-bar .btn.primary { box-sizing: border-box; width: auto; height: calc(var(--bms-control-standard) + 6px); min-height: 0; padding-block: 0; }
}
@media (max-width: 700px) {
  .ifm-payment-toolbar { flex-direction: column; align-items: stretch; gap: var(--bms-space-2); margin-bottom: var(--bms-space-2); }
  .ifm-payment-toolbar .ifm-lane-switch button strong { display: block; height: auto; }
  .ifm-payment-filterbar:is(.is-to-approve, .is-to-pay) .ifm-quick-filters { display: none; }
  .ifm-payment-filterbar .ifm-quick-filters { flex: 1 1 100%; }
  .ifm-payment-filterbar .ifm-payment-filter { flex: 1 1 100%; }
  .ifm-payment-board .ifm-topay-stats { display: grid; }
}

/* Đề nghị thanh toán USD: số tiền gốc USD, dòng phụ là VND quy đổi / phần USD trong tổng. */
.ifm-amount-sub { display: block; margin-top: 2px; color: var(--bms-text-muted); font-size: .72rem; font-weight: 500; white-space: nowrap; text-transform: none; letter-spacing: normal; }
.ifm-payment-plan-table .ifm-amount-sub { white-space: normal; }
.ifm-fx-note { margin: 0; padding: var(--bms-space-2) var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); color: var(--bms-text); font-size: .8rem; }
.ifm-fx-note:empty { display: none; }
.ifm-fx-note .is-up { color: var(--bms-warning); }
.ifm-fx-note .is-down { color: var(--bms-success, var(--bms-primary)); }