/* dm_customers.css - module styles (customers pages only; prefix selectors with the page id, e.g. #p20_...). Owner: the customers module (D-136). Tokens from app.css (--dm-*, --ut-*), no hex colours. */

/* ---------------------------------------------------------------- p10 list: desktop = Interactive Report, phone = Cards (same items, same refresh) */
#p10_cards .a-CardView-title { font-weight: 600; }
#p10_cards .a-CardView-subTitle { color: var(--dm-muted); }
#p10_cards .dm-p10-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; font-size: 13px; }
#p10_cards .dm-p10-money b { font-variant-numeric: tabular-nums; }
#p10_cards .dm-p10-kv { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
#p10_cards .dm-p10-kv > span { font-size: .6875rem; color: var(--dm-muted); text-transform: uppercase; letter-spacing: .02em; }
#p10_cards .dm-p10-kv b { font-weight: 600; }
#p10_cards .dm-money--bad, #p10_customers .dm-money--bad { color: var(--dm-bad); font-weight: 700; }
#p10_cards .a-CardView-actions .t-Button { min-height: 40px; min-width: 40px; }
/* round 5 = mockup: eye + edit at the top right of the phone card */
#p10_cards .a-CardView { position: relative; }
#p10_cards .a-CardView-actions { position: absolute; top: .35rem; right: .35rem; border: 0; padding: 0; background: transparent; }
#p10_cards .a-CardView-header { padding-right: 6rem; }
/* day1021 A1 (owner approved): photo / initials avatar (mockup .dm-ava 34 px) left of the name + sub line; Remaining / Overdue / Next due
   are not rendered at all when empty (card template directives), an all-empty money row takes no space */
#p10_cards .a-CardView-headerBody { position: relative; padding-left: 46px; min-height: 36px; }
#p10_cards .dm-p10-ava { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  overflow: hidden; font-weight: 700; font-size: .8rem; line-height: 1;
  background: color-mix(in srgb, var(--dm-brand) 14%, var(--ut-component-background-color)); color: var(--dm-brand); }
/* the photo lies over the initials: a photo that cannot be drawn leaves the initials visible (no script needed) */
#p10_cards .dm-p10-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#p10_cards .dm-p10-money:empty { display: none; }
/* title bar sub line, list look: horizontal lines only, no header text on the icon columns, type badge colour + icon per type */
.dm-p10 #p10_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p10 #p10_title .dm-p10-sub { display: block; font-size: .8125rem; font-weight: 400; margin-top: .2rem;
  color: color-mix(in srgb, var(--ut-body-text-color) 65%, var(--ut-component-background-color)); }
.dm-p10 #p10_customers .a-IRR-table td, .dm-p10 #p10_customers .a-IRR-table th { border-left: 0; border-right: 0; }
.dm-p10 #p10_customers .a-IRR-table td { padding-top: .7rem; padding-bottom: .7rem; }
.dm-p10 #p10_customers th#EDIT_ID .a-IRR-headerLink, .dm-p10 #p10_customers th#EDIT_ID .a-IRR-headerLabel { visibility: hidden; }
.dm-type { --t: var(--dm-ok); color: color-mix(in srgb, var(--t) 90%, var(--ut-body-text-color)); background: color-mix(in srgb, var(--t) 10%, var(--ut-component-background-color));
  border: 1px solid color-mix(in srgb, var(--t) 40%, var(--ut-component-background-color)); border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.dm-type--INSTALLMENT { --t: var(--dm-info); } .dm-type--CREDIT { --t: var(--dm-warn); } .dm-type--WHOLESALE { --t: var(--dm-accent); } .dm-type--REGULAR { --t: var(--dm-ok); }
@media (min-width: 640px) {
  #p10_cards { display: none; }
}
@media (max-width: 639.98px) {
  #p10_customers .a-IRR-tableContainer,
  #p10_customers .a-IRR-paginationWrap,
  #p10_customers .a-IRR-noDataMsg { display: none; }
  #p10_customers .a-IRR-toolbar { flex-wrap: wrap; }
  #p10_cards .a-CardView-items { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- p12 Customer Profile = the mockup (MOCKUP css app.css 8-9, pages_fix p12)
   Native regions: Cards (header, 5 cards, Info / Verification lists, papers, documents, visits, cheques) + Region Display Selector.
   The card container look of the Cards region is switched off here; the mockup markup lives in the cards' HTML expressions. */
#p14_totals .a-CardView-subTitle { font-size: 20px; font-weight: 700; color: var(--ut-body-text-color, inherit); }
.dm-p12 {
  --p12-ok: var(--dm-ok); --p12-bad: var(--dm-bad); --p12-warn: var(--dm-warn); --p12-info: var(--dm-info); --p12-accent: var(--dm-accent);
  --p12-neutral: var(--dm-muted); --p12-brand: var(--dm-brand);
  --p12-surface: var(--ut-component-background-color); --p12-line: var(--ut-component-border-color, var(--dm-line));
  --p12-text: var(--ut-body-text-color); --p12-muted: color-mix(in srgb, var(--ut-body-text-color) 70%, var(--ut-component-background-color));
  --p12-soft: color-mix(in srgb, var(--ut-body-text-color) 4%, var(--ut-component-background-color));
}
/* title bar: "Customer Profile" + sub line "C-0001 . name" */
.dm-p12 #p12_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p12 #p12_title .dm-p12-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--p12-muted); margin-top: .2rem; }
.dm-p12 .ep-btn-soft--green { --a-button-text-color: var(--dm-ok); --a-button-border-color: var(--dm-ok); }
.dm-p12 .t-BreadcrumbRegion-buttons .t-Button[disabled] { opacity: .55; cursor: not-allowed; }
.dm-p12 .t-BreadcrumbRegion-buttons .t-Button.ep-btn-soft--blue { --a-button-background-color: color-mix(in srgb, var(--dm-info) 8%, var(--p12-surface)); }

/* Cards regions used as plain containers: no card frame */
.dm-p12 #p12_head .a-CardView-items, .dm-p12 #p12_cards .a-CardView-items, .dm-p12 #p12_info .a-CardView-items,
.dm-p12 #p12_ver_dl .a-CardView-items, .dm-p12 #p12_doc_check .a-CardView-items, .dm-p12 #p12_doclist .a-CardView-items,
.dm-p12 #p12_visit_list .a-CardView-items, .dm-p12 #p12_cheque_list .a-CardView-items { margin: 0; padding: 0; }
.dm-p12 #p12_head .a-CardView, .dm-p12 #p12_cards .a-CardView, .dm-p12 #p12_info .a-CardView, .dm-p12 #p12_ver_dl .a-CardView,
.dm-p12 #p12_doc_check .a-CardView, .dm-p12 #p12_doclist .a-CardView, .dm-p12 #p12_visit_list .a-CardView, .dm-p12 #p12_cheque_list .a-CardView {
  border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; }
.dm-p12 #p12_head .a-CardView-body, .dm-p12 #p12_cards .a-CardView-body, .dm-p12 #p12_info .a-CardView-body, .dm-p12 #p12_ver_dl .a-CardView-body,
.dm-p12 #p12_doc_check .a-CardView-body, .dm-p12 #p12_doclist .a-CardView-body, .dm-p12 #p12_visit_list .a-CardView-body,
.dm-p12 #p12_cheque_list .a-CardView-body { padding: 0; margin: 0; }
.dm-p12 #p12_head .a-CardView-mainContent, .dm-p12 #p12_cards .a-CardView-mainContent, .dm-p12 #p12_info .a-CardView-mainContent,
.dm-p12 #p12_ver_dl .a-CardView-mainContent, .dm-p12 #p12_doc_check .a-CardView-mainContent, .dm-p12 #p12_doclist .a-CardView-mainContent,
.dm-p12 #p12_visit_list .a-CardView-mainContent, .dm-p12 #p12_cheque_list .a-CardView-mainContent { padding: 0; }
.dm-p12 #p12_head .a-CardView-header, .dm-p12 #p12_cards .a-CardView-header, .dm-p12 #p12_info .a-CardView-header,
.dm-p12 #p12_ver_dl .a-CardView-header, .dm-p12 #p12_doc_check .a-CardView-header, .dm-p12 #p12_doclist .a-CardView-header,
.dm-p12 #p12_visit_list .a-CardView-header, .dm-p12 #p12_cheque_list .a-CardView-header { display: none; }
.dm-p12 .a-CardView-item { min-width: 0; }

/* badges (outline pills, colour + text + icon) */
.dm-p12 .ep-badge { --b: var(--p12-neutral); display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem .1rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; line-height: 1.5;
  background: color-mix(in srgb, var(--b) 10%, var(--p12-surface)); border: 1px solid color-mix(in srgb, var(--b) 40%, var(--p12-surface));
  color: color-mix(in srgb, var(--b) 88%, var(--p12-text)); }
.dm-p12 .ep-badge:empty { display: none; }
.dm-p12 .ep-badge .fa { font-size: .85em; }
.dm-p12 .ep-badge.u-success { --b: var(--p12-ok); } .dm-p12 .ep-badge.u-warning { --b: var(--p12-warn); } .dm-p12 .ep-badge.u-danger { --b: var(--p12-bad); }
.dm-p12 .ep-badge.u-normal { --b: var(--p12-neutral); } .dm-p12 .ep-badge.u-info { --b: var(--p12-info); } .dm-p12 .ep-badge.u-accent { --b: var(--p12-accent); }
.dm-p12 .u-success-text { color: var(--p12-ok); } .dm-p12 .u-danger-text { color: var(--p12-bad); } .dm-p12 .u-muted, .dm-p12 .dm-zero { color: var(--p12-muted); }

/* header card */
.dm-p12 #p12_head { background: var(--p12-surface); border: 1px solid var(--p12-line); border-radius: var(--dm-radius); margin-bottom: 1rem;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--p12-text) 8%, transparent); }
.dm-p12 .dm-prof-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
.dm-p12 .dm-ava { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: 700;
  background: color-mix(in srgb, var(--p12-info) 14%, var(--p12-surface)); color: var(--p12-info); }
.dm-p12 .dm-ava--lg { width: 72px; height: 72px; font-size: 1.6rem; }
.dm-p12 .dm-ava--img { object-fit: cover; }
.dm-p12 .dm-prof-main { min-width: 0; flex: 1 1 260px; }
.dm-p12 .dm-prof-name { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.3; }
.dm-p12 .dm-prof-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; font-size: .8125rem; color: var(--p12-muted); }
.dm-p12 .dm-prof-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.dm-p12 .dm-prof-pill { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; font-size: .8125rem; color: var(--p12-muted); }
.dm-p12 .dm-prof-pill b { color: var(--p12-text); font-variant-numeric: tabular-nums; }
.dm-p12 .dm-prof-pill .dm-badges { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
/* day1021 A2 (owner approved): the "Risky" pill is a button that opens the reasons pop-up (inline dialog #p12_risk_dlg) */
.dm-p12 button.dm-p12-risk-btn { font-family: inherit; cursor: pointer; margin: 0; }
.dm-p12 button.dm-p12-risk-btn:hover { background: color-mix(in srgb, var(--b) 18%, var(--p12-surface)); }
.dm-p12 button.dm-p12-risk-btn:focus-visible { outline: 2px solid var(--p12-bad); outline-offset: 2px; }
.dm-p12 .dm-p12-risk-i { margin-left: .15rem; opacity: .8; }
#p12_risk_dlg .dm-p12-risk-intro { margin: 0 0 .5rem; font-weight: 600; font-size: .9375rem; }
#p12_risk_dlg .t-Report-wrap, #p12_risk_dlg .t-Report-tableWrap, #p12_risk_dlg .t-Report-report { border: 0; box-shadow: none; background: transparent; }
#p12_risk_dlg .t-Report-report td { border: 0; padding: .35rem 0 .35rem 1.1rem; position: relative; white-space: normal; background: transparent;
  font-size: .875rem; }
#p12_risk_dlg .t-Report-report td::before { content: ""; position: absolute; left: .2rem; top: .85rem; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--dm-bad); }
#p12_risk_dlg .t-Report-report tr:last-child td { color: var(--dm-muted); font-size: .8125rem; }
#p12_risk_dlg .t-Report-report tr:last-child td::before { background: var(--dm-muted); }

/* five cards (ep-kpi) */
.dm-p12 #p12_cards { margin-bottom: 1rem; }
.dm-p12 #p12_cards .a-CardView-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.dm-p12 .ep-kpi { --k: var(--p12-neutral); position: relative; display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem .8rem; min-height: 112px;
  border-radius: var(--dm-radius); background: color-mix(in srgb, var(--k) 7%, var(--p12-surface)); border: 1px solid color-mix(in srgb, var(--k) 24%, var(--p12-surface));
  color: var(--p12-text); text-decoration: none; height: 100%; box-sizing: border-box; transition: transform .15s ease, box-shadow .15s ease; }
.dm-p12 .ep-kpi:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 18px color-mix(in srgb, var(--k) 22%, transparent); }
.dm-p12 .ep-kpi--success { --k: var(--p12-ok); } .dm-p12 .ep-kpi--danger { --k: var(--p12-bad); } .dm-p12 .ep-kpi--warning { --k: var(--p12-warn); }
.dm-p12 .ep-kpi--info { --k: var(--p12-info); } .dm-p12 .ep-kpi--accent { --k: var(--p12-accent); } .dm-p12 .ep-kpi--neutral { --k: var(--p12-neutral); }
.dm-p12 .ep-kpi-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; row-gap: .45rem; min-width: 0; container-type: inline-size; }
.dm-p12 .ep-kpi-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: var(--p12-surface); font-size: 18px; }
.dm-p12 .ep-kpi-txt { display: contents; }
.dm-p12 .ep-kpi-label { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: color-mix(in srgb, var(--k) 85%, var(--p12-text)); white-space: normal; }
.dm-p12 .ep-kpi-num { display: block; grid-column: 1 / -1; font-size: clamp(.8rem, 12cqi, 1.6rem); font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-p12 .ep-kpi-num small { font-size: .62em; font-weight: 600; color: var(--p12-muted); margin-right: .15rem; }
.dm-p12 .ep-kpi-foot { display: block; font-size: .75rem; line-height: 1.3; color: var(--p12-muted); white-space: normal; margin-top: auto; }
.dm-p12 .ep-kpi-foot b { font-weight: 600; }

/* tabs (Region Display Selector) + panels = one white box like the mockup */
.dm-p12 #p12_tabs { background: var(--p12-surface); border: 1px solid var(--p12-line); border-bottom: 0; border-radius: var(--dm-radius) var(--dm-radius) 0 0; margin-bottom: 0; }
.dm-p12 #p12_tabs .apex-rds-container { border: 0; background: transparent; }
.dm-p12 #p12_tabs .apex-rds { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--p12-line); padding: 0 .75rem; background: transparent; box-shadow: none; }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item { flex: none; }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item a { display: inline-flex; align-items: center; gap: .45rem; padding: .8rem .9rem .7rem; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: transparent; font-weight: 600; font-size: .8125rem; color: var(--p12-muted); white-space: nowrap; box-shadow: none; }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item a:hover { color: var(--p12-brand); }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item.apex-rds-selected a, .dm-p12 #p12_tabs .apex-rds .apex-rds-item a[aria-selected="true"] {
  color: var(--p12-brand); border-bottom-color: var(--p12-brand); background: transparent; }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item a .fa, .dm-p12 #p12_tabs .apex-rds .apex-rds-item a .t-Icon { font-size: 14px; margin: 0; }
.dm-p12 .dm-tab-n { margin-left: .4rem; font-size: .6875rem; min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--p12-soft); border: 1px solid var(--p12-line);
  color: var(--p12-muted); text-align: center; line-height: 1.45; display: inline-block; }
.dm-p12 .dm-p12-panel { background: var(--p12-surface); border: 1px solid var(--p12-line); border-top: 0; border-radius: 0 0 var(--dm-radius) var(--dm-radius); box-shadow: none; }
.dm-p12 .dm-p12-panel > .t-Region-bodyWrap > .t-Region-body { padding: 1rem; }
.dm-p12 .dm-p12-panel .t-Region { box-shadow: none; border: 0; background: transparent; margin-bottom: 0; }

/* tab head row: title left, buttons right (Buttons Container) */
.dm-p12 .dm-tabpanel-head { margin-bottom: .75rem; }
.dm-p12 .dm-tabpanel-head .t-ButtonRegion-wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 0; }
.dm-p12 .dm-tabpanel-head .t-ButtonRegion-col--left { display: none; }
.dm-p12 .dm-tabpanel-head .t-ButtonRegion-col--content { flex: 1 1 auto; padding: 0; }
.dm-p12 .dm-tabpanel-head .t-ButtonRegion-col--right .t-ButtonRegion-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
.dm-p12 .dm-tabpanel-head.t-ButtonRegion, .dm-p12 .dm-empty.t-ButtonRegion { background: transparent; border: 0; padding: 0; }
.dm-p12 .dm-tabpanel-title { font-size: .875rem; font-weight: 600; margin: 0; }
.dm-p12 .dm-p12-hint { color: var(--p12-muted); font-weight: 400; }

/* read-only details (Info / Verification) = dl grid, 3 per row */
.dm-p12 #p12_info .a-CardView-items, .dm-p12 #p12_ver_dl .a-CardView-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.dm-p12 .dm-dli.is-full, .dm-p12 .a-CardView-item:has(.dm-dli.is-full), .dm-p12 .a-CardView-item.is-full { grid-column: 1 / -1; }
.dm-p12 .dm-dt { font-size: .6875rem; font-weight: 600; color: var(--p12-muted); text-transform: uppercase; letter-spacing: .03em; }
.dm-p12 .dm-dd { margin-top: .15rem; font-size: .875rem; overflow-wrap: anywhere; }
.dm-p12 .dm-wa { color: var(--p12-ok); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.dm-p12 .dm-tel { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }

/* report tabs */
.dm-p12 #p12_plans td, .dm-p12 #p12_payments td, .dm-p12 #p12_ledger td, .dm-p12 #p12_dochist td { vertical-align: middle; }
.dm-p12 .dm-p12-foot { color: var(--p12-muted); font-size: 12px; margin: 6px 0 0; }
.dm-p12 .dm-pill { padding: .1rem .6rem; font-size: .75rem; background: color-mix(in srgb, currentColor 10%, var(--p12-surface));
  border-color: color-mix(in srgb, currentColor 40%, var(--p12-surface)); }
.dm-pill--CANCELLED, .dm-pill--REMOVED, .dm-pill--REPLACED { color: var(--dm-muted); }
.dm-pill--CURRENT, .dm-pill--COMPLETED, .dm-pill--PAYMENT, .dm-pill--DOWN_PAYMENT { color: var(--dm-ok); }
.dm-pill--DEFAULTED, .dm-pill--LATE { color: var(--dm-bad); }
.dm-row--cancelled { text-decoration: line-through; color: var(--dm-muted); }
.dm-p12-flag { font-weight: 600; }

/* documents: papers checklist + document cards */
.dm-p12 .p12-doccheck { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--p12-line); border-radius: var(--dm-radius); background: var(--p12-surface); }
.dm-p12 .p12-doccheck-t { display: block; font-size: .75rem; color: var(--p12-muted); margin-bottom: .4rem; }
.dm-p12 #p12_doc_check .a-CardView-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.dm-p12 #p12_doc_check .a-CardView-item { width: auto; flex: none; }
.dm-p12 .p12-dc .a-CardView-mainContent { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem !important; border-radius: 999px; font-size: .8125rem; border: 1px solid var(--p12-line); }
.dm-p12 .p12-dc.is-done .a-CardView-mainContent { color: var(--p12-ok); border-color: color-mix(in srgb, var(--p12-ok) 40%, var(--p12-line)); background: color-mix(in srgb, var(--p12-ok) 7%, var(--p12-surface)); }
.dm-p12 .p12-dc.is-missing .a-CardView-mainContent { color: var(--p12-muted); border-style: dashed; }
.dm-p12 #p12_doclist .a-CardView-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.dm-p12 .dm-doc { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem; border: 1px solid var(--p12-line); border-radius: var(--dm-radius); background: var(--p12-surface); min-width: 0; }
.dm-p12 .dm-doc-ic { --k: var(--p12-info); width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--k) 12%, var(--p12-surface)); color: var(--k); font-size: 18px; }
.dm-p12 .dm-doc-ic.is-pdf { --k: var(--p12-bad); }
.dm-p12 .dm-doc-main { min-width: 0; flex: 1 1 auto; }
.dm-p12 .dm-doc-main b { display: block; font-size: .8125rem; overflow-wrap: anywhere; }
.dm-p12 .dm-doc-meta { display: block; font-size: .75rem; color: var(--p12-muted); margin-top: .15rem; overflow-wrap: anywhere; }
.dm-p12 .dm-doc-act { display: flex; gap: .15rem; flex: none; }
.dm-p12 .dm-doc-act .t-Button { min-width: 40px; min-height: 40px; --a-button-border-color: transparent; --a-button-background-color: transparent; box-shadow: none; }
.dm-p12 .dm-doc-act .t-Button:hover { --a-button-background-color: var(--p12-soft); }

/* visits / cheques lists + empty states */
.dm-p12 #p12_visit_list .a-CardView-items, .dm-p12 #p12_cheque_list .a-CardView-items { display: block; }
.dm-p12 .dm-hist-li .a-CardView-mainContent { padding: .45rem 0 !important; border-bottom: 1px solid var(--p12-line); font-size: .875rem; }
.dm-p12 .dm-hist-li:last-child .a-CardView-mainContent { border-bottom: 0; }
.dm-p12 .dm-empty { text-align: center; padding: 1.5rem .5rem; }
.dm-p12 .dm-empty .t-ButtonRegion-wrap { display: block; }
.dm-p12 .dm-empty .t-ButtonRegion-col--left, .dm-p12 .dm-empty .t-ButtonRegion-col--right { display: none; }
.dm-p12 .dm-empty-ic { font-size: 28px; color: var(--p12-muted); }
.dm-p12 .dm-empty-t { font-weight: 600; margin: .4rem 0 .2rem; }
.dm-p12 .dm-empty-x { color: var(--p12-muted); font-size: .8125rem; margin: 0 0 .6rem; }
.dm-p12 .dm-empty--compact { padding: 1rem .5rem; }

/* verification dialog: method pills */
.dm-p12 #P12_V_ADDR_CONTAINER .apex-item-grid-row { flex-wrap: wrap; }

/* round 5 (MOCKUP_DIFF p12 rows 3-11) */
.dm-p12 #p12_tabs .apex-rds .apex-rds-item a:focus, .dm-p12 #p12_tabs .apex-rds .apex-rds-item a:focus-visible { outline: none; box-shadow: none; }
.dm-p12 #p12_tabs .apex-rds .apex-rds-item a:focus-visible span:not(.dm-tab-n) { text-decoration: underline; }
.dm-p12 .t-BreadcrumbRegion-buttons .t-Button.ep-btn-soft--green { --a-button-background-color: color-mix(in srgb, var(--dm-ok) 10%, var(--p12-surface));
  background-color: color-mix(in srgb, var(--dm-ok) 10%, var(--p12-surface)); }
.dm-p12 .t-BreadcrumbRegion-buttons .t-Button.ep-btn-soft--green[disabled] { opacity: .8; }
.dm-p12 .t-Button.ep-btn-soft--blue { background-color: color-mix(in srgb, var(--dm-info) 9%, var(--p12-surface)); }
/* Plans / Payments / Ledger tables: horizontal lines only, roomy rows, header tint; footer = count left, hint right */
.dm-p12 #p12_plans .t-Report-report, .dm-p12 #p12_payments .t-Report-report, .dm-p12 #p12_ledger .t-Report-report { border: 1px solid var(--p12-line); border-radius: var(--dm-radius); }
.dm-p12 #p12_plans .t-Report-cell, .dm-p12 #p12_payments .t-Report-cell, .dm-p12 #p12_ledger .t-Report-cell,
.dm-p12 #p12_plans .t-Report-colHead, .dm-p12 #p12_payments .t-Report-colHead, .dm-p12 #p12_ledger .t-Report-colHead {
  border-left: 0; border-right: 0; padding: .8rem .75rem; }
.dm-p12 #p12_plans .t-Report-colHead, .dm-p12 #p12_payments .t-Report-colHead, .dm-p12 #p12_ledger .t-Report-colHead { background: var(--p12-soft); font-weight: 600; }
.dm-p12 #p12_plans .t-Report-pagination, .dm-p12 #p12_payments .t-Report-pagination { display: none; }
.dm-p12 .dm-p12-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .75rem 0; }
.dm-p12 .dm-pill .fa { font-size: .85em; }
.dm-p12 .dm-pill:empty, .dm-p12 .dm-pill--LATE:not(:has(*)):empty { display: none; }
.dm-p12 #p12_ledger .dm-lg-note:not(:empty) { display: block; font-size: .75rem; color: var(--p12-muted); margin-top: .1rem; }
.dm-p12 #p12_ledger .dm-lg-bal { font-weight: 700; }
/* empty states: one icon in a soft circle + text + one big hot button (the shell's generic empty icon is not used here) */
.dm-p12 .dm-empty::before, .dm-p12 .dm-empty::after { content: none !important; display: none !important; }
/* the Cards lists' own "no data" magnifier: the empty-state region below already says it */
.dm-p12 #p12_visit_list [class*="noData"], .dm-p12 #p12_cheque_list [class*="noData"], .dm-p12 #p12_doclist [class*="noData"] { display: none !important; }
.dm-p12 .dm-empty-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--p12-soft); font-size: 20px; }
.dm-p12 .dm-empty .t-Button--hot { min-height: 52px; padding: .6rem 1.4rem; font-size: .875rem; }

@media (max-width: 1100px) {
  .dm-p12 #p12_cards .a-CardView-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* page buttons: Take Payment, New Sale first; Print Ledger lives on the ledger page */
  .dm-p12 #p12_title .t-BreadcrumbRegion-top { flex-wrap: wrap; }
  .dm-p12 #p12_title .t-BreadcrumbRegion-body { flex: 1 1 100%; }
  .dm-p12 #p12_title .t-BreadcrumbRegion-titleText { font-size: 1.25rem; }
  .dm-p12 .t-BreadcrumbRegion-buttons--end { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; justify-content: flex-start; margin-top: .5rem; }
  .dm-p12 .t-BreadcrumbRegion-buttons--end .t-Button { width: auto; margin: 0; }
  .dm-p12 #p12_pay { order: -2; } .dm-p12 #p12_sale { order: -1; } .dm-p12 #p12_print { display: none; }
  .dm-p12 .dm-prof-head { gap: .75rem; padding: .85rem; flex-wrap: wrap; }
  .dm-p12 .dm-ava--lg { width: 48px; height: 48px; font-size: 1.05rem; }
  .dm-p12 .dm-prof-main { flex: 1 1 0; }
  .dm-p12 .dm-prof-name { font-size: 1.1rem; }
  .dm-p12 .dm-prof-pill { margin-left: 0; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .dm-p12 .dm-prof-pill .dm-badges { justify-content: flex-start; }
  .dm-p12 #p12_cards .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dm-p12 #p12_cards .a-CardView-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dm-p12 .ep-kpi { padding: .7rem .75rem; min-height: 0; gap: .4rem; }
  /* mockup phone: icon + label on one row, value below */
  .dm-p12 .ep-kpi-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .45rem; row-gap: .35rem; }
  .dm-p12 .ep-kpi-icon { width: 28px; height: 28px; font-size: 13px; }
  .dm-p12 .ep-kpi-txt { display: contents; }
  .dm-p12 .ep-kpi-num { font-size: clamp(.8rem, 12cqi, 1.15rem); }
  .dm-p12 .ep-kpi-label { font-size: .75rem; }
  .dm-p12 .ep-kpi-foot { font-size: .6875rem; }
  /* tabs = chips that wrap (no sideways scroll) */
  .dm-p12 #p12_tabs .apex-rds { gap: .4rem; padding: .75rem; border-bottom: 1px solid var(--p12-line); }
  .dm-p12 #p12_tabs .apex-rds .apex-rds-item a { padding: .45rem .7rem; border: 1px solid var(--p12-line); border-radius: 999px; gap: .35rem; }
  .dm-p12 #p12_tabs .apex-rds .apex-rds-item.apex-rds-selected a, .dm-p12 #p12_tabs .apex-rds .apex-rds-item a[aria-selected="true"] {
    border-color: var(--p12-brand); background: color-mix(in srgb, var(--p12-brand) 10%, var(--p12-surface)); }
  .dm-p12 #p12_info .a-CardView-items, .dm-p12 #p12_ver_dl .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
  .dm-p12 #p12_doclist .a-CardView-items { grid-template-columns: 1fr; }
  .dm-p12 #p12_plans .t-Report-wrap, .dm-p12 #p12_payments .t-Report-wrap, .dm-p12 #p12_ledger .t-Report-wrap,
  .dm-p12 #p12_dochist .t-Report-wrap { overflow-x: auto; }
}

/* ---------------------------------------------------------------- p14 Customer Ledger = the mockup (round 5)
   Title bar sub line, "Period" filter card with pill buttons, 4 tinted total cards (no icons), "Ledger" card with period chip +
   soft Download in the header, plain numbers, total row; phone = one card per row; print = the mockup's khata paper. */
.dm-p14 {
  --p14-surface: var(--ut-component-background-color); --p14-line: var(--ut-component-border-color, var(--dm-line));
  --p14-text: var(--ut-body-text-color); --p14-muted: color-mix(in srgb, var(--ut-body-text-color) 65%, var(--ut-component-background-color));
  --p14-soft: color-mix(in srgb, var(--ut-body-text-color) 4%, var(--ut-component-background-color)); --p14-brand: var(--dm-brand);
}
.dm-p14 #p14_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p14 #p14_title .dm-p14-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--p14-muted); margin-top: .2rem; }
.dm-p14 #p14_title .dm-p14-sub:empty { display: none; }
/* Period card */
.dm-p14 #p14_filters .t-Region-header { border-bottom: 0; }
.dm-p14 #p14_filters .t-Region-title { font-size: .9375rem; font-weight: 700; }
.dm-p14 #p14_filters .t-Region-title .fa { font-size: .9em; margin-right: .3rem; }
.dm-p14 #P14_PERIOD_CONTAINER .t-Form-labelContainer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-p14 #P14_PERIOD_CONTAINER { padding-top: .35rem; }
.dm-p14 #P14_PERIOD .apex-item-grid-row { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--p14-line); border-radius: 999px; overflow: hidden; }
.dm-p14 #P14_PERIOD .apex-item-option { margin: 0; }
.dm-p14 #P14_PERIOD .apex-item-option label { margin: 0; border: 0; border-right: 1px solid var(--p14-line); border-radius: 0; padding: .6rem 1rem;
  font-size: .8125rem; background: var(--p14-surface); color: var(--p14-text); box-shadow: none; }
.dm-p14 #P14_PERIOD .apex-item-option:last-child label { border-right: 0; }
.dm-p14 #P14_PERIOD .apex-item-option input:checked + label { background: var(--p14-brand); color: var(--ut-component-background-color); font-weight: 600; }
/* four total cards: tinted, coloured label, value below, no icon (mockup .dm-total) */
.dm-p14 #p14_totals .a-CardView-items { gap: 1rem; }
.dm-p14 #p14_totals .dm-tot { --k: var(--dm-info); background: color-mix(in srgb, var(--k) 7%, var(--p14-surface)); border: 1px solid color-mix(in srgb, var(--k) 30%, var(--p14-surface));
  box-shadow: none; border-radius: var(--dm-radius); }
.dm-p14 #p14_totals .dm-tot--success { --k: var(--dm-ok); } .dm-p14 #p14_totals .dm-tot--accent { --k: var(--dm-accent); }
.dm-p14 #p14_totals .a-CardView-header { padding: .85rem 1rem; }
.dm-p14 #p14_totals .a-CardView-title { font-size: .8125rem; font-weight: 500; color: color-mix(in srgb, var(--k) 85%, var(--p14-text)); }
.dm-p14 #p14_totals .a-CardView-subTitle { font-size: 1.25rem; font-weight: 700; color: var(--p14-text); margin-top: .25rem; }
/* Ledger card: title + period chip, soft Download in the header; native CSV link hidden (the button clicks it) */
.dm-p14 #p14_ledger .t-Region-title { display: inline-flex; align-items: center; gap: .9rem; font-size: .9375rem; font-weight: 700; }
.dm-p14 .dm-p14-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 400; color: var(--p14-muted); }
.dm-p14 #p14_ledger .t-Region-header { border-bottom: 0; }
.dm-p14 #p14_ledger .t-Report-links { display: none; }
.dm-p14 #p14_ledger .t-Report-report { border: 0; }
.dm-p14 #p14_ledger .t-Report-cell, .dm-p14 #p14_ledger .t-Report-colHead { border-left: 0; border-right: 0; padding: .85rem .75rem; vertical-align: top; }
.dm-p14 #p14_ledger .t-Report-colHead { background: var(--p14-soft); font-weight: 600; }
.dm-p14 #p14_ledger .dm-lg-note:not(:empty) { display: block; font-size: .75rem; color: var(--p14-muted); margin-top: .15rem; white-space: normal; }
.dm-p14 #p14_ledger .dm-lg-bal { font-weight: 700; }
.dm-p14 #p14_ledger .dm-cl { display: none; }
.dm-p14 #p14_ledger .dm-lg--previous { font-style: italic; color: var(--p14-muted); }
.dm-p14 #p14_ledger .dm-lg--migration { color: var(--p14-muted); font-style: italic; }
.dm-p14 #p14_ledger .dm-lg--payment_cancelled, .dm-p14 #p14_ledger .dm-lg--sale_cancelled, .dm-p14 #p14_ledger .dm-lg--adjustment_cancelled { color: var(--dm-bad); }
.dm-p14 #p14_ledger tr:has(.dm-lg--total) td { font-weight: 700; background: var(--p14-soft); border-top: 2px solid var(--p14-line); }
.dm-p14 #p14_ledger .t-Report-wrap { overflow-x: auto; }
.dm-print-only { display: none; }
@media (max-width: 639.98px) {
  .dm-p14 #p14_totals .a-CardView-items { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .dm-p14 #p14_totals .a-CardView-subTitle { font-size: 1.05rem; }
  .dm-p14 #P14_PERIOD .apex-item-option label { padding: .55rem .7rem; }
  /* ledger rows = stacked cards: date, link + sub line, three labelled amounts (mockup pages_fix.css data-l) */
  .dm-p14 #p14_ledger .t-Report-wrap { overflow: visible; }
  .dm-p14 #p14_ledger table.t-Report-report, .dm-p14 #p14_ledger table.t-Report-report > tbody,
  .dm-p14 #p14_ledger table.t-Report-report tr, .dm-p14 #p14_ledger table.t-Report-report td { display: block; width: 100%; box-sizing: border-box; }
  .dm-p14 #p14_ledger table.t-Report-report tr:has(> th) { display: none; }
  .dm-p14 #p14_ledger table.t-Report-report tr { border: 1px solid var(--p14-line); border-radius: var(--dm-radius); margin-bottom: .6rem; padding: .55rem .75rem; background: var(--p14-surface); }
  .dm-p14 #p14_ledger table.t-Report-report td { border: 0; padding: .15rem 0; text-align: left; }
  .dm-p14 #p14_ledger td[headers="SALE_AMOUNT"], .dm-p14 #p14_ledger td[headers="PAID_AMOUNT"], .dm-p14 #p14_ledger td[headers="BALANCE"] {
    display: flex; justify-content: space-between; gap: .75rem; }
  .dm-p14 #p14_ledger td .dm-cl { display: inline; color: var(--p14-muted); font-size: .75rem; font-weight: 400; }
  .dm-p14 #p14_ledger td[headers="ENTRY_DATE"] { font-size: .75rem; color: var(--p14-muted); }
  .dm-p14 #p14_ledger tr:has(.dm-lg--total) td { border-top: 0; background: transparent; }
  .dm-p14 #p14_ledger tr:has(.dm-lg--total) { background: var(--p14-soft); }
}
@media print {
  /* the mockup's khata paper: title + sub line, 4 tinted totals, one box = "Ledger" + period, shop head, table, total row, printed-on line */
  .dm-p14 #p14_title.t-BreadcrumbRegion { display: block !important; border: 0; padding: 0 0 2mm; }
  .dm-p14 #p14_title .t-BreadcrumbRegion-buttons { display: none !important; }
  .dm-p14 .dm-print-only { display: block !important; }
  .dm-p14 #p14_totals .a-CardView-items { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 3mm !important; }
  .dm-p14 #p14_totals .a-CardView.dm-tot { background: color-mix(in srgb, var(--k) 7%, Canvas) !important; border: 1px solid color-mix(in srgb, var(--k) 30%, Canvas) !important; }
  .dm-p14 #p14_totals .dm-tot .a-CardView-title { color: color-mix(in srgb, var(--k) 85%, CanvasText) !important; }
  .dm-p14 #p14_printhead.t-Region { margin: 4mm 0 2mm !important; }
  .dm-p14 #p14_printhead .t-Region-body, .dm-p14 #p14_ledger .t-Region-body, .dm-p14 .dm-p14-pf .t-Region-body { padding: 0 !important; }
  .dm-p14 #p14_ledger.t-Region { margin: 0 !important; }
  .dm-p14 #p14_ledger .t-Region-header { display: none !important; }
  .dm-p14 .dm-p14-pf.t-Region { margin: 2mm 0 0 !important; }
  .dm-p14 .dm-p14-pf, .dm-p14 .dm-p14-pf * { font-size: 11px !important; color: GrayText !important; }
  .dm-p14 #p14_ledger .t-Report-colHead { background: color-mix(in srgb, CanvasText 5%, Canvas) !important; }
  .dm-p14 #p14_ledger tr:has(.dm-lg--total) td { background: color-mix(in srgb, CanvasText 5%, Canvas) !important; }
  .dm-p14 #p14_ledger .dm-sub, .dm-p14 #p14_ledger .dm-lg-note { color: GrayText !important; }
  .dm-p14-ph-reg { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 3mm; }
  .dm-p14-ph-reg span { color: GrayText; font-size: 11px; }
  .dm-p14-ph-shop { font-size: 17px; font-weight: 700; }
  .dm-p14-ph-phone { font-size: 11px; }
  .dm-p14-ph-phone:empty { display: none; }
  .dm-p14-ph-title { font-size: 12px; font-weight: 700; margin: 1mm 0 2mm; }
  .dm-p14-ph-meta { display: flex; flex-wrap: wrap; gap: 1mm 6mm; font-size: 12px; }
}

/* ---------------------------------------------------------------- p11 Customer Form / p13 Customer Document (dialogs, round 5 = mockup) */
.dm-p11 #p11_more .t-Region-title { font-size: .875rem; font-weight: 600; color: var(--dm-brand); }
.dm-p11 .dm-p11-more-hint { margin-left: .5rem; font-size: .75rem; font-weight: 400; color: var(--dm-muted); }
.dm-p11 #p11_more, .dm-p11 #p11_main { margin-bottom: .25rem; }
.dm-p11 #P11_CNIC_ON_FILE_CONTAINER .t-Form-inputContainer, .dm-p11 #P11_CNIC_ON_FILE { font-weight: 400; font-size: .75rem; color: var(--dm-muted); }
.dm-p11 #P11_CNIC_ON_FILE_CONTAINER { padding-top: 0; margin-top: -.5rem; }
.dm-p11 .t-Button--hot, .dm-p13 .t-Button--hot { background-color: var(--dm-brand); border-color: var(--dm-brand); }
/* p13 file box: dashed box, button + "No file chosen - PDF, JPG or PNG, max 5 MB" on one line, no separate label */
.dm-p13 #P13_FILE_CONTAINER { border: 1px dashed var(--ut-component-border-color, var(--dm-line)); border-radius: var(--dm-radius); padding: .75rem;
  background: color-mix(in srgb, var(--ut-body-text-color) 3%, var(--ut-component-background-color)); }
.dm-p13 #P13_FILE_CONTAINER .t-Form-labelContainer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-p13 #P13_FILE_CONTAINER .t-Form-inputContainer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.dm-p13 #P13_FILE_CONTAINER .t-Form-helpText, .dm-p13 #P13_FILE_CONTAINER .t-Form-inlineHelp { margin: 0; font-size: .8125rem; color: var(--dm-muted); }

/* ---------------------------------------------------------------- p15 Do Not Give Installments */
.dm-pill--FLAGGED { color: var(--dm-bad); }
#p15_flags .dm-row--removed { color: var(--dm-muted); }
#p15_flags .dm-p15-guar { display: block; color: var(--dm-bad); font-size: 12px; font-weight: 600; }
#p15_flags .dm-unflag { min-width: 40px; min-height: 40px; }
/* round 5 = mockup: sub line in the title bar, ONE red-tinted "On the list" card, search box inside a card (no label), no Actions
   menu, columns Name / CNIC / Reason / Added / Status / restore icon, dark grey headers, phone = one card per person */
.dm-p15 #p15_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p15 #p15_title .dm-p15-sub { display: block; font-size: .8125rem; font-weight: 400; margin-top: .2rem;
  color: color-mix(in srgb, var(--ut-body-text-color) 65%, var(--ut-component-background-color)); }
#p15_kpis .dm-tot { --k: var(--dm-bad); background: color-mix(in srgb, var(--k) 7%, var(--ut-component-background-color));
  border: 1px solid color-mix(in srgb, var(--k) 30%, var(--ut-component-background-color)); box-shadow: none; border-radius: var(--dm-radius); }
#p15_kpis .a-CardView-title { font-size: .8125rem; font-weight: 500; color: color-mix(in srgb, var(--k, var(--dm-bad)) 85%, var(--ut-body-text-color)); }
#p15_kpis .a-CardView-subTitle { font-size: 1.375rem; font-weight: 700; color: var(--ut-body-text-color); }
.dm-p15 .dm-find { background: var(--ut-component-background-color); border: 1px solid var(--ut-component-border-color, var(--dm-line));
  border-radius: var(--dm-radius); padding: .75rem; margin-bottom: 1rem; }
.dm-p15 #P15_SEARCH_CONTAINER .t-Form-labelContainer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-p15 #P15_SEARCH_CONTAINER .t-Form-itemWrapper > .apex-item-icon, .dm-p15 #P15_SEARCH_CONTAINER .t-Form-inputContainer .apex-item-icon { background: transparent; border: 0; }
.dm-p15 #p15_flags .a-IRR-header, .dm-p15 #p15_flags .a-IRR-headerLink, .dm-p15 #p15_flags .a-IRR-headerLabel {
  color: color-mix(in srgb, var(--ut-body-text-color) 80%, var(--ut-component-background-color)); }
.dm-p15 #p15_flags .a-IRR-header .a-IRR-sortIndicator { display: none; }
.dm-p15 #p15_flags th#FLAG_ACTION .a-IRR-headerLink, .dm-p15 #p15_flags th#FLAG_ACTION .a-IRR-headerLabel { visibility: hidden; }
.dm-p15 #p15_flags .a-IRR-table td { border-left: 0; border-right: 0; }
@media (max-width: 639.98px) {
  #p15_kpis .a-CardView-items { grid-template-columns: 1fr; }
  /* phone: each person = one card, status badge top right */
  .dm-p15 #p15_flags .a-IRR-tableContainer { overflow: visible; }
  .dm-p15 #p15_flags table.a-IRR-table, .dm-p15 #p15_flags table.a-IRR-table tbody, .dm-p15 #p15_flags table.a-IRR-table tr,
  .dm-p15 #p15_flags table.a-IRR-table td { display: block; width: 100%; box-sizing: border-box; }
  .dm-p15 #p15_flags table.a-IRR-table tr:has(> th) { display: none; }
  .dm-p15 #p15_flags table.a-IRR-table tr { position: relative; border: 1px solid var(--ut-component-border-color, var(--dm-line)); border-radius: var(--dm-radius);
    margin-bottom: .6rem; padding: .6rem .75rem; }
  .dm-p15 #p15_flags table.a-IRR-table td { border: 0; padding: .1rem 0; }
  .dm-p15 #p15_flags td[headers="STATUS_LABEL"] { position: absolute; top: .55rem; right: .6rem; width: auto; }
  .dm-p15 #p15_flags td[headers="FLAG_ACTION"] { text-align: right; }
  .dm-p15 #p15_flags td[headers="PERSON_NAME"] { padding-right: 8rem; font-weight: 600; }
}
/* D-249 A: p15 "Do not give installments" add / remove dialog was 416 px wide inside a 390 px phone (intro line, Reason box and
   "Add to list" ran off the right edge) - the dialog region parts take the dialog width */
@media (max-width: 640px) {
  #p15_add .t-DialogRegion-wrap, #p15_add .t-DialogRegion-bodyWrapperOut, #p15_add .t-DialogRegion-bodyWrapperIn, #p15_add .t-DialogRegion-body,
  #p15_remove .t-DialogRegion-wrap, #p15_remove .t-DialogRegion-bodyWrapperOut, #p15_remove .t-DialogRegion-bodyWrapperIn, #p15_remove .t-DialogRegion-body {
    width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  #p15_add .row, #p15_remove .row { margin-left: 0; margin-right: 0; }
}
/* R1 retest 2026-10-26 (A-31 follow-up): the dialog intro line (.dm-sub = nowrap) still ran past the right edge on the phone
   ("...also as a guaranto") - wrap it inside the dialog */
#p15_add .dm-sub, #p15_remove .dm-sub { white-space: normal; overflow-wrap: anywhere; }