/* dm_sales.css - module styles of the sales pages p30-p33 (D-136). Owner: the sales module. Tokens from app.css (--dm-*, --ut-*),
   no hex colours, no inline styles. Every selector starts with the page class (.dm-p30 .. .dm-p33 = page CSS classes). */

/* ---------------------------------------------------------------- shared parts */
.dm-p30 .dm-pill--PAY_NOW, .dm-p33 .dm-pill--PAY_NOW { color: var(--dm-ok); }
.dm-p30 .dm-pill--RETURN, .dm-p30 .dm-pill--CANCELLED { color: var(--dm-bad); }
.dm-p30 .dm-pill--CONFIRMED { color: var(--dm-ok); }
.dm-p30 .dm-muted, .dm-p33 .dm-muted { color: var(--dm-muted); }
.dm-p30 .dm-ok { color: var(--dm-ok); }
.dm-p31 .dm-note, .dm-p33 .dm-note, .dm-p32 .dm-note { color: var(--dm-muted); font-size: 13px; }
.dm-p31 .dm-bill-total, .dm-p32 .dm-bill-total, .dm-p33 .dm-bill-total { font-weight: 700; font-size: 16px; }
.dm-p31 .dm-bill-warn, .dm-p32 .dm-bill-warn, .dm-p33 .dm-bill-warn, .dm-p32 .dm-warn { color: var(--dm-warn); font-weight: 600; }
.dm-p31 .dm-bill-muted, .dm-p32 .dm-bill-muted, .dm-p33 .dm-bill-muted { color: var(--dm-muted); }
.dm-p31 .dm-bill-owner, .dm-p33 .dm-bill-owner { color: var(--dm-info); }
.dm-p33 .dm-strike { text-decoration: line-through; }

/* title-bar soft grey buttons (Back / Clear / Print ...): mockup = light grey fill + grey border */
.dm-p31 .t-Body-title .ep-btn-soft--grey, .dm-p32 .t-Body-title .ep-btn-soft--grey, .dm-p33 .t-Body-title .ep-btn-soft--grey {
  --a-button-background-color: color-mix(in srgb, var(--dm-muted) 10%, transparent); --a-button-border-color: color-mix(in srgb, var(--dm-muted) 35%, transparent); }

/* ---------------------------------------------------------------- p30 sales list */
/* D-152 round 5: title sub line, period pills card, tinted KPI cards, one list card (search + Filters | Actions + New Sale) */
.dm-p30 .dm-subline, .dm-p31 .dm-subline, .dm-p32 .dm-subline, .dm-p33 .dm-subline { color: var(--dm-muted); font-size: 13px; margin: -6px 0 0; padding: 0 16px 4px; }
.dm-p30 .dm-subline .t-Region-body, .dm-p31 .dm-subline .t-Region-body, .dm-p32 .dm-subline .t-Region-body, .dm-p33 .dm-subline .t-Region-body { padding: 0; }
.dm-p30 .dm-p30-period .t-Region-body { padding: 10px 16px; }
.dm-p30 .dm-p30-period .t-Form-fieldContainer { padding: 0; margin: 0; }
.dm-p30 .dm-p30-period .apex-item-grid { display: inline-flex; border: 1px solid var(--dm-line); border-radius: 999px; padding: 3px; gap: 2px; width: auto; }
.dm-p30 .dm-p30-period .apex-item-grid-row { display: contents; }
.dm-p30 .dm-p30-period .apex-item-option { margin: 0; }
.dm-p30 .dm-p30-period .apex-item-option input { position: absolute; opacity: 0; }
.dm-p30 .dm-p30-period .apex-item-option label {
  display: inline-flex; align-items: center; min-height: 32px; line-height: 32px; padding: 0 14px; border-radius: 999px; border: 0; margin: 0;
  background: transparent; color: var(--ut-body-text-color, inherit); font-weight: 500; cursor: pointer; box-shadow: none;
}
.dm-p30 .dm-p30-period .apex-item-option input:checked + label { background: var(--dm-brand); color: var(--dm-on-brand); font-weight: 700; }
.dm-p30 .dm-p30-period .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-info); outline-offset: 1px; }
.dm-p30 .dm-p30-kpis .a-CardView-items { gap: 16px; }
.dm-p30 .a-CardView.dm-p30k { --k: var(--dm-info); background: color-mix(in srgb, var(--k) 7%, var(--ut-component-background-color));
  border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); border-radius: var(--dm-radius); box-shadow: none; }
.dm-p30 .a-CardView.dm-p30k--ok { --k: var(--dm-ok); }
.dm-p30 .a-CardView.dm-p30k--bad { --k: var(--dm-bad); }
.dm-p30 .a-CardView.dm-p30k--accent { --k: var(--dm-accent); }
.dm-p30 .dm-p30-kpis .a-CardView-title { font-size: 12px; color: var(--k); font-weight: 600; }
.dm-p30 .dm-p30-kpis .a-CardView-subTitle { font-size: 18px; font-weight: 700; color: var(--ut-body-text-color, inherit); }
.dm-p30 .dm-p30-list > .t-Region-bodyWrap > .t-Region-body { padding: 0; }
.dm-p30 .dm-p30-find { padding: 12px 16px 0; position: relative; z-index: 2; pointer-events: none; }
.dm-p30 .dm-p30-find .t-Form-fieldContainer, .dm-p30 .dm-p30-find .t-Button { pointer-events: auto; }
.dm-p30 .dm-p30-find .t-Form-labelContainer, .dm-p30 .dm-p30-period .t-Form-labelContainer { display: none; }
.dm-p30 .dm-p30-find .t-Form-inputContainer, .dm-p30 .dm-p30-period .t-Form-inputContainer { flex: 1 1 auto; max-width: 100%; width: 100%; }
.dm-p30 .dm-p30-find .col-5 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 100%; }
.dm-p30 .dm-p30-find .t-Form-fieldContainer { flex: 0 1 360px; width: 360px; }
.dm-p30 .dm-p30-find .t-Button { margin: 0; flex: 0 0 auto; }
.dm-p30 .dm-p30-find .t-Form-fieldContainer { padding-top: 0; padding-bottom: 0; }
.dm-p30 .dm-p30-find .t-Button { margin-top: 0; height: 32px; }
.dm-p30 #p30_filters { display: none; margin: 8px 16px 0; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); }
.dm-p30 #p30_filters.is-open { display: block; }
.dm-p30 #dm_filters.is-active { --a-button-border-color: var(--dm-brand); --a-button-text-color: var(--dm-brand); }
/* IR toolbar (Actions + New Sale) sits on the search row, right */
/* owner bug 2026-10-20: the toolbar is anchored to the TOP of the list card (absolute), so an open Filters panel opens below it as its own block */
.dm-p30 .dm-p30-list .col, .dm-p30 #p30_sales .a-IRR-container, .dm-p30 #p30_sales .a-IRR { position: static; }
.dm-p30 .dm-p30-list > .t-Region-bodyWrap > .t-Region-body { position: relative; }
.dm-p30 #p30_sales .a-IRR-toolbar { position: absolute; top: 16px; 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-p30 #p30_sales .a-IRR-controls { justify-content: flex-end; align-items: center; margin: 0; padding: 0; }
.dm-p30 #p30_sales .a-IRR-buttons { align-items: center; margin: 0; padding: 0; }
.dm-p30 .dm-p30-find { padding-bottom: 12px; }
.dm-p30 .dm-p30-find input.text_field { width: 100%; height: 32px; }
.dm-p30 #p30_sales .a-IRR-container, .dm-p30 #p30_sales .t-IRR-region { border: 0; box-shadow: none; }
.dm-p30 .dm-cust-link { color: var(--dm-brand); font-weight: 500; }
.dm-p30 .dm-walkin { color: inherit; pointer-events: none; text-decoration: none; }
.dm-p30 .dm-pill { padding: 2px 10px; font-size: 12px; background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.dm-p30 .dm-pill .fa { font-size: 11px; margin-right: 2px; }
.dm-p30 .dm-pill--INSTALLMENT { color: var(--dm-info); }
.dm-p30 .dm-pill--CREDIT { color: var(--dm-warn); }
.dm-p30 .dm-pill--RETURN { color: var(--dm-accent); }
.dm-p30 .dm-pill--CANCELLED { color: var(--dm-bad); }
.dm-p30 .dm-pill--CANCELLED .fa { display: none; }
.dm-p30 #p30_sales .a-IRR-table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.dm-p30 .dm-items { display: inline-block; max-width: 280px; white-space: normal; }
.dm-p30 .dm-row-cancel { color: var(--dm-bad); font-size: 15px; }
.dm-p30 .dm-row-cancel.is-hidden { display: none; }
.dm-p30 #p30_cards { display: none; }
.dm-p30 .dm-sale-card--CANCELLED { opacity: .6; }

/* ---------------------------------------------------------------- p31 new sale */
/* D-152 round 5 - step heads: numbered green circle, tick (light) when done; meta text right */
.dm-p31 .dm-subline { margin-top: -6px; }
.dm-p31 .dm-step > .t-Region-header { border-bottom: 0; background: transparent; padding-bottom: 0; }
.dm-p31 .dm-step > .t-Region-header .t-Region-headerItems--title { flex: 1 1 auto; min-width: 0; }
.dm-p31 .dm-step > .t-Region-header .t-Region-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.dm-p31 .dm-step > .t-Region-header .t-Region-title::before {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--dm-brand); color: var(--dm-on-brand); font-size: 14px; font-weight: 700; border: 1px solid var(--dm-brand);
}
.dm-p31 #p31_s1 > .t-Region-header .t-Region-title::before { content: "1"; }
.dm-p31 #p31_s2 > .t-Region-header .t-Region-title::before { content: "2"; }
.dm-p31 #p31_s3 > .t-Region-header .t-Region-title::before { content: "3"; }
.dm-p31 #p31_s4 > .t-Region-header .t-Region-title::before { content: "4"; }
.dm-p31 #p31_s5 > .t-Region-header .t-Region-title::before { content: "5"; }
.dm-p31 #p31_s1.is-done > .t-Region-header .t-Region-title::before, .dm-p31 #p31_s2.is-done > .t-Region-header .t-Region-title::before,
.dm-p31 #p31_s3.is-done > .t-Region-header .t-Region-title::before, .dm-p31 #p31_s4.is-done > .t-Region-header .t-Region-title::before,
.dm-p31 #p31_s5.is-done > .t-Region-header .t-Region-title::before {
  content: "\f00c"; font-family: "Font APEX Small", "Font APEX"; font-weight: 400; font-size: 13px;
  background: var(--dm-brand-tint); color: var(--dm-brand); border-color: color-mix(in srgb, var(--dm-brand) 35%, transparent);
}
.dm-p31 .dm-step .t-Region-title::after { content: attr(data-meta); margin-left: auto; font-weight: 400; font-size: 13px; color: var(--dm-muted); white-space: nowrap; }
/* customer step: walk-in line + link */
.dm-p31 #p31_s1 .row { align-items: center; }
.dm-p31 #p31_s1 .col:has(.dm-p31-walkin), .dm-p31 #p31_s1 .col:has(#dm_add_customer) { flex: 0 0 auto; width: auto; max-width: 100%; }
.dm-p31 .dm-p31-walkin .t-Form-itemText::before, .dm-p31 .dm-p31-walkin .display_only::before {
  content: "\f007"; font-family: "Font APEX Small", "Font APEX"; margin-right: 6px; color: var(--dm-muted);
}
.dm-p31 .dm-p31-walkin, .dm-p31 #P31_WALKIN_NOTE_DISPLAY { color: var(--dm-muted); font-weight: 400; font-size: 14px; }
.dm-p31 .dm-p31-link.t-Button--link { color: var(--dm-info); font-weight: 600; padding-left: 4px; padding-right: 4px; }
.dm-p31 .dm-p31-link.t-Button--link .t-Icon { color: inherit; }
/* items: table head always, hint row while empty */
.dm-p31 .dm-p31-cart .t-Report-report th { background: color-mix(in srgb, var(--dm-muted) 8%, transparent); font-weight: 600; }
.dm-p31 .dm-p31-cart .t-Report-report th#REMOVE_ID { font-size: 0; }
.dm-p31 .dm-p31-cart table.t-Report-report { position: relative; }
/* D-237: the hint row keeps ALL its cells (a lone first cell drew a box under "Item" only - owner phone 2026-10-25); cells empty, no inner lines */
.dm-p31 .dm-p31-cart tr:has(.dm-cart-empty) td { height: 58px; font-size: 0; border-bottom: 1px solid var(--dm-line); }
.dm-p31 .dm-p31-cart tr:has(.dm-cart-empty) td:not(:first-child) { border-left: 0; }
.dm-p31 .dm-p31-cart tr:has(.dm-cart-empty) td:not(:last-child) { border-right: 0; }
.dm-p31 .dm-p31-cart tr:has(.dm-cart-empty) .dm-remove { display: none; }
.dm-p31 .dm-p31-cart .dm-cart-empty { position: absolute; left: 0; right: 0; text-align: center; font-weight: 400; color: var(--dm-muted); font-size: 13px; margin-top: -8px; }
.dm-p31 .dm-p31-cart .dm-cart-empty::before { content: "\f02a"; font-family: "Font APEX Small", "Font APEX"; margin-right: 6px; }
.dm-p31 .dm-p31-cart tr:has(.dm-cart-empty) .dm-sub { display: none; }
/* payment type: three big tiles (radio group; label = title + new line + sub text) */
.dm-p31 #P31_MODE_CONTAINER .t-Form-inputContainer, .dm-p31 #P31_MODE_CONTAINER .t-Form-itemWrapper { width: 100%; max-width: 100%; flex: 1 1 auto; }
.dm-p31 #P31_MODE_CONTAINER .t-Form-labelContainer { display: none; }
.dm-p31 #P31_MODE .apex-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; border: 0; }
.dm-p31 #P31_MODE .apex-item-grid-row { display: contents; }
.dm-p31 #P31_MODE .apex-item-option { margin: 0; position: relative; width: 100%; max-width: none; min-width: 0; }
.dm-p31 #P31_MODE .apex-item-option input { position: absolute; opacity: 0; }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option label {
  display: block; position: relative; height: 100%; min-height: 112px; margin: 0; padding: 62px 8px 14px; white-space: pre-line; text-align: center;
  border: 2px solid var(--dm-line); border-radius: var(--dm-radius); background: var(--ut-component-background-color); box-shadow: none;
  color: var(--dm-muted); font-size: 12px; font-weight: 400; line-height: 1.5; cursor: pointer;
}
.dm-p31 #P31_MODE_CONTAINER .apex-item-option label::first-line { font-size: 15px; font-weight: 700; color: var(--ut-body-text-color, CanvasText); }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option label::before {
  content: "\f0d6"; font-family: "Font APEX Small", "Font APEX"; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: color-mix(in srgb, var(--dm-muted) 10%, transparent); color: var(--dm-muted);
}
.dm-p31 #P31_MODE_CONTAINER .apex-item-option input[value="CREDIT"] + label::before { content: "\ec9b"; }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option input[value="INSTALLMENT"] + label::before { content: "\f073"; }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option input:checked + label { border-color: var(--dm-brand); background: color-mix(in srgb, var(--dm-brand-tint) 55%, var(--ut-component-background-color)); }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option input:checked + label::before { background: var(--dm-brand); color: var(--dm-on-brand); }
.dm-p31 #P31_MODE_CONTAINER .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-info); outline-offset: 2px; }
/* "More details" / "Discount": closed link rows (collapsible regions without the box) */
.dm-p31 .dm-p31-morelink > .t-Region-header { background: transparent; border: 0; padding: 4px 0; min-height: 0; }
.dm-p31 .dm-p31-morelink > .t-Region-header .t-Region-title { font-size: 14px; font-weight: 500; color: var(--dm-info); display: flex; gap: 6px; }
.dm-p31 .dm-p31-morelink > .t-Region-header .t-Region-title::after { content: attr(data-meta); color: var(--dm-muted); font-weight: 400; }
.dm-p31 .dm-p31-morelink > .t-Region-header .t-Button--hideShow { color: var(--dm-info); background: transparent; box-shadow: none; }
.dm-p31 .dm-p31-morelink.t-Region--noBorder, .dm-p31 #p31_qmore, .dm-p31 #p31_disc { border: 0; box-shadow: none; background: transparent; margin: 4px 0; }
.dm-p31 #p31_more > .t-Region-header { padding: 12px 16px; }
/* tenure title "How many months?" (Standard, no UI) */
.dm-p31 .dm-p31-tenure > .t-Region-header { background: transparent; border: 0; padding: 0 0 6px; min-height: 0; }
.dm-p31 .dm-p31-tenure > .t-Region-header .t-Region-title { font-size: 13px; font-weight: 600; }
.dm-p31 .dm-p31-tenure .a-CardView-title { font-size: 12px; font-weight: 600; color: var(--dm-muted); }
/* guarantor head: "Guarantor  optional" */
.dm-p31 .dm-p31-grule .t-Form-label, .dm-p31 #P31_G_RULE_LABEL { font-weight: 700; font-size: 14px; }
.dm-p31 #P31_G_RULE_LABEL::before { content: "\f132"; font-family: "Font APEX Small", "Font APEX"; margin-right: 6px; font-weight: 400; }
.dm-p31 #P31_G_RULE_CONTAINER { display: block; }
.dm-p31 #P31_G_RULE_CONTAINER > div { display: inline-block !important; width: auto !important; max-width: none !important; vertical-align: baseline; margin-right: 6px; }
.dm-p31 #P31_G_RULE_CONTAINER .t-Form-labelContainer, .dm-p31 #P31_G_RULE_CONTAINER .t-Form-inputContainer { width: auto; flex: 0 0 auto; max-width: none; padding: 0; }
.dm-p31 #P31_G_RULE_DISPLAY, .dm-p31 #P31_G_RULE { color: var(--dm-muted); font-size: 12px; font-weight: 400; }
/* bill card = ONE card: header Bill + payment type badge; subtotal, Discount link, rows, payment, total + Confirm */
.dm-p31 #p31_side > .t-Region-header .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p31 #p31_side > .t-Region-header .t-Region-title { display: flex; align-items: center; font-size: 14px; font-weight: 700; }
.dm-p31 #p31_side > .t-Region-header .t-Region-title::after {
  content: attr(data-badge); margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--dm-ok); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 8%, transparent);
}
.dm-p31 #p31_side[data-mode="CREDIT"] > .t-Region-header .t-Region-title::after { color: var(--dm-warn); }
.dm-p31 #p31_side[data-mode="INSTALLMENT"] > .t-Region-header .t-Region-title::after { color: var(--dm-info); }
.dm-p31 #p31_side > .t-Region-bodyWrap > .t-Region-body { padding-top: 4px; }
.dm-p31 .dm-p31-bill .t-AVPList-label { font-size: 12px; color: var(--dm-muted); font-weight: 400; }
.dm-p31 .dm-p31-bill .t-AVPList-value { text-align: right; }
.dm-p31 .dm-bill-strong { font-size: 16px; font-weight: 700; }
.dm-p31 #P31_PAY_HEAD_CONTAINER .t-Form-itemWrapper { display: block; width: 100%; }
.dm-p31 .dm-p31-payhead .t-Form-itemText, .dm-p31 #P31_PAY_HEAD_DISPLAY, .dm-p31 .dm-p31-payhead .display_only {
  display: block; color: var(--dm-brand); font-weight: 700; font-size: 13px; padding-bottom: 4px; border-bottom: 1px solid var(--dm-line);
}
.dm-p31 #p31_bar { border-top: 1px solid var(--dm-line); margin: 12px -16px -12px; padding: 12px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "reason" "main"; align-items: center; column-gap: 12px; row-gap: 6px; }
.dm-p31 #p31_bar > .container, .dm-p31 #p31_bar > .container > .row { display: contents; }
/* D-248: areas by CONTENT, not row number (the Details row was added first and shifted every row: the reason text sat on Details) */
.dm-p31 #p31_bar .col:has(#dm_bill_details) { grid-area: det; padding: 0; display: none; }
.dm-p31 #p31_bar .col:has(#dm_confirm_sale) { grid-area: main; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-p31 #p31_bar .col:has(#P31_REASON_CONTAINER) { grid-area: reason; padding: 0; }
.dm-p31 #p31_bar #dm_confirm_sale { width: auto; margin: 0; flex: 0 0 auto; }
.dm-p31 #p31_bar .t-Form-fieldContainer { padding: 0; margin: 0; }
.dm-p31 #P31_TOTAL_TEXT_LABEL { font-size: 12px; color: var(--dm-muted); font-weight: 400; }
.dm-p31 .dm-p31-details { display: none; }
.dm-p31 #P31_PRODUCT_CONTAINER .t-Form-itemWrapper, .dm-p31 #P31_PRODUCT_CONTAINER .apex-item-group, .dm-p31 #P31_PRODUCT_CONTAINER .apex-item-popup-lov { width: 100%; max-width: 100%; flex: 1 1 auto; }
.dm-p31 #P31_PRODUCT_CONTAINER input.apex-item-popup-lov { min-height: 44px; font-size: 15px; }
.dm-p31 .dm-p31-morelink > .t-Region-header .t-Button--hideShow { border: 0; min-width: 0; padding: 0 4px; }
.dm-p31 #p31_side .t-Region-body > .container > .row > .col { padding-top: 0; padding-bottom: 0; }
.dm-p31 #p31_side .t-AVPList-label, .dm-p31 #p31_side .t-AVPList-value { padding-top: 8px; padding-bottom: 8px; }
.dm-p31 #p31_side .t-Region { margin-bottom: 0; }
/* hidden-label fields take the full width (no empty label column) */
.dm-p31 .t-Form-fieldContainer--hiddenLabel > .t-Form-labelContainer { display: none; }
.dm-p31 .t-Form-fieldContainer--hiddenLabel > .t-Form-inputContainer { flex: 1 1 auto; max-width: 100%; width: 100%; }
.dm-p31 .dm-note, .dm-p31 .dm-note .display_only, .dm-p31 .t-Form-fieldContainer--hiddenLabel .display_only { text-align: left; }
.dm-p31 #P31_ADVANCE_HELP_DISPLAY, .dm-p31 #P31_ADVANCE_HELP_CONTAINER .display_only { font-size: 12px; font-weight: 400; color: var(--dm-muted); }
.dm-p31 #P31_ADVANCE_HELP_CONTAINER { margin-top: -10px; padding-top: 0; }
.dm-p31 #P31_DOCS_NOTE_CONTAINER .display_only { text-align: left; }
.dm-p31 #p31_s1 .col:has(#dm_add_customer) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dm-p31 #P31_WALKIN_NOTE_CONTAINER { flex: 0 1 auto; width: auto; padding-right: 0; }
.dm-p31 .dm-p31-morelink .t-Region-title::after { margin-left: 6px !important; }
.dm-p31 .dm-p31-cust .a-CardView { border-radius: var(--dm-radius); }
.dm-p31 .dm-p31-cust .is-blocked .a-CardView-body:last-child,
.dm-p31 .dm-p31-cust .is-blocked .a-CardView-secondaryBody { color: var(--dm-bad); font-weight: 600; }
.dm-p31 .dm-p31-cart .dm-qty { width: 56px; min-height: 40px; text-align: center; border: 1px solid var(--dm-line); border-radius: 6px; }
.dm-p31 .dm-p31-cart .dm-remove { min-width: 40px; min-height: 40px; color: var(--dm-bad); }
.dm-p31 .dm-p31-cart td { vertical-align: middle; }
/* owner 2026-10-18: the cart table stretches over the whole Items region (item name takes the free space, numbers stay tight) */
.dm-p31 .dm-p31-cart, .dm-p31 .dm-p31-cart .t-Report, .dm-p31 .dm-p31-cart .t-Report-wrap,
.dm-p31 .dm-p31-cart .t-Report-tableWrap, .dm-p31 .dm-p31-cart table.t-Report-report { width: 100%; }
.dm-p31 .dm-p31-cart .t-Report-report td.dm-money, .dm-p31 .dm-p31-cart .t-Report-report th.dm-money { white-space: nowrap; width: 1%; }
.dm-p31 .dm-p31-cart .t-Report-report .dm-col-qty, .dm-p31 .dm-p31-cart .t-Report-report .dm-col-remove { width: 1%; white-space: nowrap; }
.dm-p31 .dm-p31-cart .dm-name { display: block; font-weight: 600; }
.dm-p31 .dm-p31-cart .dm-sub { display: block; font-size: 12px; color: var(--dm-muted); }
/* mockup D-114: "Other months" / "Other markup %" = two dashed cards under the tenure cards; the % / Rs. switch sits in the markup card */
.dm-p31 .dm-p31-other { margin-top: 12px; }
.dm-p31 .dm-p31-other .t-Form-fieldContainer:not(.dm-p31-mkmode) { border: 1px dashed var(--dm-line); border-radius: var(--dm-radius); padding: 8px; }
.dm-p31 .dm-p31-mkmode .t-Form-inputContainer, .dm-p31 .dm-p31-mkmode .t-Form-itemWrapper { max-width: 100%; min-width: 0; }
.dm-p31 .dm-p31-mkmode .apex-item-grid { display: flex; width: 100%; max-width: 100%; gap: 0; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); overflow: hidden; }
.dm-p31 .dm-p31-mkmode .apex-item-grid-row { display: contents; }
.dm-p31 .dm-p31-mkmode .apex-item-option { flex: 1 1 0; min-width: 0; }
.dm-p31 .dm-p31-mkmode .apex-item-option label { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 8px; white-space: normal; text-align: center; }
.dm-p31 .dm-p31-tenure .a-CardView { cursor: pointer; border: 2px solid var(--dm-line); border-radius: var(--dm-radius); }
.dm-p31 .dm-p31-tenure .is-selected .a-CardView,
.dm-p31 .dm-p31-tenure .a-CardView.is-selected { border-color: var(--dm-brand); background: var(--dm-brand-tint); }
.dm-p31 .dm-p31-tenure .is-low .a-CardView-body,
.dm-p31 .dm-p31-tenure .a-CardView.is-low .a-CardView-body { color: var(--dm-bad); }
.dm-p31 .dm-p31-tenure .is-disabled .a-CardView,
.dm-p31 .dm-p31-tenure .a-CardView.is-disabled { cursor: not-allowed; opacity: .55; }
.dm-p31 .dm-p31-tenure .a-CardView-subTitle { font-size: 18px; font-weight: 700; color: var(--ut-body-text-color, inherit); }
.dm-p31 .dm-locked { background: var(--dm-brand-tint); }
.dm-p31 .dm-p31-total .t-Form-itemText, .dm-p31 #P31_TOTAL_TEXT_DISPLAY, .dm-p31 #P31_TOTAL_TEXT { font-size: 22px; font-weight: 700; color: var(--dm-brand); }
.dm-p31 .dm-p31-reason, .dm-p31 #P31_REASON_DISPLAY { color: var(--dm-bad); font-size: 13px; }
.dm-p31 #dm_confirm_sale[disabled] { opacity: .55; cursor: not-allowed; }
/* D-206 follow-up (owner 2026-10-24: "as little scrolling as possible"): desktop >= 992 px = the Bill card is sticky under the title bar
   and never taller than the screen; its rows scroll inside and the Total + Confirm Sale bar stays pinned at the bottom of the card */
@media (min-width: 992px) {
  .dm-p31 .dm-p31-side { position: sticky; top: 168px; align-self: flex-start; max-height: calc(100vh - 176px); display: flex; flex-direction: column; }
  .dm-p31 #p31_side > .t-Region-header { padding-top: 8px; padding-bottom: 4px; min-height: 0; }
  .dm-p31 #p31_side > .t-Region-bodyWrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .dm-p31 #p31_side > .t-Region-bodyWrap > .t-Region-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
  .dm-p31 #p31_side > .t-Region-bodyWrap > .t-Region-body > .container,
  .dm-p31 #p31_side > .t-Region-bodyWrap > .t-Region-body > .container > .row,
  .dm-p31 #p31_side > .t-Region-bodyWrap > .t-Region-body > .container > .row > .col { display: contents; }
  .dm-p31 #p31_side .t-AVPList-label, .dm-p31 #p31_side .t-AVPList-value { padding-top: 5px; padding-bottom: 5px; }
  .dm-p31 #p31_bar { position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 8px 16px 10px; flex: 0 0 auto;
    background: var(--ut-component-background-color); }
  .dm-p31 #p31_bar .dm-p31-total .t-Form-itemText, .dm-p31 #p31_bar #P31_TOTAL_TEXT_DISPLAY { font-size: 20px; }
}
/* left column compact (owner 2026-10-24): one-line step heads, less space between the steps */
.dm-p31 .dm-step > .t-Region-header { padding-top: 8px; min-height: 0; }
.dm-p31 .dm-step > .t-Region-header .t-Region-title { font-size: 15px; }
.dm-p31 .dm-step > .t-Region-header .t-Region-title::before { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
.dm-p31 .dm-step > .t-Region-bodyWrap > .t-Region-body { padding-top: 6px; padding-bottom: 10px; }
.dm-p31 .dm-step { margin-bottom: 10px; }
.dm-p31 .dm-p31-cust .a-CardView-header { padding-top: 8px; }
.dm-p31 .dm-p31-cust .a-CardView-body { padding-bottom: 8px; }
@media (max-width: 991px) {
  .dm-p31 .t-Body-content { padding-bottom: 140px; }
  .dm-p31 #p31_bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; margin: 0; padding: 8px 16px;
    background: var(--ut-component-background-color); border-top: 1px solid var(--dm-line);
  }
  .dm-p31 #p31_bar .t-Form-fieldContainer { margin: 0; padding: 0; }
  .dm-p31 #p31_bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "reason reason" "det main"; border-radius: 0; }
  .dm-p31 #p31_bar .col:has(#dm_bill_details) { display: block; }
  .dm-p31 #p31_bar .dm-p31-details { display: inline-flex; margin: 0; }
  .dm-p31 #p31_bar .t-Region-body, .dm-p31 #p31_bar .container { padding: 0; }
}
@media (max-width: 640px) {
  /* D-152 round 5 phone: tiles stay 3 across, tenure cards 2 across, Other months | Other markup side by side */
  .dm-p31 #P31_MODE .apex-item-grid { gap: 8px; }
  .dm-p31 #P31_MODE_CONTAINER .apex-item-option label { min-height: 104px; padding: 54px 4px 10px; font-size: 11px; line-height: 1.35; }
  .dm-p31 #P31_MODE_CONTAINER .apex-item-option label::first-line { font-size: 14px; }
  .dm-p31 #P31_MODE_CONTAINER .apex-item-option label::before { top: 10px; width: 36px; height: 36px; font-size: 16px; }
  .dm-p31 .dm-p31-tenure .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dm-p31 #p31_other .row { display: flex; flex-wrap: wrap; }
  .dm-p31 #p31_other .col:has(#P31_OTHER_MONTHS_CONTAINER), .dm-p31 #p31_other .col:has(#P31_MARKUP_PCT_CONTAINER) { flex: 0 0 50%; max-width: 50%; }
  .dm-p31 #P31_G_RULE_CONTAINER { flex-wrap: nowrap; white-space: nowrap; }
  /* bill card = bottom sheet behind "Details" (mockup); the Total / Details / Confirm bar stays fixed */
  .dm-p31 #p31_side:not(.is-open) > .t-Region-header,
  .dm-p31 #p31_side:not(.is-open) #p31_bill_sub, .dm-p31 #p31_side:not(.is-open) #p31_disc,
  .dm-p31 #p31_side:not(.is-open) #p31_bill, .dm-p31 #p31_side:not(.is-open) #p31_pay { display: none; }
  .dm-p31 #p31_side:not(.is-open) { border: 0; box-shadow: none; background: transparent; }
  .dm-p31 #p31_side.is-open { position: fixed; left: 0; right: 0; bottom: 128px; max-height: 65vh; overflow: auto; z-index: 399; margin: 0;
    border-radius: var(--dm-radius) var(--dm-radius) 0 0; box-shadow: 0 -6px 18px color-mix(in srgb, CanvasText 18%, transparent); }
  .dm-p31 .dm-p31-cart table { font-size: 13px; }
  .dm-p31 .dm-p31-cart th.dm-col-remove, .dm-p31 .dm-p31-cart td.dm-col-remove { width: 44px; }
  /* phone: the cart fits 390 px without inner scroll - unit price hidden (line total stays), tighter cells */
  .dm-p31 .dm-p31-cart th#PRICE_TEXT, .dm-p31 .dm-p31-cart td[headers="PRICE_TEXT"] { display: none; }
  .dm-p31 .dm-p31-cart .t-Report-report th, .dm-p31 .dm-p31-cart .t-Report-report td { padding-left: 6px; padding-right: 6px; }
  .dm-p31 .dm-p31-total .t-Form-itemText, .dm-p31 #P31_TOTAL_TEXT_DISPLAY { font-size: 18px; }
}

/* ---------------------------------------------------------------- p32 sale return */
/* D-152 round 5: find card (results = full width), sale card, Items (+ Reason / Details) card 8 | Money effect card 4, Confirm right */
.dm-p32 .dm-p32-results .t-Report-report, .dm-p32 .dm-p32-results .t-Report-wrap, .dm-p32 .dm-p32-results .t-Report-tableWrap { width: 100%; }
.dm-p32 .dm-p32-results .t-Report-report th { background: color-mix(in srgb, var(--dm-muted) 8%, transparent); }
.dm-p32 .dm-p32-results .t-Report-report td, .dm-p32 .dm-p32-results .t-Report-report th { border-left: 0; border-right: 0; }
.dm-p32 .dm-p32-pick { color: inherit; font-weight: 700; }
.dm-p32 .dm-pill { padding: 2px 10px; font-size: 12px; background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.dm-p32 .dm-pill .fa { font-size: 11px; }
.dm-p32 .dm-pill--PAY_NOW, .dm-p32 .dm-pill--CONFIRMED { color: var(--dm-ok); }
.dm-p32 .dm-pill--CREDIT { color: var(--dm-warn); }
.dm-p32 .dm-pill--INSTALLMENT { color: var(--dm-info); }
.dm-p32 #p32_find > .t-Region-header .t-Region-title::before { content: "\f002"; font-family: "Font APEX Small", "Font APEX"; margin-right: 8px; font-weight: 400; }
.dm-p32 #p32_find > .t-Region-header, .dm-p32 #p32_items > .t-Region-header, .dm-p32 #p32_effect > .t-Region-header { border-bottom: 0; background: transparent; }
.dm-p32 #p32_items > .t-Region-header .t-Region-headerItems--title, .dm-p32 #p32_effect > .t-Region-header .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p32 #p32_items > .t-Region-header .t-Region-title, .dm-p32 #p32_effect > .t-Region-header .t-Region-title { display: flex; align-items: baseline; font-size: 15px; font-weight: 700; }
.dm-p32 #p32_items > .t-Region-header .t-Region-title::after, .dm-p32 #p32_effect > .t-Region-header .t-Region-title::after {
  content: attr(data-meta); margin-left: auto; font-size: 12px; font-weight: 400; color: var(--dm-muted); }
.dm-p32 .dm-p32-head .a-CardView { border: 1px solid var(--dm-line); border-radius: var(--dm-radius); background: var(--ut-component-background-color); box-shadow: none; }
.dm-p32 .dm-p32-head .a-CardView-icon, .dm-p32 .dm-p32-head .a-CardView-iconWrap { width: 72px; height: 72px; border-radius: 50%; font-size: 30px;
  background: var(--dm-brand-tint); color: var(--dm-brand); display: flex; align-items: center; justify-content: center; }
.dm-p32 .dm-p32-head .a-CardView-header, .dm-p32 .dm-p32-head .a-CardView-body { border: 0; }
.dm-p32 .dm-p32-head .a-CardView-title { font-size: 20px; font-weight: 700; }
.dm-p32 .dm-p32-head .a-CardView-mainContent { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--dm-muted); font-size: 13px; }
.dm-p32 .dm-p32-head .dm-p32-line .fa { margin-right: 4px; }
.dm-p32 .dm-p32-head .dm-p32-age { color: var(--dm-warn); }
.dm-p32 .dm-p32-head .a-CardView-subContent { display: flex; gap: 6px; align-items: center; }
.dm-p32 .dm-p32-lines .t-Report-report, .dm-p32 .dm-p32-lines .t-Report-wrap, .dm-p32 .dm-p32-lines .t-Report-tableWrap { width: 100%; }
.dm-p32 .dm-p32-lines .t-Report-report th { background: color-mix(in srgb, var(--dm-muted) 8%, transparent); }
.dm-p32 .dm-p32-lines .t-Report-report td, .dm-p32 .dm-p32-lines .t-Report-report th { border-left: 0; border-right: 0; }
.dm-p32 .dm-p32-lines th#TICK { font-size: 0; }
.dm-p32 .dm-p32-why { margin-top: 8px; }
.dm-p32 #p32_bar { display: flex; justify-content: flex-end; }
.dm-p32 .dm-p32-head .a-CardView { position: relative; }
.dm-p32 .dm-p32-head .a-CardView-body { padding-left: 104px; margin-top: -44px; padding-top: 0; }
.dm-p32 .dm-p32-head .a-CardView-subContent { position: absolute; top: 16px; right: 16px; }
.dm-p32 .dm-p32-effect .t-AVPList-value:has(.dm-bill-muted) { text-align: left; width: 100%; flex: 1 1 100%; max-width: 100%; }
.dm-p32 .dm-p32-effect .t-AVPList-label:empty { display: none; }
.dm-p32 #P32_DETAILS { min-height: 48px; height: 48px; }
@media (max-width: 640px) {
  .dm-p32 .dm-p32-head .a-CardView-body { padding-left: 16px; margin-top: 0; }
  .dm-p32 .dm-p32-head .a-CardView-subContent { position: static; padding: 0 16px 12px; }
  .dm-p32 .dm-p32-results th#ITEMS_TEXT, .dm-p32 .dm-p32-results td[headers="ITEMS_TEXT"], .dm-p32 .dm-p32-results th#CAN_RETURN, .dm-p32 .dm-p32-results td[headers="CAN_RETURN"] { display: none; }
}
.dm-p32 .dm-p32-lines .dm-ret-qty { width: 64px; min-height: 40px; text-align: center; border: 1px solid var(--dm-line); border-radius: 6px; }
.dm-p32 .dm-p32-lines .dm-ret-tick { width: 22px; height: 22px; }
.dm-p32 .dm-p32-lines td { vertical-align: middle; }
@media (max-width: 767px) {
  .dm-p32 .t-Body-content { padding-bottom: 80px; }
  .dm-p32 #p32_bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; padding: 8px 16px; background: var(--ut-component-background-color); border-top: 1px solid var(--dm-line); }
  .dm-p32 #p32_bar .t-Button { width: 100%; }
}

/* ---------------------------------------------------------------- p33 receipt (paper always light, R6.2 / BR5) */
/* D-152 / D-158 round 5: the paper = the mockup receipt (04_TEST\fidelity\33\print_mockup.png): centred shop head + dashed rule,
   bill block in 2 columns (left: type, No., customer, mobile / CNIC | right: date, salesman, mode), full-width ruled item table,
   totals block right, "Installment plan" heading + plan block right + schedule in two halves with one header each, guarantor line,
   dashed rule + return policy, two signature lines. Screen = the same paper in a card; print = only the paper (A4 or 80 mm). */
.dm-p33 .dm-receipt {
  --dm-paper-ink: CanvasText; background: Canvas; color: CanvasText; color-scheme: light;
  border: 1px solid var(--dm-line); border-radius: var(--dm-radius); padding: 20px 24px; font-size: 14px;
}
.dm-p33 .dm-receipt { --dm-muted: GrayText; }
.dm-p33 .dm-receipt .t-Report-report, .dm-p33 .dm-receipt .t-AVPList { background: transparent; color: inherit; }
.dm-p33 .dm-receipt .t-AVPList-label, .dm-p33 .dm-receipt .t-AVPList-value,
.dm-p33 .dm-receipt .t-Report-report th, .dm-p33 .dm-receipt .t-Report-report td,
.dm-p33 .dm-receipt .t-Report-colHead, .dm-p33 .dm-receipt .t-Report-cell { color: inherit; background: transparent; }
.dm-p33 .dm-receipt .dm-bill-warn { color: inherit; font-weight: 700; }
.dm-p33 .dm-receipt .t-Report-wrap, .dm-p33 .dm-receipt .t-Report-tableWrap, .dm-p33 .dm-receipt table.t-Report-report { width: 100%; max-height: none; overflow: visible; }
.dm-p33 .dm-receipt .t-Region, .dm-p33 .dm-receipt .container, .dm-p33 .dm-receipt .t-Report { margin: 0; }
/* shop head */
.dm-p33 .dm-r-shop .t-Report-report td { border: 0; text-align: center; padding: 0; }
.dm-p33 .dm-receipt .t-Report-report, .dm-p33 .dm-receipt .t-Report-wrap, .dm-p33 .dm-receipt .t-Report-tableWrap, .dm-p33 .dm-p33-panel .t-Report-report, .dm-p33 .dm-p33-panel .t-Report-wrap { border: 0; box-shadow: none; }
.dm-p33 .dm-r-shop { border-bottom: 1px dashed CanvasText; padding-bottom: 10px; margin-bottom: 12px; }
.dm-p33 .dm-r-name { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.dm-p33 .dm-r-sub { display: block; font-size: 13px; line-height: 1.6; }
.dm-p33 .dm-r-phone::before { content: "\f095"; font-family: "Font APEX Small", "Font APEX"; margin-right: 4px; }
.dm-p33 .dm-r-stamp:not(:empty) { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 2px solid var(--dm-bad); color: var(--dm-bad); font-weight: 700; }
/* bill block: label (regular) + value (bold) on one line; first left row = the document type in capitals */
.dm-p33 .dm-r-meta .t-AVPList { display: block; margin: 0; }
.dm-p33 .dm-r-meta .t-AVPList-label, .dm-p33 .dm-r-meta .t-AVPList-value { display: inline; width: auto; padding: 0; border: 0; font-size: 13px; }
.dm-p33 .dm-r-meta .t-AVPList-label { font-weight: 400; margin-right: 4px; }
.dm-p33 .dm-r-meta .t-AVPList-label:empty { display: none; }
.dm-p33 .dm-r-meta .t-AVPList-value { font-weight: 700; }
.dm-p33 .dm-r-meta .t-AVPList-value::after { content: ""; display: block; margin-bottom: 3px; }
.dm-p33 #p33_meta .t-AVPList-value:first-of-type { text-transform: uppercase; }
.dm-p33 #p33_meta .t-AVPList-value:last-of-type { font-weight: 400; }
/* item table + schedule: full width, light lines, grey head */
.dm-p33 .dm-r-lines, .dm-p33 .dm-r-schedule { margin-top: 12px; }
.dm-p33 .dm-r-lines .t-Report-report, .dm-p33 .dm-r-schedule .t-Report-report { border: 0; border-collapse: collapse; }
.dm-p33 .dm-r-lines .t-Report-report th, .dm-p33 .dm-r-schedule .t-Report-report th {
  background: color-mix(in srgb, GrayText 10%, Canvas); font-weight: 600; border: 0; border-bottom: 1px solid CanvasText; padding: 8px 12px; }
.dm-p33 .dm-r-lines .t-Report-report td, .dm-p33 .dm-r-schedule .t-Report-report td { border: 0; border-bottom: 1px solid color-mix(in srgb, CanvasText 45%, Canvas); padding: 8px 12px; }
.dm-p33 .dm-r-lines .dm-sub { display: none; }
/* totals + plan block: right half, label left / value right bold */
.dm-p33 .dm-r-totals, .dm-p33 .dm-r-qist { width: 50%; margin-left: auto; margin-top: 12px; }
.dm-p33 .dm-r-totals .t-AVPList, .dm-p33 .dm-r-qist .t-AVPList { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; row-gap: 2px; margin: 0; }
.dm-p33 .dm-r-totals .t-AVPList-label, .dm-p33 .dm-r-qist .t-AVPList-label,
.dm-p33 .dm-r-totals .t-AVPList-value, .dm-p33 .dm-r-qist .t-AVPList-value { width: auto; padding: 3px 0; border: 0; font-size: 14px; }
.dm-p33 .dm-r-totals .t-AVPList-label, .dm-p33 .dm-r-qist .t-AVPList-label { font-weight: 400; padding-right: 16px; }
.dm-p33 .dm-r-totals .t-AVPList-value, .dm-p33 .dm-r-qist .t-AVPList-value { text-align: right; font-weight: 700; }
.dm-p33 .dm-r-totals .t-AVPList-label:empty,
.dm-p33 .dm-r-totals .t-AVPList-label:has(+ .t-AVPList-value .dm-words) { display: none; }   /* r6 shell: empty label cell before the words line left a 6 px row */
.dm-p33 .dm-r-totals .t-AVPList-value:has(.dm-words) { grid-column: 1 / -1; text-align: left; font-weight: 400; padding-top: 10px; }
.dm-p33 .dm-r-totals .t-AVPList-label:has(+ .t-AVPList-value .dm-bill-total), .dm-p33 .dm-r-totals .t-AVPList-value:has(.dm-bill-total) {
  border-top: 1px solid CanvasText; padding-top: 6px; margin-top: 0; font-weight: 700; }   /* r6 shell: no extra gap under Cash Price (mockup) */
.dm-p33 .dm-words { font-style: italic; font-size: 14px; }
.dm-p33 .dm-r-h { margin-top: 16px; }
.dm-p33 .dm-r-htext { font-size: 15px; font-weight: 700; margin: 0; }
/* schedule: 2 halves, each "# | Due date | Rs.", the second half starts after a gap */
.dm-p33 .dm-r-schedule th.dm-r-half2, .dm-p33 .dm-r-schedule td.dm-r-half2 { padding-left: 16px; }
.dm-p33 #p33_schedule .t-Report-report thead { display: table-header-group !important; }
.dm-p33 #p33_schedule .t-Report-report tbody { display: table-row-group !important; }
.dm-p33 #p33_schedule .t-Report-report tbody tr { display: table-row !important; }
.dm-p33 #p33_schedule .t-Report-report tbody td { display: table-cell !important; }
/* guarantor line, dashed rule, return policy, signatures */
.dm-p33 .dm-r-guar { margin-top: 12px; }
.dm-p33 .dm-r-guar .t-Report-report td { border: 0; padding: 2px 0; font-size: 13px; }
.dm-p33 .dm-r-footer { border-top: 1px dashed CanvasText; margin-top: 16px; padding-top: 20px; font-size: 12px; text-align: left; }
.dm-p33 .dm-r-sign .t-Region-body, .dm-p33 .dm-r-sign { display: flex; gap: 32px; justify-content: space-between; margin-top: 28px; }
.dm-p33 .dm-r-signline { flex: 1 1 0; border-top: 1px solid currentColor; padding-top: 4px; font-size: 12px; text-align: center; }
/* 80 mm thermal: one column, small text, signatures stacked (GAP-21) */
.dm-p33 .dm-receipt--THERMAL_80 { max-width: 80mm; font-size: 12px; padding: 8px; }
.dm-p33 .dm-receipt--THERMAL_80 .col { flex: 0 0 100%; max-width: 100%; }
.dm-p33 .dm-receipt--THERMAL_80 .dm-r-totals, .dm-p33 .dm-receipt--THERMAL_80 .dm-r-qist { width: 100%; }
.dm-p33 .dm-receipt--THERMAL_80 .dm-r-sign { flex-direction: column; gap: 28px; }
.dm-p33 .dm-receipt--THERMAL_80 .t-Report-report th, .dm-p33 .dm-receipt--THERMAL_80 .t-Report-report td { padding: 3px 4px; font-size: 11px; }
/* 80 mm: the two schedule halves follow each other row by row (# | due | Rs.), one header */
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule tr { display: grid !important; grid-template-columns: 2.2em minmax(0, 1fr) auto; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule th, .dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule td { display: block !important; padding-left: 4px !important; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule thead th:nth-child(n+4) { display: none !important; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule td:empty { display: none !important; }
/* D-206 #16 (owner 2026-10-24): 80 mm = schedule in ONE column 1..N (the SQL gives one column for THERMAL_80) and every line inside the paper */
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_schedule td:nth-child(n+4) { display: none !important; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 { box-sizing: border-box; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 * { box-sizing: border-box; max-width: 100%; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 { overflow-wrap: anywhere; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 table.t-Report-report { table-layout: fixed; width: 100%; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_lines th:first-child, .dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_lines td:first-child { width: 1.8em; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 :is(#p33_totals, #p33_qist) .t-AVPList { grid-template-columns: minmax(0, 1fr) auto; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 :is(#p33_totals, #p33_qist) .t-AVPList-label { padding-right: 6px; font-size: 12px; white-space: normal; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 :is(#p33_totals, #p33_qist) .t-AVPList-value { font-size: 12px; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 #p33_totals .t-AVPList-value { white-space: nowrap; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 :is(#p33_totals, #p33_qist) .t-AVPList-value:has(.dm-words) { white-space: normal; }
.dm-p33 #p33_receipt.dm-receipt--THERMAL_80 .dm-bill-total { font-size: 13px; }
/* title pills (sub line of the title bar) + side panels */
.dm-p33 .dm-p33-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.dm-p33 .dm-p33-pills .dm-pill { padding: 2px 10px; font-size: 12px; background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.dm-p33 .dm-pill::before { font-family: "Font APEX Small", "Font APEX"; margin-right: 4px; font-size: 11px; }
.dm-p33 .dm-pill--INSTALLMENT { color: var(--dm-info); } .dm-p33 .dm-pill--INSTALLMENT::before { content: "\f133"; }
.dm-p33 .dm-pill--PAY_NOW::before { content: "\f0d6"; }
.dm-p33 .dm-pill--CREDIT { color: var(--dm-warn); } .dm-p33 .dm-pill--CREDIT::before { content: "\f017"; }
.dm-p33 .dm-pill--RETURN { color: var(--dm-accent); } .dm-p33 .dm-pill--RETURN::before { content: "\f0ec"; }
.dm-p33 .dm-pill--CONFIRMED { color: var(--dm-ok); } .dm-p33 .dm-pill--CONFIRMED::before { content: "\f05d"; }
.dm-p33 .dm-pill--CANCELLED { color: var(--dm-bad); }
.dm-p33 .dm-p33-against { color: var(--dm-muted); font-size: 13px; }
.dm-p33 .dm-btn-danger-soft { --a-button-text-color: var(--dm-bad); --a-button-border-color: color-mix(in srgb, var(--dm-bad) 45%, transparent);
  --a-button-background-color: color-mix(in srgb, var(--dm-bad) 8%, transparent); }
.dm-p33 .dm-p33-panel > .t-Region-header { border-bottom: 0; background: transparent; }
.dm-p33 .dm-p33-panel > .t-Region-header .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p33 .dm-p33-panel > .t-Region-header .t-Region-title { display: flex; font-size: 14px; font-weight: 700; }
.dm-p33 #p33_payments > .t-Region-header .t-Region-title::after { content: attr(data-count); margin-left: auto; font-weight: 400; color: var(--dm-muted); font-size: 13px; }
.dm-p33 .dm-p33-panel .t-Region-body { padding-top: 0; }
.dm-p33 .dm-p33-panel .t-Report-report, .dm-p33 .dm-p33-panel .t-Report-wrap, .dm-p33 .dm-p33-panel .t-Report-tableWrap { width: 100%; }
.dm-p33 .dm-p33-panel .t-Report-report td { border: 0; border-bottom: 1px solid var(--dm-line); vertical-align: top; font-size: 13px; padding: 10px 4px; }
.dm-p33 .dm-p33-panel .t-Report-report tr:last-child td { border-bottom: 0; }
.dm-p33 .dm-p33-doc { color: var(--dm-info); }
.dm-p33 #p33_history .t-Report-report td { border: 0; padding: 4px 0 4px 18px; position: relative; color: var(--dm-muted); font-size: 14px; }
.dm-p33 #p33_history .t-Report-report td::before { content: ""; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dm-p33 #p33_history .t-Report-report td b { color: var(--ut-body-text-color, inherit); }
@media (max-width: 640px) {
  .dm-p33 .dm-receipt { padding: 12px; font-size: 13px; }
  .dm-p33 .dm-r-totals, .dm-p33 .dm-r-qist { width: 100%; }
  .dm-p33 .dm-r-lines .t-Report-wrap, .dm-p33 .dm-r-schedule .t-Report-wrap { overflow-x: auto; }
  .dm-p33 .dm-r-lines .t-Report-report th, .dm-p33 .dm-r-lines .t-Report-report td,
  .dm-p33 .dm-r-schedule .t-Report-report th, .dm-p33 .dm-r-schedule .t-Report-report td { padding: 6px 4px; font-size: 12px; }
}
/* print (D-158): only the paper; dm_print.css (shell) hides the app chrome; these rules are scoped to the p33 paper */
@media print {
  .dm-p33 .dm-noprint, .dm-p33 #p33_pick, .dm-p33 #p33_side { display: none !important; }
  .dm-p33 #p33_receipt.dm-receipt { border: 0; border-radius: 0; padding: 0; max-width: none; width: 100%; font-size: 12px; }
  .dm-p33 #p33_receipt .t-Report-report th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dm-p33 #p33_receipt .t-Report-report tbody tr, .dm-p33 #p33_receipt .t-AVPList-value, .dm-p33 .dm-r-sign { break-inside: avoid; page-break-inside: avoid; }
  .dm-p33 #p33_meta dl.t-AVPList, .dm-p33 #p33_meta_r dl.t-AVPList { display: block !important; }
  .dm-p33 #p33_receipt .col.col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .dm-p33 #p33_receipt :is(#p33_totals, #p33_qist) dl.t-AVPList { width: 100% !important; margin-left: 0 !important; column-gap: 0 !important; }
  .dm-p33 #p33_receipt :is(#p33_totals, #p33_qist) .t-AVPList-label { padding-right: 4mm !important; }
  .dm-p33 #p33_receipt #p33_totals .t-AVPList-value:has(.dm-bill-total),
  .dm-p33 #p33_receipt #p33_totals .t-AVPList-label:has(+ .t-AVPList-value .dm-bill-total) { border-top: 1px solid CanvasText !important; padding-top: 2mm !important; margin-top: 1mm !important; }
  .dm-p33 #p33_receipt #p33_totals .t-AVPList-value:has(.dm-words) { font-weight: 400 !important; text-align: left !important; padding-top: 3mm !important; }
  .dm-p33 #p33_receipt .t-Report-report thead th { background: color-mix(in srgb, GrayText 12%, Canvas) !important; padding: 2mm 3mm !important; }
  .dm-p33 #p33_receipt .t-Report-report tbody td { padding: 2mm 3mm !important; }
  .dm-p33 #p33_receipt .dm-r-shop .t-Report-report tbody td { border: 0 !important; padding: 0 !important; }
  .dm-p33 #p33_receipt .dm-r-guar .t-Report-report tbody td { border: 0 !important; padding: 1mm 0 !important; }
  .dm-p33 #p33_receipt.dm-receipt--THERMAL_80 { width: 72mm !important; font-size: 11px; }
  .dm-p33 #p33_receipt.dm-receipt--THERMAL_80 .col { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ---------------------------------------------------------------- phones: lists become cards (D-103) */
@media (max-width: 767px) {
  /* phone: the IR keeps only its toolbar (Actions + New Sale next to Filters); the rows show as cards */
  .dm-p30 #p30_sales .a-IRR-reportView, .dm-p30 #p30_sales .a-IRR-paginationWrap, .dm-p30 #p30_sales .a-IRR-content { display: none; }
  .dm-p30 #p30_sales .a-IRR-toolbar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; position: absolute; top: 72px; left: 112px; right: 12px; margin: 0; padding: 0; align-items: center; min-height: 40px; }
  .dm-p30 #p30_sales .a-IRR-controls, .dm-p30 #p30_sales .a-IRR-buttons { height: 40px; align-items: center; } .dm-p30 #p30_sales .a-IRR-actions { margin: 0; display: flex; align-items: center; height: 40px; }
  .dm-p30 .dm-p30-find input.text_field { height: 40px; }
  .dm-p30 .dm-p30-find .t-Button { height: 40px; }
  .dm-p30 #p30_sales .a-IRR-button--actions { min-height: 40px; }
  .dm-p30 #p30_sales .a-IRR { border: 0; }
  .dm-p30 #p30_sales .a-IRR-controls, .dm-p30 #p30_sales .a-IRR-buttons { flex: 0 0 auto; width: auto; justify-content: flex-start; }
  .dm-p30 #p30_sales .a-IRR-buttons .t-Button, .dm-p30 #p30_sales .a-IRR-button--actions { width: auto; }
  .dm-p30 .dm-p30-period .apex-item-option label { padding: 0 10px; white-space: nowrap; font-size: 13px; }
  .dm-p30 .dm-p30-find { padding: 12px 12px 0; }
  .dm-p30 .dm-p30-find .col-5 { flex-wrap: wrap; padding-bottom: 10px; }
  .dm-p30 .dm-p30-find .t-Form-fieldContainer { flex: 1 1 100%; width: 100%; }
  .dm-p30 #p30_cards { display: block; }
  .dm-p30 .dm-p30-kpis .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dm-p30 .dm-p30-kpis .a-CardView-item:last-child { grid-column: 1 / -1; }
  .dm-p30 #p30_filters { margin: 0 12px 8px; }
  .dm-p30 .dm-p30-cards .a-CardView-items { gap: 0; }
  .dm-p30 .a-CardView.dm-sale-card { border: 0; border-top: 1px solid var(--dm-line); border-radius: 0; box-shadow: none; }
  .dm-p30 .dm-sale-card .a-CardView-header { padding-bottom: 0; border: 0; }
  .dm-p30 .dm-sale-card .a-CardView-body { padding-top: 0; }
  .dm-p30 .dm-sale-card .a-CardView-title { font-size: 14px; font-weight: 700; }
  .dm-p30 .dm-sale-card .a-CardView-subTitle { font-size: 12px; color: var(--dm-muted); }
  .dm-p30 .dm-sale-card .a-CardView-body { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
  .dm-p30 .a-CardView.dm-sale-card { position: relative; }
  .dm-p30 .dm-sale-card .a-CardView-subContent { position: absolute; top: 12px; right: 16px; text-align: right; }
  .dm-p30 .dm-sale-card .dm-c-net { display: block; font-weight: 700; font-size: 14px; }
  .dm-p30 .dm-sale-card .dm-c-paid { display: block; margin-top: 18px; font-size: 12px; }
  .dm-p30 .dm-sale-card .dm-c-cust { display: block; margin-top: 4px; }
  .dm-p30 .dm-sale-card .dm-c-items { display: block; margin-top: 10px; }
  .dm-p30 .dm-sale-card .dm-c-badges { display: flex; justify-content: space-between; margin-top: 6px; }
}

/* round 7 final QA: the sale total (8-digit amount) must stay on one line */
.dm-p31 [id^="P31_"][id$="_TEXT"].display_only { white-space: nowrap; }

/* round 7 final QA (align_scan): the walk-in note never reaches the Add customer button */
.dm-p31 #P31_WALKIN_NOTE_CONTAINER { max-width: calc(100% - 180px); }

.dm-p31 #P31_WALKIN_NOTE_CONTAINER { margin-right: 8px; box-sizing: border-box; }

/* D-189: Confirm Sale tapped while the page is still recalculating - shows busy, never dims */
#dm_confirm_sale.is-busy { cursor: progress; opacity: .85; }

/* ---- shopkeeper review row 12 (2026-10-21): Sale Return on a phone - items table fits, Confirm Return bar is in the flow (last), never over a row ---- */
@media (max-width: 640px) {
  .dm-p32 .dm-p32-lines .t-Report-report th, .dm-p32 .dm-p32-lines .t-Report-report td { padding: 6px 3px; font-size: 12px; }
  .dm-p32 .dm-p32-lines .dm-ret-qty { width: 48px; min-height: 36px; }
  .dm-p32 .dm-p32-lines th#TICK, .dm-p32 .dm-p32-lines td[headers="TICK"] { width: 30px; }
  .dm-p32 .t-Body-contentInner { display: flex; flex-direction: column; }
  .dm-p32 .t-Body-contentInner > .container:has(#p32_bar) { order: 9; }
  .dm-p32 #p32_bar { position: static; padding: 8px 16px 16px; border-top: 0; background: transparent; }
  .dm-p32 .t-Body-content { padding-bottom: 0; }
}
/* ---- day1021 (owner-approved layout, Builder B) ---- */
/* B1 p31: step 5 (guarantor + documents) only for credit / installment - hidden until layout() shows it (no flash on a cash sale) */
.dm-p31 #p31_s5 { display: none; }
/* B1 p31: "New Customer" next to the customer picker, same height as the field */
.dm-p31 #dm_p31_new_cust { width: 100%; min-height: 48px; margin-top: 0; justify-content: center; }
@media (max-width: 640px) { .dm-p31 #dm_p31_new_cust { margin-top: 0; } }
/* B2 p30: "Sold today by product" next to New Sale in the toolbar */
.dm-p30 #dm_p30_sold_today { margin-right: 8px; }
/* D-195: unfinished-sale banner at the top of p31 (mockup #p31_draft) + page locked until answered */
#p31_unfinished .dm-p31-unf-text { font-weight: 600; margin: 0; }
#p31_unfinished .dm-p31-unf-help { color: var(--ut-body-text-color); opacity: .8; margin: 2px 0 8px; }
#p31_unfinished .dm-p31-unf-btn + .dm-p31-unf-btn { margin-left: 8px; }
body.dm-p31-unanswered #p31_cart, body.dm-p31-unanswered #p31_bar { opacity: .55; pointer-events: none; }

/* ---- D-197 (owner bug 2026-10-21, line tables, Builder D): numbers right-aligned in the cart / return qty fields, same app field look
   (40 px, rounded border, focus ring) on phones too (was 36 px), a qty of up to 4 digits fits ---- */
.dm-p31 .dm-p31-cart .dm-qty, .dm-p32 .dm-p32-lines .dm-ret-qty { box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 10px; text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid var(--dm-line); border-radius: var(--dm-radius-sm); background: var(--ut-component-background-color); }
.dm-p31 .dm-p31-cart .dm-qty { width: 64px; }
.dm-p31 .dm-p31-cart .dm-qty:focus, .dm-p32 .dm-p32-lines .dm-ret-qty:focus { border-color: var(--dm-brand); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); }
.dm-p32 .dm-p32-lines .dm-ret-qty:disabled { background: var(--ut-body-background-color, var(--ut-component-background-color)); }
@media (max-width: 640px) {
  .dm-p32 .dm-p32-lines .dm-ret-qty { width: 56px; height: 40px; min-height: 40px; padding: 0 8px; }
}
/* D-198 (owner 2026-10-21): Money effect labels never cut with '...' and amounts never cut (UT Value Attribute Pairs truncate by default) */
.dm-p32 #p32_effect .t-AVPList-label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dm-p32 #p32_effect .t-AVPList-value { white-space: normal; overflow: visible; text-overflow: clip; flex: 0 1 auto; max-width: 62%; text-align: right; }   /* text values (Plan effect) wrap; amounts are short and stay whole */
/* D-206 #7 (owner 2026-10-24): compact p31 customer card - name + phone + outstanding balance in one block, code / CNIC / type behind
   "More" (native <details> in the Cards body HTML expression), buttons on the right; "Sell without verification - why?" one line */
.dm-p31 .dm-p31-cust .a-CardView { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.dm-p31 .dm-p31-cust .a-CardView > * { grid-column: 1; }
.dm-p31 .dm-p31-cust .a-CardView-header { padding: 8px 14px 0; border: 0; }
.dm-p31 .dm-p31-cust .a-CardView-title { font-size: 16px; }
.dm-p31 .dm-p31-cust .a-CardView-body { padding: 2px 14px 8px; border: 0; }
.dm-p31 .dm-p31-cust .a-CardView-body .a-CardView-mainContent, .dm-p31 .dm-p31-cust .a-CardView-secondaryBody { font-size: 13px; }
.dm-p31 .dm-p31-cust .a-CardView-actions { grid-column: 2; grid-row: 1 / span 4; border: 0; padding: 8px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.dm-p31 .dm-p31-cust .a-CardView-actions > * { margin: 0; justify-content: flex-end; }
.dm-p31 .dm-p31-cbal { font-weight: 600; }
.dm-p31 .dm-p31-cbal:empty { display: none; }
.dm-p31 .dm-p31-cmore { display: inline; margin-left: 12px; }
.dm-p31 .dm-p31-cbal:empty + .dm-p31-cmore { margin-left: 0; }
.dm-p31 .dm-p31-cmore > summary { display: inline; cursor: pointer; color: var(--dm-info); font-size: 13px; }
.dm-p31 .dm-p31-cmore > summary:hover { text-decoration: underline; }
.dm-p31 .dm-p31-cmore[open] > span { display: block; margin-top: 2px; color: var(--dm-muted); font-size: 13px; }
.dm-p31 #P31_VERIFY_REASON { min-height: 36px; height: 36px; width: 100%; }
.dm-p31 #P31_VERIFY_REASON_CONTAINER .t-Form-inlineHelp { margin-top: 2px; }
@media (max-width: 640px) {
  .dm-p31 .dm-p31-cust .a-CardView { grid-template-columns: minmax(0, 1fr); }
  .dm-p31 .dm-p31-cust .a-CardView-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}
/* D-206 follow-up: Total and Confirm Sale on ONE line in the bar (desktop card + phone bottom bar), smaller total label */
.dm-p31 #p31_bar .col:has(> #dm_confirm_sale) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.dm-p31 #p31_bar .col:has(> #dm_confirm_sale) > #P31_TOTAL_TEXT_CONTAINER { flex: 1 1 auto; min-width: 0; }
.dm-p31 #p31_bar #dm_confirm_sale { flex: 0 0 auto; width: auto; min-height: 44px; }
.dm-p31 #P31_TOTAL_TEXT_CONTAINER > .t-Form-labelContainer { padding-top: 0; padding-bottom: 0; min-height: 0; }
/* D-249 A: bill labels never cut with "..." (phone sheet showed "Total payable (adva..."): the fixed-width AVP label wraps instead */
.dm-p31 #p31_side .t-AVPList-label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* D-249 A: empty reason line takes no room in the bar; long totals step down (dm_sales.js fitBar); the phone sheet sits on the real bar height */
.dm-p31 #p31_bar .col:has(#P31_REASON:empty) { display: none; }
.dm-p31 #P31_TOTAL_TEXT_CONTAINER.dm-fit-1 #P31_TOTAL_TEXT { font-size: 17px; }
.dm-p31 #P31_TOTAL_TEXT_CONTAINER.dm-fit-2 #P31_TOTAL_TEXT { font-size: 14px; }
@media (max-width: 640px) {
  .dm-p31 #p31_side.is-open { bottom: var(--dm-p31-bar-h, 128px); max-height: calc(100vh - var(--dm-p31-bar-h, 128px) - 72px); }
}
/* D-249 A: phone / installed app - "Sold today by product" + Actions + New Sale did not fit next to Filters (New Sale was pushed off the
   screen at 390 px): the sold-today button shows its chart icon only there (label kept for screen readers) */
@media (max-width: 767px) {
  .dm-p30 #dm_p30_sold_today { margin-right: 6px; padding-left: 10px; padding-right: 10px; }
  .dm-p30 #dm_p30_sold_today .t-Button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dm-p30 #dm_p30_sold_today .t-Icon { margin: 0; }
}