/* dm_suppliers.css - module styles (suppliers pages 50-57 only; selectors prefixed with the APEX body class .page-NN). Owner: the suppliers module (D-136).
   Tokens from app.css (--dm-*, --ut-*), no hex colours. */

/* ---------------------------------------------------------------- shared parts of the module */
:is(.page-50, .page-52, .page-55, .page-56, .page-57) .dm-money--warn { color: var(--dm-warn); font-weight: 700; }
:is(.page-50, .page-52, .page-55, .page-56, .page-57) .dm-money--info { color: var(--dm-info); font-weight: 600; }
:is(.page-52, .page-55) .dm-kpi--warn .a-CardView-subTitle { color: var(--dm-warn) !important; }
:is(.page-52, .page-55) .dm-kpi--info .a-CardView-subTitle { color: var(--dm-info) !important; }
:is(.page-50, .page-52, .page-55) .dm-pill--PURCHASE, :is(.page-50, .page-52, .page-55) .dm-pill--CONFIRMED { color: var(--dm-ok); }
:is(.page-50, .page-52, .page-55) .dm-pill--RETURN { color: var(--dm-info); }
:is(.page-50, .page-52, .page-55, .page-57) .dm-pill--CANCELLED { color: var(--dm-bad); }
:is(.page-55, .page-56, .page-57) .dm-note { color: var(--dm-muted); font-size: 13px; }
:is(.page-55, .page-56, .page-57) .dm-note--warn { color: var(--dm-warn); }
.page-55 .dm-chip { display: inline-block; padding: 0 6px; margin: 1px; border: 1px solid var(--dm-line); border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; }
.page-55 .dm-up { color: var(--dm-warn); }
.page-55 .dm-down { color: var(--dm-ok); }
.page-50 .dm-foot { text-align: right; font-weight: 600; }
.page-50 .dm-foot .t-Report-report { border: 0; }
.ep-btn-soft--red { --a-button-text-color: var(--dm-bad); --a-button-border-color: var(--dm-bad); }

/* phone / desktop twins (D-103: lists become cards at <= 640 px, no sideways scroll) */
:is(.page-50, .page-55) .dm-phone-only { display: none; }

/* p50: row click + empty states (JS fills .dm-empty after the list is empty) */
.page-50 #p50_suppliers td { cursor: pointer; }
.page-50 #p50_suppliers td a { cursor: pointer; }
.page-50 .dm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.page-50 .dm-empty-t { font-size: 18px; font-weight: 700; color: var(--dm-text, inherit); }
.page-50 .dm-empty-s { color: var(--dm-muted); }
.page-50 .dm-empty-btn { min-height: 40px; margin-top: 4px; }

/* ---------------------------------------------------------------- round 5 (mockup D-152): shared list look p50 / p55 */
/* title-bar sub line (region in the breadcrumb position, like p30) */
:is(.page-50, .page-52, .page-55, .page-56, .page-57) .dm-subline { color: var(--dm-muted); font-size: 13px; margin: -6px 0 0; padding: 0 16px 4px; }
:is(.page-50, .page-52, .page-55, .page-56, .page-57) .dm-subline .t-Region-body { padding: 0; }
/* initials circles: one tone per supplier (mockup tone()) */
:is(.page-50, .page-52, .page-55) .dm-avatar, .page-50 .dm-sup-card .a-CardView-initials { --k: var(--dm-brand); background: color-mix(in srgb, var(--k) 14%, transparent) !important; color: var(--k) !important; }
:is(.page-50, .page-52, .page-55) .dm-av--1, .page-50 .dm-sup-card .dm-av--1 { --k: var(--dm-info); }
:is(.page-50, .page-52, .page-55) .dm-av--2, .page-50 .dm-sup-card .dm-av--2 { --k: var(--dm-accent); }
:is(.page-50, .page-52, .page-55) .dm-av--3, .page-50 .dm-sup-card .dm-av--3 { --k: var(--dm-teal); }
:is(.page-50, .page-52, .page-55) .dm-av--4, .page-50 .dm-sup-card .dm-av--4 { --k: var(--dm-warn); }
:is(.page-50, .page-52, .page-55) .dm-pill:empty { display: none; }
:is(.page-50, .page-52, .page-55) .dm-pill--INACTIVE { color: var(--dm-muted); font-size: 12px; padding: 1px 8px; border: 1px solid var(--dm-line); border-radius: 999px; white-space: nowrap; }

/* p50: one list card = search + Filters (left) | Actions + New Supplier (right, the IR toolbar moved up), table, footer */
.page-50 .dm-p50-list > .t-Region-bodyWrap > .t-Region-body { padding: 0; }
.page-50 .dm-p50-find { padding: 4px 16px 0; position: relative; z-index: 2; pointer-events: none; }
.page-50 .dm-p50-find .t-Form-fieldContainer, .page-50 .dm-p50-find .t-Button { pointer-events: auto; }
.page-50 .dm-p50-find .t-Form-labelContainer { display: none; }
.page-50 .dm-p50-find .col-5 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 100%; }
.page-50 .dm-p50-find .t-Form-fieldContainer { flex: 0 1 360px; width: 360px; padding: 0; }
.page-50 .dm-p50-find .t-Form-inputContainer { width: 100%; max-width: 100%; }
.page-50 .dm-p50-find input.text_field { width: 100%; height: 32px; }
.page-50 .dm-p50-find .t-Button { margin: 0; height: 32px; flex: 0 0 auto; }
.page-50 #p50_filters { display: none; margin: 8px 16px 0; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); }
.page-50 #p50_filters.is-open { display: block; }
.page-50 #p50_filters .t-Region-body .t-Button { margin-top: 8px; }
:is(.page-50, .page-55) #dm_filters.is-active { --a-button-border-color: var(--dm-brand); --a-button-text-color: var(--dm-brand); }
/* owner bug 2026-10-20: the toolbar is anchored to the TOP of the list card (absolute) - an open Filters panel opens below it as its own block */
.page-50 .dm-p50-list .col, .page-50 #p50_suppliers .a-IRR-container, .page-50 #p50_suppliers .a-IRR { position: static; }
.page-50 .dm-p50-list > .t-Region-bodyWrap > .t-Region-body { position: relative; }
.page-50 #p50_suppliers .a-IRR-toolbar { position: absolute; top: 8px; right: 16px; z-index: 3; width: auto; display: flex; align-items: center; justify-content: flex-end; background: transparent; border: 0; margin: 0; padding: 0; min-height: 32px; }
.page-50 #p50_suppliers .a-IRR-controls, .page-50 #p50_suppliers .a-IRR-buttons { justify-content: flex-end; align-items: center; margin: 0; padding: 0; }
.page-50 .dm-p50-find { padding-bottom: 12px; }
.page-50 #p50_suppliers .a-IRR-container, .page-50 #p50_suppliers .t-IRR-region, .page-50 #p50_suppliers .a-IRR { border: 0; box-shadow: none; }
.page-50 #p50_suppliers .a-IRR-table td { vertical-align: middle; }
/* row actions: no header text, narrow icon columns */
.page-50 #p50_suppliers th#EDIT_ID .a-IRR-headerLabel, .page-50 #p50_suppliers th#EDIT_ID .a-IRR-headerLink { font-size: 0; }
.page-50 #p50_suppliers td[headers="EDIT_ID"], .page-50 #p50_suppliers td.a-IRR-linkCol { width: 36px; padding-left: 8px; padding-right: 4px; }
.page-50 #p50_suppliers td[headers="EDIT_ID"] { border-left: 0; }
/* name in dark text (row click opens the profile), dates / area on one line, payable second line wraps in a narrow block */
.page-50 #p50_suppliers td[headers="SUPPLIER_NAME"] a, .page-50 #p50_suppliers td[headers="SUPPLIER_NAME"] a .dm-name { color: var(--dm-text); text-decoration: none; font-weight: 600; }
.page-50 #p50_suppliers td[headers="SUPPLIER_NAME"] .dm-sub { display: block; color: var(--dm-muted); font-weight: 400; font-size: 12px; }
.page-50 #p50_suppliers td[headers="AREA_NAME"] { min-width: 110px; }
.page-50 #p50_suppliers td[headers="LAST_PURCHASE_DATE"], .page-50 #p50_suppliers td[headers="LAST_PAYMENT_DATE"], .page-50 #p50_suppliers td[headers="SUPPLIER_CODE"] { white-space: nowrap; }
.page-50 #p50_suppliers td[headers="PAYABLE"] { width: 1%; white-space: nowrap; }
.page-50 #p50_suppliers td[headers="PAYABLE"] .dm-sub { display: block; white-space: normal; max-width: 280px; margin-left: auto; color: var(--dm-muted); font-size: 12px; }
.page-50 #p50_suppliers .a-IRR-table tbody tr:hover td { background: var(--dm-brand-tint); }
/* footer: "1 - 8 of 8" left, total right, one line inside the card */
.page-50 #p50_suppliers .a-IRR-paginationWrap { border: 0; padding: 10px 16px; }
.page-50 .dm-p50-list .dm-foot { margin: -30px 0 0 auto; width: max-content; max-width: 70%; position: relative; padding: 0 16px 10px; font-weight: 400; color: var(--dm-muted); font-size: 13px; }
.page-50 .dm-p50-list .dm-foot .t-Report-report, .page-50 .dm-p50-list .dm-foot td { border: 0; background: transparent; padding: 0; }

/* ---------------------------------------------------------------- p51 supplier dialog (round 5, mockup p51) */
/* read-only Supplier Code: small label above, big bold code, no box */
.page-51 #P51_CODE_SHOW_CONTAINER .t-Form-inputContainer, .page-51 #P51_CODE_SHOW_CONTAINER .t-Form-itemWrapper,
.page-51 #P51_CODE_SHOW_CONTAINER .apex-item-display-only { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.page-51 #P51_CODE_SHOW { font-size: 18px; font-weight: 700; letter-spacing: .5px; color: var(--dm-text); }
/* "More details" = a plain expander line (green chevron + title + grey hint), no boxed region */
.page-51 #p51_more { border: 0; box-shadow: none; background: transparent; margin-top: 4px; }
.page-51 #p51_more > .t-Region-header { background: transparent; border: 0; padding: 4px 0; min-height: 0; }
.page-51 #p51_more .t-Button--hideShow { border: 0; background: transparent; box-shadow: none; color: var(--dm-brand); }
.page-51 #p51_more .t-Region-title { font-size: 14px; }
.page-51 #p51_more .t-Region-titleButton { color: var(--dm-brand); font-weight: 600; }
.page-51 #p51_more .dm-more-hint { color: var(--dm-muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.page-51 #p51_more > .t-Region-bodyWrap { border: 0; }
.page-51 #p51_more .t-Region-body { padding: 8px 0 0; }

/* ---------------------------------------------------------------- p52 profile, round 5 = the mockup (same parts as the p12 customer profile) */
.dm-p52 {
  --s-ok: var(--dm-ok); --s-bad: var(--dm-bad); --s-warn: var(--dm-warn); --s-info: var(--dm-info); --s-accent: var(--dm-accent);
  --s-neutral: var(--dm-muted); --s-brand: var(--dm-brand);
  --s-surface: var(--ut-component-background-color); --s-line: var(--ut-component-border-color, var(--dm-line));
  --s-text: var(--ut-body-text-color); --s-muted: color-mix(in srgb, var(--ut-body-text-color) 70%, var(--ut-component-background-color));
  --s-soft: color-mix(in srgb, var(--ut-body-text-color) 4%, var(--ut-component-background-color));
}
.dm-p52 #p52_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p52 #p52_title .dm-p52-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--s-muted); margin-top: .2rem; }
.dm-p52 .t-Button.ep-btn-soft--blue { background-color: color-mix(in srgb, var(--dm-info) 9%, var(--s-surface)); }
/* Cards regions used as plain containers */
.dm-p52 :is(#p52_head, #p52_cards, #p52_info) .a-CardView-items { margin: 0; padding: 0; }
.dm-p52 :is(#p52_head, #p52_cards, #p52_info) .a-CardView { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; }
.dm-p52 :is(#p52_head, #p52_cards, #p52_info) .a-CardView-body, .dm-p52 :is(#p52_head, #p52_cards, #p52_info) .a-CardView-mainContent { padding: 0; margin: 0; }
.dm-p52 :is(#p52_head, #p52_cards, #p52_info) .a-CardView-header { display: none; }
.dm-p52 .a-CardView-item { min-width: 0; }
/* badges */
.dm-p52 .ep-badge { --b: var(--s-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(--s-surface)); border: 1px solid color-mix(in srgb, var(--b) 40%, var(--s-surface));
  color: color-mix(in srgb, var(--b) 88%, var(--s-text)); }
.dm-p52 .ep-badge.u-success { --b: var(--s-ok); } .dm-p52 .ep-badge.u-normal { --b: var(--s-neutral); }
.dm-p52 .dm-zero, .dm-p52 .dm-muted { color: var(--s-muted); }
/* header card */
.dm-p52 #p52_head { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--dm-radius); margin-bottom: 1rem;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--s-text) 8%, transparent); }
.dm-p52 .dm-prof-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
.dm-p52 .dm-ava { --k: var(--dm-brand); display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: 700;
  background: color-mix(in srgb, var(--k) 14%, var(--s-surface)); color: var(--k); }
.dm-p52 .dm-ava.dm-av--1 { --k: var(--dm-info); } .dm-p52 .dm-ava.dm-av--2 { --k: var(--dm-accent); }
.dm-p52 .dm-ava.dm-av--3 { --k: var(--dm-teal); } .dm-p52 .dm-ava.dm-av--4 { --k: var(--dm-warn); }
.dm-p52 .dm-ava--lg { width: 72px; height: 72px; font-size: 1.6rem; }
.dm-p52 .dm-prof-main { min-width: 0; flex: 1 1 260px; }
.dm-p52 .dm-prof-name { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.3; }
.dm-p52 .dm-prof-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; font-size: .8125rem; color: var(--s-muted); }
.dm-p52 .dm-prof-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.dm-p52 .dm-prof-pill { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; font-size: .8125rem; color: var(--s-muted); }
.dm-p52 .dm-prof-pill b { color: var(--s-text); }
/* five tinted cards */
.dm-p52 #p52_cards { margin-bottom: 1rem; }
.dm-p52 #p52_cards .a-CardView-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.dm-p52 .ep-kpi { --k: var(--s-neutral); 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(--s-surface)); border: 1px solid color-mix(in srgb, var(--k) 24%, var(--s-surface));
  color: var(--s-text); text-decoration: none; height: 100%; box-sizing: border-box; }
.dm-p52 .ep-kpi:hover { text-decoration: none; box-shadow: 0 8px 18px color-mix(in srgb, var(--k) 22%, transparent); }
.dm-p52 .ep-kpi--success { --k: var(--s-ok); } .dm-p52 .ep-kpi--warning { --k: var(--s-warn); }
.dm-p52 .ep-kpi--info { --k: var(--s-info); } .dm-p52 .ep-kpi--neutral { --k: var(--s-neutral); }
.dm-p52 .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-p52 .ep-kpi-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: var(--s-surface); font-size: 18px; }
.dm-p52 .ep-kpi-txt { display: contents; }
.dm-p52 .ep-kpi-label { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: color-mix(in srgb, var(--k) 85%, var(--s-text)); }
.dm-p52 .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; }
.dm-p52 .ep-kpi-num small { font-size: .62em; font-weight: 600; color: var(--s-muted); margin-right: .15rem; }
.dm-p52 .ep-kpi-foot { display: block; font-size: .75rem; line-height: 1.3; color: var(--s-muted); margin-top: auto; }
/* tabs + panels = one white box */
.dm-p52 #p52_tabs { background: var(--s-surface); border: 1px solid var(--s-line); border-bottom: 0; border-radius: var(--dm-radius) var(--dm-radius) 0 0; margin-bottom: 0; }
.dm-p52 #p52_tabs .apex-rds-container { border: 0; background: transparent; }
.dm-p52 #p52_tabs .apex-rds { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--s-line); padding: 0 .75rem; background: transparent; box-shadow: none; }
.dm-p52 #p52_tabs .apex-rds .apex-rds-item { flex: none; }
.dm-p52 #p52_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(--s-muted); white-space: nowrap; box-shadow: none; }
.dm-p52 #p52_tabs .apex-rds .apex-rds-item.apex-rds-selected a, .dm-p52 #p52_tabs .apex-rds .apex-rds-item a[aria-selected="true"] {
  color: var(--s-brand); border-bottom-color: var(--s-brand); background: transparent; }
.dm-p52 #p52_tabs .apex-rds .apex-rds-item a:focus, .dm-p52 #p52_tabs .apex-rds .apex-rds-item a:focus-visible { outline: none; box-shadow: none; }
.dm-p52 #p52_tabs .apex-rds .apex-rds-item a .fa, .dm-p52 #p52_tabs .apex-rds .apex-rds-item a .t-Icon { font-size: 14px; margin: 0; }
.dm-p52 .dm-tab-n { margin-left: .4rem; font-size: .6875rem; min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--s-soft); border: 1px solid var(--s-line);
  color: var(--s-muted); text-align: center; line-height: 1.45; display: inline-block; }
.dm-p52 .dm-p52-panel { background: var(--s-surface); border: 1px solid var(--s-line); border-top: 0; border-radius: 0 0 var(--dm-radius) var(--dm-radius); box-shadow: none; }
.dm-p52 .dm-p52-panel > .t-Region-bodyWrap > .t-Region-body { padding: 1rem; }
/* tab head row + footer row */
.dm-p52 .dm-tabpanel-head { margin-bottom: .75rem; }
.dm-p52 .dm-tabpanel-head.t-ButtonRegion { background: transparent; border: 0; padding: 0; box-shadow: none; }
.dm-p52 .dm-tabpanel-head .t-ButtonRegion-wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 0; }
.dm-p52 .dm-tabpanel-head .t-ButtonRegion-col--left { display: none; }
.dm-p52 .dm-tabpanel-head .t-ButtonRegion-col--content { flex: 1 1 auto; padding: 0; }
.dm-p52 .dm-tabpanel-title { font-size: .875rem; margin: 0; color: var(--s-muted); }
.dm-p52 .dm-tabpanel-title b { color: var(--s-text); }
.dm-p52 .dm-tabfoot .t-Region-body, .dm-p52 .dm-tabfoot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .75rem 0; font-size: .8125rem; color: var(--s-muted); }
/* Info: label above value, 3 per row */
.dm-p52 #p52_info .a-CardView-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.dm-p52 .a-CardView-item:has(.dm-dli.is-full), .dm-p52 .a-CardView-item.is-full, .dm-p52 .dm-dli.is-full { grid-column: 1 / -1; }
.dm-p52 .dm-dt { font-size: .6875rem; font-weight: 600; color: var(--s-muted); text-transform: uppercase; letter-spacing: .03em; }
.dm-p52 .dm-dd { margin-top: .15rem; font-size: .875rem; overflow-wrap: anywhere; }
.dm-p52 .dm-wa, .dm-p52 .dm-tel { color: var(--s-ok); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
/* tables: horizontal lines, header tint, pills with icons, plain bill numbers */
.dm-p52 .dm-p52-table .t-Report-report { border: 1px solid var(--s-line); border-radius: var(--dm-radius); }
.dm-p52 .dm-p52-table .t-Report-cell, .dm-p52 .dm-p52-table .t-Report-colHead { border-left: 0; border-right: 0; padding: .75rem; vertical-align: middle; }
.dm-p52 .dm-p52-table .t-Report-colHead { background: var(--s-soft); font-weight: 600; }
.dm-p52 .dm-p52-table .t-Report-pagination, .dm-p52 .dm-p52-table .t-Report-links { display: none; }
.dm-p52 .dm-plain-link { color: var(--s-text); text-decoration: none; }
.dm-p52 .dm-sub { display: block; font-size: .75rem; color: var(--s-muted); }
.dm-p52 .dm-nowrap { white-space: nowrap; }
.dm-p52 .dm-pill { padding: .1rem .6rem; font-size: .75rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
  background: color-mix(in srgb, currentColor 10%, var(--s-surface)); border-color: color-mix(in srgb, currentColor 40%, var(--s-surface)); }
.dm-p52 .dm-pill--PURCHASE { color: var(--s-muted); }
.dm-p52 .dm-pill--RETURN { color: var(--s-accent); }
.dm-p52 .dm-pill--CONFIRMED, .dm-p52 .dm-pill--ACTIVE { color: var(--s-ok); }
.dm-p52 .dm-pill--CANCELLED { color: var(--s-bad); }
/* Ledger tab: Period card, 4 tinted totals, Ledger card with chip + Print / Download, notes, total row */
.dm-p52 .dm-p52-periodcard, .dm-p52 .dm-p52-ledgercard { border: 1px solid var(--s-line); border-radius: var(--dm-radius); box-shadow: none; margin-bottom: 1rem; }
.dm-p52 .dm-p52-periodcard > .t-Region-header, .dm-p52 .dm-p52-ledgercard > .t-Region-header { border: 0; background: transparent; }
.dm-p52 .dm-p52-periodcard .t-Region-title, .dm-p52 .dm-p52-ledgercard .t-Region-title { font-size: .9375rem; font-weight: 700; }
.dm-p52 .dm-p52-periodcard .t-Region-headerItems--title .t-Icon, .dm-p52 .dm-p52-periodcard .t-Region-headerIcon { font-size: 14px; }
.dm-p52 .dm-p52-periodcard .t-Region-body { padding-top: 0; }
.dm-p52 #P52_PERIOD_CONTAINER .t-Form-labelContainer { display: none; }
.dm-p52 #P52_PERIOD_CONTAINER .t-Form-inputContainer { width: auto; }
.dm-p52 #P52_PERIOD .apex-item-grid { display: inline-flex; border: 1px solid var(--s-line); border-radius: 999px; overflow: hidden; width: auto; }
.dm-p52 #P52_PERIOD .apex-item-grid-row { display: contents; }
.dm-p52 #P52_PERIOD .apex-item-option { margin: 0; }
.dm-p52 #P52_PERIOD .apex-item-option input { position: absolute; opacity: 0; }
.dm-p52 #P52_PERIOD .apex-item-option label { display: inline-block; padding: .55rem 1rem; margin: 0; border-left: 1px solid var(--s-line); font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.dm-p52 #P52_PERIOD .apex-item-option:first-child label { border-left: 0; }
.dm-p52 #P52_PERIOD .apex-item-option input:checked + label { background: var(--s-brand); color: var(--dm-on-brand); font-weight: 600; }
.dm-p52 #P52_PERIOD .apex-item-option input:focus-visible + label { outline: 2px solid var(--s-info); outline-offset: -2px; }
.dm-p52 #p52_ltotals { margin-bottom: 1rem; }
.dm-p52 #p52_ltotals .a-CardView-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dm-p52 .a-CardView.dm-lt { --k: var(--s-info); background: color-mix(in srgb, var(--k) 7%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--k) 30%, var(--s-surface)); box-shadow: none; }
.dm-p52 .a-CardView.dm-lt--ok { --k: var(--s-ok); } .dm-p52 .a-CardView.dm-lt--accent { --k: var(--s-accent); }
.dm-p52 .dm-lt .a-CardView-title { font-size: .75rem; font-weight: 600; color: var(--k); }
.dm-p52 .dm-lt .a-CardView-subTitle { font-size: 1.15rem; font-weight: 700; color: var(--s-text); opacity: 1; }
.dm-p52 .dm-chip-cal { font-size: .75rem; font-weight: 400; color: var(--s-muted); margin-left: .6rem; }
.dm-p52 #p52_ledger_rows .t-Report-wrap, .dm-p52 #p52_ledger_rows table { width: 100%; }
.dm-p52 #p52_ledger_rows .t-Report-report { border: 0; }
.dm-p52 #p52_ledger_rows .dm-lg-main { color: var(--s-ok); text-decoration: none; }
.dm-p52 #p52_ledger_rows span.dm-lg-main { color: var(--s-text); }
.dm-p52 #p52_ledger_rows .dm-lg-note { display: block; font-size: .75rem; color: var(--s-muted); }
.dm-p52 #p52_ledger_rows tr:has(.dm-lg-total) td { background: var(--s-soft); font-weight: 700; border-top: 2px solid var(--s-line); }
.dm-p52 #p52_ledger_rows td[headers="BALANCE"] { font-weight: 700; }
@media (max-width: 1100px) { .dm-p52 #p52_cards .a-CardView-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .dm-p52 #p52_title .t-BreadcrumbRegion-titleText { font-size: 1.25rem; }
  .dm-p52 .t-BreadcrumbRegion-buttons--end { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; justify-content: flex-start; margin-top: .5rem; }
  .dm-p52 .t-BreadcrumbRegion-buttons--end .t-Button { width: auto; margin: 0; }
  .dm-p52 .dm-prof-head { gap: .75rem; padding: .85rem; flex-wrap: wrap; }
  .dm-p52 .dm-ava--lg { width: 48px; height: 48px; font-size: 1.05rem; }
  .dm-p52 .dm-prof-pill { margin-left: 0; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .dm-p52 #p52_cards .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dm-p52 #p52_cards .a-CardView-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dm-p52 .ep-kpi { padding: .7rem .75rem; min-height: 0; gap: .4rem; }
  .dm-p52 .ep-kpi-icon { width: 28px; height: 28px; font-size: 13px; }
  .dm-p52 .ep-kpi-num { font-size: clamp(.8rem, 12cqi, 1.15rem); }
  .dm-p52 #p52_tabs .apex-rds { gap: .4rem; padding: .75rem; }
  .dm-p52 #p52_tabs .apex-rds .apex-rds-item a { padding: .45rem .7rem; border: 1px solid var(--s-line); border-radius: 999px; }
  .dm-p52 #p52_tabs .apex-rds .apex-rds-item.apex-rds-selected a { border-color: var(--s-brand); background: color-mix(in srgb, var(--s-brand) 10%, var(--s-surface)); }
  .dm-p52 #p52_info .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
  .dm-p52 #p52_ltotals .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dm-p52 #P52_PERIOD .apex-item-option label { padding: .5rem .6rem; font-size: .75rem; }
}

/* ---------------------------------------------------------------- p55 purchases list + bill, round 5 = the mockup */
:is(.dm-p55, .dm-p56, .dm-p57) { --s-surface: var(--ut-component-background-color); --s-line: var(--ut-component-border-color, var(--dm-line));
  --s-text: var(--ut-body-text-color); --s-muted: color-mix(in srgb, var(--ut-body-text-color) 70%, var(--ut-component-background-color));
  --s-soft: color-mix(in srgb, var(--ut-body-text-color) 4%, var(--ut-component-background-color)); }
.dm-p55 #p55_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p55 #p55_title .dm-p55-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--s-muted); margin-top: .25rem; }
:is(.dm-p55, .dm-p56, .dm-p57) .t-Button.ep-btn-soft--blue { background-color: color-mix(in srgb, var(--dm-info) 9%, var(--s-surface)); }
:is(.dm-p55, .dm-p57) .ep-btn-soft--red { background-color: color-mix(in srgb, var(--dm-bad) 8%, var(--s-surface)); }
/* period pills card (always visible) */
.dm-p55 .dm-p55-period { margin-bottom: 1rem; }
.dm-p55 .dm-p55-period .t-Region-body { padding: .75rem 1rem; }
.dm-p55 #P55_PERIOD_CONTAINER .t-Form-labelContainer { display: none; }
.dm-p55 #P55_PERIOD .apex-item-grid { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--s-line); border-radius: 999px; overflow: hidden; width: auto; }
.dm-p55 #P55_PERIOD .apex-item-grid-row { display: contents; }
.dm-p55 #P55_PERIOD .apex-item-option { margin: 0; }
.dm-p55 #P55_PERIOD .apex-item-option input { position: absolute; opacity: 0; }
.dm-p55 #P55_PERIOD .apex-item-option label { display: inline-block; padding: .55rem 1rem; margin: 0; border-left: 1px solid var(--s-line); font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.dm-p55 #P55_PERIOD .apex-item-option:first-child label { border-left: 0; }
.dm-p55 #P55_PERIOD .apex-item-option input:checked + label { background: var(--dm-brand); color: var(--dm-on-brand); font-weight: 600; }
.dm-p55 #P55_PERIOD .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-info); outline-offset: -2px; }
/* 5 tinted KPI cards above the list: small coloured label, big bold value, no icon */
.dm-p55 .dm-p55-kpis { margin-bottom: 1rem; }
.dm-p55 .dm-p55-kpis .a-CardView-items { gap: 1rem; }
.dm-p55 .a-CardView.dm-k { --k: var(--dm-info); background: color-mix(in srgb, var(--k) 7%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--k) 30%, var(--s-surface)); box-shadow: none; }
.dm-p55 .a-CardView.dm-k--ok { --k: var(--dm-ok); } .dm-p55 .a-CardView.dm-k--warn { --k: var(--dm-warn); } .dm-p55 .a-CardView.dm-k--accent { --k: var(--dm-accent); }
.dm-p55 .dm-k .a-CardView-title { font-size: .75rem; font-weight: 600; color: var(--k); }
.dm-p55 .dm-k .a-CardView-subTitle { font-size: 1.15rem; font-weight: 700; color: var(--s-text); opacity: 1; }
/* list card: search + Filters left | New Purchase right (IR toolbar moved up, no Actions menu), table, total strip */
.dm-p55 .dm-p55-list > .t-Region-bodyWrap > .t-Region-body { padding: 0; }
.dm-p55 .dm-p55-find { padding: 4px 16px 0; position: relative; z-index: 2; pointer-events: none; }
.dm-p55 .dm-p55-find .t-Form-fieldContainer, .dm-p55 .dm-p55-find .t-Button { pointer-events: auto; }
.dm-p55 .dm-p55-find .t-Form-labelContainer { display: none; }
.dm-p55 .dm-p55-find .col-5 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 100%; }
.dm-p55 .dm-p55-find .t-Form-fieldContainer { flex: 0 1 360px; width: 360px; padding: 0; }
.dm-p55 .dm-p55-find .t-Form-inputContainer, .dm-p55 .dm-p55-find input.text_field { width: 100%; max-width: 100%; }
.dm-p55 .dm-p55-find .t-Button { margin: 0; height: 32px; flex: 0 0 auto; }
.dm-p55 #p55_filters { display: none; margin: 8px 16px 0; border: 1px solid var(--s-line); border-radius: var(--dm-radius); }
.dm-p55 #p55_filters.is-open { display: block; }
.dm-p55 #p55_filters .t-Region-body .t-Button { margin-top: 8px; }
/* owner bug 2026-10-20: same anchoring as p50 / p30 */
.dm-p55 .dm-p55-list .col, .dm-p55 #p55_list .a-IRR-container, .dm-p55 #p55_list .a-IRR { position: static; }
.dm-p55 .dm-p55-list > .t-Region-bodyWrap > .t-Region-body { position: relative; }
.dm-p55 #p55_list .a-IRR-toolbar { position: absolute; top: 4px; right: 16px; z-index: 3; width: auto; display: flex; align-items: center; justify-content: flex-end; background: transparent; border: 0; margin: 0; padding: 0; min-height: 32px; }
.dm-p55 #p55_list .a-IRR-controls, .dm-p55 #p55_list .a-IRR-buttons { justify-content: flex-end; align-items: center; margin: 0; padding: 0; }
.dm-p55 .dm-p55-find { padding-bottom: 12px; }
.dm-p55 #p55_list .a-IRR-actions, .dm-p55 #p55_list .a-IRR-controlGroup--options { display: none; }
.dm-p55 #p55_list .a-IRR-container, .dm-p55 #p55_list .t-IRR-region, .dm-p55 #p55_list .a-IRR { border: 0; box-shadow: none; }
.dm-p55 #p55_list .a-IRR-table td { vertical-align: middle; }
.dm-p55 #p55_list td.a-IRR-linkCol { width: 36px; }
.dm-p55 #p55_list .dm-name { font-weight: 700; }
.dm-p55 #p55_list .dm-sub, .dm-p55 .dm-sub { display: block; font-size: .75rem; color: var(--s-muted); font-weight: 400; }
.dm-p55 #p55_list td[headers="SUPPLIER_NAME"] a { color: var(--dm-ok); text-decoration: none; }
.dm-p55 #p55_list .dm-money--warn { font-weight: 400; }
.dm-p55 #p55_list .a-IRR-table tbody tr:hover td { background: var(--dm-brand-tint); }
.dm-p55 #p55_list .a-IRR-paginationWrap { border: 0; padding: 10px 16px; }
:is(.dm-p55, .dm-p57) .dm-pill { padding: .1rem .6rem; font-size: .75rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
  background: color-mix(in srgb, currentColor 10%, var(--s-surface)); border-color: color-mix(in srgb, currentColor 40%, var(--s-surface)); }
:is(.dm-p55, .dm-p57) .dm-pill--PURCHASE, :is(.dm-p55, .dm-p57) .dm-pill--CONFIRMED, :is(.dm-p55, .dm-p57) .dm-pill--ACTIVE { color: var(--dm-ok); }
.dm-p55 .dm-pill--RETURN { color: var(--dm-accent); }
:is(.dm-p55, .dm-p57) .dm-pill--CANCELLED { color: var(--dm-bad); }
.dm-p55 .dm-pill--RETURN .fa, .dm-p55 #p55_list .dm-pill--CANCELLED .fa { display: none; }
.dm-p55 .dm-p55-foot { border-top: 1px solid var(--s-line); }
.dm-p55 .dm-p55-foot .t-Report-report, .dm-p55 .dm-p55-foot td { border: 0; background: transparent; font-weight: 700; padding: .65rem 1rem; }
.dm-p55 .dm-p55-foot .dm-ft-l { font-weight: 400; color: var(--s-muted); font-size: .75rem; margin-right: .3rem; }
.dm-p55 .dm-p55-foot .t-Report-pagination { display: none; }
/* bill mode: white cards, 14 px bold titles without divider */
.dm-p55 .dm-p55-card { box-shadow: none; border: 1px solid var(--s-line); border-radius: var(--dm-radius); }
.dm-p55 .dm-p55-card > .t-Region-header { border: 0; background: transparent; }
.dm-p55 .dm-p55-card .t-Region-title { font-size: .875rem; font-weight: 700; }
.dm-p55 .dm-p55-card .dm-count { float: right; font-size: .75rem; font-weight: 400; color: var(--s-muted); margin-left: 1rem; }
.dm-p55 .dm-p55-card .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p55 :is(#p55_bill, #p55_money) .a-CardView-items { margin: 0; padding: 0; }
.dm-p55 :is(#p55_bill, #p55_money) .a-CardView { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; }
.dm-p55 :is(#p55_bill, #p55_money) .a-CardView-body, .dm-p55 :is(#p55_bill, #p55_money) .a-CardView-mainContent { padding: 0; margin: 0; }
.dm-p55 :is(#p55_bill, #p55_money) .a-CardView-header { display: none; }
.dm-p55 #p55_bill .a-CardView-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.dm-p55 #p55_bill .a-CardView-item:has(.dm-dli.is-full), .dm-p55 #p55_bill .dm-dli.is-full { grid-column: 1 / -1; }
.dm-p55 .dm-dt { font-size: .6875rem; font-weight: 600; color: var(--s-muted); text-transform: uppercase; letter-spacing: .03em; }
.dm-p55 .dm-dd { margin-top: .15rem; font-size: .9375rem; overflow-wrap: anywhere; }
.dm-p55 .dm-sup-link { color: var(--dm-ok); text-decoration: none; }
.dm-p55 #p55_money .a-CardView-items { display: flex; flex-direction: column; gap: 0; }
.dm-p55 .dm-mrow .a-CardView-mainContent { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .55rem 0 !important; }
.dm-p55 .dm-m-l { font-size: .8125rem; color: var(--s-muted); padding-top: .2rem; }
.dm-p55 .dm-m-v { text-align: right; }
.dm-p55 .dm-m-v b { display: block; font-size: 1.125rem; font-weight: 700; color: var(--s-text); white-space: nowrap; }
.dm-p55 .dm-m-v small { display: block; font-size: .75rem; color: var(--s-muted); }
.dm-p55 .dm-mrow.is-wide .dm-m-v { text-align: left; max-width: 60%; }
.dm-p55 .dm-mrow.is-net .a-CardView-mainContent { display: block; background: color-mix(in srgb, var(--dm-accent) 8%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--dm-accent) 35%, var(--s-surface));
  border-radius: var(--dm-radius); padding: .75rem 1rem !important; margin: .4rem 0; }
.dm-p55 .dm-mrow.is-net .dm-m-l { color: var(--dm-accent); display: block; }
.dm-p55 .dm-mrow.is-net .dm-m-v { text-align: left; }
.dm-p55 .dm-mrow.is-clear .dm-m-v b { color: var(--dm-ok); }
.dm-p55 .dm-mrow.is-credit .dm-m-v b { color: var(--dm-warn); }
.dm-p55 .dm-p55-table2 .t-Report-report { border: 0; }
.dm-p55 .dm-p55-table2 .t-Report-cell, .dm-p55 .dm-p55-table2 .t-Report-colHead { border-left: 0; border-right: 0; padding: .7rem .75rem; vertical-align: top; }
.dm-p55 .dm-p55-table2 .t-Report-colHead { background: var(--s-soft); font-weight: 600; }
.dm-p55 .dm-p55-table2 .dm-prod { color: var(--dm-ok); display: block; }
.dm-p55 #p55_payments .t-Report-noDataMsg, .dm-p55 #p55_payments .nodatafound { text-align: center; padding: 1.5rem .5rem; }
.dm-p55 .dm-empty-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--s-soft); font-size: 18px; margin-bottom: .5rem; }
.dm-p55 .dm-empty-t { display: block; font-size: .9375rem; }
@media (max-width: 640px) {
  .dm-p55 #p55_title .t-BreadcrumbRegion-titleText { font-size: 1.25rem; }
  .dm-p55 .t-BreadcrumbRegion-buttons--end { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; justify-content: flex-start; margin-top: .5rem; }
  .dm-p55 .t-BreadcrumbRegion-buttons--end .t-Button { width: auto; margin: 0; }
  .dm-p55 .dm-p55-kpis .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dm-p55 #P55_PERIOD .apex-item-option label { padding: .5rem .6rem; font-size: .75rem; }
  /* D-237 phone: the 6 periods do not fit one pill bar - separate chips that wrap (a wrapped bar cut "This Week (Mon-Sun)" - owner 2026-10-25) */
  .dm-p55 #P55_PERIOD .apex-item-grid, .dm-p52 #P52_PERIOD .apex-item-grid { display: flex; flex-wrap: wrap; gap: 6px; border: 0; border-radius: 0; overflow: visible; width: 100%; }
  .dm-p55 #P55_PERIOD .apex-item-option, .dm-p52 #P52_PERIOD .apex-item-option { flex: 0 0 auto; width: auto; max-width: 100%; }
  .dm-p55 #P55_PERIOD .apex-item-option label, .dm-p55 #P55_PERIOD .apex-item-option:first-child label,
  .dm-p52 #P52_PERIOD .apex-item-option label, .dm-p52 #P52_PERIOD .apex-item-option:first-child label {
    border: 1px solid var(--s-line); border-radius: 999px; background: transparent; padding: .45rem .85rem; font-size: .8125rem; min-height: 36px; }
  .dm-p55 #P55_PERIOD .apex-item-option input:checked + label, .dm-p52 #P52_PERIOD .apex-item-option input:checked + label { border-color: var(--dm-brand); }
  .dm-p55 #p55_list .a-IRR-reportView, .dm-p55 #p55_list .a-IRR-paginationWrap, .dm-p55 #p55_list .a-IRR-content { display: none; }
  .dm-p55 #p55_list .a-IRR-toolbar { top: 120px; left: 12px; right: 12px; margin: 0; padding: 0; justify-content: flex-start; min-height: 40px; }
  .dm-p55 .dm-p55-find { padding-bottom: 56px; }
  .dm-p55 .dm-p55-find input.text_field, .dm-p55 .dm-p55-find .t-Button { height: 40px; }
  .dm-p55 .dm-p55-find { padding: 12px 12px 56px; }
  .dm-p55 .dm-p55-find .col-5 { flex-wrap: wrap; }
  .dm-p55 .dm-p55-find .t-Form-fieldContainer { flex: 1 1 100%; width: 100%; }
  .dm-p55 #p55_filters { margin: 8px 12px 0; }
  .dm-p55 .dm-p55-foot td { display: block; text-align: left !important; padding: .25rem 1rem; }
  .dm-p55 #p55_bill .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- paper documents (round 5, D-158): p55 bill (print only) + p57 voucher
   = the mockup paper: centred shop head, dashed rule, label + bold value pairs in 2 columns, ruled lines table, totals in the right
   part, signature lines with captions. Native parts: Classic Report (head, lines) + Cards (pairs, totals, signatures). */
:is(.dm-p55, .dm-p57) .dm-paper { max-width: 735px; font-size: 13px; line-height: 1.45; }
:is(.dm-p55, .dm-p57) .dm-paper .t-Report-report, :is(.dm-p55, .dm-p57) .dm-paper td, :is(.dm-p55, .dm-p57) .dm-paper th { background: transparent; }
:is(.dm-p55, .dm-p57) .dm-paper .t-Report-pagination, :is(.dm-p55, .dm-p57) .dm-paper .t-Report-links { display: none; }
:is(.dm-p55, .dm-p57) .dm-paper .a-CardView-items { margin: 0; padding: 0; gap: 0; }
:is(.dm-p55, .dm-p57) .dm-paper .a-CardView { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; }
:is(.dm-p55, .dm-p57) .dm-paper .a-CardView-header { display: none; }
:is(.dm-p55, .dm-p57) .dm-paper .a-CardView-body, :is(.dm-p55, .dm-p57) .dm-paper .a-CardView-mainContent { padding: 0 !important; margin: 0; }
:is(.dm-p55, .dm-p57) .dm-pp-head { border-bottom: 1px dashed currentColor; padding-bottom: 8px; margin-bottom: 10px; }
:is(.dm-p55, .dm-p57) .dm-pp-head .t-Report-report, :is(.dm-p55, .dm-p57) .dm-pp-head td { border: 0 !important; text-align: center; padding: 1px 0 !important; }
:is(.dm-p55, .dm-p57) .dm-pp-shop { font-size: 18px; font-weight: 700; }
:is(.dm-p55, .dm-p57) .dm-pp-addr { font-size: 12px; }
:is(.dm-p55, .dm-p57) .dm-pp-title { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dm-p55 .dm-pp-title { text-transform: none; }
/* D-179 (mockup .dm-receipt-void): "CANCELLED - this voucher is not valid" = first line of the paper head, bold, spaced, text as written */
:is(.dm-p55, .dm-p57) .dm-pp-void { display: block; font-weight: 700; letter-spacing: .2em; text-transform: none; margin-bottom: 6px; }
:is(.dm-p55, .dm-p57) .dm-pp-meta .a-CardView-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 4px; }
:is(.dm-p55, .dm-p57) .dm-pp-sub { display: block; font-size: 12px; font-weight: 400; }
:is(.dm-p55, .dm-p57) .dm-pp-lines { margin-top: 10px; }
:is(.dm-p55, .dm-p57) .dm-pp-lines .t-Report-report { border: 0; width: 100%; }
:is(.dm-p55, .dm-p57) .dm-pp-lines .t-Report-colHead { border: 0; border-bottom: 1px solid currentColor; font-weight: 600; padding: 6px 12px; }
:is(.dm-p55, .dm-p57) .dm-pp-lines .t-Report-cell { border: 0; border-bottom: 1px solid var(--dm-line); padding: 6px 12px; vertical-align: top; }
:is(.dm-p55, .dm-p57) .dm-pp-totals { width: 44%; margin: 10px 0 0 auto; }
:is(.dm-p55, .dm-p57) .dm-pp-totals .a-CardView-items { display: flex; flex-direction: column; }
:is(.dm-p55, .dm-p57) .dm-pp-row .a-CardView-mainContent { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 !important; }
:is(.dm-p55, .dm-p57) .dm-pp-row.is-total .a-CardView-mainContent { border-top: 1px solid currentColor; margin-top: 4px; padding-top: 6px !important; font-weight: 700; }
:is(.dm-p55, .dm-p57) .dm-pp-row.is-words .a-CardView-mainContent { font-style: italic; }
:is(.dm-p55, .dm-p57) .dm-pp-sign { border-top: 1px dashed currentColor; margin-top: 14px; padding-top: 28px; }
:is(.dm-p55, .dm-p57) .dm-pp-sign .a-CardView-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
:is(.dm-p55, .dm-p57) .dm-pp-sign .a-CardView-mainContent { text-align: center; font-size: 12px; }
:is(.dm-p55, .dm-p57) .dm-pp-line { display: block; border-top: 1px solid currentColor; margin-bottom: 4px; }
.dm-p55 .dm-print-only { display: none; }
@media print {
  .dm-p55 .dm-print-only { display: block !important; }
  .dm-p55 :is(#p55_bill, #p55_money, #p55_items, #p55_payments, #p55_prices) { display: none !important; }
  .dm-p55 .t-Body-contentInner .col:not(:has(#p55_paper)):not(#p55_paper .col) { display: none !important; }
  :is(.dm-p55, .dm-p57) .dm-paper, :is(.dm-p55, .dm-p57) .dm-paper * { color: CanvasText !important; }
  :is(.dm-p55, .dm-p57) .dm-pp-lines .t-Report-cell { border-bottom-color: GrayText !important; }
}

/* ---------------------------------------------------------------- p52 profile (older rules) */
.page-52 .dm-kpis--5 .a-CardView-body, .page-52 .dm-kpis--4 .a-CardView-body { font-size: 12px; color: var(--dm-muted); }
.page-52 #p52_ledger_rows td:last-child, .page-52 #p52_ledger_rows th:last-child { font-weight: 600; }

/* ---------------------------------------------------------------- p56 New Purchase */
.page-56 .dm-lines textarea.dm-imei { width: 190px; font-size: 12px; }
.page-56 .dm-paylines input.dm-pay-amt { width: 96px; text-align: right; }
.page-56 .dm-paylines input.dm-pay-ref { width: 100%; min-width: 80px; }
.page-56 .dm-paylines select.dm-pm { max-width: 120px; }
.page-56 .dm-paylines td, .page-56 .dm-paylines th { padding: 4px; }
.page-56 .dm-lines td, .page-56 .dm-paylines td { vertical-align: middle; }
.page-56 .dm-sum .t-Form-inputContainer, .page-56 .dm-sum { font-variant-numeric: tabular-nums; }
.page-56 .dm-sum--big { font-size: 20px; font-weight: 700; }
/* p56 price history icon in the price cell + popups */
.page-56 .dm-hist-name { font-weight: 700; margin: 0 0 8px; }
.page-56 #p56_hist td, .page-56 #p56_hist th { padding: 6px 8px; }
/* p56 round 5 = the mockup: title + sub line + Back, compact card heads, Items counter, summary with big numbers, purple Net Total box,
   pill toggle, stacked payment fields, action bar as its own card under Items */
.dm-p56 #p56_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p56 #p56_title .dm-p56-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--s-muted); margin-top: .25rem; }
.dm-p56 .t-Region-header { min-height: 0; padding: 4px 0 0; border: 0; }
.dm-p56 .t-Region-headerItems--title { flex: 1 1 auto; padding: 0; min-height: 0; }
.dm-p56 .t-Region-title { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 700; padding: 0 16px; margin: 0; }
.dm-p56 .dm-p56-count { font-size: .8125rem; font-weight: 400; color: var(--s-muted); }
.dm-p56 .t-Region-body { padding-top: 0; }
.dm-p56 #p56_left > .t-Region, .dm-p56 #p56_left > .t-Region, .dm-p56 #p56_left .t-Region { margin-bottom: 16px; }
.dm-p56 .dm-sum.t-Form-fieldContainer { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 6px 0; }
.dm-p56 .dm-sum.t-Form-fieldContainer { width: 100%; padding-left: 8px; padding-right: 8px; }
.dm-p56 .dm-sum.dm-paid.t-Form-fieldContainer { padding-left: 0; padding-right: 0; }
.dm-p56 #p56_summary .dm-sum > .t-Form-labelContainer { flex: 1 1 auto; width: auto; max-width: none; text-align: left; justify-content: flex-start; }
.dm-p56 #p56_summary .dm-sum > .t-Form-labelContainer .t-Form-label { display: block; text-align: left; padding: 0; margin: 0; position: static; transform: none; text-indent: 0; overflow: visible; width: auto; }
.dm-p56 #p56_summary .dm-sum > .t-Form-labelContainer { overflow: visible; margin: 0; }
.dm-p56 #p56_summary .dm-sum > .t-Form-inputContainer { flex: 0 0 auto; width: auto; max-width: none; }
.dm-p56 #p56_summary .dm-sum .t-Form-itemWrapper { display: flex; justify-content: flex-end; }
.dm-p56 #p56_summary #P56_NET_D_CONTAINER .t-Form-itemWrapper { justify-content: flex-start; }
.dm-p56 .dm-sum .t-Form-labelContainer { width: auto; flex: 1 1 auto; padding: 0; text-align: left; }
.dm-p56 .dm-paylines .t-Report-wrap, .dm-p56 .dm-paylines .t-Report-report, .dm-p56 .dm-paylines .t-Report { border: 0; }
.dm-p56 .dm-sum .t-Form-label { font-size: .75rem; color: var(--s-muted); font-weight: 400; }
.dm-p56 .dm-sum .t-Form-inputContainer { width: auto; flex: 0 0 auto; padding: 0; text-align: right; }
.dm-p56 .dm-sum .display_only { font-size: 1.25rem; font-weight: 700; text-align: right; }
.dm-p56 .dm-sum.dm-paid { padding: 0; }
.dm-p56 .dm-sum.dm-paid .display_only { font-size: .875rem; }
.dm-p56 .dm-sum.dm-paid .t-Form-label { font-size: .875rem; color: var(--s-text); }
.dm-p56 #P56_NET_D_CONTAINER { flex-direction: column; align-items: flex-start; padding: 10px 14px; border-radius: var(--dm-radius);
  background: color-mix(in srgb, var(--dm-accent) 8%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--dm-accent) 35%, var(--s-surface)); }
.dm-p56 #P56_NET_D_CONTAINER .t-Form-label { color: var(--dm-accent); }
.dm-p56 #P56_NET_D_CONTAINER .t-Form-inputContainer { text-align: left; }
.dm-p56 #P56_PAY_MODE_CONTAINER .t-Form-labelContainer { padding-bottom: 4px; border-bottom: 1px solid var(--s-line); margin-bottom: 8px; width: 100%; }
.dm-p56 #P56_PAY_MODE_CONTAINER .t-Form-label { font-size: .9375rem; font-weight: 700; color: var(--s-text); }
.dm-p56 #P56_PAY_MODE .apex-item-grid { display: inline-flex; border: 1px solid var(--s-line); border-radius: 999px; overflow: hidden; width: auto; }
.dm-p56 #P56_PAY_MODE .apex-item-grid-row { display: contents; }
.dm-p56 #P56_PAY_MODE .apex-item-option { margin: 0; }
.dm-p56 #P56_PAY_MODE .apex-item-option input { position: absolute; opacity: 0; }
.dm-p56 #P56_PAY_MODE .apex-item-option label { display: inline-block; padding: .5rem 1rem; margin: 0; font-size: .8125rem; cursor: pointer; white-space: nowrap; border: 0; background: transparent; color: var(--s-text); }
.dm-p56 #P56_PAY_MODE .apex-item-option input:checked + label { background: var(--dm-brand); color: var(--dm-on-brand); font-weight: 600; }
.dm-p56 #P56_PAY_MODE .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-info); outline-offset: -2px; }
/* payment rows: stacked boxes (Method, Amount, Reference) like the mockup; the remove icon sits at the right */
.dm-p56 .dm-paylines thead { display: none; }
.dm-p56 .dm-paylines table.t-Report-report, .dm-p56 .dm-paylines tbody { display: block; width: 100%; }
.dm-p56 .dm-paylines tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 0 8px; border: 0; }
.dm-p56 .dm-paylines td { display: block; padding: 0; border: 0; grid-column: 1; }
.dm-p56 .dm-paylines td[headers="REMOVE"] { grid-column: 2; grid-row: 1; align-self: start; }
.dm-p56 .dm-paylines select.dm-pm, .dm-p56 .dm-paylines input.dm-pay-amt, .dm-p56 .dm-paylines input.dm-pay-ref { width: 100%; max-width: none; min-height: 44px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--s-line); border-radius: var(--dm-radius); background: var(--s-surface); color: var(--s-text); }
.dm-p56 .dm-paylines .t-Report-wrap { overflow: visible; }
.dm-p56 #p56_add_pay { min-height: 36px; }
.dm-p56 .dm-actions-bar { position: static; padding: 0; background: transparent; border: 0; }
.dm-p56 .dm-actions-bar .t-ButtonRegion-wrap { padding: 12px 16px; border: 1px solid var(--s-line); border-radius: var(--dm-radius); background: var(--s-surface); }
.dm-p56 #p56_confirm { width: auto; }
.dm-p56 #p56_lines .t-Report-noDataMsg, .dm-p56 #p56_lines .nodatafound { text-align: center; padding: 1.5rem .5rem; color: var(--s-muted); }
@media (max-width: 640px) {
  .dm-p56 #p56_title .t-BreadcrumbRegion-titleText { font-size: 1.25rem; }
  .dm-p56 .t-BreadcrumbRegion-top { flex-wrap: wrap; }
  .dm-p56 .t-BreadcrumbRegion-buttons { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; order: 3; justify-content: flex-start; margin-top: .5rem; }
  .dm-p56 .t-BreadcrumbRegion-buttons:empty { display: none; }
  .dm-p56 .t-BreadcrumbRegion-buttons .t-Button { width: auto; margin: 0; }
  .dm-p56 .dm-paylines select.dm-pm, .dm-p56 .dm-paylines input.dm-pay-amt, .dm-p56 .dm-paylines input.dm-pay-ref { width: 100%; }
  .dm-p56 .dm-paylines tr { display: grid; }
  .dm-p56 #p56_summary { margin-top: 0; }
  /* D-249 B-09: phone order of the design (p056 section 2): Bill -> Items -> Summary / Payment -> Clear + Confirm at the bottom */
  .dm-p56 .col:has(> #p56_left), .dm-p56 #p56_left, .dm-p56 #p56_left > .container { display: contents; }
  .dm-p56 #p56_left > .container > .row { flex: 0 0 100%; max-width: 100%; order: 0; padding-left: 8px; padding-right: 8px; }
  .dm-p56 #p56_left > .container > .row:has(.dm-actions-bar) { order: 2; }
  .dm-p56 .col:has(> #p56_summary) { order: 1; }
  /* D-249 B-10: "Paid" label was cut to "aid" (no side padding on the phone) */
  .dm-p56 .dm-sum.dm-paid.t-Form-fieldContainer { padding-left: 8px; padding-right: 8px; }
}
/* D-249 B-01: On credit -> no "Cash paid from" / galla warning (dm_suppliers.p56.recalc sets the class) */
.dm-p56.dm-p56-credit #P56_CASH_FROM_CONTAINER { display: none; }


/* ---------------------------------------------------------------- p57 voucher */
/* screen = the paper card of the mockup (735 px, left aligned, white card); print rules = paper documents block above */
.page-57 .dm-voucher { max-width: 735px; margin: 0; padding: 24px 24px 28px; background: var(--s-surface); border: 1px solid var(--s-line);
  border-radius: var(--dm-radius); box-shadow: 0 1px 3px color-mix(in srgb, var(--ut-body-text-color) 14%, transparent); }
.page-57 .dm-dir-rtl { direction: rtl; }
.dm-p57 #p57_title .t-BreadcrumbRegion-titleText { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dm-p57 #p57_title .dm-p57-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--s-muted); margin-top: .25rem; }
/* p57 Pay Supplier form (round 5 = mockup): compact card heads, muted info line with icon, actions directly under Notes, big amounts */
.dm-p57 #p57_form .t-Region-header, .dm-p57 #p57_side .t-Region-header { min-height: 0; padding: 4px 0 0; border: 0; }
.dm-p57 #p57_form .t-Region-headerItems, .dm-p57 #p57_side .t-Region-headerItems { padding: 0; min-height: 0; }
.dm-p57 #p57_form .t-Region-body, .dm-p57 #p57_side .t-Region-body { padding-top: 0; }
.dm-p57 #p57_form .t-Region-title, .dm-p57 #p57_side .t-Region-title { font-size: 1rem; font-weight: 700; padding: 0; margin: 0; }
.dm-p57 .dm-p57-info, .dm-p57 .dm-p57-info .display_only, .dm-p57 .dm-p57-info .t-Form-itemText { text-align: left; font-weight: 400; font-size: .8125rem; color: var(--s-muted); }
.dm-p57 .dm-p57-info .fa { margin-right: .35rem; }
.dm-p57 .dm-p57-info .t-Form-labelContainer { display: none; }
.dm-p57 .dm-p57-info .t-Form-inputContainer { flex: 1 1 100%; max-width: 100%; width: 100%; padding-left: 0; }
.dm-p57 #p57_form .t-Region-title, .dm-p57 #p57_side .t-Region-title { padding-left: 16px; }
.dm-p57 #p57_side .t-AVPList { padding-left: 16px; padding-right: 16px; }
.dm-p57 #P57_BILL_NOTE_CONTAINER:not(:has(.t-Form-itemText:not(:empty))) { display: none; }
.dm-p57 .dm-p57-actions { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.dm-p57 .dm-p57-actions .t-ButtonRegion-wrap { padding: 4px 0 0; border: 0; background: transparent; }
.dm-p57 #p57_side .t-AVPList { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 0; padding: 4px 0 8px; margin: 0; }
.dm-p57 #p57_side .t-AVPList-label, .dm-p57 #p57_side .t-AVPList-value { box-sizing: border-box; width: auto; float: none; margin: 0; border: 0; padding: 7px 0; min-height: 0; max-width: none; }
.dm-p57 #p57_side .t-AVPList-label { grid-column: 1; font-size: .75rem; color: var(--s-muted); }
.dm-p57 #p57_side .t-AVPList-value { grid-column: 2; text-align: right; font-size: 1.25rem; font-weight: 700; }
.dm-p57 #p57_side .t-AVPList-value .dm-money { color: inherit; font-weight: 700; }
.dm-p57 #p57_side dd:nth-of-type(2) { color: var(--s-muted); }
.dm-p57 #p57_side dd:nth-of-type(3) { color: var(--dm-warn); }
.dm-p57 #p57_side dt:nth-of-type(5), .dm-p57 #p57_side dd:nth-of-type(5) { grid-column: 1 / -1; text-align: left; background: color-mix(in srgb, var(--dm-accent) 8%, var(--s-surface));
  border: 1px solid color-mix(in srgb, var(--dm-accent) 35%, var(--s-surface)); padding: 8px 14px; }
.dm-p57 #p57_side dt:nth-of-type(5) { color: var(--dm-accent); border-bottom: 0; border-radius: var(--dm-radius) var(--dm-radius) 0 0; padding-bottom: 0; margin-top: 8px; }
.dm-p57 #p57_side dd:nth-of-type(5) { border-top: 0; border-radius: 0 0 var(--dm-radius) var(--dm-radius); padding-top: 2px; margin-bottom: 8px; }
.dm-p57 #p57_side dd:nth-of-type(6), .dm-p57 #p57_side dd:nth-of-type(7) { color: var(--s-text); }
.dm-p57 .dm-pp-row.is-words .dm-pp-l { display: none; }
.dm-p57 .dm-pp-row.is-note b { font-weight: 400; }
.dm-p57 .dm-pp-sub { color: var(--s-muted); }
.dm-p57 .dm-pp-cap { color: var(--s-muted); }
@media (max-width: 640px) {
  .dm-p57 #p57_title .t-BreadcrumbRegion-titleText { font-size: 1.25rem; }
  .dm-p57 .t-BreadcrumbRegion-top { flex-wrap: wrap; }
  .dm-p57 .t-BreadcrumbRegion-buttons { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; order: 3; justify-content: flex-start; margin-top: .5rem; }
  .dm-p57 .t-BreadcrumbRegion-buttons:empty { display: none; }
  .dm-p57 .t-BreadcrumbRegion-buttons .t-Button { width: auto; margin: 0; }
  .page-57 .dm-voucher { padding: 16px; }
  .dm-p57 .dm-pp-meta .a-CardView-items { grid-template-columns: 1fr; row-gap: 6px; }
  .dm-p57 .dm-pp-sign .a-CardView-items { grid-template-columns: 1fr; row-gap: 22px; }
  .dm-p57 .dm-pp-totals { width: 100%; }
}

/* ---------------------------------------------------------------- print (ledger p52 / bill p55 / voucher p57) */
.page-52 .dm-print-only { display: none; }
@media print {
  :is(.page-52, .page-55, .page-57) .t-Header, :is(.page-52, .page-55, .page-57) .t-Body-nav, :is(.page-52, .page-55, .page-57) .t-Footer,
  :is(.page-52, .page-55, .page-57) .t-BreadcrumbRegion-buttons, :is(.page-52, .page-55, .page-57) .t-Button,
  :is(.page-52, .page-55, .page-57) .a-IRR-toolbar, :is(.page-52, .page-55, .page-57) .t-Body-actions { display: none !important; }
  .page-52 .dm-print-only { display: block !important; }
  :is(.page-52, .page-57) * { visibility: hidden; }
  .page-52 #p52_print, .page-52 #p52_print *, .page-57 #p57_voucher, .page-57 #p57_voucher * { visibility: visible; }
  .page-52 #p52_print, .page-57 #p57_voucher { position: absolute; left: 0; top: 0; width: 100%; }
  .page-52 #p52_print .dm-print-head td { border: 0; text-align: center; }
  .page-52 #p52_print .dm-print-head tr:first-child td { font-size: 18px; font-weight: 700; }
  .page-52 #p52_print.dm-dir-rtl, .page-52 .dm-dir-rtl #p52_print { direction: rtl; }
  .page-57 .dm-voucher { border: 0; box-shadow: none; padding: 0; max-width: none; background: transparent; }
}

/* ---------------------------------------------------------------- phones (390 px) */
@media (max-width: 640px) {
  :is(.page-50, .page-55) .dm-phone-only { display: block; }
  :is(.page-50, .page-55) .dm-desktop-only { display: none !important; }
  /* p50 phone (mockup_390): search full width, Filters, then Actions + New Supplier; rows = cards (avatar, name + contact, payable right,
     phone left, "Last Purchase" + date right) */
  .page-50 #p50_suppliers .a-IRR-reportView, .page-50 #p50_suppliers .a-IRR-paginationWrap, .page-50 #p50_suppliers .a-IRR-content { display: none; }
  .page-50 #p50_suppliers .a-IRR-toolbar { top: 124px; left: 12px; right: 12px; margin: 0; padding: 0; justify-content: flex-start; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 40px; }
  .page-50 .dm-p50-find { padding-bottom: 56px; }
  .page-50 .dm-p50-find input.text_field, .page-50 .dm-p50-find .t-Button { height: 40px; }
  .page-50 #p50_suppliers .a-IRR-button--actions, .page-50 #dm_new_supplier { min-height: 40px; margin: 0; }
  .page-50 #p50_suppliers .a-IRR-controls, .page-50 #p50_suppliers .a-IRR-buttons, .page-50 #p50_suppliers .a-IRR-controlGroup { margin: 0; padding: 0; align-self: center; border: 0; }
  .page-50 #p50_suppliers .a-IRR-controls, .page-50 #p50_suppliers .a-IRR-buttons { flex: 0 0 auto; width: auto; justify-content: flex-start; }
  .page-50 .dm-p50-find { padding: 12px 12px 56px; }
  .page-50 .dm-p50-find .col-5 { flex-wrap: wrap; }
  .page-50 .dm-p50-find .t-Form-fieldContainer { flex: 1 1 100%; width: 100%; }
  .page-50 #p50_filters { margin: 8px 12px 0; }
  .page-50 .dm-p50-cards .a-CardView-items { gap: 0; }
  .page-50 .a-CardView.dm-sup-card { border: 0; border-top: 1px solid var(--dm-line); border-radius: 0; box-shadow: none; position: relative; }
  .page-50 .dm-sup-card .a-CardView-header { padding-bottom: 0; border: 0; align-items: center; }
  .page-50 .dm-sup-card .a-CardView-headerBody, .page-50 .dm-sup-card .a-CardView-title { font-size: 14px; font-weight: 700; padding-right: 120px; }
  .page-50 .dm-sup-card .a-CardView-badge.dm-money--info { max-width: 130px; text-align: right; white-space: normal; }
  .page-50 .dm-sup-card .a-CardView-subTitle { font-size: 12px; color: var(--dm-muted); }
  .page-50 .dm-sup-card .a-CardView-badge { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; padding: 0; font-weight: 700; font-size: 14px; }
  .page-50 .dm-sup-card .a-CardView-badge.dm-money--info { font-weight: 400; font-size: 13px; }
  .page-50 .dm-sup-card .a-CardView-body { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 4px; }
  .page-50 .dm-sup-card .a-CardView-body { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .page-50 .dm-sup-card .a-CardView-mainContent { justify-self: start; text-align: left !important; margin: 0 !important; }
  .page-50 .dm-sup-card .dm-c-wa { display: block; font-size: 12px; color: var(--dm-muted); }
  .page-50 .dm-sup-card .a-CardView-subContent { text-align: right; font-size: 12px; }
  .page-50 .dm-sup-card .dm-c-lbl { display: block; color: var(--dm-muted); }
  .page-50 .dm-sup-card .dm-c-date { display: block; }
  .page-50 .dm-p50-list .dm-foot { margin: 0; max-width: 100%; width: auto; padding: 8px 12px; text-align: right; }
  /* classic reports in tabs / bill: one card per row, label-less stacked cells */
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report thead { display: none; }
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report,
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report tbody,
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report tr { display: block; width: 100%; }
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report tr { border-bottom: 1px solid var(--dm-line); padding: 6px 0; }
  :is(.page-52, .page-55, .page-56) .dm-stack table.t-Report-report td { display: inline-block; border: 0; padding: 2px 8px 2px 0; text-align: left !important; }
  :is(.page-52, .page-55, .page-56) .dm-stack .t-Report-wrap { overflow-x: hidden; }
  .page-56 .dm-actions-bar { position: sticky; bottom: 0; z-index: 10; background: var(--ut-body-background-color, var(--ut-component-background-color)); padding: 8px 0; }
  .page-52 .dm-kpis--5 .a-CardView-items--grid, .page-55 .dm-kpis--5 .a-CardView-items--grid, .page-52 .dm-kpis--4 .a-CardView-items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-57 .dm-voucher { padding: 8px; }
  :is(.page-50, .page-52, .page-55, .page-56, .page-57) .t-Button { min-height: 40px; }
}

/* owner bug 2026-10-20 (align_scan dialog): on phones the More details hint wraps - stack it under the title so both stay on clean lines */
@media (max-width: 767px) { .page-51 #p51_more .dm-more-hint { display: block; margin: 2px 0 0; } }

/* ---- D-197 (owner bug 2026-10-21) p56 line table = the app field look (same as the p31 cart): inputs 40 px, rounded border, numbers
   right-aligned, room for 8-digit amounts; Purchase Price input + price history icon on ONE line (.dm-cell-ctl), the price warning below;
   every cell of a row vertically centred. Phone: card per line (Item + Remove, then Qty | Purchase Price | Total with labels .dm-cell-l). */
.page-56 #p56_lines .dm-cell-l { display: none; }
.page-56 #p56_lines input.dm-qty, .page-56 #p56_lines input.dm-price { box-sizing: border-box; height: 40px; min-height: 40px; margin: 0; padding: 0 10px;
  vertical-align: middle; border: 1px solid var(--dm-line); border-radius: var(--dm-radius-sm); background: var(--ut-component-background-color);
  color: inherit; font: inherit; font-size: .875rem; line-height: normal; text-align: right; font-variant-numeric: tabular-nums; box-shadow: none; }
.page-56 #p56_lines input.dm-qty { width: 76px; }
.page-56 #p56_lines input.dm-price { width: 124px; }
.page-56 #p56_lines input.dm-qty:focus, .page-56 #p56_lines input.dm-price:focus { border-color: var(--dm-brand); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); }
.page-56 #p56_lines .dm-cell-ctl { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; }
.page-56 #p56_lines .dm-hist, .page-56 #p56_lines .dm-del { flex: 0 0 auto; box-sizing: border-box; width: 40px; min-width: 40px; height: 40px; min-height: 40px;
  margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.page-56 #p56_lines .dm-price-hint { display: block; white-space: normal; margin-top: 2px; text-align: left; }
.page-56 #p56_lines .dm-price-hint:empty { display: none; }
.page-56 #p56_lines td { vertical-align: middle; }
.page-56 #p56_lines :is(td[headers="QTY"], td[headers="PRICE"], td[headers="LINE_TOTAL"], td[headers="REMOVE"], th[id="QTY"], th[id="PRICE"], th[id="LINE_TOTAL"], th[id="REMOVE"]) { width: 1%; white-space: nowrap; }
.page-56 #p56_lines :is(td[headers="QTY"], td[headers="PRICE"], td[headers="LINE_TOTAL"], th[id="QTY"], th[id="PRICE"], th[id="LINE_TOTAL"]) { text-align: right; }
.page-56 #p56_lines :is(td[headers="REMOVE"], th[id="REMOVE"]) { text-align: center; }
.page-56 #p56_lines .dm-lt { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .page-56 #p56_lines table.t-Report-report tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, max-content); column-gap: 8px; row-gap: 8px;
    align-items: start; padding: 10px 0; }
  .page-56 #p56_lines table.t-Report-report td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; width: auto; white-space: normal; }
  .page-56 #p56_lines table.t-Report-report td[headers="LINE_NO"] { display: none; }
  .page-56 #p56_lines table.t-Report-report td[headers="ITEM"] { grid-column: 1 / 3; grid-row: 1; align-self: center; }
  .page-56 #p56_lines table.t-Report-report td[headers="REMOVE"] { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .page-56 #p56_lines table.t-Report-report td[headers="QTY"] { grid-column: 1; grid-row: 2; }
  .page-56 #p56_lines table.t-Report-report td[headers="PRICE"] { grid-column: 2; grid-row: 2; }
  .page-56 #p56_lines table.t-Report-report td[headers="LINE_TOTAL"] { grid-column: 3; grid-row: 2; text-align: right !important; }
  .page-56 #p56_lines table.t-Report-report td[headers="IMEIS"] { grid-column: 1 / -1; grid-row: 3; }
  .page-56 #p56_lines .dm-cell-l { display: block; font-size: .75rem; line-height: 1.4; color: var(--dm-muted); margin: 0 0 2px; white-space: nowrap; }
  .page-56 #p56_lines input.dm-qty { width: 100%; }
  .page-56 #p56_lines .dm-cell-ctl { display: flex; width: 100%; }
  .page-56 #p56_lines input.dm-price { flex: 1 1 auto; width: auto; min-width: 0; }
  .page-56 #p56_lines .dm-lt { display: block; line-height: 40px; font-weight: 600; }
  /* payment rows: stacked boxes like the desktop column (the generic .dm-stack inline cells put Method and Amount side by side) */
  .dm-p56 #p56_pay table.t-Report-report tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 0 8px; border: 0; }
  .dm-p56 #p56_pay table.t-Report-report td { display: block; padding: 0; border: 0; grid-column: 1; }
  .dm-p56 #p56_pay table.t-Report-report td[headers="REMOVE"] { grid-column: 2; grid-row: 1; align-self: start; }
}/* D-197: p55 bill "Price changes at confirm" - the new sale price input (APEX_ITEM row) gets the same app field look, right-aligned, 8 digits fit */
.page-55 #p55_prices input.dm-num { box-sizing: border-box; height: 40px; min-height: 40px; width: 124px; margin: 0; padding: 0 10px; vertical-align: middle;
  border: 1px solid var(--dm-line); border-radius: var(--dm-radius-sm); background: var(--ut-component-background-color); color: inherit; font: inherit;
  font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums; box-shadow: none; }
.page-55 #p55_prices input.dm-num:focus { border-color: var(--dm-brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); }
.page-55 #p55_prices td { vertical-align: middle; }
/* D-198 (owner 2026-10-21): phone Summary = label left, amount right (mockup); UT turns .rel-col items into a column below 640 px. Net Total keeps its box. */
.dm-p56 #p56_summary .dm-sum.t-Form-fieldContainer:not(#P56_NET_D_CONTAINER) { flex-direction: row; align-items: center; }
.dm-p56 #p56_summary .dm-sum.t-Form-fieldContainer:not(#P56_NET_D_CONTAINER) > .t-Form-inputContainer { margin-left: auto; text-align: right; }
/* D-206 #4 / #6 (2026-10-24): "+ New supplier" link in the Bill header; "Check sale prices" dialog at Confirm */
.page-56 .dm-addlink { font-weight: 600; text-decoration: none; }
.page-56 .dm-addlink--field { display: inline-flex; padding: 0; margin: 2px 0 0; min-height: 0; font-size: 12px; line-height: 1.4; box-shadow: none; }
.page-56 .dm-addlink--field .t-Icon { font-size: 11px; margin-right: 4px; }
.page-56 #P56_SUPPLIER_ID_CONTAINER .t-Form-itemAssistance:has(.dm-addlink--field) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.page-56 .dm-addlink:hover, .page-56 .dm-addlink:focus { text-decoration: underline; }
.page-56 #p56_prices .dm-cell-l { display: none; }
.page-56 #p56_prices td { vertical-align: middle; padding: 6px 8px; }
.page-56 #p56_prices .dm-name { display: block; font-weight: 600; }
.page-56 #p56_prices .dm-sub { display: block; font-size: 12px; color: var(--dm-muted); }
.page-56 #p56_prices input.dm-newsale { width: 120px; text-align: right; }
.page-56 #p56_prices input.dm-input--warn { border-color: var(--dm-bad); }
.page-56 #p56_prices .dm-pr-warn.u-danger-text { color: var(--dm-bad); font-weight: 600; }
.page-56 .dm-pr-ask { font-weight: 600; margin: 0 0 4px; }
.page-56 #p56_pr_head .dm-sub, .page-56 #p56_pr_head p { color: var(--dm-muted); font-size: 13px; margin: 0 0 8px; white-space: normal; overflow-wrap: anywhere; }
.page-56 #p56_pr_head .dm-pr-ask { color: inherit; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 640px) {
  .page-56 .ui-dialog:has(#p56_price_dlg) { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px); left: 8px !important; }
  .page-56 .ui-dialog:has(#p56_price_dlg) .ui-dialog-content, .page-56 .ui-dialog:has(#p56_price_dlg) .ui-dialog-buttonpane { width: auto !important; max-width: 100%; box-sizing: border-box; }
  .page-56 #p56_price_dlg .t-DialogRegion-wrap, .page-56 #p56_price_dlg .t-DialogRegion-bodyWrapperOut, .page-56 #p56_price_dlg .t-DialogRegion-bodyWrapperIn,
  .page-56 #p56_price_dlg .t-DialogRegion-body { width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  .page-56 #p56_prices table, .page-56 #p56_prices tbody, .page-56 #p56_prices tr, .page-56 #p56_prices td { display: block; width: 100%; }
  .page-56 #p56_prices thead { display: none; }
  .page-56 #p56_prices tr { border-bottom: 1px solid var(--dm-line); padding: 6px 0; }
  .page-56 #p56_prices td { text-align: left !important; padding: 2px 4px; }
  .page-56 #p56_prices .dm-cell-l { display: block; font-size: .75rem; color: var(--dm-muted); }
}
/* D-206 #6 p55 fallback: New sale price boxes only after "Change sale prices" (column NEW_SALE) */
.page-55 #p55_prices:not(.is-editing) td[headers="NEW_SALE"] input, .page-55 #p55_prices:not(.is-editing) th#NEW_SALE,
.page-55 #p55_prices:not(.is-editing) td[headers="NEW_SALE"] { display: none; }
/* D-206 #6 owner change: p55 Cancel Purchase "Check sale prices" dialog = the p56 dialog look */
.page-55 #p55_cprices .dm-cell-l { display: none; }
.page-55 #p55_cprices td { vertical-align: middle; padding: 6px 8px; }
.page-55 #p55_cprices .dm-name { display: block; font-weight: 600; }
.page-55 #p55_cprices .dm-sub { display: block; font-size: 12px; color: var(--dm-muted); }
.page-55 #p55_cprices input.dm-newsale { width: 120px; text-align: right; }
.page-55 #p55_cprices input.dm-input--warn { border-color: var(--dm-bad); }
.page-55 #p55_cprices .dm-pr-warn.u-danger-text { color: var(--dm-bad); font-weight: 600; }
.page-55 #p55_pr_head p { color: var(--dm-muted); font-size: 13px; margin: 0 0 8px; white-space: normal; overflow-wrap: anywhere; }
.page-55 #p55_pr_head .dm-pr-ask { color: inherit; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 640px) {
  .page-55 .ui-dialog:has(#p55_price_dlg) { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px); left: 8px !important; }
  .page-55 .ui-dialog:has(#p55_price_dlg) .ui-dialog-content, .page-55 .ui-dialog:has(#p55_price_dlg) .ui-dialog-buttonpane { width: auto !important; max-width: 100%; box-sizing: border-box; }
  .page-55 #p55_price_dlg .t-DialogRegion-wrap, .page-55 #p55_price_dlg .t-DialogRegion-bodyWrapperOut, .page-55 #p55_price_dlg .t-DialogRegion-bodyWrapperIn,
  .page-55 #p55_price_dlg .t-DialogRegion-body { width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  .page-55 #p55_cprices table, .page-55 #p55_cprices tbody, .page-55 #p55_cprices tr, .page-55 #p55_cprices td { display: block; width: 100%; }
  .page-55 #p55_cprices thead { display: none; }
  .page-55 #p55_cprices tr { border-bottom: 1px solid var(--dm-line); padding: 6px 0; }
  .page-55 #p55_cprices td { text-align: left !important; padding: 2px 4px; }
  .page-55 #p55_cprices .dm-cell-l { display: block; font-size: .75rem; color: var(--dm-muted); }
}
/* D-222 (owner 2026-10-24, "as little scrolling as possible"): main content + main action on the first screen at 1366x768 */
/* p55 bill view: left column = compact Bill + Items directly under it; right = compact Money (zero rows hidden in the SQL) */
.dm-p55 #p55_leftcol > .t-Region-bodyWrap > .t-Region-body, .dm-p55 #p55_leftcol .container { padding: 0; }
.dm-p55 #p55_leftcol .dm-p55-card, .dm-p55 #p55_leftcol #p55_items { margin-bottom: 12px; }
.dm-p55 .dm-p55-card > .t-Region-header, .dm-p55 #p55_items > .t-Region-header { padding-top: 8px; padding-bottom: 2px; min-height: 0; }
.dm-p55 .dm-p55-card > .t-Region-bodyWrap > .t-Region-body { padding-top: 4px; padding-bottom: 10px; }
.dm-p55 #p55_bill .a-CardView-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem 1rem; }
.dm-p55 #p55_bill .dm-dt { font-size: .6875rem; margin-bottom: 1px; }
.dm-p55 #p55_bill .dm-dd { font-size: .875rem; line-height: 1.35; }
.dm-p55 .dm-mrow .a-CardView-mainContent { padding: .3rem 0 !important; }
.dm-p55 .dm-mrow.is-net .a-CardView-mainContent { padding: .35rem .6rem !important; margin: .2rem 0; }
.dm-p55 .dm-mrow.is-net .dm-m-v b { font-size: 1.05rem; }
.dm-p55 #p55_items .t-Report-cell, .dm-p55 #p55_items .t-Report-colHead { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 640px) { .dm-p55 #p55_bill .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* p56: Supplier | Bill No | Date on one row, supplier info = one line inside the Bill card, compact summary, Confirm always visible */
.dm-p56 #p56_supplier_card { margin: 0 0 4px; }
.dm-p56 #p56_supplier_card .t-AVPList-label { display: none; }
.dm-p56 #p56_supplier_card .t-AVPList-value { padding: 2px 0; border: 0; font-size: .8125rem; color: var(--dm-muted); width: 100%; }
.dm-p56 #p56_supplier_card .t-AVPList-item, .dm-p56 #p56_supplier_card .t-AVPList { border: 0; margin: 0; padding: 0; }
.dm-p56 #p56_left .t-Region > .t-Region-header { padding-top: 8px; padding-bottom: 0; min-height: 0; }
.dm-p56 #p56_left .t-Region > .t-Region-bodyWrap > .t-Region-body { padding-top: 6px; padding-bottom: 8px; }
.dm-p56 #p56_left .t-Region { margin-bottom: 10px; }
.dm-p56 #p56_summary > .t-Region-header { padding-top: 8px; padding-bottom: 0; min-height: 0; }
.dm-p56 #p56_summary > .t-Region-bodyWrap > .t-Region-body { padding-top: 4px; padding-bottom: 8px; }
.dm-p56 #p56_summary .t-Form-fieldContainer { padding-top: 2px; padding-bottom: 2px; }
.dm-p56 #p56_summary #P56_DISCOUNT { min-height: 0; height: 36px; padding-top: 4px; padding-bottom: 4px; }
.dm-p56 #p56_summary #P56_NET_D_CONTAINER .t-Form-itemWrapper { padding-top: 2px; padding-bottom: 2px; }
.dm-p56 #p56_summary #P56_NET_D_CONTAINER { margin-top: 2px; margin-bottom: 2px; }
.dm-p56 #p56_summary .t-Form-helpText, .dm-p56 #p56_summary .t-Form-inlineHelp { font-size: 11px; margin-top: 0; }
@media (min-width: 992px) {
  .dm-p56 #p56_summary { position: sticky; top: 168px; align-self: flex-start; }   /* D-222: no inner scrollbar - compact rows instead */
  .dm-p56 .dm-actions-bar { position: sticky; bottom: 0; z-index: 10; padding: 6px 0 0; background: var(--ut-body-background-color, transparent); }
  .dm-p56 .dm-actions-bar .t-ButtonRegion-wrap { padding: 8px 16px; }
}
.dm-p56 #p56_left .row:has(> .col #P56_SUPPLIER_ID_CONTAINER), .dm-p56 #p56_left .row:has(#P56_SUPPLIER_ID_CONTAINER) { align-items: flex-start; }
.dm-p56 #p56_left .row:has(#P56_SUPPLIER_ID_CONTAINER) > .col { align-self: flex-start; }
/* D-222 (owner feedback): one Bill row, no inner scrollbar, page fits 1366x768 with 0-3 lines */
.dm-p56 #p56_left .row:has(#P56_SUPPLIER_ID_CONTAINER) { align-items: flex-start; }
.dm-p56 #P56_SUPPLIER_ID_CONTAINER { position: relative; margin-bottom: 18px; }
.dm-p56 #P56_SUPPLIER_ID_CONTAINER .dm-addlink--field { position: absolute; left: 0; top: 100%; margin-top: 2px; }
.dm-p56 #p56_lines .t-Report-noDataMsg, .dm-p56 #p56_lines .nodatafound { padding: .35rem .5rem; font-size: .8125rem; }
.dm-p56 .dm-actions-bar .t-ButtonRegion-wrap { padding: 6px 12px; }
.dm-p56 .dm-actions-bar .t-ButtonRegion { margin: 0; }
.dm-p56 #p56_summary .t-Form-fieldContainer--floatingLabel { min-height: 0; }
.dm-p56 #p56_summary #P56_DISCOUNT { height: auto; min-height: 44px; padding-top: 1rem; padding-bottom: .25rem; }
.dm-p56 #p56_summary #P56_NOTES { min-height: 40px; height: 40px; resize: vertical; }
.dm-p56 #p56_summary hr, .dm-p56 #p56_summary .dm-sep { margin: 4px 0; }
.dm-p56 #p56_pay td { padding-top: 2px; padding-bottom: 2px; }
.dm-p56 #p56_pay select, .dm-p56 #p56_pay input { min-height: 36px; height: 36px; }
/* the floating assistant is hidden on p56 (app.css D-198), so its bottom room is not needed: no page scroll with an empty bill */
@media (min-width: 992px) {
  .dm-p56 .t-Body-content { padding-bottom: 0; }
  .dm-p56 .t-Footer { padding-top: 4px; padding-bottom: 4px; }
  .dm-p56 .t-Body-contentInner { padding-top: 12px; padding-bottom: 0; }
}
.dm-p56 #p56_supplier_card:not(:has(.t-AVPList-value)) { display: none; }
.dm-p56 #p56_left .t-Region > .t-Region-header .t-Button { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.dm-p56 #p56_lines td { padding-top: 3px !important; padding-bottom: 3px !important; }
.dm-p56 #p56_lines th { padding-top: 6px; padding-bottom: 6px; }
.dm-p56 #p56_lines input.dm-qty, .dm-p56 #p56_lines input.dm-price { min-height: 34px; height: 34px; padding-top: 2px; padding-bottom: 2px; }
.dm-p56 #P56_PRODUCT_CONTAINER { margin-bottom: 4px; }
.dm-p55 :is(.dm-p55-card, #p55_items) > .t-Region-header, .dm-p55 :is(.dm-p55-card, #p55_items) .t-Region-headerItems { padding-top: 6px; padding-bottom: 0; min-height: 0; }
.dm-p55 :is(.dm-p55-card, #p55_items) .t-Region-headerItems--title { padding-top: 4px; padding-bottom: 0; }
/* owner 2026-10-24: all p52 cards the same size as "Total Purchases" - title and foot one line each (… when longer), the full
   breakdown shows on hover (title attribute) - "Paid to supplier" grows with every payment and must not grow the card */
.dm-p52 .ep-kpi { min-width: 0; overflow: hidden; }
.dm-p52 .ep-kpi-label, .dm-p52 .ep-kpi-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* D-232 p52 "Take advance back" dialog: the "Our advance with this supplier" line first, then the fields */
#p52_tb_dlg .t-Region-body { display: flex; flex-direction: column; }
#p52_tb_dlg .dm-tb-open { order: -1; margin: 0 0 12px; font-size: 14px; }
/* owner 2026-10-25: p55 cancel "This money" = three small buttons in one line, selected one in the theme colour */
#P55_REFUND_MODE_CONTAINER .apex-item-grid-row { display: flex; flex-wrap: wrap; gap: 6px; }
#P55_REFUND_MODE_CONTAINER .apex-item-grid-row > .apex-item-option { flex: 0 0 auto; width: auto; }
#P55_REFUND_MODE_CONTAINER .apex-item-option label { padding: 6px 12px; font-size: 13px; border-radius: 6px; border: 1px solid var(--dm-line);
  background: transparent; color: inherit; box-shadow: none; }
#P55_REFUND_MODE_CONTAINER .apex-item-option input:checked + label { background: var(--dm-brand); border-color: var(--dm-brand); color: #fff; font-weight: 600; }
#P55_REFUND_MODE_CONTAINER .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
#p52_tb_dlg .t-DialogRegion-body { display: flex; flex-direction: column; }
#P55_REFUND_MODE_CONTAINER .apex-item-grid-row { flex-wrap: nowrap; }
#P55_REFUND_MODE_CONTAINER .apex-item-option label { white-space: nowrap; }
/* cancel note: full width, starts at the left edge like the fields (hidden-label column removed) */
#P55_CANCEL_NOTE_CONTAINER .t-Form-labelContainer { display: none; }
#P55_CANCEL_NOTE_CONTAINER .t-Form-inputContainer { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0; }
/* D-237 (D-233 #1): p57 bill picker (like p45 plan picker) */
.dm-p57-pickbtn.t-Button { margin-top: 4px; padding-left: 0; }
/* D-249 B-24: phone - "Choose bill" was cut to "Choo" next to the bill list (and under the AI bot): own line under the list */
@media (max-width: 640px) {
  #P57_PURCHASE_ID_CONTAINER .t-Form-itemWrapper { flex-wrap: wrap; }
  #P57_PURCHASE_ID_CONTAINER .t-Form-itemWrapper > select { flex: 1 1 100%; max-width: 100%; }
  #P57_PURCHASE_ID_CONTAINER .dm-p57-pickbtn.t-Button { margin-left: 0; }
}
#p57_pick_dlg .dm-p57-pickfilter { margin-bottom: .5rem; }
#p57_pick_dlg #dm_p57_pick_find { width: 100%; min-height: 40px; }
#p57_pick .dm-p57-pick { font-size: 1.05rem; font-weight: 600; }
#p57_pick .dm-p57-pick--acc { font-weight: 400; color: var(--dm-muted); }
#p57_pick .a-CardView-item { cursor: pointer; }
/* R1 retest 2026-10-26: "On credit Rs. 49,000 - Part payment: the rest goes on credit." did not fit one line on the phone -> the value (nowrap, flex 0 0 auto)
   ran over the "On credit" label and off the card. Value wraps to its own line under the label when it is too long. */
.dm-p56 #p56_summary #P56_CREDIT_D_CONTAINER { flex-wrap: wrap; row-gap: 2px; justify-content: flex-start; }
.dm-p56 #p56_summary #P56_CREDIT_D_CONTAINER > .t-Form-labelContainer { flex: 0 0 auto; }
.dm-p56 #p56_summary #P56_CREDIT_D_CONTAINER > .t-Form-inputContainer { flex: 1 1 auto; min-width: 0; }
.dm-p56 #p56_summary #P56_CREDIT_D_CONTAINER .display_only { white-space: normal; overflow-wrap: anywhere; }