/* dm_products.css - module styles of the products pages 20-26 (D-136). Owner: the products module.
   Selectors start with the page class (.dm-p2x = page CSS class) or a region id (#p2x_...). Tokens only (--dm-*, --ut-*), no hex colours. */

/* ---------------------------------------------------------------- shared small parts (pages 20-26 only) */
.dm-p20 .dm-pill--IMEI, .dm-p22 .dm-pill--IMEI { color: var(--dm-info); }
.dm-p20 .dm-pill--LOW, .dm-p21 .dm-pill--LOW, .dm-p22 .dm-pill--LOW { color: var(--dm-warn); }
.dm-p20 .dm-pill--OUT, .dm-p22 .dm-pill--OUT { color: var(--dm-bad); }
.dm-p20 .dm-pill--OK { display: none; }
.dm-p20 .dm-note, .dm-p21 .dm-note, .dm-p22 .dm-note, .dm-p25 .dm-note, .dm-p26 .dm-note { color: var(--dm-muted); font-size: 13px; margin: 4px 0; }
.dm-p20 .dm-pagesub, .dm-p23 .dm-pagesub, .dm-p25 .dm-pagesub, .dm-p26 .dm-pagesub { color: var(--dm-muted); margin: -4px 0 8px; font-size: 13px; }

/* ---------------------------------------------------------------- p20 products list */
#p20_products .a-IRR-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
#p20_products .a-IRR-table td a .fa { font-size: 15px; }
#p20_products tr:has(.dm-card-link) td { cursor: pointer; }
#p20_products tr:has(.dm-edge--LOW) td:first-child { box-shadow: inset 3px 0 0 var(--dm-warn); }
#p20_products tr:has(.dm-edge--OUT) td:first-child { box-shadow: inset 3px 0 0 var(--dm-bad); }
#p20_products .dm-stock { font-size: 15px; margin-right: 4px; }
#p20_products td[headers="CURRENT_STOCK"] .dm-pill:not(:empty) { display: inline-block; margin-top: 2px; }
#p20_products .dm-min[title]:not([title=""]) { color: var(--dm-muted); cursor: help; }
#p20_total { text-align: right; font-weight: 600; }
#p20_total .t-Report-report, #p20_total table { width: 100%; }
#p20_total td { border: 0; text-align: right; color: var(--dm-muted); }
.dm-p20 .dm-add-new { font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- round 5 (D-152 mockup fidelity): title bar, toolbar, list */
/* title bar: 22 px title + grey sub line under it (all products pages) */
.dm-p20 .t-BreadcrumbRegion-titleText, .dm-p22 .t-BreadcrumbRegion-titleText, .dm-p23 .t-BreadcrumbRegion-titleText,
.dm-p25 .t-BreadcrumbRegion-titleText, .dm-p26 .t-BreadcrumbRegion-titleText { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.dm-p20 .dm-titlesub, .dm-p22 .dm-titlesub, .dm-p23 .dm-titlesub, .dm-p25 .dm-titlesub, .dm-p26 .dm-titlesub {
  display: block; font-size: .8125rem; font-weight: 400; color: var(--dm-muted); margin-top: .2rem; }
/* soft tinted title buttons (mockup: light blue fill + blue border) */
.dm-p20 .dm-btn-tint, .dm-p22 .dm-btn-tint, .dm-p23 .dm-btn-tint, .dm-p26 .dm-btn-tint {
  --a-button-background-color: var(--dm-brand-tint); background-color: color-mix(in srgb, var(--dm-info) 9%, transparent); }
.dm-p20 .ep-btn-soft--grey, .dm-p22 .ep-btn-soft--grey, .dm-p23 .ep-btn-soft--grey, .dm-p26 .ep-btn-soft--grey {
  background-color: color-mix(in srgb, var(--dm-muted) 9%, transparent); border: 1px solid var(--dm-line); }
/* one toolbar row = top of the list card: search, Filters, Actions, New Product */
.dm-p20 #p20_toolbar { background: var(--ut-component-background-color); border: 1px solid var(--dm-line); border-bottom: 0;
  border-radius: var(--dm-radius) var(--dm-radius) 0 0; padding: 12px 12px 10px; margin-bottom: 0; }
.dm-p20 #p20_toolbar .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.dm-p20 #p20_toolbar .row > .col { width: auto; flex: 0 0 auto; padding: 0; min-height: 0; }
.dm-p20 #p20_toolbar .row > .col:has(.dm-search) { flex: 1 1 300px; max-width: 520px; }
.dm-p20 #p20_toolbar .row > .col:has(#dm_actions) { margin-left: auto; }
.dm-p20 #p20_toolbar .t-Form-fieldContainer { padding: 0; margin: 0; display: block; }
.dm-p20 #p20_toolbar .t-Form-labelContainer--hiddenLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.dm-p20 #p20_toolbar .t-Form-inputContainer { width: 100%; max-width: none; flex: 1 1 auto; padding: 0; }
.dm-p20 #p20_toolbar .dm-search { min-height: 40px; }
.dm-p20 #p20_toolbar .t-Button { margin: 0; min-height: 36px; }
.dm-p20 #dm_filters.is-active { --a-button-text-color: var(--dm-brand); border-color: var(--dm-brand); }
.dm-p20 #p20_filters.is-collapsed { display: none; }
.dm-p20 #p20_filters { margin: 0; border-radius: 0; border-left: 1px solid var(--dm-line); border-right: 1px solid var(--dm-line); box-shadow: none; }
.dm-p20 #p20_products { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
.dm-p20 #p20_products .a-IRR-toolbar { display: none; }        /* Actions = the toolbar button (opens the native IR menu) */
/* list: grey headers, no text over the icon columns, sort hint, low / out badge under the number, out rows tinted */
.dm-p20 #p20_products .a-IRR-header, .dm-p20 #p20_products .a-IRR-headerLink, .dm-p20 #p20_products .a-IRR-headerLabel { color: var(--dm-muted); font-weight: 600; }
.dm-p20 #p20_products th#CARD_ID .a-IRR-headerLabel, .dm-p20 #p20_products th#EDIT_ID .a-IRR-headerLabel,
.dm-p20 #p20_products th#CARD_ID .a-IRR-headerLink, .dm-p20 #p20_products th#EDIT_ID .a-IRR-headerLink {
  font-size: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-p20 #p20_products .a-IRR-headerLink::after { content: "\2195"; margin-left: 4px; font-size: 10px; opacity: .45; }
.dm-p20 #p20_products th[aria-sort] .a-IRR-headerLink::after { content: none; }
.dm-p20 #p20_products td[headers="CURRENT_STOCK"] .dm-stock { display: block; margin-right: 0; }
.dm-p20 #p20_products .dm-pill:not(:empty) { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 0 7px;
  border-radius: 999px; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
.dm-p20 #p20_products .dm-pill--LOW:not(:empty)::before { content: "\26A0"; }
.dm-p20 #p20_products .dm-pill--OUT:not(:empty)::before { content: "\2298"; }
.dm-p20 #p20_products tr:has(.dm-edge--OUT) td { background-color: color-mix(in srgb, var(--dm-bad) 6%, transparent); }
.dm-p20 #p20_products .dm-sub { display: block; font-size: 11px; color: var(--dm-muted); }
.dm-p20 #p20_products .dm-bc .fa { font-size: 10px; }
.dm-p20 #p20_products .dm-name { font-weight: 600; }
/* footer: "1 - 42 of 42" left, "Stock value of shown rows" right in the same row */
.dm-p20 #p20_products .a-IRR-paginationWrap { padding: 10px 12px; }
.dm-p20 #p20_toolbar .t-Form-itemWrapper, .dm-p20 #P20_FIND { width: 100%; }
.dm-p20 #P20_FIND { font-size: 14px; }
.dm-p20 #p20_total { margin-top: -57px; margin-bottom: 0; position: relative; pointer-events: none; background: transparent; border: 0; box-shadow: none; }
.dm-p20 #p20_total td { font-size: 12px; font-weight: 400; padding: 12px 14px; background: transparent; }
.dm-p20 #p20_total .t-Report, .dm-p20 #p20_total .t-Report-wrap, .dm-p20 #p20_total .t-Report-tableWrap, .dm-p20 #p20_total .t-Report-report {
  width: 100%; border: 0; background: transparent; box-shadow: none; }
.dm-p20 #p20_total .t-Report-pagination { display: none; }

/* ---------------------------------------------------------------- p21 product form */
.dm-p21 .dm-hint { font-size: 12px; color: var(--dm-warn); margin-top: 2px; }
.dm-p21 .dm-hint--info { color: var(--dm-info); }
.dm-p21 .dm-margin { font-size: 12px; color: var(--dm-ok); margin-top: 2px; }
.dm-p21 .dm-margin.dm-loss { color: var(--dm-bad); font-weight: 600; }
.dm-p21 .dm-onstock .display_only, .dm-p21 .dm-onstock { font-weight: 700; }
.dm-p21 .dm-money-input, .dm-p23 #P23_QTY { font-variant-numeric: tabular-nums; }
#p21_dup_msg { font-size: 15px; margin: 8px 0; }
/* round 5 (D-152): compact form like the mockup - plain grey hint, no section headings, 2 rows, dashed "More details" row */
.dm-p21 #p21_intro { color: var(--dm-muted); font-size: 13px; margin: 0 0 6px; }
.dm-p21 .dm-p21-sec { margin-bottom: 0; }
.dm-p21 .dm-p21-sec > .t-Region-bodyWrap > .t-Region-body { padding: 0; }
.dm-p21 .dm-p21-sec .t-Form-fieldContainer { padding-top: 4px; padding-bottom: 4px; }
.dm-p21 .t-Form-itemRequired-marker { display: none; }
.dm-p21 .is-required label.t-Form-label::after { content: " *"; color: var(--dm-bad); border: 0; position: static; display: inline;
  width: auto; height: auto; background: none; margin: 0; }
.dm-p21 #p21_more { border: 1px dashed var(--dm-line); border-radius: var(--dm-radius); box-shadow: none; margin-top: 6px; }
.dm-p21 #p21_more .t-Region-header { padding: 6px 8px; background: transparent; }
.dm-p21 #p21_more .t-Region-title { font-size: 13px; font-weight: 600; color: var(--dm-brand); }
.dm-p21 #p21_more .dm-morehint { font-weight: 400; color: var(--dm-muted); font-size: 12px; margin-left: 8px; }
.dm-p21 .t-Button--hot { --a-button-background-color: var(--dm-brand); --a-button-border-color: var(--dm-brand); background-color: var(--dm-brand); }

/* ---------------------------------------------------------------- p22 stock card */
.dm-p22 .dm-head .a-CardView-title { font-size: 20px; }
.dm-p22 .dm-head .a-CardView-badge { white-space: nowrap; }
.dm-p22 .dm-head .dm-card--LOW .a-CardView-badge { color: var(--dm-warn); }
.dm-p22 .dm-head .dm-card--OUT .a-CardView-badge { color: var(--dm-bad); }
#p22_totals .a-CardView-title { font-size: 13px; color: var(--dm-muted); font-weight: 600; }
#p22_totals .a-CardView-subTitle { font-size: 22px; font-weight: 700; }
#p22_totals .dm-tile--in .a-CardView-subTitle { color: var(--dm-ok); }
#p22_totals .dm-tile--out .a-CardView-subTitle { color: var(--dm-bad); }
#p22_totals .dm-kpi--bad .a-CardView-subTitle { color: var(--dm-bad); }
.dm-p22 .dm-mv--IN, .dm-p23 .dm-mv--IN { color: var(--dm-ok); font-weight: 600; white-space: nowrap; }
.dm-p22 .dm-mv--OUT, .dm-p23 .dm-mv--OUT { color: var(--dm-bad); font-weight: 600; white-space: nowrap; }
.dm-p22 .dm-mv--PREV { color: var(--dm-muted); font-style: italic; }
.dm-p22 .dm-up { color: var(--dm-bad); }
.dm-p22 .dm-down { color: var(--dm-ok); }
.dm-p22 .dm-pill--IN_STOCK { color: var(--dm-ok); }
.dm-p22 .dm-pill--DAMAGED, .dm-p22 .dm-pill--LOST { color: var(--dm-bad); }
.dm-p22 .dm-pill--ADJUSTED_OUT { color: var(--dm-warn); }
.dm-p22 .dm-pills .apex-item-grid, .dm-p22 .dm-pills .apex-item-grid-row { flex-wrap: wrap; }
/* round 5 (D-152): header card, period filters, tinted KPIs, movements header chip + Print / Download, total row, price history header */
.dm-p22 #p22_head .a-CardView-item { border: 1px solid var(--dm-line); border-radius: var(--dm-radius); }
.dm-p22 #p22_head .a-CardView-header { align-items: center; }
.dm-p22 #p22_head .a-CardView-iconWrap { width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--dm-info) 14%, transparent);
  color: var(--dm-info); display: flex; align-items: center; justify-content: center; }
.dm-p22 #p22_head .a-CardView-icon { background: transparent; color: var(--dm-info); font-size: 26px; width: auto; height: auto; }
.dm-p22 #p22_head .a-CardView-title { font-size: 20px; font-weight: 700; }
.dm-p22 #p22_head .dm-meta { display: inline-flex; gap: 4px; align-items: center; margin-right: 16px; color: var(--dm-muted); font-size: 13px; }
.dm-p22 #p22_head .a-CardView-badge { color: var(--dm-ok); border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; font-size: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent); }
.dm-p22 #p22_head .dm-card--INACTIVE .a-CardView-badge { color: var(--dm-muted); }
.dm-p22 #p22_head .a-CardView-body { padding-top: 0; margin-top: -34px; }
.dm-p22 #p22_head .a-CardView-subContent { text-align: right; font-size: 13px; }
.dm-p22 #p22_head .a-CardView-headerBody .dm-meta:first-of-type { margin-top: 4px; }
.dm-p22 #p22_head .dm-stockflag:not(:empty) { margin-left: 6px; font-size: 12px; }
.dm-p22 #p22_head .dm-card--LOW .dm-stockflag { color: var(--dm-warn); }
.dm-p22 #p22_head .dm-card--OUT .dm-stockflag, .dm-p22 #p22_head .dm-card--OUT .dm-curstock strong { color: var(--dm-bad); }
.dm-p22 #p22_period .t-Region-header .t-Region-title { font-size: 14px; font-weight: 700; }
.dm-p22 #p22_period .col:has(#P22_MOVE_CONTAINER) { display: none; }
.dm-p22 #p22_period.dm-showmove .col:has(#P22_MOVE_CONTAINER) { display: block; }
.dm-p22 #dm_filters.is-active { --a-button-text-color: var(--dm-brand); border-color: var(--dm-brand); }
.dm-p22 .dm-pills .apex-item-option label { border-radius: 999px !important; margin: 2px; }
.dm-p22 #p22_totals .dm-tile--open .a-CardView-item { background: color-mix(in srgb, var(--dm-info) 8%, transparent); border-color: color-mix(in srgb, var(--dm-info) 30%, transparent); }
.dm-p22 #p22_totals .dm-tile--in .a-CardView-item { background: color-mix(in srgb, var(--dm-ok) 8%, transparent); border-color: color-mix(in srgb, var(--dm-ok) 30%, transparent); }
.dm-p22 #p22_totals .dm-tile--out .a-CardView-item { background: color-mix(in srgb, var(--dm-bad) 8%, transparent); border-color: color-mix(in srgb, var(--dm-bad) 30%, transparent); }
.dm-p22 #p22_totals .dm-tile--close .a-CardView-item { background: color-mix(in srgb, var(--dm-accent) 8%, transparent); border-color: color-mix(in srgb, var(--dm-accent) 30%, transparent); }
.dm-p22 #p22_totals .dm-tile--open .a-CardView-title { color: var(--dm-info); }
.dm-p22 #p22_totals .dm-tile--in .a-CardView-title { color: var(--dm-ok); }
.dm-p22 #p22_totals .dm-tile--out .a-CardView-title { color: var(--dm-bad); }
.dm-p22 #p22_totals .dm-tile--close .a-CardView-title { color: var(--dm-accent); }
#p22_totals .a-CardView-subTitle { color: inherit; }
#p22_totals .dm-tile--in .a-CardView-subTitle, #p22_totals .dm-tile--out .a-CardView-subTitle { color: inherit; }
.dm-p22 #p22_moves .t-Region-title, .dm-p22 #p22_prices .t-Region-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dm-p22 #p22_prices .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p22 .dm-chip { font-size: 12px; font-weight: 400; color: var(--dm-muted); margin-left: 8px; }
.dm-p22 .dm-titleright { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--dm-muted); }
.dm-p22 .dm-titleicon { font-size: 14px; }
.dm-p22 #p22_moves .t-Report-links { display: none; }        /* Download = header button */
.dm-p22 #p22_moves .dm-sub, .dm-p22 #p22_prices .dm-sub { display: block; font-size: 12px; color: var(--dm-muted); }
.dm-p22 #p22_moves .dm-cell-label { display: none; }
.dm-p22 #p22_moves tr:has(.dm-mv--TOTAL) td { font-weight: 700; background: color-mix(in srgb, var(--dm-muted) 9%, transparent); }
.dm-p22 .dm-mv--TOTAL { color: inherit; font-weight: 700; }
.dm-p22 .dm-mv--TOTAL .fa { display: none; }

/* ---------------------------------------------------------------- p23 stock adjustment */
#p23_preview .dm-big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
#p23_preview .dm-big--new { font-size: 24px; }
#p23_preview .t-AVPList-value { text-align: right; }
/* round 5 (D-152): pill In / Out toggle with arrows, preview = full name heading + code line, recent header "last 10", green product link */
.dm-p23 #P23_DIRECTION .apex-item-grid { display: inline-flex; border: 1px solid var(--dm-line); border-radius: 999px; overflow: hidden; }
.dm-p23 #P23_DIRECTION .apex-item-option label { border: 0 !important; border-radius: 0 !important; padding: 8px 16px; min-height: 40px; margin: 0; white-space: nowrap; display: flex; align-items: center; }
.dm-p23 #P23_DIRECTION .apex-item-option + .apex-item-option label { border-left: 1px solid var(--dm-line) !important; }
.dm-p23 #P23_DIRECTION input:checked + label { background: var(--dm-brand); color: var(--dm-on-brand); }
.dm-p23 #p23_preview .t-AVPList { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.dm-p23 #p23_preview .t-AVPList-label, .dm-p23 #p23_preview .t-AVPList-value { white-space: normal; overflow: visible; text-overflow: clip;
  width: auto; float: none; display: block; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--dm-line); }
.dm-p23 #p23_preview .t-AVPList-value { text-align: right; }
.dm-p23 #p23_preview .t-AVPList-label:first-of-type { grid-column: 1 / 3; font-weight: 700; font-size: 15px; padding-bottom: 2px; border: 0; }
.dm-p23 #p23_preview .t-AVPList-value:first-of-type { grid-column: 1 / 3; text-align: left; padding-top: 0; }
.dm-p23 #p23_preview .t-AVPList-value:first-of-type .dm-sub { color: var(--dm-muted); font-size: 13px; }
.dm-p23 #p23_form .t-Region-title, .dm-p23 #p23_preview .t-Region-title, .dm-p23 #p23_recent .t-Region-title { font-size: 14px; font-weight: 700; }
.dm-p23 #p23_recent .t-Region-title { display: flex; align-items: center; }
.dm-p23 #p23_recent .t-Region-headerItems--title { flex: 1 1 auto; }
.dm-p23 .dm-titleright { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--dm-muted); }
.dm-p23 #p23_recent .dm-link, .dm-p23 #p23_recent td[headers="PRODUCT_NAME"] a { color: var(--dm-brand); }
.dm-p23 #p23_recent .dm-sub { display: block; font-size: 12px; color: var(--dm-muted); }
.dm-p23 .t-Button--hot { --a-button-background-color: var(--dm-brand); --a-button-border-color: var(--dm-brand); background-color: var(--dm-brand); }

/* ---------------------------------------------------------------- p25 categories & lists */
#p25_lists table, #p25_lists .t-Report-report { width: 100%; }
#p25_lists td { border: 0; padding: 2px 0; }
#p25_lists .dm-listlink { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--dm-radius); text-decoration: none; color: inherit; }
#p25_lists .dm-listlink:hover { background: var(--dm-brand-tint); }
#p25_lists .dm-listlink.is-active { background: var(--dm-brand-tint); color: var(--dm-brand); font-weight: 600; }
#p25_lists .dm-count { margin-left: auto; font-size: 11px; color: var(--dm-muted); border: 1px solid var(--dm-line); border-radius: 999px; padding: 0 7px; }
.dm-p25 .fa-lock { color: var(--dm-muted); }
/* round 5 (D-152): values panel = card with "<list> n values" + Add Row in the header; IR toolbar (Actions) hidden; "#" column */
.dm-p25 .dm-p25-panel .a-IRR-toolbar { display: none; }
.dm-p25 .dm-p25-panel .t-Region-title, .dm-p25 #p25_lists .t-Region-title { font-size: 14px; font-weight: 700; }
.dm-p25 .dm-count-text { font-size: 12px; font-weight: 400; color: var(--dm-muted); margin-left: 10px; }
.dm-p25 .dm-p25-panel .a-IRR-container, .dm-p25 .dm-p25-panel .a-IRR { border: 0; box-shadow: none; }
.dm-p25 .dm-p25-panel th#RN, .dm-p25 .dm-p25-panel td[headers="RN"] { width: 40px; color: var(--dm-muted); }
.dm-p25 .dm-p25-panel .a-IRR-header, .dm-p25 .dm-p25-panel .a-IRR-headerLink { color: var(--dm-muted); font-weight: 600; }

/* ---------------------------------------------------------------- p26 stock count */
#p26_sheet .dm-cathead { font-weight: 700; color: var(--dm-brand); white-space: nowrap; }
#p26_sheet .dm-count { width: 72px; min-height: 44px; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
#p26_sheet .dm-box { display: inline-block; min-width: 64px; min-height: 28px; border: 1px solid var(--dm-line); border-radius: 4px; text-align: center; }
#p26_sheet .dm-diff--up { color: var(--dm-ok); font-weight: 700; }
#p26_sheet .dm-diff--down { color: var(--dm-bad); font-weight: 700; }
#p26_sheet .dm-appline { display: none; }
#p26_review .dm-differ { font-size: 18px; font-weight: 700; margin: 4px 0; }
.dm-p26 .dm-preview-label { display: none; }
/* round 5 (D-152 / D-158): LIST mode = the paper itself (mockup): narrow white sheet, shop name, "Stock count · date · Counted by ___",
   category heading rows, empty Counted cell to write in, footer "n items on this list." - same layout on screen and in print */
.dm-p26-LIST .dm-paper { max-width: 580px; background: var(--ut-component-background-color); border: 1px solid var(--dm-line); box-shadow: none; }
.dm-p26-LIST .dm-paperhead { border-bottom: 0; border-radius: var(--dm-radius) var(--dm-radius) 0 0; margin-bottom: 0; padding: 18px 20px 6px; text-align: center; }
.dm-p26-LIST .dm-paperhead .dm-paper-shop { font-size: 17px; font-weight: 700; margin: 0; }
.dm-p26-LIST .dm-paperhead p { margin: 2px 0 0; font-size: 12px; color: var(--dm-muted); padding-bottom: 10px; border-bottom: 1px solid var(--dm-line); }
.dm-p26-LIST .dm-paperhead p.dm-preview-label { border: 0; padding: 0; }
.dm-p26-LIST #p26_sheet { border-top: 0; border-radius: 0 0 var(--dm-radius) var(--dm-radius); margin-top: 0; }
.dm-p26-LIST #p26_sheet > .t-Region-bodyWrap > .t-Region-body { padding: 4px 20px 16px; }
.dm-p26-LIST #p26_sheet .t-Report-report, .dm-p26-LIST #p26_sheet .t-Report-report thead, .dm-p26-LIST #p26_sheet .t-Report-report tbody { display: block; width: 100%; border: 0; }
.dm-p26-LIST #p26_sheet .t-Report-report tr { display: grid; grid-template-columns: 26px 78px minmax(0, 1fr) 44px 62px 70px 76px; align-items: center; }
.dm-p26-LIST #p26_sheet .t-Report-report tr:not(:has([headers="APP_STOCK"])):not(:has(#APP_STOCK)) { grid-template-columns: 26px 78px minmax(0, 1fr) 44px 90px; }
.dm-p26-LIST #p26_sheet th, .dm-p26-LIST #p26_sheet td { display: block; font-size: 12px; padding: 7px 6px; background: transparent; border: 0; border-bottom: 1px solid var(--dm-line); }
.dm-p26-LIST #p26_sheet th { font-weight: 600; background: color-mix(in srgb, var(--dm-muted) 9%, transparent); }
.dm-p26-LIST #p26_sheet th#CAT_HEAD, .dm-p26-LIST #p26_sheet td[headers="CAT_HEAD"]:has(.dm-cathead:empty) { display: none; }
.dm-p26-LIST #p26_sheet td[headers="CAT_HEAD"] { grid-column: 1 / -1; border-bottom: 0; padding: 12px 0 4px; }
.dm-p26-LIST #p26_sheet .dm-cathead { color: inherit; font-size: 14px; font-weight: 700; }
.dm-p26-LIST #p26_sheet td[headers="COUNTED_QTY"], .dm-p26-LIST #p26_sheet th#COUNTED_QTY,
.dm-p26-LIST #p26_sheet td[headers="DIFF_TEXT"], .dm-p26-LIST #p26_sheet th#DIFF_TEXT { border-left: 1px solid var(--dm-line); align-self: stretch; }
.dm-p26-LIST #p26_sheet .dm-box { border: 0; min-width: 0; min-height: 0; display: inline; }
.dm-p26-LIST #p26_sheet .dm-name { font-weight: 400; }
.dm-p26-LIST #p26_sheet td[headers="PRODUCT_CODE"], .dm-p26-LIST #p26_sheet th { white-space: nowrap; }
.dm-p26-LIST #p26_sheet th { overflow: hidden; text-overflow: ellipsis; }
.dm-p26-LIST .dm-paperfoot { font-size: 11px; color: var(--dm-muted); margin: 14px 0 0; }
.dm-p26-COUNT .dm-paperfoot { display: none !important; }
.dm-p26 .dm-blindhint { margin: 0; font-size: 11px; }
.dm-p26 #p26_filters .t-Region-body { padding-bottom: 8px; }

/* ---------------------------------------------------------------- phones (390 px): lists become cards, few columns */
@media (max-width: 640px) {
  /* p20 phone (mockup): search full width, then Filters / Actions / New Product; compact 3-column table Product / Stock / Sale Price */
  .dm-p20 #p20_toolbar .row > .col:has(.dm-search) { flex: 1 1 100%; max-width: none; }
  .dm-p20 #p20_toolbar .row > .col:has(#dm_actions) { margin-left: 0; }
  .dm-p20 #p20_toolbar .row > .col:has(#dm_new_product) { flex: 1 1 auto; }
  .dm-p20 #dm_new_product { width: 100%; }
  .dm-p20 #p20_products td[headers="CARD_ID"], .dm-p20 #p20_products th#CARD_ID,
  .dm-p20 #p20_products td[headers="EDIT_ID"], .dm-p20 #p20_products th#EDIT_ID,
  .dm-p20 #p20_products td[headers="PRODUCT_CODE"], .dm-p20 #p20_products th#PRODUCT_CODE,
  .dm-p20 #p20_products td[headers="CATEGORY_NAME"], .dm-p20 #p20_products th#CATEGORY_NAME,
  .dm-p20 #p20_products td[headers="MIN_TEXT"], .dm-p20 #p20_products th#MIN_TEXT,
  .dm-p20 #p20_products td[headers="PURCHASE_PRICE"], .dm-p20 #p20_products th#PURCHASE_PRICE { display: none; }
  .dm-p20 #p20_products td, .dm-p20 #p20_products th { padding-left: 8px; padding-right: 8px; font-size: 12px; }
  .dm-p20 #p20_products tr:has(.dm-edge--LOW) td[headers="PRODUCT_NAME"] { box-shadow: inset 3px 0 0 var(--dm-warn); }
  .dm-p20 #p20_products tr:has(.dm-edge--OUT) td[headers="PRODUCT_NAME"] { box-shadow: inset 3px 0 0 var(--dm-bad); }
  .dm-p20 #p20_products .dm-pill--IMEI, .dm-p20 #p20_products .dm-pill--INACTIVE { display: none; }
  .dm-p20 #p20_total { margin-top: -55px; }
  .dm-p20 #p20_total td { font-size: 11px; padding: 12px 8px; }
  .dm-p20 .t-BreadcrumbRegion-titleText { font-size: 1.1rem; }
  /* p22 phone (mockup): movements as stacked cards - date + reference, movement, details, In / Out / Balance with labels */
  .dm-p22 #p22_moves thead { display: none; }
  .dm-p22 #p22_moves table.t-Report-report, .dm-p22 #p22_moves tbody { display: block; width: 100%; }
  .dm-p22 #p22_moves tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 8px; padding: 10px 8px; border-bottom: 1px solid var(--dm-line); }
  .dm-p22 #p22_moves tbody td { display: block; border: 0; padding: 0; text-align: left; font-size: 13px; background: transparent; }
  .dm-p22 #p22_moves td[headers="DATE_TEXT"] { grid-row: 1; grid-column: 1 / 3; color: var(--dm-muted); font-size: 12px; }
  .dm-p22 #p22_moves td[headers="REFERENCE"] { grid-row: 1; grid-column: 3; text-align: right; }
  .dm-p22 #p22_moves td[headers="MOVEMENT"] { grid-row: 2; grid-column: 1 / 4; }
  .dm-p22 #p22_moves td[headers="DETAILS"] { grid-row: 3; grid-column: 1 / 4; }
  .dm-p22 #p22_moves td[headers="QTY_IN"], .dm-p22 #p22_moves td[headers="QTY_OUT"], .dm-p22 #p22_moves td[headers="BALANCE"] { grid-row: 4; }
  .dm-p22 #p22_head .a-CardView-body { margin-top: 0; }
  .dm-p22 #p22_moves td[headers="DETAILS"]:empty { display: none; }
  .dm-p22 #p22_moves .dm-cell-label { display: block; font-size: 11px; color: var(--dm-muted); font-weight: 400; }
  #p22_totals .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dm-p22 #p22_head .a-CardView-header { flex-wrap: wrap; }
  .dm-p22 #p22_head .a-CardView-subContent, .dm-p22 #p22_head .a-CardView-secondaryBody { text-align: right; }
  .dm-p22 #p22_prices td[headers="SUPPLIER_NAME"], .dm-p22 #p22_prices th#SUPPLIER_NAME { display: none; }
  .dm-p23 #p23_recent td[headers="REASON_TEXT"], .dm-p23 #p23_recent th#REASON_TEXT,
  .dm-p23 #p23_recent td[headers="CREATED_BY"], .dm-p23 #p23_recent th#CREATED_BY { display: none; }
  .dm-p25 #p25_values td[headers="LOOKUP_CODE"], .dm-p25 #p25_values th#LOOKUP_CODE,
  .dm-p25 #p25_values td[headers="SORT_ORDER"], .dm-p25 #p25_values th#SORT_ORDER,
  .dm-p25 #p25_cats td[headers="DESCRIPTION"], .dm-p25 #p25_cats th#DESCRIPTION { display: none; }
  #p26_sheet td[headers="PRODUCT_CODE"], #p26_sheet th#PRODUCT_CODE,
  #p26_sheet td[headers="UNIT_NAME"], #p26_sheet th#UNIT_NAME,
  #p26_sheet td[headers="ROW_NO"], #p26_sheet th#ROW_NO { display: none; }
  .dm-p26-COUNT #p26_sheet td[headers="APP_STOCK"], .dm-p26-COUNT #p26_sheet th#APP_STOCK { display: none; }
  .dm-p26-COUNT #p26_sheet .dm-appline { display: block; }
  #p26_sheet td, #p26_sheet th { padding-left: 4px; padding-right: 4px; }
  .dm-p26-LIST #p26_sheet .t-Report-report tr { grid-template-columns: minmax(0, 1fr) 46px 64px 78px; }
  /* D-249 B-12: header cells fill the header row (the 1-line "Item" cell sat lower than "App stock") */
  .dm-p26-LIST #p26_sheet th { align-self: stretch; display: flex; align-items: center; }
  /* D-249 B-12: a generic min-width made the App stock cells 90 px in a 46 px track (numbers sat under "Counted") */
  .dm-p26-LIST #p26_sheet td, .dm-p26-LIST #p26_sheet th { min-width: 0 !important; width: auto !important; }
  /* D-249 B-13: Recent Adjustments was 388 px wide in a 340 px card - Qty hidden off the right edge */
  .dm-p23 #p23_recent .t-Report-report { width: 100%; table-layout: fixed; }
  .dm-p23 #p23_recent th#DATE_TEXT { width: 88px; }
  .dm-p23 #p23_recent th#QTY { width: 48px; }
  .dm-p23 #p23_recent td, .dm-p23 #p23_recent th { white-space: normal; overflow-wrap: anywhere; padding-left: 6px; padding-right: 6px; }
  .dm-p26-LIST #p26_sheet .t-Report-report tr:not(:has([headers="APP_STOCK"])):not(:has(#APP_STOCK)) { grid-template-columns: minmax(0, 1fr) 90px; }
  .dm-p26-LIST #p26_sheet > .t-Region-bodyWrap > .t-Region-body { padding: 4px 10px 12px; }
  .dm-p26-LIST #p26_sheet th { white-space: normal; }
  #p26_sheet .dm-cathead { white-space: normal; }
}

/* ---------------------------------------------------------------- print (p22 stock card, p26 count sheet) */
@media print {
  .dm-p22 .t-Header, .dm-p22 .t-Body-nav, .dm-p22 .dm-noprint, .dm-p22 .t-BreadcrumbRegion-buttons, .dm-p22 .t-Report-links,
  .dm-p26 .t-Header, .dm-p26 .t-Body-nav, .dm-p26 .dm-noprint, .dm-p26 .t-Report-pagination { display: none !important; }
  .dm-p22 .t-Body-main, .dm-p26 .t-Body-main { margin-left: 0 !important; }
  /* p26 paper = the screen sheet, full paper width, black ink, rows never split, group heading kept with its first row */
  .dm-p26-LIST .dm-paper { max-width: none; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .dm-p26-LIST .dm-paperhead { padding: 0 0 4px; }
  .dm-p26-LIST #p26_sheet > .t-Region-bodyWrap > .t-Region-body { padding: 0; }
  .dm-p26-LIST #p26_sheet th, .dm-p26-LIST #p26_sheet td, .dm-p26-LIST .dm-paperhead p, .dm-p26-LIST .dm-paperhead h2, .dm-p26-LIST .dm-paperfoot {
    color: var(--dm-print-ink, black) !important; border-color: color-mix(in srgb, var(--dm-print-ink, black) 35%, transparent) !important; }
  .dm-p26-LIST #p26_sheet th { background: color-mix(in srgb, var(--dm-print-ink, black) 8%, transparent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dm-p26-LIST #p26_sheet tr { break-inside: avoid; page-break-inside: avoid; }
  .dm-p26-LIST #p26_sheet .t-Report-report tr { grid-template-columns: 28px 86px minmax(0, 1fr) 60px 80px 110px 110px; }
  .dm-p26-LIST #p26_sheet .t-Report-report tr:not(:has([headers="APP_STOCK"])):not(:has(#APP_STOCK)) { grid-template-columns: 28px 86px minmax(0, 1fr) 60px 160px; }
  .dm-p26-LIST #p26_sheet td[headers="CAT_HEAD"] { break-after: avoid; page-break-after: avoid; }
}
.dm-p26.dm-theme-dark .dm-preview-label { display: block; color: var(--dm-muted); font-size: 12px; }
@media print { .dm-p26 .dm-preview-label { display: none !important; } }

/* round 7 final QA (align_scan): search field = same 36 px height as Filters / Actions / New Product; phone: the More details hint stacks under its title */
.dm-p20 #P20_FIND { height: 36px; }
@media (max-width: 767px) { .dm-p21 #p21_more .dm-morehint { display: block; margin: 2px 0 0; } }

/* D-197 (owner bug 2026-10-21, line tables, Builder D): p26 Counted box = the app field look (40 px, rounded border, focus ring, number right-aligned) */
#p26_sheet input.dm-count { box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 10px; text-align: right; font-size: 1rem;
  border: 1px solid var(--dm-line); border-radius: var(--dm-radius-sm); background: var(--ut-component-background-color); color: inherit; box-shadow: none; }
#p26_sheet input.dm-count:focus { border-color: var(--dm-brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); }
#p26_sheet td { vertical-align: middle; }/* D-206 (owner 2026-10-24) ------------------------------------------------ */
/* #5 p20: product cell centred like the other cells (an empty barcode line no longer pushes the name up); the name looks like a link */
.dm-p20 #p20_products td[headers="PRODUCT_NAME"] { vertical-align: middle; }
.dm-p20 #p20_products .dm-bc:has(> .fa:not([class*="fa-"])) { display: none; }
.dm-p20 #p20_products tr:has(.dm-card-link) .dm-name { color: var(--dm-brand); cursor: pointer; }
.dm-p20 #p20_products tr:has(.dm-card-link) .dm-name:hover { text-decoration: underline; }
/* #15 p20: Filters (n) when a filter is in use */
.dm-p20 #dm_filters.dm-has-filters { --a-button-text-color: var(--dm-brand); border-color: var(--dm-brand); font-weight: 600; }
/* #1 p21: "+ New category" link under the Category field (right column) */
.dm-p21 #p21_product .t-Region-buttons:not(:has(.t-Button)) { display: none; }     /* the link moved into the field (JS) */
.dm-p21 .dm-addlink--field { display: inline-flex; padding: 0; margin: 2px 0 0; min-height: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.dm-p21 .dm-addlink--field .t-Icon { font-size: 11px; margin-right: 4px; }
.dm-p21 .dm-addlink:hover, .dm-p21 .dm-addlink:focus { text-decoration: underline; }
/* ======================================================================= D-226 (Builder G, 2026-10-24) "less scroll" p23
   Owner rule: main content + main action on the first screen at 1366x768. Layout only: thin purchase note, compact region
   headers / form rows / button bar, Details 2 lines - so Recent Adjustments starts on the first screen. */
.dm-p23 #p23_purchase_note { margin-bottom: .75rem; }
.dm-p23 #p23_purchase_note .t-Alert-wrap { padding: 0; align-items: center; }
.dm-p23 #p23_purchase_note .t-Alert-icon { padding: .45rem .75rem; }
.dm-p23 #p23_purchase_note .t-Alert-icon .t-Icon { width: 28px; height: 28px; font-size: 16px; line-height: 28px; }
.dm-p23 #p23_purchase_note .t-Alert-content { padding: .35rem .75rem; }
.dm-p23 #p23_purchase_note .t-Alert-buttons { padding: .35rem .75rem; }
.dm-p23 :is(#p23_form, #p23_preview, #p23_recent) { margin-bottom: .75rem; }
.dm-p23 :is(#p23_form, #p23_preview, #p23_recent) > .t-Region-header .t-Region-headerItems { padding-top: .35rem; padding-bottom: .35rem; }
.dm-p23 :is(#p23_form, #p23_preview) > .t-Region-bodyWrap > .t-Region-body { padding-top: .25rem; padding-bottom: .5rem; }
.dm-p23 #p23_form .t-Form-fieldContainer { padding-top: .2rem; padding-bottom: .2rem; }
.dm-p23 #P23_DETAILS { height: 3.6rem; min-height: 0; }
.dm-p23 #p23_form .t-ButtonRegion { margin-top: .25rem; }
.dm-p23 #p23_form .t-ButtonRegion-wrap { padding: .5rem 1rem; }
.dm-p23 :is(#p23_form, #p23_preview, #p23_recent) > .t-Region-header { padding-top: .25rem; }
.dm-p23 #p23_recent > .t-Region-bodyWrap > .t-Region-body { padding-top: .25rem; }
.dm-p23 #p23_form .t-ButtonRegion-buttons { padding-top: 0; padding-bottom: 0; }
.dm-p23 #p23_form .t-ButtonRegion .t-Button { margin-top: 0; margin-bottom: 0; }
/* ======================================================================= end D-226 (Builder G p23) */
/* D-249 B-16: "* Stock In / Out *" - the required radio group drew the template star before the label and the app star after it */
.dm-p23 #P23_DIRECTION_CONTAINER .t-Form-label::before { display: none; }