/* =====================================================================================================================
   app.css - Dukan Manager (APEX app 10001) | application static file #APP_FILES#app.css | Adam (AD) 2026-10-17
   Light = theme style "Vita", dark = theme style "Vita - Dark" + body class dm-theme-dark (page CSS class dm-theme-&APP_UI_THEME.).
   COLOUR RULE (ui_standards): hex values only in the two token blocks below; components use tokens (--ut-* / --dm-*).
   ===================================================================================================================== */

/* ---------------------------------------------------------------- 1. tokens: light (html:root beats the theme's :root block) */
html:root {
  --dm-brand: #0f6e50;
  --dm-brand-dark: #0a4f39;
  --dm-brand-tint: #e4f2ec;
  --dm-ok: #13703a;
  --dm-warn: #9a4a06;
  --dm-bad: #b91c1c;
  --dm-info: #1d4ed8;
  --dm-accent: #6d28d9;
  --dm-teal: #0f766e;
  --dm-muted: #556070;
  --dm-line: #dfe6e3;
  --dm-on-brand: #ffffff;
  --dm-login-bg-1: #0a4f39;
  --dm-login-bg-2: #13805e;
  --dm-radius: 8px;
  --dm-radius-sm: 6px;
  --dm-body-bg: #f2f5f4;
  --dm-text: #1e293b;
  --dm-shadow-c: rgba(15, 40, 30, .08);
  --dm-header-h: 56px;
  --dm-nav-w: 248px;

  --ut-palette-primary: var(--dm-brand);
  --ut-palette-primary-contrast: var(--dm-on-brand);
  --ut-palette-primary-shade: var(--dm-brand-tint);
  --ut-palette-primary-text: var(--dm-brand);
  --ut-header-background-color: var(--dm-brand);
  --ut-header-border-color: var(--dm-brand-dark);
  --ut-header-text-color: var(--dm-on-brand);
  --ut-focus-outline-color: var(--dm-info);
  --ut-login-page-background-color: var(--dm-login-bg-1);
}

/* ---------------------------------------------------------------- 1b. tokens: dark (Vita - Dark gives the surfaces) */
html:root:has(body.dm-theme-dark) {
  --dm-brand: #4ccb9b;
  --dm-brand-dark: #123b2e;
  --dm-brand-tint: #173a2f;
  --dm-ok: #5bd58a;
  --dm-warn: #f3b45a;
  --dm-bad: #f87171;
  --dm-info: #93b4ff;
  --dm-accent: #c4b5fd;
  --dm-teal: #5eead4;
  --dm-muted: #a9b4c2;
  --dm-line: #2c3a36;
  --dm-on-brand: #0b1512;
  --dm-login-bg-1: #08261d;
  --dm-login-bg-2: #123b2e;
  --dm-text: #e6edf0;
  --dm-shadow-c: rgba(0, 0, 0, .35);
  --ut-header-background-color: var(--dm-brand-dark);
  --ut-header-text-color: #e6f4ee;
  --ut-header-border-color: var(--dm-brand-dark);
}

/* ---------------------------------------------------------------- 1c. Vita sets some component colours as fixed hex: point them at the brand */
html:root {
  --a-cv-icon-background-color: var(--dm-brand);
  --a-cv-initials-background-color: var(--dm-brand);
  --a-cv-focus-border-color: var(--dm-brand);
  --a-checkbox-checked-background-color: var(--dm-brand);
  --a-field-input-focus-border-color: var(--dm-brand);
  --a-menu-focused-background-color: var(--dm-brand);
  --ut-field-input-focus-icon-color: var(--dm-brand);
  --ut-field-fl-input-focus-icon-background-color: var(--dm-brand);
  --ut-link-text-color: var(--dm-brand);
  --ut-treeview-badge-background-color: var(--dm-brand);
}
.t-Button--hot:not(.t-Button--simple):not(.t-Button--success):not(.t-Button--danger):not(.t-Button--warning) {
  --a-button-background-color: var(--dm-brand);
  --a-button-border-color: var(--dm-brand);
  --a-button-text-color: var(--dm-on-brand);
  --a-button-hover-background-color: var(--dm-brand-dark);
  --a-button-hover-border-color: var(--dm-brand-dark);
  --a-button-hover-text-color: var(--dm-on-brand);
}

/* ---------------------------------------------------------------- 2. shell = the mockup shell (D-152 MOCKUP_DIFF S1-S13, round 5 SHELL 2026-10-18)
   Markup: page template "Standard" (logo 2 lines, phone icons, footer, assistant button), region template "Title Bar" ("?" + sub line),
   navigation bar list (avatar + full name, Sign Out). Light side menu: Vita nav variables pointed at the card surface. */
html:root {
  --ut-header-height: var(--dm-header-h);
  --ut-nav-width: var(--dm-nav-w);
  --ut-body-nav-background-color: var(--ut-component-background-color);
  --ut-body-nav-text-color: var(--ut-body-text-color);
  --ut-body-nav-border-color: var(--dm-line);
  --ut-body-nav-scrollbar-track-background-color: var(--ut-component-background-color);
  --ut-body-nav-scrollbar-thumb-background-color: var(--dm-line);
  --ut-body-title-box-shadow: none;
  --ut-footer-background-color: transparent;
  --ut-footer-border-color: transparent;
  --ut-region-header-background-color: transparent;
  --ut-region-header-border-color: transparent;
  --ut-region-border-radius: var(--dm-radius);
  --ut-region-box-shadow: 0 1px 3px var(--dm-shadow-c), 0 1px 2px var(--dm-shadow-c);
  --ut-region-header-font-size: .875rem;
}
html:root:not(:has(body.dm-theme-dark)) { --ut-body-background-color: var(--dm-body-bg); }

/* 2a. header: logo square + "Dukan Manager" / shop name (S1) */
.t-Header-logo-link { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; color: inherit; text-decoration: none; }
.dm-logo-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--dm-radius);
  background: color-mix(in srgb, var(--ut-header-text-color) 18%, transparent); }
.dm-logo-mark .fa { font-size: 18px; }
.dm-logo-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.dm-logo-app { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.dm-logo-shop { font-size: .75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.dm-logo-page { display: none; }

/* 2b. header right: avatar circle + full name + chevron, separate Sign Out (S2) */
/* ALIGN-1 (round 7 D0): ONE shared top-bar rule - every nav item + its button is centred on the header's middle line (same rule in admin.css) */
.t-NavigationBar { align-items: center; }
.t-NavigationBar > .t-NavigationBar-item { display: flex; align-items: center; }
.t-NavigationBar > .t-NavigationBar-item > .t-Button { align-self: center; display: inline-flex; align-items: center; white-space: nowrap; }
.t-NavigationBar .dm-nb-user > .t-Button { gap: .5rem; }
.t-NavigationBar .dm-nb-user .t-Icon.dm-nb-noicon { display: none; }
.t-NavigationBar .dm-nb-user .t-Button-badge { order: -1; display: grid; place-items: center; width: 32px; height: 32px; min-width: 32px; padding: 0;
  margin: 0; border-radius: 50%; position: static; font-size: .8rem; font-weight: 700; line-height: 1;
  background: var(--ut-header-text-color); color: var(--ut-header-background-color); }
.t-NavigationBar .dm-nb-user .t-Button-label { font-size: .8125rem; font-weight: 600; }
.t-NavigationBar .dm-nb-user > .t-Button { display: inline-flex; align-items: center; }
.t-NavigationBar .dm-nb-signout .t-Button-label { font-size: .8125rem; }
.t-NavigationBar-menu .dm-nb-signout-m { display: none; }
.dm-hbtn { display: none; }

/* 2c. light side menu, green pill for the current entry (S3), sub-entries small + indented without icons (S5) */
.t-Body-nav { border-right: 1px solid var(--dm-line); }
.t-TreeNav { padding-top: 8px; }
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label { font-size: .875rem; font-weight: 600; color: var(--ut-body-text-color); }
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content > .fa { color: var(--dm-brand); }
.t-TreeNav .a-TreeView-row { left: 8px; right: 8px; width: auto; border-radius: var(--dm-radius-sm); border-left: 3px solid transparent; }
.t-TreeNav .a-TreeView-row.is-hover, .t-TreeNav .a-TreeView-row:hover { background-color: color-mix(in srgb, var(--ut-body-text-color) 4%, var(--ut-component-background-color)); }
.t-Body-nav .t-TreeNav .a-TreeView-row.is-selected, .t-Body-nav .t-TreeNav .a-TreeView-row.is-current, .t-Body-nav .t-TreeNav .a-TreeView-row.is-current--top {
  background-color: color-mix(in srgb, var(--dm-brand) 10%, var(--ut-component-background-color)) !important; border-left-color: var(--dm-brand); }
.t-Body-nav .t-TreeNav .a-TreeView-content.is-selected, .t-Body-nav .t-TreeNav .a-TreeView-content.is-current--top { background: transparent !important; color: var(--dm-brand); }
.t-TreeNav .a-TreeView-content.is-selected .a-TreeView-label, .t-TreeNav .a-TreeView-content.is-current .a-TreeView-label,
.t-TreeNav .a-TreeView-content.is-current--top .a-TreeView-label, .t-TreeNav .a-TreeView-label.is-current { color: var(--dm-brand); font-weight: 600; }
.t-TreeNav .a-TreeView-toggle { color: var(--dm-muted); right: 12px; }
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content > .fa { display: none; }
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content .a-TreeView-label {
  font-size: .8125rem; font-weight: 400; color: color-mix(in srgb, var(--ut-body-text-color) 85%, var(--ut-component-background-color)); padding-left: 1.6rem; }
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current .a-TreeView-label { color: var(--dm-brand); font-weight: 600; }
.t-TreeNav .a-TreeView-node { border-bottom: 0; }
.t-Body-nav .t-TreeNav .a-TreeView-row { box-shadow: none !important; }
.t-Body-nav .t-TreeNav ul ul { background: transparent !important; }
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content, .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-row { border-bottom: 0; }
/* D-205 open (expanded) section that is not current: no Vita dark #171a1d row */
.t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-collapsible > .a-TreeView-row { background-color: transparent; }
/* D-204 hover: brand row, white text + icons (owner: hover text was not readable) */
.t-Body-nav .t-TreeNav .a-TreeView-node > .a-TreeView-row.is-hover,
.t-Body-nav .t-TreeNav .a-TreeView-node:has(> .a-TreeView-content:hover) > .a-TreeView-row { background-color: var(--dm-brand) !important; }
.t-Body-nav .t-TreeNav .a-TreeView-content.is-hover, .t-Body-nav .t-TreeNav .a-TreeView-content:hover,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-hover .a-TreeView-label, .t-Body-nav .t-TreeNav .a-TreeView-content:hover .a-TreeView-label,
.t-Body-nav .t-TreeNav .a-TreeView-content.is-hover > .fa, .t-Body-nav .t-TreeNav .a-TreeView-content:hover > .fa,
.t-Body-nav .t-TreeNav .a-TreeView-node:has(> .a-TreeView-content:hover) > .a-TreeView-toggle,
.t-Body-nav .t-TreeNav .a-TreeView-node:has(> .a-TreeView-content.is-hover) > .a-TreeView-toggle { color: var(--dm-on-brand) !important; }

/* 2d. title bar: breadcrumb "/" (S6), 22 px title + round "?" (S7), sub line inside the bar (S8) */
.t-Body-title { border-bottom: 1px solid var(--dm-line); }
.t-BreadcrumbRegion { padding-top: .85rem; padding-bottom: .85rem; }
.t-BreadcrumbRegion-body { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "crumb crumb crumb" "title help ." "sub sub sub";
  align-items: center; column-gap: 8px; }
.t-BreadcrumbRegion-breadcrumb { grid-area: crumb; }
.t-BreadcrumbRegion-title { grid-area: title; min-width: 0; }
.t-BreadcrumbRegion-body > .dm-help-btn { grid-area: help; }
.t-BreadcrumbRegion-sub { grid-area: sub; font-size: .8125rem; color: var(--dm-muted); margin-top: .1rem; }
.t-BreadcrumbRegion-sub:not(:has(*)) { display: none; }
.t-BreadcrumbRegion-sub .t-Region, .t-BreadcrumbRegion-sub .t-Region-body { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.t-BreadcrumbRegion--useBreadcrumbTitle .t-BreadcrumbRegion-body { grid-template-areas: "crumb help ." "sub sub sub"; }
.t-BreadcrumbRegion--useBreadcrumbTitle .t-BreadcrumbRegion-body > .dm-help-btn { align-self: end; }
/* pages whose title is the last crumb: small crumbs on line 1, the big title on line 2 (no "/" before it) */
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; }
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active { flex: 0 0 100%; }
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active::before { content: none !important; }
.t-Breadcrumb { font-size: .75rem; }
.t-Breadcrumb-item::after { content: none !important; display: none !important; }
.t-Breadcrumb-item + .t-Breadcrumb-item::before { content: "/"; margin: 0 .35rem; opacity: .6; color: var(--dm-muted); }
.t-Breadcrumb-item .t-Breadcrumb-label, .t-Breadcrumb-item a.t-Breadcrumb-label { color: var(--dm-muted); font-size: .75rem; }
.t-BreadcrumbRegion-titleText,
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active .t-Breadcrumb-label { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; color: var(--ut-body-text-color); }
.dm-help-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  cursor: pointer; border: 1px solid var(--dm-line); background: var(--ut-component-background-color); color: var(--dm-muted); }
.dm-help-btn:hover, .dm-help-btn:focus-visible { color: var(--dm-brand); border-color: var(--dm-brand); }
.dm-help-btn .fa { font-size: 16px; }
.t-Body-title .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-breadcrumb { display: block; }

/* 2e. regions = white cards, title inside, no header divider (S9) */
.t-Region:not(.t-Region--noUI):not(.t-Region--removeHeader) > .t-Region-header { border-bottom: 0; padding-top: .85rem; padding-bottom: .25rem; }
.t-Region-header .t-Region-title { font-size: .875rem; font-weight: 700; }
.t-Region:not(.t-Region--noUI) { border-color: var(--dm-line); }

/* 2f. footer: "Dukan Manager - shop" + "Last updated" only, no grey band, no back-to-top (S11) */
.t-Footer { padding: 0 5rem 1.5rem 1.5rem; background: transparent; border: 0; }   /* right: room for the assistant button */
.t-Footer-body { display: block; padding: 0; }
.t-Footer-content:empty { display: none; }
.t-Footer-apex { display: block; width: 100%; }
.dm-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; width: 100%;
  font-size: .75rem; color: var(--dm-muted); }
.dm-footer-time .fa { margin-right: 4px; }
.t-Footer-top, .t-Footer-topButton { display: none !important; }

/* 2g. assistant button bottom-right on every page (S10, DEVIATION: opens the page help) */
.dm-bot-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--dm-line);
  background: var(--ut-component-background-color); color: var(--dm-brand); box-shadow: 0 4px 14px var(--dm-shadow-c); }
.dm-bot-btn .fa { font-size: 26px; }
.dm-bot-btn:focus-visible { outline: 2px solid var(--dm-info); outline-offset: 2px; }
/* D-237 (D-235b): the bot buttons exist only for shops with AI access (application item AI_ON = Y -> class dm-ai-Y); all others: none */
.dm-bot-btn:not(.dm-ai-Y), .dm-hbtn--bot:not(.dm-ai-Y) { display: none !important; }
/* D-237 AI assistant chat (page 0 inline dialog dm_ai_dlg) */
.dm-ai { display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.dm-ai-note { margin: 0; font-size: 12px; color: var(--dm-muted); }
.dm-ai-log { flex: 1 1 auto; min-height: 180px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.dm-ai-msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-ai-msg--bot { align-self: flex-start; background: color-mix(in srgb, var(--dm-brand) 10%, var(--ut-component-background-color));
  border: 1px solid var(--dm-line); border-bottom-left-radius: 4px; }
.dm-ai-msg--user { align-self: flex-end; background: var(--dm-brand); color: var(--dm-on-brand); border-bottom-right-radius: 4px; }
.dm-ai-msg.is-wait { color: var(--dm-muted); font-style: italic; }
.dm-ai-msg.is-warn { border-color: var(--dm-warn); }
.dm-ai-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-ai-chip.t-Button { border-radius: 999px; margin: 0; white-space: normal; text-align: left; }
.dm-ai-input { display: flex; gap: 8px; align-items: flex-end; }
.dm-ai-input .dm-ai-q { flex: 1 1 auto; min-height: 44px; resize: none; }
.dm-ai-send.t-Button { min-height: 44px; margin: 0; }
/* D-239 chat layout: the dialog has ONE scroll area (the messages); header, chips and the input row always visible (owner 2026-10-26:
   two scrollbars + Send cut off). Desktop = docked bottom-right above the bot button (owner 2026-10-25); phone = full screen. */
/* only while OPEN (jQuery UI shows it with inline display:block; a closed dialog has display:none and must stay hidden) */
.ui-dialog:has(.dm-ai-dlg)[style*="display: block"] { display: flex !important; flex-direction: column; }
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-content { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; overflow: hidden !important; padding: 0; }
.dm-ai-dlg .t-DialogRegion-wrap, .dm-ai-dlg .t-DialogRegion-bodyWrapperOut, .dm-ai-dlg .t-DialogRegion-bodyWrapperIn,
.dm-ai-dlg .t-DialogRegion-body { height: 100%; overflow: hidden !important; padding: 0; }
.dm-ai { height: 100%; min-height: 0; padding: 12px 16px 14px; box-sizing: border-box; }
.dm-ai-log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.dm-ai-sugg, .dm-ai-input, .dm-ai-note { flex: 0 0 auto; }
@media (min-width: 481px) {
  .ui-dialog:has(.dm-ai-dlg) { position: fixed !important; top: auto !important; left: auto !important; right: 1rem !important; bottom: 5.25rem !important;
    width: 400px !important; max-width: calc(100vw - 2rem); height: min(600px, calc(100vh - 7rem)) !important;
    border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px var(--dm-shadow-c); }
}
@media (max-width: 480px) {
  .ui-dialog:has(.dm-ai-dlg) { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important;
    max-width: none; border-radius: 0; }
  .dm-ai-send .t-Button-label { display: none; }
}
/* D-239 phone: the bot is the round button bottom-right like on the laptop (not a header icon); on the 4 pages with a bottom action bar
   (31 New Sale, 32 Return, 45 Take Payment, 56 New Purchase) the header icon stays, so it never covers Confirm / Save. */
@media (max-width: 759px) {
  .dm-bot-btn.dm-ai-Y { display: flex; right: 12px; bottom: 16px; width: 3.25rem; height: 3.25rem; }
  .dm-hbtn--bot { display: none !important; }
  html.page-31 .dm-hbtn--bot.dm-ai-Y, html.page-32 .dm-hbtn--bot.dm-ai-Y, html.page-45 .dm-hbtn--bot.dm-ai-Y, html.page-56 .dm-hbtn--bot.dm-ai-Y,
  html.page-2 .dm-hbtn--bot.dm-ai-Y, html.page-33 .dm-hbtn--bot.dm-ai-Y, html.page-46 .dm-hbtn--bot.dm-ai-Y { display: inline-flex !important; }
  html.page-31 .dm-bot-btn, html.page-32 .dm-bot-btn, html.page-45 .dm-bot-btn, html.page-56 .dm-bot-btn,
  html.page-2 .dm-bot-btn, html.page-33 .dm-bot-btn, html.page-46 .dm-bot-btn,
  html.page-23 .dm-ai-tip, html.page-57 .dm-ai-tip, html.page-63 .dm-ai-tip,   /* R1-R2: stock adjust, supplier payment, galla */
  html.page-2 .dm-ai-tip, html.page-31 .dm-ai-tip, html.page-32 .dm-ai-tip, html.page-33 .dm-ai-tip, html.page-45 .dm-ai-tip, html.page-46 .dm-ai-tip, html.page-56 .dm-ai-tip { display: none !important; }   /* D-250: + wizard 2, receipts 33 / 46 (deep test C-R1, A-R1) */
  .t-Body-content { padding-bottom: 88px; }   /* D-250 (B-R3, C-R4): the last button can scroll above the floating bot (pages with their own bar keep their bigger padding) */
  /* D-239 phone: the side menu slides OVER the page (it pushed the page into a 140 px strip -> squeezed / overlapping content);
     dark backdrop, tap outside closes it (app.js) */
  .t-PageBody.js-navExpanded .t-Body-nav { position: fixed !important; top: var(--dm-header-h, 64px); left: 0; bottom: 0; width: min(300px, 82vw) !important;
    z-index: 1000; overflow-y: auto; box-shadow: 6px 0 24px rgba(0, 0, 0, .45); }
  .t-PageBody.js-navExpanded .t-Body-main { width: 100% !important; min-width: 100%; flex: 0 0 100%; margin-left: 0 !important; }
  .t-PageBody.js-navExpanded .t-Body-main::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 950; }
}@media (prefers-reduced-motion: reduce) { .dm-ai-log { scroll-behavior: auto; } }

/* 2h. phone header (S13): hamburger + logo + 2-line shop name + help + assistant + avatar; Sign Out moves into the avatar menu */
@media (max-width: 759px) {
  .t-Header-logo { min-width: 0; flex: 1 1 auto; }
  .dm-logo-mark { width: 30px; height: 30px; }
  .dm-logo-app { display: none; }
  .dm-logo-shop { font-size: 1rem; font-weight: 700; opacity: 1; white-space: normal; line-height: 1.15; max-width: 16ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .t-NavigationBar .dm-nb-user .t-Button-label, .t-NavigationBar .dm-nb-user .icon-down-arrow, .t-NavigationBar .dm-nb-signout { display: none; }
  .t-NavigationBar-menu .dm-nb-signout-m { display: list-item; }
  .dm-hbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-right: 4px;
    border-radius: 50%; cursor: pointer; background: transparent; color: var(--ut-header-text-color);
    border: 1px solid color-mix(in srgb, var(--ut-header-text-color) 35%, transparent); }
  .dm-hbtn--bot { border-color: transparent; }
  .dm-hbtn .fa { font-size: 18px; }
  .dm-bot-btn { display: none; }
  .t-Breadcrumb { display: none; }
  .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb { display: flex; }
  .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item:not(.is-active) { display: none; }
  .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item + .t-Breadcrumb-item::before { content: none; }
  .t-BreadcrumbRegion-titleText,
  .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active .t-Breadcrumb-label { font-size: 1.125rem; line-height: 1.4rem; }
  .t-BreadcrumbRegion { padding-top: .55rem; padding-bottom: .55rem; }
  .t-BreadcrumbRegion-body > .dm-help-btn { display: none; }
  .t-Footer { padding: 0 .85rem 1rem; }
}

/* login = the mockup sign-in card (round 5, MOCKUP_DIFF p9999 rows 1-9): centred card, glow top-left, store icon in a 16 px rounded
   square, grey shop line, floating labels without icons, "Remember me" + "Forgot password?" on one row, 44 px Sign In with key icon */
.t-PageBody--login { background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--dm-on-brand) 55%, transparent) 0, transparent 38%),
  linear-gradient(135deg, var(--dm-login-bg-1), var(--dm-login-bg-2)); background-attachment: fixed; }
html:root:has(body.dm-theme-dark) .t-PageBody--login { background: linear-gradient(135deg, var(--dm-login-bg-1), var(--dm-login-bg-2)); }
.t-PageBody--login .t-Body, .t-PageBody--login .t-Body-wrap, .t-PageBody--login .t-Body-main, .t-PageBody--login .t-Body-content { width: 100%; }
.t-PageBody--login .t-Login-container { max-width: 400px; width: calc(100% - 32px); margin-left: auto; margin-right: auto; }
.t-PageBody--login .t-Login-region { border-radius: 12px; background: var(--ut-component-background-color); backdrop-filter: none; padding: 32px 28px 24px; }
.t-PageBody--login .t-Login-header { margin-bottom: 8px; }
.t-PageBody--login .t-Login-logo { width: 64px; height: 64px; border-radius: 16px; background: var(--dm-brand); color: var(--dm-on-brand);
  display: grid; place-items: center; font-size: 30px; margin: 0 auto 12px; }
.t-PageBody--login .t-Login-title { font-size: 1.375rem; font-weight: 700; margin: 0; }
.dm-login-shop, .t-PageBody--login .dm-login-shop .display_only { display: block; text-align: center; color: var(--dm-muted); margin: -4px 0 8px;
  font-weight: 400; font-size: 13px; }
.t-PageBody--login .t-Form-fieldContainer:has(.dm-login-shop) .t-Form-labelContainer { display: none; }
/* D-206 #22: the native APEX show / hide password eye stays visible, inside the floating field on the right */
.t-PageBody--login .apex-item-group--password { position: relative; width: 100%; }
.t-PageBody--login .t-Form-inputContainer .apex-item-group--password .password.apex-item-password { padding-right: 44px; }
.t-PageBody--login .apex-item-group--password .t-Button--passwordVisibility { position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: transparent; box-shadow: none; color: var(--dm-muted); z-index: 2; }
.t-PageBody--login .apex-item-group--password .t-Button--passwordVisibility:hover,
.t-PageBody--login .apex-item-group--password .t-Button--passwordVisibility:focus-visible { color: var(--dm-brand); }
.t-PageBody--login #dm_login { min-height: 44px; font-size: 15px; }
.t-PageBody--login .dm-login-shop, .t-PageBody--login .dm-login-shop .t-Form-inputContainer { text-align: center; width: 100%; padding: 0; }
.t-PageBody--login .dm-login-shop { margin: -6px 0 12px; min-height: 0; display: block; }
.t-PageBody--login .dm-login-shop .t-Form-itemWrapper { display: flex; justify-content: center; }
.t-PageBody--login .dm-login-shop .t-Form-labelContainer, .t-PageBody--login .dm-login-shop .a-Form-error:empty { display: none; }
#P9999_REMEMBER_CONTAINER .t-Form-itemWrapper { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
#P9999_REMEMBER_CONTAINER .t-Form-inputContainer { width: 100%; }
.t-PageBody--login #dm_login_forgot { margin-left: auto; padding: 0; min-height: 0; color: var(--dm-brand); font-size: .875rem; }
.dm-login-lang { text-align: center; margin-top: 8px; }
/* D-179 owner login fixes (mockup #login): shop name = grey line right under the title; fields = mockup floating fields (white, 48 px,
   rounded, .85rem apart); Shop field (no slug only) = the same floating style, its hint as the mockup .t-Form-help line */
.t-PageBody--login .t-Login-container { padding: 0; }
.t-PageBody--login .t-Login-header { margin-bottom: 1.4rem; padding: 0; }
.t-PageBody--login .t-Login-logo { margin: 0 auto 12px; }
.t-PageBody--login .t-Login-body .t-Form-fieldContainer { margin: 0 0 .85rem; padding: 0; }
.t-PageBody--login .t-Login-body #P9999_SHOP_NAME_CONTAINER { margin: calc(-1.4rem + 4px) 0 1.4rem; text-align: center; }
.t-PageBody--login #P9999_SHOP_NAME_CONTAINER .t-Form-inputContainer, .t-PageBody--login #P9999_SHOP_NAME_CONTAINER .t-Form-itemWrapper {
  display: flex; justify-content: center; width: 100%; padding: 0; min-height: 0; }
.t-PageBody--login #P9999_SHOP_NAME_CONTAINER .display_only, .t-PageBody--login #P9999_SHOP_NAME_DISPLAY {
  margin: 0; padding: 0; min-height: 0; font-size: .8125rem; line-height: 1.45; color: var(--dm-muted); text-align: center; }
/* floating label like the mockup: inside the empty field at 15 px, up + small on focus / with a value (UT: is-active / js-show-label) */
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-label { padding: 5px .8rem 0; font-size: .6875rem; font-weight: 600; line-height: 1.4;
  transition: all .12s; }
.t-PageBody--login .t-Form-fieldContainer--floatingLabel:not(.is-active):not(.js-show-label) .t-Form-label { padding-top: 13px; font-size: .9375rem;
  font-weight: 400; }
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .apex-item-text,
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .password {
  min-height: 48px; height: 48px; padding: 1.2rem .8rem .35rem; border: 1px solid var(--dm-line); border-radius: var(--dm-radius-sm);
  background: var(--ut-component-background-color); font-size: .9375rem; box-shadow: none; }
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .apex-item-text:focus,
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .password:focus {
  border-color: var(--dm-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); outline: none; }
.t-PageBody--login .t-Form-fieldContainer--floatingLabel .t-Form-label { color: var(--dm-muted); }
.t-PageBody--login .t-Form-fieldContainer--floatingLabel.is-active .t-Form-label { color: var(--dm-brand); }
.t-PageBody--login #P9999_SHOP_SLUG_CONTAINER .t-Form-inlineHelp { font-size: .6875rem; color: var(--dm-muted); margin: .25rem 0 0; padding: 0; }
.t-PageBody--login #P9999_SHOP_SLUG_CONTAINER .t-Form-itemRequired { display: none; }
.t-PageBody--login #P9999_REMEMBER_CONTAINER { margin: .15rem 0 .4rem; }
.t-PageBody--login #P9999_REMEMBER_CONTAINER .apex-item-single-checkbox label, .t-PageBody--login #P9999_REMEMBER_CONTAINER .u-checkbox { font-size: .875rem; }
.t-PageBody--login #P9999_REMEMBER_CONTAINER input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--dm-brand); }
.t-PageBody--login #dm_login { border-radius: var(--dm-radius-sm); }
@media (max-width: 640px) {
  .t-PageBody--login .t-Login-container { width: calc(100% - 32px); }
  .t-PageBody--login .t-Login-region { border-radius: 16px; padding: 32px 28px 24px; }   /* D-179: mockup keeps 28 px on phones */
}

/* 2i. required mark = red "*" after the label (mockup), not the UT corner triangle (MOCKUP_DIFF p2 row 9, app-wide) */
.t-Form-fieldContainer.is-required .t-Form-itemRequired-marker { display: none; }
.t-Form-fieldContainer.is-required .t-Form-labelContainer .t-Form-label::after { content: "*"; color: var(--dm-bad); font-weight: 700;
  position: static; display: inline; width: auto; height: auto; background: none; border: 0; margin-left: .25em; }
/* r6: floating-label fields (suppliers forms, dialogs, login): never the UT corner triangle, the "*" sits after the label with a gap (mockup) */
.t-Form-fieldContainer--floatingLabel.is-required .t-Form-itemRequired-marker,
.t-Form-fieldContainer--floatingLabel.is-required .t-Form-inputContainer::before,
.t-Form-fieldContainer--floatingLabel.is-required .t-Form-itemWrapper::before { display: none !important; content: none !important; }

/* 2k. round 6: page 5 "Access denied" = mockup info card (MOCKUP_DIFF p65 row 1): centred card, red round shield, heading, text, grey Back */
.dm-p5 .t-Body-contentInner { padding-top: 3.25rem; }
.dm-denied.t-HeroRegion { max-width: 620px; margin: 0 auto; padding: 2.25rem 1.5rem; text-align: center; background: var(--ut-component-background-color);
  border: 1px solid var(--dm-line); border-radius: var(--dm-radius); box-shadow: 0 1px 3px var(--dm-shadow-c); }
.dm-denied .t-HeroRegion-top, .dm-denied .t-HeroRegion-wrap { display: flex; flex-direction: column; align-items: center; padding: 0; margin: 0; }
.dm-denied .t-HeroRegion-col { padding: 0; margin: 0; width: auto; flex: none; }
.dm-denied .t-HeroRegion-col--beforeIcon:empty, .dm-denied .t-HeroRegion-bottom:empty, .dm-denied .t-HeroRegion-form:empty { display: none; }
.dm-denied .t-HeroRegion-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 34px;
  background: color-mix(in srgb, var(--dm-bad) 12%, var(--ut-component-background-color)); color: var(--dm-bad); }
.dm-denied .t-HeroRegion-title { font-size: 1.25rem; line-height: 1.6rem; font-weight: 700; margin: 0 0 .4rem; color: var(--ut-body-text-color); }
.dm-denied .dm-denied-text { color: var(--dm-muted); margin: .25rem 0 1rem; font-size: .875rem; line-height: 1.5; }
.dm-denied .dm-denied-text b { color: var(--ut-body-text-color); }
.dm-denied .t-HeroRegion-col--right { width: 100%; display: flex; flex-direction: column; align-items: center; }
.dm-denied .t-HeroRegion-buttons { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; width: 100%; margin: .5rem 0 0; padding: 0; }
.dm-denied .t-HeroRegion-buttons .t-Button { min-height: 40px; }
@media (max-width: 640px) { .dm-p5 .t-Body-contentInner { padding-top: 1rem; } .dm-denied.t-HeroRegion { padding: 1.75rem 1rem; } }
/* refused page: the APEX error page is replaced by page 5 at once (app.js dm.accessDenied) - do not flash the error box */
html.dm-denied-go body { visibility: hidden; }
/* a crumb whose name is empty (e.g. p14 Customer Ledger opened without a customer: the <customer> crumb) is not shown */
.t-Breadcrumb-item:has(> .t-Breadcrumb-label:empty) { display: none; }

/* ---------------------------------------------------------------- 2j. page 2 Shop Setup (shell page, round 5: MOCKUP_DIFF p2 rows 1-9)
   one card (steps + step), steps = circles joined by lines, check mark when done, one-column form ~60 %, Skip / Next under a divider */
#p2_progress, #p2_wizard { max-width: 860px; }
#p2_progress { 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: 16px 16px 8px; margin-bottom: 0; }
#p2_progress .a-CardView-items { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0; counter-reset: dmstep; }
#p2_progress .a-CardView-items > .a-CardView-item { width: auto !important; max-width: none !important; flex: none !important; }
#p2_progress .a-CardView-item { counter-increment: dmstep; position: relative; }
#p2_progress .a-CardView { border: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; }
#p2_progress .a-CardView::before { content: counter(dmstep); position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--dm-line); background: var(--ut-component-background-color); color: var(--dm-muted); font-weight: 700; font-size: 13px; }
#p2_progress .dm-p2-dot.is-done::before { content: "\f00c"; font-family: "Font APEX Small", "Font APEX"; font-weight: 400; font-size: 12px;
  background: var(--dm-brand); border-color: var(--dm-brand); color: var(--dm-on-brand); }
#p2_progress .dm-p2-dot.is-current::before { border-color: var(--dm-brand); color: var(--dm-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-brand) 15%, transparent); }
#p2_progress .a-CardView-item:not(:last-child)::after { content: ""; position: absolute; top: 15px; height: 2px;
  left: calc(50% + 24px); right: calc(-50% + 24px); background: var(--dm-line); }
#p2_progress .a-CardView-item:has(.is-done, .is-current):has(+ .a-CardView-item .is-done)::after { background: var(--dm-brand); }
#p2_progress .a-CardView-header { padding: 6px 4px 0; justify-content: center; }
#p2_progress .a-CardView-title { font-size: 13px; font-weight: 400; color: var(--dm-muted); text-align: center; white-space: normal; }
#p2_progress .dm-p2-dot.is-current .a-CardView-title { color: var(--ut-body-text-color); font-weight: 700; }
#p2_wizard { border-top: 0; border-radius: 0 0 var(--dm-radius) var(--dm-radius); }
#p2_wizard > .t-Region-header { padding: 16px 24px 0; }
#p2_wizard > .t-Region-header .t-Region-title { font-size: 1.0625rem; }
#p2_wizard > .t-Region-bodyWrap > .t-Region-body { padding: 4px 24px 20px; }
#p2_intro, #p2_intro .t-Region-body { margin: 0 0 12px; padding: 0; font-size: .8125rem; color: var(--dm-muted); }
#p2_s1 .row > .col { flex: 0 0 100%; max-width: 100%; }
#p2_s1 .t-Form-fieldContainer { max-width: 576px; }
#p2_s1 .a-FileDrop--inline { border: 0; background: transparent; padding: 0; }
#p2_s1 .a-FileDrop--inline .a-FileDrop-icon { display: grid; place-items: center; width: 80px; height: 80px; border: 1px dashed var(--dm-line);
  border-radius: var(--dm-radius); color: var(--dm-muted); }
#p2_s1 .a-FileDrop-action-choose.a-Button--hot { --a-button-background-color: color-mix(in srgb, var(--dm-info) 10%, var(--ut-component-background-color));
  --a-button-text-color: var(--dm-info); --a-button-border-color: color-mix(in srgb, var(--dm-info) 35%, transparent);
  background: color-mix(in srgb, var(--dm-info) 10%, var(--ut-component-background-color)); color: var(--dm-info);
  border: 1px solid color-mix(in srgb, var(--dm-info) 35%, transparent); }
#p2_buttons.t-ButtonRegion { background: transparent; border: 0; border-top: 1px solid var(--dm-line); border-radius: 0; box-shadow: none;
  margin: 16px 0 0; padding: 16px 0 0; }
#p2_buttons .t-ButtonRegion-wrap { padding: 0; }
#p2_buttons .t-Button { min-height: 44px; margin: 0; }
#p2_buttons .t-ButtonRegion-wrap, #p2_buttons .t-ButtonRegion-col--right .t-ButtonRegion-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; }
#p2_buttons .t-ButtonRegion-col--right .t-Button { width: auto !important; flex: 0 0 auto !important; }
#dm_p2_next .t-Icon--right, #dm_p2_finish .t-Icon--right { display: none; }
@media (max-width: 759px) {
  #p2_progress { padding: 12px 8px 4px; }
  #p2_progress .a-CardView-title { font-size: 11px; }
  #p2_wizard > .t-Region-header { padding: 12px 16px 0; }
  #p2_wizard > .t-Region-bodyWrap > .t-Region-body { padding: 4px 16px 16px; }
}

/* ---------------------------------------------------------------- 3. small parts used in reports */
.dm-sub { display: block; font-size: 12px; color: var(--dm-muted); white-space: nowrap; }
.dm-nowrap { white-space: nowrap; }
.dm-name { font-weight: 600; }
.dm-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-money--bad { color: var(--dm-bad); font-weight: 600; }

.dm-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: var(--dm-brand-tint); color: var(--dm-brand); font-size: 12px; font-weight: 700;
}
.dm-who { display: inline-flex; align-items: center; }

/* status / type pills (outline look, light + dark) */
.dm-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
  border: 1px solid currentColor; white-space: nowrap; color: var(--dm-muted);
}
.dm-pill:empty { display: none; }
.dm-pill--ACTIVE, .dm-pill--COMPLETE, .dm-pill--Y { color: var(--dm-ok); }
.dm-pill--INACTIVE, .dm-pill--N { color: var(--dm-muted); }
.dm-pill--INCOMPLETE, .dm-pill--CREDIT { color: var(--dm-warn); }
.dm-pill--INSTALLMENT { color: var(--dm-info); }
.dm-pill--WHOLESALE { color: var(--dm-brand); }
.dm-pill--REGULAR { color: var(--dm-muted); }
.dm-pill--REMOVED { color: var(--dm-muted); }

.dm-onfile { font-weight: 400 !important; color: var(--dm-muted); font-size: 13px; }

/* soft secondary buttons (ui_standards 1: ep-btn-soft) */
/* S12 (round 5): soft TINTED buttons with a coloured border (mockup ep-btn-soft), never outline-only */
.ep-btn-soft { --a-button-background-color: color-mix(in srgb, var(--dm-muted) 8%, var(--ut-component-background-color));
  --a-button-border-color: color-mix(in srgb, var(--dm-muted) 35%, transparent); --a-button-text-color: var(--dm-muted);
  --a-button-hover-background-color: color-mix(in srgb, var(--dm-muted) 14%, var(--ut-component-background-color)); }
.ep-btn-soft--grey { --a-button-text-color: var(--dm-muted); }
.ep-btn-soft--blue { --a-button-text-color: var(--dm-info); --a-button-border-color: color-mix(in srgb, var(--dm-info) 45%, transparent);
  --a-button-background-color: color-mix(in srgb, var(--dm-info) 8%, var(--ut-component-background-color));
  --a-button-hover-background-color: color-mix(in srgb, var(--dm-info) 14%, var(--ut-component-background-color)); --a-button-hover-text-color: var(--dm-info); }
.ep-btn-soft--green { --a-button-text-color: var(--dm-ok); --a-button-border-color: color-mix(in srgb, var(--dm-ok) 45%, transparent);
  --a-button-background-color: color-mix(in srgb, var(--dm-ok) 8%, var(--ut-component-background-color));
  --a-button-hover-background-color: color-mix(in srgb, var(--dm-ok) 14%, var(--ut-component-background-color)); --a-button-hover-text-color: var(--dm-ok); }

/* ---------------------------------------------------------------- 4. p10 list */
.dm-find .t-Form-fieldContainer { max-width: 640px; }
.dm-filters .t-Region-body { padding-top: 4px; padding-bottom: 4px; }
#p10_customers .a-IRR-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
#p10_customers .a-IRR-table td a .fa { font-size: 15px; }

/* ---------------------------------------------------------------- 5. p12 profile */
.dm-head .a-CardView-title { font-size: 20px; }
.dm-head .a-CardView-media { max-width: 120px; }
.dm-kpis .a-CardView-title { font-size: 13px; color: var(--dm-muted); font-weight: 600; }
.dm-kpis .a-CardView-mainContent .a-CardView-subTitle { font-size: 22px; font-weight: 700; color: var(--ut-body-text-color, inherit); }
.dm-kpi--bad .a-CardView-subTitle { color: var(--dm-bad) !important; }

/* ---------------------------------------------------------------- 6. phones (390 px) */
@media (max-width: 640px) {
  .t-Body-content .t-Region { margin-bottom: 12px; }
  #p10_customers .a-IRR-table { font-size: 13px; }
  .dm-avatar { width: 28px; height: 28px; margin-right: 6px; }
  .t-Button { min-height: 40px; }
  .t-BreadcrumbRegion-buttons .t-Button { margin-top: 4px; }
}

/* round 6 MAIN 2026-10-19 (triage bug p41 Reschedule): a native confirm (apex.message.confirm = .ui-dialog--notification) is always on top,
   also over an inline region dialog opened from a popup (that dialog kept z-index 902 > confirm 901 -> the confirm was hidden behind it). */
.ui-dialog.ui-dialog--notification { z-index: 1001 !important; }

/* ALIGN-2 (round 7 D0): shared vertical-centre rules found by 04_TEST\apex_align\align_scan.js - items of one row share ONE centre line */
.t-BreadcrumbRegion-top { align-items: center; }                                   /* title block + page header buttons (mockup: buttons centred on the title block) */
.t-BreadcrumbRegion-buttons { align-self: center; }
.dm-pill { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }   /* icon + label inside a badge */
.t-Region-header .t-Region-title { display: inline-flex; align-items: center; gap: .4rem; } /* icon + label + count badge in a card header */
.a-CardView-header { align-items: center; }                                         /* avatar / icon + name block in a card */
.t-Region-title .dm-tab-n, .t-Region-title .dm-i-tbadge { align-self: center; }

/* ---------------------------------------------------------------- disabled buttons stay readable in BOTH themes (round 7 final QA, owner rule)
   no fading (opacity .5 gave 1.4 - 2.8 : 1): muted text on a muted tint, 4.5 : 1 or better in light and dark; the not-allowed cursor says why */
.t-Button:disabled, .t-Button[disabled], .t-Button.is-disabled, a.t-Button[aria-disabled="true"] {
  opacity: 1 !important; cursor: not-allowed;
  background-color: color-mix(in srgb, var(--dm-muted) 14%, var(--ut-component-background-color, #fff)) !important;
  border-color: color-mix(in srgb, var(--dm-muted) 40%, transparent) !important;
  color: var(--dm-muted) !important; box-shadow: none !important;
}
.t-Button:disabled .t-Icon, .t-Button[disabled] .t-Icon, .t-Button.is-disabled .t-Icon, .t-Button:disabled .t-Button-label, .t-Button[disabled] .t-Button-label { color: inherit !important; }
/* ---------------------------------------------------------------- money is never wrapped (round 7 final QA: 8-digit amounts "Rs. 12,345,678" wrapped to 2 lines in 76-99 px report columns at 1280 px) */
.t-Report-cell[align="right"], .a-IRR-table td[align="right"], .t-Report-colHead[align="right"], .dm-money, .a-CardView-subTitle, .a-CardView-title, .display_only.dm-money { white-space: nowrap; }
.t-Report-cell[align="right"], .a-IRR-table td[align="right"] { min-width: 7.5em; }
/* D-189: a breadcrumb group entry without a page (Administration) is plain text, not a link (it used to open App Builder) */
.t-Breadcrumb-label[href^="javascript"] { pointer-events: none; cursor: default; text-decoration: none; color: inherit; }


/* D-196: photo over the initials avatar (the initials show when the photo cannot be drawn; app.js removes a broken image) */
.dm-ava-wrap { position: relative; overflow: hidden; }
.dm-ava-wrap > .dm-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; font-size: 0; color: transparent; }

/* D-198 (owner 2026-10-21): the floating assistant button never covers content.
   Desktop: every page keeps room under its content for the button; on the money pages (New Sale 31, Sale Return 32, Take Payment 45,
   New Purchase 56) the floating button is not shown at all - the small assistant icon sits in the header instead (as on phones). */
@media (min-width: 760px) {
  .t-Body-content { padding-bottom: calc(3.5rem + 2rem); }
  html.page-31 .dm-bot-btn, html.page-32 .dm-bot-btn, html.page-45 .dm-bot-btn, html.page-56 .dm-bot-btn { display: none; }
  html.page-31 .dm-hbtn--bot, html.page-32 .dm-hbtn--bot, html.page-45 .dm-hbtn--bot, html.page-56 .dm-hbtn--bot {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-right: 4px;
    border-radius: 50%; cursor: pointer; background: transparent; color: var(--ut-header-text-color); border: 1px solid transparent; }
  html.page-31 .dm-hbtn--bot .fa, html.page-32 .dm-hbtn--bot .fa, html.page-45 .dm-hbtn--bot .fa, html.page-56 .dm-hbtn--bot .fa { font-size: 18px; }
}
/* D-221 (owner 2026-10-24): p4 Set a new password = the sign-in card (Login page + region template): key logo, centred why-text, big Save,
   Sign out / Back as text links; live rule checks under New password / again (app.js adds dm-pw-ok / dm-pw-bad). */
.dm-p4 .t-Login-container { max-width: 440px; }
.dm-p4 .dm-a-sub, .dm-p4 .dm-a-sub .t-Region-body { text-align: center; color: var(--dm-muted); margin: 0 0 12px; padding: 0; font-size: .9rem; }
.dm-p4 #P4_NEW_inline_help, .dm-p4 #P4_CONFIRM_inline_help { display: inline-flex; gap: 6px; align-items: center; color: var(--dm-muted); transition: color .15s; }
.dm-p4 #P4_NEW_inline_help::before, .dm-p4 #P4_CONFIRM_inline_help::before { content: "\2022"; display: inline-block; width: 12px; text-align: center; font-weight: 700; }
.dm-p4 #P4_NEW_inline_help.dm-pw-ok, .dm-p4 #P4_CONFIRM_inline_help.dm-pw-ok { color: var(--ut-palette-success, #1e7d43); font-weight: 600; }
.dm-p4 #P4_NEW_inline_help.dm-pw-ok::before, .dm-p4 #P4_CONFIRM_inline_help.dm-pw-ok::before { content: "\2713"; }
.dm-p4 #P4_NEW_inline_help.dm-pw-bad, .dm-p4 #P4_CONFIRM_inline_help.dm-pw-bad { color: var(--ut-palette-danger, #c0392b); }
/* Edge adds its own reveal eye next to the APEX eye: one eye only (all password fields of the app) */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.dm-p4 #dm_save { min-height: 44px; font-size: 15px; }
.dm-p4 .dm-p4-link { color: var(--dm-muted); margin-top: 4px; }
.dm-p4 .dm-p4-link:hover, .dm-p4 .dm-p4-link:focus-visible { color: var(--dm-brand); }
/* D-223 (owner 2026-10-24): Forgot password dialog on the sign-in page - key icon, why line, numbered steps, owner support box, big Back button */
.dm-fp { text-align: left; }
.dm-fp-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--dm-brand); color: var(--dm-on-brand); display: flex;
  align-items: center; justify-content: center; margin: 4px auto 12px; font-size: 24px; }
.dm-fp-icon .fa { font-size: 24px; }
.dm-fp-why { text-align: center; color: var(--dm-muted); margin: 0 0 16px; }
.dm-fp-steps { list-style: none; counter-reset: dmfp; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.dm-fp-steps li { counter-increment: dmfp; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; line-height: 1.4; }
.dm-fp-steps li::before { content: counter(dmfp); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dm-brand) 14%, transparent); color: var(--dm-brand); font-weight: 700; font-size: 13px; }
.dm-fp-owner { border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--dm-brand) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--dm-brand) 22%, transparent); font-size: .875rem; }
.dm-fp-support { margin-top: 4px; font-weight: 600; color: var(--dm-brand); }
.dm-fp-support:empty { display: none; }
.dm-fp-dlg .t-DialogRegion-buttons .t-ButtonRegion-col--right, .dm-fp-dlg .t-DialogRegion-buttons .t-ButtonRegion-buttons { width: 100%; }
/* D-225 (owner 2026-10-24): a number that opens something must look like a link (p52 Supplier Profile PU-xxxx was plain text via
   dm-plain-link in dm_suppliers.css) - brand colour, semi-bold, underline on hover, like the receipt links on p12. */
.t-Body a.dm-plain-link { color: var(--dm-brand); font-weight: 600; text-decoration: none; }
.t-Body a.dm-plain-link:hover, .t-Body a.dm-plain-link:focus-visible { text-decoration: underline; }
/* D-240 (owner 2026-10-26, sign-in screenshot): browser AUTOFILL - APEX does not see autofilled values, so the floating label stayed
   over the dots. app.js catches the autofill animation and adds js-show-label; the yellow / blue autofill background follows the theme. */
@keyframes dmAutofill { from { opacity: 1; } to { opacity: 1; } }
input:-webkit-autofill { animation-name: dmAutofill; animation-duration: .01s; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ut-field-text-color, currentColor);
  -webkit-box-shadow: 0 0 0 1000px var(--ut-field-background-color, var(--ut-component-background-color)) inset;
  box-shadow: 0 0 0 1000px var(--ut-field-background-color, var(--ut-component-background-color)) inset;
  transition: background-color 9999s ease-out 0s; caret-color: currentColor; }
.t-Form-fieldContainer--floatingLabel:has(input:autofill) .t-Form-label { transform: none; }
/* D-240 professional galla: pill choices (Cash In "from", "Paid from") + the galla-now line; theme tokens (light + dark) */
.dm-cash-pills .apex-item-grid, .dm-cash-pills .apex-item-grid-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-cash-pills .apex-item-option { margin: 0; flex: 0 0 auto; }
.dm-cash-pills .apex-item-option input { position: absolute; opacity: 0; }
.dm-cash-pills .apex-item-option label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; margin: 0; border-radius: 999px;
  border: 1px solid var(--dm-line); background: var(--ut-component-background-color); color: var(--ut-body-text-color); font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.dm-cash-pills .apex-item-option label::before, .dm-cash-pills .apex-item-option label::after { display: none; }
.dm-cash-pills .apex-item-option input:checked + label { background: color-mix(in srgb, var(--dm-brand) 14%, var(--ut-component-background-color));
  border-color: var(--dm-brand); color: var(--dm-brand); }
.dm-cash-pills .apex-item-option input:focus-visible + label { outline: 2px solid var(--dm-info); outline-offset: 2px; }
.dm-cashfrom-off { display: none !important; }
.dm-galla-now { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; }
.dm-galla-now:empty { display: none; }
.dm-galla-now-cash { color: var(--dm-muted); }
.dm-galla-now-cash .fa { color: var(--dm-ok); margin-right: 4px; }
.dm-galla-now-warn { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dm-warn); color: var(--ut-body-text-color);
  background: color-mix(in srgb, var(--dm-warn) 12%, var(--ut-component-background-color)); line-height: 1.4; }
.dm-galla-now-warn .fa { color: var(--dm-warn); margin-right: 4px; }
.dm-cin-help { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--dm-muted); line-height: 1.45;
  background: color-mix(in srgb, var(--dm-info) 8%, var(--ut-component-background-color)); border: 1px solid var(--dm-line); }
.dm-cin-help .fa { color: var(--dm-info); margin-right: 4px; }
.dm-cash-pills .apex-item-option label { white-space: nowrap; }
/* D-240 paid-from: pills on one row, the galla-now line + warning on their own full-width row below (APEX puts post text beside the item;
   the item CSS class lands on the field container) */
.t-Form-fieldContainer.dm-cashfrom .t-Form-itemWrapper { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
.t-Form-fieldContainer.dm-cashfrom .t-Form-itemWrapper > .apex-item-group { flex: 1 1 100%; min-width: 0; }
.t-Form-fieldContainer.dm-cashfrom .t-Form-itemText--post { display: block; flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; white-space: normal; }
.t-Form-fieldContainer.dm-cashfrom .dm-galla-now-warn, .t-Form-fieldContainer.dm-cashfrom .dm-galla-now-cash { white-space: normal; overflow-wrap: anywhere; }
.t-Form-fieldContainer.dm-cashfrom .t-Form-inputContainer { padding-top: 4px; }/* ================================================================ D-242 chatbot new design (owner 2026-10-26: "professional, eye-catching,
   main marketing feature") - theme tokens only, so light and dark both follow the app colours */
:root { --dm-ai-grad: linear-gradient(135deg, var(--dm-brand) 0%, color-mix(in srgb, var(--dm-brand) 70%, #0b3d2e) 100%); }
/* round bot button: gradient + soft pulse ring */
.dm-bot-btn.dm-ai-Y { background: var(--dm-ai-grad); color: var(--dm-on-brand); border: 0; box-shadow: 0 8px 22px color-mix(in srgb, var(--dm-brand) 45%, transparent);
  transition: transform .15s ease, box-shadow .15s ease; }
.dm-bot-btn.dm-ai-Y:hover { transform: translateY(-2px) scale(1.04); }
.dm-bot-btn.dm-ai-Y::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dm-brand) 55%, transparent);
  animation: dmAiPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes dmAiPulse { 0% { transform: scale(.9); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.dm-ai-tip { position: fixed; right: 5.25rem; bottom: 1.6rem; z-index: 901; padding: 9px 14px; border-radius: 14px 14px 4px 14px; border: 0; cursor: pointer;
  background: var(--ut-component-background-color); color: var(--ut-body-text-color); font-weight: 600; font-size: 13px;
  box-shadow: 0 8px 24px var(--dm-shadow-c), 0 0 0 1px var(--dm-line); animation: dmAiIn .3s ease-out both; }
@media (max-width: 759px) { .dm-ai-tip { right: 4.6rem; bottom: 1.4rem; } }
/* dialog header: gradient, avatar, name + Online */
.ui-dialog:has(.dm-ai-dlg) { border: 0; }
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-titlebar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: var(--dm-ai-grad); color: var(--dm-on-brand); }
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-title { display: flex; flex-direction: column; gap: 1px; color: var(--dm-on-brand); font-size: 16px; font-weight: 700; line-height: 1.2; margin: 0; }
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-titlebar-close { background: color-mix(in srgb, var(--dm-on-brand) 16%, transparent); border: 0; color: var(--dm-on-brand); border-radius: 50%; }
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-titlebar-close .ui-icon, .ui-dialog:has(.dm-ai-dlg) .ui-dialog-titlebar-close .ui-button-icon { color: var(--dm-on-brand); }
.dm-ai-hava { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--dm-on-brand) 18%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dm-on-brand) 35%, transparent); }
.dm-ai-hava .fa { font-size: 20px; }
.dm-ai-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; opacity: .9; }
.dm-ai-status i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px color-mix(in srgb, #3ddc84 30%, transparent); }
/* body */
.dm-ai { gap: 10px; background: color-mix(in srgb, var(--dm-brand) 4%, var(--ut-body-background-color, var(--ut-component-background-color))); }
.dm-ai-log { gap: 10px; padding: 6px 2px 4px; }
.dm-ai-welcome { text-align: center; padding: 14px 10px 6px; animation: dmAiIn .35s ease-out both; }
.dm-ai-welcome-ava { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--dm-ai-grad); color: var(--dm-on-brand); box-shadow: 0 10px 24px color-mix(in srgb, var(--dm-brand) 35%, transparent); }
.dm-ai-welcome-ava .fa { font-size: 32px; }
.dm-ai-welcome-t { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ut-body-text-color); }
.dm-ai-welcome-s { margin: 0 0 12px; font-size: 13px; color: var(--dm-muted); }
.dm-ai-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.dm-ai-caps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 13px;
  background: var(--ut-component-background-color); border: 1px solid var(--dm-line); color: var(--ut-body-text-color); }
.dm-ai-caps .fa { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dm-brand); background: color-mix(in srgb, var(--dm-brand) 12%, transparent); }
.dm-ai-welcome.is-small { padding: 4px 0 2px; }
.dm-ai-welcome.is-small .dm-ai-caps, .dm-ai-welcome.is-small .dm-ai-welcome-s { display: none; }
.dm-ai-welcome.is-small .dm-ai-welcome-ava { width: 40px; height: 40px; margin-bottom: 6px; }
.dm-ai-welcome.is-small .dm-ai-welcome-ava .fa { font-size: 20px; }
.dm-ai-welcome.is-small .dm-ai-welcome-t { font-size: 13px; color: var(--dm-muted); font-weight: 600; }
/* messages */
.dm-ai-row { display: flex; align-items: flex-end; gap: 8px; animation: dmAiIn .25s ease-out both; }
.dm-ai-row--user { justify-content: flex-end; }
.dm-ai-ava { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--dm-ai-grad); color: var(--dm-on-brand); font-size: 14px; }
.dm-ai-row .dm-ai-msg { max-width: 82%; padding: 9px 12px 6px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.dm-ai-row .dm-ai-msg--bot { background: var(--ut-component-background-color); border: 1px solid var(--dm-line); border-bottom-left-radius: 4px;
  color: var(--ut-body-text-color); box-shadow: 0 2px 6px var(--dm-shadow-c); }
.dm-ai-row .dm-ai-msg--user { background: var(--dm-ai-grad); color: var(--dm-on-brand); border: 0; border-bottom-right-radius: 4px; }
.dm-ai-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-ai-time { display: block; margin-top: 3px; font-size: 10.5px; text-align: right; opacity: .65; }
.dm-ai-row .dm-ai-msg.is-warn { border-color: var(--dm-warn); background: color-mix(in srgb, var(--dm-warn) 10%, var(--ut-component-background-color)); }
.dm-ai-row .dm-ai-msg.is-wait { font-style: normal; }
.dm-ai-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.dm-ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-brand); opacity: .35; animation: dmAiDot 1.2s infinite ease-in-out; }
.dm-ai-dots i:nth-child(2) { animation-delay: .15s; } .dm-ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dmAiDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes dmAiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* suggestion chips */
.dm-ai-sugg { gap: 6px; }
.dm-ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--dm-brand) 45%, var(--dm-line)); background: var(--ut-component-background-color); color: var(--ut-body-text-color);
  transition: background-color .15s, transform .1s; }
.dm-ai-chip .fa { color: var(--dm-brand); }
.dm-ai-chip:hover { background: color-mix(in srgb, var(--dm-brand) 10%, var(--ut-component-background-color)); transform: translateY(-1px); }
.dm-ai-chip:focus-visible, .dm-ai-send:focus-visible { outline: 2px solid var(--dm-info); outline-offset: 2px; }
/* input row: one rounded box with a round send button */
.dm-ai-input { align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 24px; background: var(--ut-component-background-color);
  border: 1px solid var(--dm-line); box-shadow: 0 2px 8px var(--dm-shadow-c); }
.dm-ai-input:focus-within { border-color: var(--dm-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-brand) 18%, transparent); }
.dm-ai-input .dm-ai-q { flex: 1 1 auto; min-height: 36px; max-height: 110px; padding: 8px 0; border: 0; outline: 0; resize: none; background: transparent;
  color: var(--ut-body-text-color); font: inherit; font-size: 14px; line-height: 1.35; }
.dm-ai-send { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--dm-ai-grad); color: var(--dm-on-brand); font-size: 16px; transition: transform .12s; }
.dm-ai-send:hover { transform: scale(1.06); }
.dm-ai-send:disabled { opacity: .5; cursor: default; transform: none; }
.dm-ai-note { order: 9; text-align: center; font-size: 11px; margin: 0; }
.dm-ai-note .fa { color: var(--dm-ok); }
@media (prefers-reduced-motion: reduce) {
  .dm-bot-btn.dm-ai-Y::after, .dm-ai-dots i, .dm-ai-row, .dm-ai-welcome, .dm-ai-tip { animation: none !important; }
}
/* D-242 polish: title left next to the avatar; chips = one row that scrolls sideways (more room for the welcome card / answers) */
.ui-dialog:has(.dm-ai-dlg) .ui-dialog-title { flex: 1 1 auto; align-items: flex-start; text-align: left; width: auto; }
.dm-ai-sugg { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.dm-ai-sugg::-webkit-scrollbar { display: none; }
.dm-ai-chip { flex: 0 0 auto; white-space: nowrap; }
.dm-ai-caps li { padding: 7px 10px; }

/* D-250 deep test (A-R1 addendum): the floating bot and its "Need help? Ask me" tip are never drawn over an open dialog (Save buttons) */
body:has(.ui-widget-overlay) :is(.dm-ai-tip, .dm-bot-btn) { display: none !important; }