:root{
  /* Quality Egypt brand guidelines */
  --accent:#02c4c4;   /* Maximum Blue */
  --green:#71cc98;    /* Pantone 346 C */
  --dark:#2d2d2d;     /* Night Rider */
  --plum:#2d2d2d;     /* (alias kept for existing rules) */
  --ink:#2d2d2d; --muted:#5f6b76;
  --bg:#f4f4f5;       /* White Smoke */
  --panel:#ffffff; --line:#e6e9ef; --good:#71cc98; --warn:#e0a32f;
  --grad:linear-gradient(135deg,#71cc98 0%,#02c4c4 100%);
  /* Canonical semantic STATUS palette (QA M-7) — the single source of truth so the
     same status is the same colour in every module. New/migrated status badges should
     use these vars (bg + fg pairs) instead of inventing per-module colours. */
  --st-draft-bg:#eceff3;  --st-draft-fg:#5b6470;   /* Draft / new */
  --st-sent-bg:#e6f0ff;   --st-sent-fg:#1d4f9e;    /* Sent / quotation / in-progress */
  --st-won-bg:#e3f7ee;    --st-won-fg:#1f6a43;     /* Won / confirmed / active / done */
  --st-lost-bg:#fdecec;   --st-lost-fg:#c23b30;    /* Lost / failed */
  --st-cancel-bg:#f2eee9; --st-cancel-fg:#55555b;  /* Cancelled */
  --st-warn-bg:#fff4e0;   --st-warn-fg:#7a4f00;    /* Pending / overdue / attention */

  /* ── THEME ROLES (2026-09-26, CORE_MODULE.md §6.rr) ─────────────────────────────
     A theme colour is written as a ROLE with its LIGHT value as the fallback:
         background:var(--surface-1,#fff); color:var(--text,#333); border-color:var(--border,#e5e7eb)
     The light theme deliberately defines NONE of the roles below, so each component keeps
     exactly the light colour it was designed with; `body.dark` (further down) maps every
     role once, and a future theme is one more mapping. Roles, lowest surface first:
       --surface-app --surface-1 (cards, sheets) --surface-2 (insets, table heads)
       --surface-3 (menus, pop-overs, modals) --surface-hover --surface-selected
       --text --text-2 --text-muted --text-disabled (BLOCKED only, rule 11)
       --border --border-strong --input-bg --input-border --input-text --input-placeholder
       --tint-{danger,warning,success,accent,info,violet}-{bg,fg,line}  (status chips/notices)
     Text on a coloured FILL (dark ink on the brand teal) is not a theme colour and keeps its ink.
     Guard: tools/guards.sh → "theme colours are tokens" (apps/core/theme_lint.py).
     The helpers below exist in EVERY theme and need no fallback. */
  --on-accent:#06121a;                /* ink on a brand-teal/gradient fill */
  /* The light theme's two text decisions (Eddie, 2026-09-26). The brand teal as TEXT is the
     deeper shade of it that reads 5.3 : 1 on white (theme.readable_on — recomputed from
     Settings → Branding when the colour changes); fills keep the bright teal. Teal status text
     follows it. Muted text reads >= 5 : 1 on every light surface — grey is for BLOCKED
     (rule 11), and #6c757d / #7a8396 / #94a3b8 were 3.2 to 4.4 : 1. */
  --accent-text:#017878;
  --tint-accent-fg:var(--accent-text);
  --text-muted:#5f6b76;
  /* the brand's dark as a FILL. var(--dark) is resolved HERE on :root, so it follows the
     enterprise theme and Settings → Branding (color_dark) in light, and keeps that dark
     inside body.dark, where --dark itself turns into ink */
  --brand-night:var(--dark);
  --overlay:rgba(15,20,30,.45);       /* behind a modal */
  --shadow-elev:0 12px 32px rgba(15,23,42,.14);
  --focus-ring:0 0 0 3px rgba(2,196,196,.35);
  --success-bg:var(--st-won-bg);  --success-fg:var(--st-won-fg);
  --warning-bg:var(--st-warn-bg); --warning-fg:var(--st-warn-fg);
  --danger-bg:var(--st-lost-bg);  --danger-fg:var(--st-lost-fg);
  --info-bg:var(--st-sent-bg);    --info-fg:var(--st-sent-fg);
  --chart-grid:#e6e9ef; --chart-axis:#6b7280; --chart-text:#2d2d2d;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Cabin','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.brand,.appcat,.appname,.set-title,.khd{font-family:'Montserrat','Segoe UI',sans-serif}
.env-banner{background:var(--warn);color:#3b2a06;text-align:center;font-weight:700;font-size:12px;padding:5px}
.imp-banner{position:relative;z-index:200;background:linear-gradient(90deg,#7c3aed,#9333ea);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:8px 14px}
.imp-banner b{font-weight:800}
.imp-banner a{color:#fff;text-decoration:underline;margin-left:10px;font-weight:700;white-space:nowrap}
.ua-viewas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.4);border-radius:12px;padding:12px 14px}
.ua-viewas .muted{font-size:12px}
/* Act-as picker (avatar menu): a .ds-dialog; its user rows are .ds-menu-item two lines tall */
.aa-list{max-height:50vh;overflow-y:auto;margin-top:var(--sp-3)}
.aa-list .ds-menu-item{height:auto;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3)}
.aa-id{display:flex;flex-direction:column;min-width:0}
.aa-id span{font-size:var(--fs-sm);color:var(--text-muted,#55555b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--brand-night);padding:14px 12px;overflow:auto}
.brand{padding:6px 8px 16px}
.brand img{height:30px;display:block}
.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#c7ccd6;text-decoration:none;font-size:14px;margin-bottom:2px}
.nav:hover{background:rgba(255,255,255,.08)}
.nav.on{background:var(--grad);color:var(--on-accent)}
.nav.disabled{color:var(--text-muted,#7e8696);cursor:default}
.nav.disabled:hover{background:transparent}
.nav-sep{height:1px;background:rgba(255,255,255,.12);margin:10px 6px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .ttl{font-weight:700;font-size:16px}
.spacer{flex:1}
.who{color:var(--muted);font-size:13px}
.btn-ghost{border:1px solid var(--line);border-radius:8px;padding:6px 12px;text-decoration:none;color:var(--ink);font-size:13px;background:var(--input-bg,transparent)}
.content{padding:22px}
/* module shell: top bar + breadcrumb (no sidebar, Odoo-style) */
.appshell{min-height:100vh;background:var(--bg)}
.topbar3{display:flex;align-items:center;gap:12px;padding:15px 30px;background:var(--grad);position:relative;z-index:100}
.tb-back{color:rgba(0,0,0,.55);font-size:22px;line-height:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;border:0;background:none}
.tb-back:hover{background:rgba(0,0,0,.08);color:var(--dark)}
.tb-apps{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--dark);text-decoration:none}
.tb-apps:hover{background:rgba(0,0,0,.08)}
.tb-apps svg{width:19px;height:19px}
.tb-logo img{height:34px;display:block}
.tb-logo svg,.tb-logo .qlogo{height:30px;width:auto;display:block}
.tb-crumb{display:flex;align-items:center;gap:8px;color:var(--dark);font-family:'Montserrat','Segoe UI';font-size:15px;font-weight:700}
.tb-crumb a{color:rgba(0,0,0,.55);text-decoration:none;font-weight:600}
.tb-crumb a:hover{color:var(--dark)}
.tb-crumb span{color:rgba(0,0,0,.4);font-weight:400}
/* Master search (top-bar spotlight) */
.msrch{position:relative;display:flex;align-items:center;gap:9px;width:min(440px,40vw);background:rgba(255,255,255,.16);border:1px solid rgba(0,0,0,.14);border-radius:99px;padding:8px 15px}
.msrch:focus-within{background:rgba(255,255,255,.28);border-color:rgba(0,0,0,.22)}
.msrch-ic{width:16px;height:16px;flex:0 0 16px;color:rgba(0,0,0,.55)}
.msrch input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--dark);font:500 14px 'Cabin',sans-serif}
.msrch input::placeholder{color:rgba(0,0,0,.45)}
.msrch-kbd{flex:0 0 auto;font:600 11px ui-monospace,monospace;color:rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2);border-radius:5px;padding:0 6px;line-height:16px}
body.holo .msrch{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
body.holo .msrch:focus-within{background:rgba(255,255,255,.16);border-color:var(--accent)}
body.holo .msrch-ic{color:rgba(255,255,255,.65)}
body.holo .msrch input{color:#fff}
body.holo .msrch input::placeholder{color:rgba(255,255,255,.55)}
body.holo .msrch-kbd{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.25)}
.msrch-pop{position:absolute;top:calc(100% + 9px);left:0;right:0;background:#16233a;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 26px 64px rgba(0,0,0,.5);max-height:66vh;overflow-y:auto;z-index:300;padding:6px}
.msrch-pop[hidden]{display:none}
.ms-group{font:800 10px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#8b95ad;padding:9px 10px 4px}
.ms-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;text-decoration:none;color:#eef2ff}
.ms-item:hover,.ms-item.on{background:rgba(45,212,191,.16)}
.ms-ic{flex:0 0 22px;text-align:center;font-size:16px}
.ms-tx{min-width:0;display:flex;flex-direction:column}
.ms-tx b{font:600 14px 'Cabin',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-tx span{font-size:12px;color:#9aa6c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-empty{padding:16px;text-align:center;color:#9aa6c6;font-size:13px}
@media(max-width:920px){.msrch{width:210px}.msrch-kbd{display:none}}
/* notifications ("Invalid fields:" on save): each is a .ds-notice in its tone; kept here: the column and its lift */
.qn-wrap{position:fixed;top:70px;right:16px;z-index:7000;display:flex;flex-direction:column;gap:var(--sp-2);max-width:380px}
.qn{position:relative;box-shadow:var(--shadow-elev)}
.qn-body{flex:1;min-width:0}
.qn-list{margin:var(--sp-1) 0 0;padding-left:var(--sp-5)}
.field-invalid{border-color:#d9534f!important;box-shadow:0 0 0 1px rgba(217,83,79,.6)!important}
.ct-name.field-invalid{border-bottom-color:#d9534f!important;box-shadow:none!important}
.label-invalid,.label-invalid>span{color:var(--tint-danger-fg,#d9534f)!important}
.topbar3 .who{color:rgba(0,0,0,.62);font-size:13px;font-weight:600}
.topbar3 .btn-ghost{border:1px solid rgba(0,0,0,.22);color:var(--dark);font-weight:600}
.topbar3 .btn-ghost:hover{background:rgba(0,0,0,.08)}
.appshell-body{padding:22px 28px;max-width:1180px;margin:0 auto}
/* Wide pages: a dense list view marks its container `.o-wide` and the shell widens to
   --shell-wide (admin-set in Settings → General → Behavior) so table columns stop
   wrapping and no dead space is left on big monitors. Narrow screens are unaffected
   because max-width only ever caps, never stretches. :has() matches only once the parser
   REACHES the marked element, so a page marks itself at the top of its content (an empty
   `<i class="o-wide" hidden></i>` will do): the Sales list marked its table 400 lines down,
   painted at 1180 px first and jumped to full width — layout shift 0.14 (2026-09-27). */
.appshell-body:has(.o-wide){max-width:var(--shell-wide,1600px)}
/* in-app create/edit forms */
.erp-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;max-width:780px;margin-top:12px}
.erp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.erp-field{display:flex;flex-direction:column;gap:5px}
.erp-field.full{grid-column:1 / -1}
.erp-field label{font-size:12.5px;color:var(--muted);font-weight:600}
.erp-input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:'Cabin';color:var(--ink);background:var(--surface-1,#fff);width:100%}
.erp-input:focus{outline:none;border-color:var(--accent)}
textarea.erp-input{resize:vertical}
.erp-actions{display:flex;gap:8px;margin-top:18px}
.erp-field .err{color:var(--tint-danger-fg,#c23b30);font-size:11.5px}
/* A field's own explanation (Django help_text). A DESCRIPTION, not data, so it may sit
   a step lighter than the value — development standard 11: the value itself stays dark. */
.erp-field .fhelp{font-size:11.5px;color:var(--muted);line-height:1.45}
.erp-input:disabled{background:var(--surface-2,#f4f5f7);color:var(--muted);cursor:not-allowed}
.detail{display:block}
@media(max-width:640px){.erp-grid{grid-template-columns:1fr}}

/* ---- Odoo-style opportunity form ---- */
.o-form{margin-top:10px}
.o-hide{display:none}
.err-box{color:var(--tint-danger-fg,#c23b30);margin-bottom:10px}
.o-statusbar{display:flex;justify-content:flex-end;margin-bottom:14px}
.o-stages{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-1,#fff);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.o-stage{appearance:none;border:0;background:var(--surface-1,#fff);padding:9px 20px;font:600 12.5px 'Cabin',sans-serif;color:var(--muted);cursor:pointer;border-left:1px solid var(--line);transition:.12s}
.o-stage:first-child{border-left:0}
.o-stage:hover{background:var(--surface-2,#f4f4f5)}
.o-stage.done{color:var(--ink)}
.o-stage.active{background:var(--grad);color:var(--on-accent)}
.o-sheet{background:var(--surface-1,#fff);border:1px solid var(--line);border-radius:18px;padding:26px 30px;max-width:940px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.o-titlewrap{margin-bottom:4px}
input.o-title{width:100%;border:0;border-bottom:2px solid transparent;font:700 26px 'Montserrat',sans-serif;color:var(--ink);padding:2px 0;outline:none;background:transparent}
input.o-title:focus{border-bottom-color:var(--accent)}
input.o-title::placeholder{color:var(--input-placeholder,#6b6b72);font-weight:600}
.o-revenue{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 24px;font:600 14px 'Cabin',sans-serif;color:var(--muted)}
input.o-money{width:140px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:700 15px 'Cabin',sans-serif;color:var(--ink);background:var(--surface-1,#fff)}
input.o-money.small{width:80px}
input.o-money:focus{outline:none;border-color:var(--accent)}
.o-groups{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.o-group h4{font:700 11.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text,#017878);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.o-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px;margin-bottom:11px}
.o-row label{font:600 12.5px 'Cabin',sans-serif;color:var(--muted)}
.o-row .erp-input{width:100%}
/* A field's own error, under the field. `.o-row` is a two-column grid, so an error left
   to flow would land in the LABEL column of the next implicit row and read as a label. */
.o-row .err{grid-column:1/-1;color:var(--tint-danger-fg,#c23b30);font-size:11.5px;margin-top:-5px}
.o-notebook{margin-top:26px;border-top:1px solid var(--line);padding-top:8px}
.o-tabs{display:flex;gap:18px;margin-bottom:10px}
.o-tab{font:700 13px 'Montserrat',sans-serif;color:var(--ink);padding:8px 2px;border-bottom:2px solid var(--accent)}
.o-notebook textarea.erp-input{width:100%}
@media(max-width:680px){.o-groups{grid-template-columns:1fr;gap:18px}.o-row{grid-template-columns:1fr;gap:4px}}

/* ---- Sales module ---- */
.tb-menu{display:flex;gap:4px;margin-left:18px}
.tb-menu a{color:rgba(0,0,0,.6);text-decoration:none;font:600 13px 'Cabin',sans-serif;padding:6px 12px;border-radius:8px}
.tb-menu a:hover{background:rgba(0,0,0,.1);color:var(--dark)}
.tb-menu a.on{background:rgba(255,255,255,.55);color:var(--dark)}
/* a tab menu on the dark PAGE reads light; inside the module bar it sits on the brand gradient
   in both themes and keeps modnav.css's own ink (the grey used here made it 1.7 : 1 there) */
body.dark .tb-menu:not(.modbar .tb-menu){background:transparent;border-color:var(--border,#e4e4e7)}
body.dark .tb-menu:not(.modbar .tb-menu) a{color:var(--text-2)}
body.dark .tb-menu:not(.modbar .tb-menu) a:hover{background:rgba(255,255,255,.10);color:var(--text)}
body.dark .tb-menu:not(.modbar .tb-menu) a.on{background:rgba(255,255,255,.14);color:var(--text)}
/* Power Dialer tab — high-contrast amber pill so it stands out in the toolbar */
.tb-menu a.pd-tab{background:#f59e0b;color:#2b1d00 !important;font-weight:800;box-shadow:0 2px 8px rgba(245,158,11,.4)}
.tb-menu a.pd-tab:hover{background:#ea8a06;color:#2b1d00 !important}
.tb-menu a.pd-tab.on{background:#ea8a06;color:#2b1d00 !important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}
body.holo .tb-menu a.pd-tab{color:#fff !important}
/* Customer category badge (A/B/C/D) — used on contacts cards, list rows and detail */
.ct-kcat{display:inline-block;border-radius:6px;padding:1px 8px;font-size:11px;font-weight:800;color:#fff;vertical-align:middle}
.ct-kcat.ct-cat-A{background:#16a34a}.ct-kcat.ct-cat-B{background:#2563eb}
.ct-kcat.ct-cat-C{background:#f59e0b}.ct-kcat.ct-cat-D{background:#94a3b8}
.filterbar{display:flex;gap:8px;align-items:center}
.filterbar .erp-input{width:auto;padding:8px 10px}
.lst td.r,.lst th.r{text-align:right}
.lst .empty,.empty{text-align:center;color:var(--muted);padding:20px}
.badge{display:inline-block;padding:2px 10px;border-radius:980px;font:700 11px 'Montserrat',sans-serif}
.badge.draft{background:var(--st-draft-bg);color:var(--st-draft-fg)}
.badge.sent{background:var(--st-sent-bg);color:var(--st-sent-fg)}
.badge.sale{background:var(--st-won-bg);color:var(--st-won-fg)}
.badge.cancel{background:var(--st-lost-bg);color:var(--st-lost-fg)}
/* "Not sent to customer" (apps/sales/services/pipeline_status.py) — `.badge.sent` above
   already carries its pair; this is the one open state that wants action. */
.badge.unsent{background:var(--tint-warning-bg,#fdf0e1);color:var(--tint-warning-fg,#9a3412)}
body.dark .badge.unsent{background:#3a2616;color:#f5b98a}
/* Canonical semantic status badges (use these in new/migrated templates) */
.badge.st-draft{background:var(--st-draft-bg);color:var(--st-draft-fg)}
.badge.st-sent,.badge.st-open{background:var(--st-sent-bg);color:var(--st-sent-fg)}
.badge.st-won,.badge.st-active,.badge.st-done{background:var(--st-won-bg);color:var(--st-won-fg)}
.badge.st-lost{background:var(--st-lost-bg);color:var(--st-lost-fg)}
.badge.st-cancel{background:var(--st-cancel-bg);color:var(--st-cancel-fg)}
.badge.st-warn{background:var(--st-warn-bg);color:var(--st-warn-fg)}
.o-doctitle{font:800 24px 'Montserrat',sans-serif;color:var(--ink)}
.o-statusbar.between{justify-content:space-between;align-items:center}
.act-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.confirmed-tag{color:var(--tint-success-fg,#1f9d63);font-weight:700;font-size:13px}
.rate-note{font:600 13px 'Cabin',sans-serif;color:var(--accent-text,#017878)}
.rate-box{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.rate-big{font:800 18px 'Montserrat',sans-serif;color:var(--ink)}
.note-text{font-size:13px;color:var(--ink);margin:8px 2px 0}
/* line editor */
.sol-wrap{margin:22px 0 4px}
/* the table itself (header, rows, numeric cells, locked cells, section/note rows, the
   erp-input look inside a cell) is now drawn by .ds-lines, static/css/ds/components.css —
   every live .sol-table also carries it. Column widths stay here: they are the module's
   own shape, not the component's look. */
.sol-table .sol-num{width:104px}
.sol-table .sol-num .erp-input{font-variant-numeric:tabular-nums;font-size:12.5px;padding-left:5px;padding-right:5px}   /* a 10-digit price fits without clipping */
.sol-table .sol-prod{width:190px}
.sol-table .sol-part{width:130px}
.sol-table .sol-x{width:30px}
/* the line editor's last column holds move ⠿ / insert ＋ / remove ✕ (static/js/linesort.js) */
.sol-table th.sol-tools,.sol-table td.ls-tools{width:76px}
.sol-table .sol-part{min-width:96px}   /* auto layout must not squeeze Part # to make room for the tools */
.p-del{border:0;background:transparent;color:var(--tint-danger-fg,#c23b30);font-size:15px;cursor:pointer;line-height:1}
/* the totals box is now drawn by .ds-totals (components.css) — every live .qf-totals /
   .qv-totals also carries it. The bare .tot-row below stays: sales/_margin_row.html's
   margin row is also used OUTSIDE a totals box (order_detail.html's VAT-breakdown
   footer, .vd-tot), so it is still the fallback there. */
.tot-row{display:flex;justify-content:space-between;gap:30px;min-width:240px;font:600 14px 'Cabin',sans-serif;color:var(--muted)}
.tot-row b{color:var(--ink)}
.erp-field.chk{flex-direction:row;align-items:center;gap:8px}
.erp-field.chk input{width:auto}

/* ---- Redesigned quotation form (branded + Odoo-like) ---- */
.qf{margin-top:10px}
/* Command bar — a self-contained floating card, NOT a bare full-bleed strip.
   It used to be `background:var(--bg)` with square corners and no horizontal padding,
   so it read as an unstyled grey slab wedged between two rounded cards, and the back
   link sat flush against its left edge. It is now a proper surface: rounded, hairline
   border, its own padding, and a resting gap above so that when it pins it floats
   over the content instead of being glued to the viewport edge. */
.qf-actbar{display:flex;align-items:center;gap:10px;margin:2px 0 14px;position:sticky;top:10px;z-index:10;
  background:var(--panel);padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,45,.05);
  transition:box-shadow .18s ease,border-color .18s ease,background .18s ease}
/* Pinned state (toggled by the sentinel observer): lifts off the page once it floats
   over the form beneath it. */
.qf-actbar.is-stuck{border-color:var(--border,#dbe0ea);box-shadow:0 10px 26px -10px rgba(20,30,45,.34),0 2px 6px rgba(20,30,45,.06)}
.qf-actbar-sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.qf-actbar .btn-mini{padding:8px 15px;border-radius:10px;font-weight:700}

/* Back to the list — a real ghost button with a hit area, not naked text on an edge. */
.qf-back{display:inline-flex;align-items:center;gap:3px;padding:7px 12px 7px 9px;border-radius:10px;
  font:700 13.5px 'Cabin',sans-serif;color:var(--accent-text,#017878);text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.qf-back:hover{background:rgba(2,196,196,.10)}
.qf-back-ic{font-size:19px;line-height:1;margin-top:-2px}
.qf-actbar-sep{width:1px;height:20px;background:var(--line);flex:none}

/* Document identity. The bar pins, so once the gradient banner has scrolled away this
   is the only thing telling you which quotation you are editing — it used to be a
   large empty gap. */
.qf-actbar-ctx{display:flex;align-items:center;gap:8px;min-width:0}
.qf-actbar-name{font:800 14px 'Montserrat',sans-serif;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.qf-actbar-ctx .badge{flex:none}
/* Dirty-state hint: a long quote is easy to leave unsaved. Shown by the form watcher. */
.qf-dirty{flex:none;display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:980px;
  font:700 11px 'Montserrat',sans-serif;background:var(--st-warn-bg);color:var(--st-warn-fg)}
.qf-dirty[hidden]{display:none}
.qf-dirty::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.qf-actbar-acts{display:flex;align-items:center;gap:8px;flex:none}
/* Save is the one primary action — the others are secondary by weight, not position. */
.qf-actbar .qf-save{box-shadow:0 2px 8px rgba(2,196,196,.30)}
.qf-actbar .qf-save:hover{filter:brightness(1.04)}
/* PDF export — themed accent button with download icon */
.qf-pdf{background:linear-gradient(135deg,var(--accent),var(--green));color:#04121a;border:0;display:inline-flex;align-items:center;gap:6px}
.qf-pdf:hover{filter:brightness(1.06)}
.qf-pdf-ic{font-size:13px}
/* Holo — the bar is a glass card rather than a transparent strip. */
body.holo .qf-actbar{background:rgba(8,19,15,.46);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.holo .qf-actbar.is-stuck{background:rgba(8,19,15,.70);border-color:rgba(255,255,255,.20);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
body.holo .qf-actbar .qf-act{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#eaeefb}
body.holo .qf-actbar .qf-act:hover{background:rgba(255,255,255,.14)}
body.holo .qf-actbar-name{color:#eaf6f2}
body.holo .qf-actbar-sep{background:rgba(255,255,255,.18)}
body.holo .qf-back{color:#5ef0c0}
body.holo .qf-back:hover{background:rgba(94,240,192,.14)}

/* Dark theme — same card, dark surface. */
body.dark .qf-actbar{background:#1b1f26;border-color:#2c323c;box-shadow:0 1px 2px rgba(0,0,0,.35)}
body.dark .qf-actbar.is-stuck{border-color:#39414e;box-shadow:0 12px 28px -12px rgba(0,0,0,.7)}
body.dark .qf-actbar-name{color:#e7eaf0}
body.dark .qf-actbar-sep{background:#333a45}
body.dark .qf-back{color:#5ee0d8}
body.dark .qf-back:hover{background:rgba(94,224,216,.14)}
body.holo .qf-pdf{background:linear-gradient(135deg,#71cc98,#02c4c4);color:#06121a;border:0}
/* a narrow, centered notice sheet — e.g. the RFQ "create the quotation" hand-off,
   which auto-submits itself and shows this for an instant. */
.qnow-wrap{display:flex;justify-content:center;padding:var(--sp-6) 0}
.qnow-sheet{max-width:560px;width:100%;text-align:center}
.qnow-note{margin:var(--sp-2) 0 var(--sp-5)}
#quoteNowForm{display:flex;justify-content:center;gap:var(--sp-3)}
.sol-table.wideprod .sol-prod{min-width:240px;width:240px}
.sol-table.wideprod .sol-desc{min-width:170px}
/* product column hidden → description fills the freed space (both columns) */
.sol-table.noprod .sol-desc{width:auto;min-width:420px}
.sol-table.noprod .sol-desc .p-name{min-height:38px}
/* per-line availability — structure only.
   The per-option COLOURS and the "does this option show the weeks picker" rule are
   generated from the admin-managed list (Settings → Sales → Availability Options)
   by apps/sales/templates/sales/_availability_css.html. Do not hardcode a code
   (.stock/.b2b/…) here: an admin can add, rename, recolour or remove any of them. */
.sol-avail{min-width:158px;width:158px}
.avail-wrap{display:flex;flex-direction:column;gap:5px}
.p-avail{font-weight:700;cursor:pointer}
.p-lead{font-size:12.5px}
/* "Apply VAT" toggle sitting on the VAT total row */
.tot-row.tot-vat{align-items:center}
.vat-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:600 14px 'Cabin',sans-serif;color:var(--muted)}
.vat-toggle input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
textarea.p-name[readonly]{background:var(--surface-2,#f6f6f7)}
/* .sol-table input[readonly] is now .ds-lines's blocked ink (rule 11) — components.css */
/* form tabs */
.qf-tabs.tabbar{gap:22px}
.qf-tabs.tabbar .qf-tab{cursor:pointer;border-bottom:2px solid transparent;color:var(--muted)}
.qf-tabs.tabbar .qf-tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.qf-pane[hidden]{display:none}
/* The lines of a quotation / purchase order GROW with the document and the page scrolls
   (2026-10-12: "the more i add items to the quotation they are hidden behind the box,
   it needs to act like the quotation form in odoo"). Until then the lines pane was a box
   46% of the screen high with a scrollbar of its own: a fifth line was out of sight. */
.qf-fit .qf-card{display:flex;flex-direction:column}
/* record + chatter two-column */
.rec-wrap{display:flex;gap:18px;align-items:flex-start}
.rec-main{flex:1;min-width:0}
.chatter{flex:0 0 330px;padding-left:12px;border-left:1px solid var(--line);position:sticky;top:64px;max-height:calc(100vh - 90px);overflow:auto}
.ch-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ch-noteform{display:flex;flex-direction:column;gap:8px}
.ch-noteform textarea{width:100%;resize:vertical}
.ch-attach{display:inline-block;text-align:center;cursor:pointer}
.ch-files{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ch-file{font:600 12.5px 'Cabin',sans-serif;color:var(--accent-text,#017878);text-decoration:none;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.ch-file:hover{background:var(--bg)}
.ch-feed{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:12px}
.ch-msg{display:flex;gap:9px}
.ch-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--brand-night);color:#fff;display:flex;align-items:center;justify-content:center;font:700 11px 'Montserrat',sans-serif}
.ch-msg.log .ch-av{background:var(--accent)}
.ch-cbody{min-width:0}
.ch-head{font-size:12px}
.ch-head b{font:700 12.5px 'Montserrat',sans-serif;color:var(--ink)}
.ch-note{font:500 13px 'Cabin',sans-serif;color:var(--ink);margin-top:2px}
.ch-log{font:500 12.5px 'Cabin',sans-serif;color:var(--muted);font-style:italic;margin-top:2px}
@media(max-width:900px){.rec-wrap{flex-direction:column}.chatter{flex:none;width:100%;position:static;max-height:none}}
/* The document sheet (quotation form, RFQ, purchase order): the band that used
   to sit above it (a gradient banner echoing the PDF header) is retired — the
   document number is the sheet's own title (.ds-sheet-title) and the state
   stays in the status chip already in the action bar. The card is therefore
   a plain rounded panel on every edge, not just the bottom two corners. */
.qf-card{background:var(--surface-1,#fff);border:1px solid var(--line);border-radius:18px;padding:24px 26px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
/* the 2-column field grid is now .ds-fields (components.css) — every live .qf-cols also carries it */
/* Customer quotation notes — admin-authored RED requirements the agent must read
   before quoting (Contacts module). Deliberately loud; hidden when the customer
   has none. The [hidden] guard is mandatory (display would win otherwise). */
.qf-custnotes{background:var(--surface-2,#fef2f2);border:2px solid #dc2626;border-left-width:6px;border-radius:12px;
  padding:13px 16px;margin:0 0 18px;animation:qfcn-in .25s ease}
.qf-custnotes[hidden]{display:none !important}
.qf-custnotes-h{font:800 12px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tint-danger-fg,#dc2626);margin:0 0 8px}
.qf-custnotes ol{margin:0;padding:0 0 0 22px}
.qf-custnotes li{font:700 13.5px/1.45 'Cabin',sans-serif;color:var(--tint-danger-fg,#b91c1c);margin:0 0 6px;white-space:pre-wrap}
.qf-custnotes li:last-child{margin-bottom:0}
.qf-custnotes li::marker{font-weight:800;color:var(--tint-danger-fg,#dc2626)}
@keyframes qfcn-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.dark .qf-custnotes{background:#2b1c1c;border-color:#dc2626}
body.dark .qf-custnotes li{color:#fca5a5}
.qf-permitwarn{grid-column:1/-1;background:var(--surface-2,#fef2f2);border:1px solid var(--tint-danger-line,#fbcfcf);border-left:4px solid #dc2626;
  border-radius:9px;padding:9px 12px;margin:0 0 11px;animation:qfcn-in .25s ease}
.qf-permitwarn[hidden]{display:none !important}
/* Grey means BLOCKED (CLAUDE.md): the customer box greys out ONLY when the reader is
   refused it — a Contacts-less user on an existing quotation. Everywhere else the
   field keeps normal ink. */
.qf-blocked,.qf-blocked:disabled{color:var(--qblocked,var(--text-disabled,#9aa7b4));background:var(--surface-2,#f4f6f8);cursor:not-allowed}
body.dark .qf-blocked,body.dark .qf-blocked:disabled{background:#20262c}
.qf-permitwarn-h{font:800 12.5px 'Montserrat',sans-serif;color:var(--tint-danger-fg,#dc2626)}
.qf-permitwarn-n{font:600 13px 'Cabin',sans-serif;color:var(--tint-danger-fg,#b91c1c);margin-left:6px;white-space:pre-wrap}
body.dark .qf-permitwarn{background:#2b1c1c;border-color:#5a2020;border-left-color:#dc2626}
body.dark .qf-permitwarn-n{color:#fca5a5}
/* Free Zone → VAT excluded: one short blue chip under the address (the same blue as the
   Contacts badge and the VAT row), the explanation in its tooltip. It is a fact about the
   customer, not an alarm — so it is not red like the permit / far-delivery warnings. */
.qf-fzchip{grid-column:1/-1;margin:0 0 11px}
.qf-fzchip[hidden]{display:none !important}
.qf-fzchip-t{display:inline-block;white-space:nowrap;background:var(--tint-info-bg,#eff6ff);border:1.5px solid #93b4f5;color:var(--tint-info-fg,#1d4ed8);border-radius:8px;padding:4px 10px;font:700 12px 'Montserrat',sans-serif;cursor:help}
body.dark .qf-fzchip-t{background:#14203a;border-color:#27406e;color:#93b4f5}
/* Far delivery -> shipping must be priced. Same internal-alert family, and its
   second line also wraps onto its own row because it tells the agent what to do.
   It is a WARNING and nothing more: unlike the Free Zone note beside it, nothing
   on the form is disabled by it. */
.qf-shipwarn .qf-permitwarn-n{display:block;margin-left:0;margin-top:3px;font-weight:500}
/* The locked "Apply VAT" row in the totals box, and the red line under it. */
.tot-row.tot-fz{justify-content:flex-start;padding-top:0}
.tot-row.tot-fz[hidden]{display:none !important}
.tot-fz-t{font:600 11.5px 'Montserrat',sans-serif;color:var(--tint-info-fg,#1d4ed8)}
body.dark .tot-fz-t{color:#93b4f5}
.tot-row.tot-vat.vat-locked .vat-toggle{opacity:.6;cursor:not-allowed}
.tot-row.tot-vat.vat-locked .vat-toggle input{cursor:not-allowed}
/* Free Zone: the VAT row names the exclusion in the Contacts Free Zone blue (.cw-fz), so an
   excluded customer can never look like a normal quotation. Not faded: the reader must see it. */
.vat-toggle .vat-t-fz{display:none}
.vat-toggle .vat-t-fzon{display:none}
.tot-row.tot-vat.vat-fz{background:var(--tint-info-bg,#eff6ff);border:1.5px solid #93b4f5;border-radius:10px;padding:8px 10px;margin:2px -10px}
.tot-row.tot-vat.vat-fz .vat-toggle{opacity:1;color:var(--tint-info-fg,#1d4ed8);font-weight:700}
.tot-row.tot-vat.vat-fz .vat-toggle input{accent-color:#1d4ed8;outline:2px solid #1d4ed8;outline-offset:1px;border-radius:3px}
.tot-row.tot-vat.vat-fz .vat-t-normal{display:none}
.tot-row.tot-vat.vat-fz .vat-t-fz{display:inline}
.tot-row.tot-vat.vat-fz b{color:var(--tint-info-fg,#1d4ed8)}
/* …and the permitted user's warned decision to charge VAT there anyway (2026-09-21): the
   row stays Free Zone blue but names the unusual state, on the form and on the quotation page. */
.tot-row.tot-vat.vat-fz.vat-fzon .vat-t-fz{display:none}
.tot-row.tot-vat.vat-fz.vat-fzon .vat-t-fzon{display:inline}
.tot-row.tot-vat.vat-fz.vat-fzon .vat-toggle{cursor:pointer;opacity:1}
.qf-fzchip-t.qf-fzchip-on{background:var(--tint-warning-bg,#fff7e6);border-color:#e0a800;color:var(--tint-warning-fg,#8a5a00)}
body.dark .qf-fzchip-t.qf-fzchip-on{background:#3a2e14;border-color:#8a6a1c;color:#f5d98a}
body.dark .tot-row.tot-vat.vat-fz{background:#14203a;border-color:#27406e}
body.dark .tot-row.tot-vat.vat-fz .vat-toggle,body.dark .tot-row.tot-vat.vat-fz b{color:#93b4f5}
/* Apply VAT held ON for a user who may not switch it off (TX-06): grey = blocked, with the
   reason revealed on the first attempt. The reason box a permitted user writes in. */
.tot-row.tot-vat.vat-offlocked .vat-toggle{color:var(--text-muted,#6b7280);cursor:not-allowed}
.tot-row.tot-vat.vat-offlocked .vat-toggle input{cursor:not-allowed}
.tot-row.tot-vatlock,.tot-row.tot-vatx{justify-content:flex-start;flex-wrap:wrap;gap:4px;padding-top:0}
.tot-row.tot-vatlock[hidden],.tot-row.tot-vatx[hidden]{display:none !important}
.tot-vatlock-t{font:600 11.5px 'Montserrat',sans-serif;color:var(--text-muted,#6b7280)}
.tot-vatx-l{font:700 11.5px 'Montserrat',sans-serif;width:100%}
.tot-vatx-n{font-weight:500}
.tot-row.tot-vatx textarea{width:100%}
body.dark .tot-fz-t{color:#fca5a5}
.qf-grouph{font:800 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text,#017878);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
/* each field row's own grid/label look is now .ds-field (components.css) — every live
   .qf-row also carries it. .qf-row .erp-input stays: the component draws the label and
   the value, not the width of a real form widget dropped into the value column. */
.qf-row .erp-input{width:100%}
.qf-ro{font:600 13.5px 'Cabin',sans-serif;color:var(--ink)}
.qf-rate{font:700 13px 'Cabin',sans-serif;color:var(--accent-text,#017878)}
.qf-tabs{display:flex;gap:18px;margin:26px 0 12px;border-bottom:1px solid var(--line)}
.qf-tab{font:700 13.5px 'Montserrat',sans-serif;color:var(--ink);padding:9px 2px;border-bottom:2px solid var(--accent)}
.sol-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sol-section input{font:800 14px 'Montserrat',sans-serif;color:var(--dark);border:0;border-bottom:2px solid var(--accent);border-radius:0;background:rgba(2,196,196,.06)}
.sol-note input{font-style:italic;color:var(--muted);border:0;background:var(--surface-2,#fafafb)}
.qf-bottom{display:grid;grid-template-columns:1fr 330px;gap:24px;margin-top:26px;align-items:start}
.qf-terms .erp-input{width:100%}
/* the totals box itself, including [hidden] on a discount row, is now .ds-totals
   (components.css) — every live .qf-totals also carries it */
/* terms & conditions card on the quote */
.qf-terms-card{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.qf-terms-h{font:800 11.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text,#017878);padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px}
.qf-term{padding:9px 14px;border-bottom:1px solid var(--line)}
.qf-term-l{font:700 12.5px 'Cabin',sans-serif;color:var(--ink)}
.qf-term-b{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.qf-terms-f{padding:7px 14px;font-size:11px;border-top:1px solid var(--line)}
/* The terms on file are no longer the customer's current ones — saving reissues under
   the text shown. Amber notice, not grey: it is live information, not a blocked field. */
.qf-terms-reissue{padding:9px 14px;font-size:12px;line-height:1.5;font-weight:600;
  border-top:1px solid var(--line);background:rgba(226,110,42,.09);color:var(--tint-warning-fg,#9a4508)}
.qf-terms-reissue-go{margin-left:8px;font:700 11.5px 'Cabin',sans-serif;cursor:pointer;
  padding:4px 11px;border-radius:8px;border:1px solid rgba(226,110,42,.45);
  background:#e26e2a;color:#fff}
.qf-terms-reissue-go:hover{background:#c2570f}
body.holo .qf-terms-reissue{background:rgba(255,168,94,.13);color:#ffcda3;border-color:rgba(255,255,255,.1)}
/* "Customer-specific" chip — this quotation carries the customer's own negotiated T&C */
.qf-terms-badge{margin-left:auto;font:800 9.5px 'Montserrat',sans-serif;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;background:rgba(226,110,42,.12);color:var(--tint-warning-fg,#c2570f);border:1px solid rgba(226,110,42,.32)}
.qf-terms-badge[hidden]{display:none}
body.holo .qf-terms-badge{background:rgba(255,168,94,.16);color:#ffbf87;border-color:rgba(255,168,94,.34)}
body.holo .qf-terms-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
body.holo .qf-term,body.holo .qf-terms-h,body.holo .qf-terms-f{border-color:rgba(255,255,255,.1)}
body.holo .qf-term-l{color:#eaeefb}
/* Terms card reused inside the order-detail notebook: sit flush, no extra frame */
.qf-terms-plain{margin-top:8px;border:0;border-radius:0;background:transparent}
body.holo .qf-terms-plain{background:transparent;border:0}
.qf-terms-plain .qf-term{padding:9px 0}
.qf-terms-plain .qf-term:last-child{border-bottom:0;padding-bottom:0}
/* Arabic / RTL: auto-detect direction so Arabic shows right-to-left and joined
   (browsers shape the letters natively in HTML — this just fixes alignment) */
input,textarea,select,.dm-text,.qf-term-b,.note-text,.qf-ro,.p-name{unicode-bidi:plaintext}
/* no spinner arrows on numeric inputs (cleaner quote/number fields) */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.ship-in{display:inline-flex;align-items:center;gap:5px;font:700 14px 'Cabin',sans-serif;color:var(--ink)}
.ship-in input{width:96px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:700 14px 'Cabin',sans-serif;text-align:right;background:var(--surface-1,#fff)}
.ship-in input:focus{outline:none;border-color:var(--accent)}
.set-card code{background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:12px;color:var(--accent-text,#017878)}
/* access-rights matrix */
.acc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;font-size:12px;color:var(--muted)}
.acc-legend b{color:var(--ink)}
.acc-grid{width:100%;border-collapse:collapse;font-size:13px}
.acc-grid th,.acc-grid td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.acc-grid thead th{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.4px}
.acc-grid th.acc-app,.acc-grid td.acc-app{min-width:180px}
.acc-cat{display:block;font-size:11px;color:var(--muted);font-weight:400}
.acc-sel{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;background:var(--surface-1,#fff);min-width:140px}
.acc-sel:focus{outline:none;border-color:var(--accent)}
.acc-sel.acc-none{color:#9aa1ab}
.acc-sel.acc-own{color:var(--tint-warning-fg,#b4690e)}
.acc-sel.acc-all{color:var(--tint-info-fg,#1f6feb)}
.acc-sel.acc-admin{color:var(--tint-success-fg,#1f9d63);font-weight:700}
/* Users & Access sub-tabs */
.ua-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.ua-tab{padding:9px 16px;border-radius:10px 10px 0 0;text-decoration:none;color:var(--muted);font-weight:700;font-size:13.5px;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.ua-tab:hover{color:var(--ink)}
.ua-tab.on{color:var(--accent-text,#017878);background:var(--card,var(--surface-1,#fff));border-color:var(--line);border-bottom:1px solid var(--card,var(--surface-1,#fff))}
.ua-checks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.lst tr.on td{background:rgba(2,196,196,.10)}
body.holo .ua-tab.on{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);border-bottom-color:transparent}
body.holo .lst tr.on td{background:rgba(34,211,238,.12)}
/* roles + per-user permission editor */
.role-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.role-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13px;background:var(--card,var(--surface-1,#fff))}
.role-chip:hover{border-color:var(--accent)}
.role-chip.on{background:linear-gradient(135deg,#71cc98,#02c4c4);color:#06121a;border:0}
.role-chip.off{opacity:.55}
.role-n{background:rgba(0,0,0,.12);border-radius:999px;padding:1px 8px;font:700 11px 'Cabin',sans-serif}
.role-chip.on .role-n{background:rgba(0,0,0,.18)}
.role-new{display:inline-flex;gap:6px;align-items:center}
.role-new input{border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;min-width:160px}
.role-rename{border:1px solid var(--line);border-radius:8px;padding:7px 11px;font:800 14px 'Montserrat',sans-serif;min-width:220px}
.perm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.set-toggle.inline{display:inline-flex;align-items:center;gap:7px;border:0;margin:0;padding:0;font-size:13px;color:var(--muted)}
.perm-roleassign{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.perm-roleassign select{border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.perm-grid{width:100%;border-collapse:collapse;font-size:13px}
.perm-grid th{text-align:left;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line)}
.perm-grid td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.perm-mod td{padding-top:12px}
.perm-mod td:first-child{font-size:14px}
.perm-tabname{padding-left:26px!important;color:var(--muted)}
.perm-tab td{border-bottom:1px dashed var(--line)}
.perm-grid .acc-sel{min-width:150px}
.acc-sel.perm-none{color:var(--tint-warning-fg,#b4690e)}.acc-sel.perm-view{color:var(--tint-info-fg,#1f6feb)}.acc-sel.perm-edit{color:var(--tint-success-fg,#1f9d63);font-weight:700}.acc-sel.perm-inherit{color:var(--muted)}
body.holo .role-chip,body.holo .role-new input,body.holo .role-rename,body.holo .perm-roleassign select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#eaeefb}
body.holo .role-n{background:rgba(255,255,255,.14)}
body.holo .perm-grid th,body.holo .perm-tabname{color:#aab2cc}
body.holo .perm-grid td,body.holo .perm-grid th{border-color:rgba(255,255,255,.1)}
/* permission cards (icon per module, permissions beneath) */
.perm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;margin-top:8px}
.perm-card{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--card,var(--surface-1,#fff))}
.perm-card-h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.perm-card-ic{width:36px;height:36px;border-radius:10px;background:transparent;padding:0;object-fit:contain}
.perm-card-t b{display:block;font:800 14.5px 'Montserrat',sans-serif;color:var(--ink)}
.perm-card-t span{font-size:11px;color:var(--muted)}
.perm-card-row{display:flex;align-items:center;gap:10px;margin-top:7px}
.perm-card-row.head{padding-bottom:9px;border-bottom:1px dashed var(--line)}
.perm-card-row.tab{padding-left:4px}
.perm-card-lbl{font-size:12.5px;color:var(--muted);flex:1}
.perm-card-row .acc-sel{min-width:150px;flex:0 0 auto;width:150px}
.perm-card-row:not(.head):not(.tab) .acc-sel{flex:1;width:auto}
body.holo .perm-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
body.holo .perm-card-ic{background:transparent}
body.holo .perm-card-row.head{border-color:rgba(255,255,255,.14)}
/* technical page */
.tech-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;margin-top:6px}
.tech-info>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding:6px 0}
.tech-info span{color:var(--muted)}
.tech-counts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.tech-count{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:120px;text-align:center}
.tech-count b{display:block;font-size:22px;color:var(--ink)}
.tech-count span{font-size:12px;color:var(--muted)}
.tech-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.tech-link{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;background:var(--card,var(--surface-1,#fff));transition:border-color .15s,transform .15s}
.tech-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.tech-link b{display:block;color:var(--ink)}
.tech-link span{font-size:12px;color:var(--muted)}
body.holo .acc-sel,body.holo .tech-link,body.holo .tech-count{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#eaeefb}
body.holo .tech-link b,body.holo .tech-count b{color:#f3f5ff}
/* configuration manager (in-app mini control panel) */
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:6px}
.cfg-tile{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;background:var(--card,var(--surface-1,#fff));transition:border-color .15s,transform .15s}
.cfg-tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.cfg-name{font-weight:700;color:var(--ink)}
.cfg-count{min-width:24px;text-align:center;font:700 12px 'Cabin',sans-serif;color:var(--accent-text,#017878);background:rgba(2,196,196,.12);border-radius:999px;padding:2px 9px}
.mng-help{font-size:12px;margin-top:4px}
.mng-archived td{opacity:.5}
/* A table cell, so never display:flex (a flex <td> leaves the row's vertical
   centre and its border ends short) — apps/core/test_table_cells.py. */
td.mng-actions{white-space:nowrap}
.mng-actions > *{display:inline-block;vertical-align:middle}
.mng-actions > * + *{margin-left:12px}
/* Pager for the shared Configuration lists. Theme colours are roles with their light value
   as the fallback (CORE_MODULE.md 6.rr) - never a bare literal. */
.mng-pager{display:flex;align-items:center;gap:14px;margin:12px 2px 0;flex-wrap:wrap}
.mng-pager .muted{color:var(--text-muted,#6b7280);font-size:13px}
.mng-actions form{margin:0}
.link.danger{color:var(--tint-danger-fg,#e2574c);background:none;border:0;cursor:pointer;font:inherit;padding:0}
.link.danger:hover{text-decoration:underline}
.btn-mini.danger{background:rgba(226,87,76,.12);border:1px solid rgba(226,87,76,.5);color:var(--tint-danger-fg,#e2574c)}
.btn-mini.danger:hover{background:#e2574c;color:#fff;border-color:#e2574c}
.ua-delete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ua-delete .muted{font-size:12px}
.fp-title{font:800 18px 'Montserrat',sans-serif;color:#fff;text-align:center;margin-top:4px}
.fp-sub{color:#aab2cc;font-size:13px;text-align:center;margin:6px 0 14px;line-height:1.5}
.fp-logout{margin:14px auto 0;text-align:center}
.fp-logout button{background:none;border:0;color:#aab2cc;cursor:pointer;font-size:13px;text-decoration:underline}

/* ---- Calls module ---- */
.calls-app{max-width:1500px}
.call-kpis{display:flex;gap:14px;margin:6px 0 22px;flex-wrap:wrap}
.call-kpis .ck{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
body.holo .call-kpis .ck{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.call-kpis .ck b{display:block;font:800 26px 'Montserrat',sans-serif;line-height:1}
.call-kpis .ck span{font-size:12.5px;color:var(--muted)}
.call-kpis .ck.due b{color:var(--accent-text,#017878)}
.call-kpis .ck.done b{color:var(--tint-success-fg,#16a34a)}
.calls-tbl a{color:var(--accent-text,#017878);text-decoration:none}
.calls-tbl tr.done{opacity:.55}
.calls-tbl td .r,.calls-tbl td.r{text-align:right}
/* fit the wide customers table inside its panel — no sideways scroll, and
   wrap only on spaces (never mid-word) except the long email column */
.calls-tbl{table-layout:fixed;width:100%;font-size:12.5px}
.calls-tbl th,.calls-tbl td{padding:8px 9px;vertical-align:top;white-space:normal;overflow-wrap:break-word;word-break:normal}
.calls-tbl th{font-size:11px;letter-spacing:.02em}
/* Column widths come from the table's own <colgroup>, NOT from nth-child: the
   positional version silently mis-sized every column the day a new one (Latest
   quotation) was inserted in the middle, and columns are already conditional on
   permissions (agent / quotation), so position is not a stable identity. */
.calls-tbl col.cw-company{width:14%}
.calls-tbl col.cw-phones{width:26%}
.calls-tbl col.cw-email{width:11%}
.calls-tbl col.cw-quote{width:13%}
.calls-tbl col.cw-status{width:10%}
.calls-tbl col.cw-callback{width:8%}
.calls-tbl col.cw-agent{width:9%}
.calls-tbl col.cw-actions{width:9%}
.calls-tbl td.ct-email{overflow-wrap:anywhere}
/* A quotation number and its value are single tokens — never break them mid-word.
   Specificity must beat `.calls-tbl td` above, hence the element in the selector. */
.calls-tbl td.ct-quote a,.calls-tbl td.ct-quote .ctq-amt{white-space:nowrap}
.calls-tbl td.ct-actions{padding:7px 7px}
.calls-tbl td.ct-actions .btn-mini{display:block;width:100%;margin:0 0 5px;padding:6px 5px;font-size:11px;text-align:center;white-space:nowrap}
.calls-tbl td.ct-actions .btn-mini:last-child{margin-bottom:0}
.calls-search{display:flex;gap:8px;margin:10px 0 8px;flex-wrap:wrap}
.calls-search input[name=q]{flex:1;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font:inherit;background:var(--panel);color:var(--ink)}
.call-clear{padding:16px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);border-radius:12px}
.call-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:16px}
body.holo .call-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.call-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 18px;margin-top:12px}
.call-info label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.call-info span{font-size:14.5px}
.call-info a{color:var(--accent-text,#017878);text-decoration:none}
.call-assign{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.call-assign label{font-size:12.5px;color:var(--muted);font-weight:600}
.log-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;margin-bottom:10px}
.log-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.log-grid input,.log-grid select,.call-card textarea,.cf-remark input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;background:var(--panel);color:var(--ink)}
body.holo .log-grid input,body.holo .log-grid select,body.holo .call-card textarea,body.holo .cf-remark input{background:rgba(255,255,255,.06)}
.call-card textarea{width:100%;resize:vertical}
.log-na{flex-direction:row!important;align-items:center;gap:8px!important;align-self:end;color:var(--ink)!important;font-weight:600}
.log-na input{width:17px;height:17px;accent-color:var(--accent)}
.cf-remark{display:block;margin-top:12px;font-size:12.5px;color:var(--muted);font-weight:600}
.cf-remark input{width:100%;margin-top:5px}
.call-note{padding:11px 0;border-bottom:1px solid var(--line)}
.call-note:last-child{border-bottom:0}
.cn-head{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cn-head b{color:var(--ink)}
.cn-body{margin-top:4px;font-size:14px;line-height:1.5}
.call-badge{display:inline-block;font:700 11px 'Cabin',sans-serif;padding:2px 9px;border-radius:99px;border:1px solid transparent}
.call-badge.s-new{color:var(--text-muted,#64748b);background:rgba(100,116,139,.14)}
.call-badge.s-open{color:var(--tint-info-fg,#2563eb);background:rgba(37,99,235,.14)}
.call-badge.s-interested{color:var(--tint-success-fg,#16a34a);background:rgba(22,163,74,.14)}
.call-badge.s-callback{color:var(--tint-warning-fg,#d97706);background:rgba(217,119,6,.15)}
.call-badge.s-no_answer{color:var(--tint-danger-fg,#e2574c);background:rgba(226,87,76,.14)}
.call-badge.s-won{color:var(--tint-success-fg,#15803d);background:rgba(21,128,61,.16)}
.call-badge.s-lost{color:var(--tint-danger-fg,#b91c1c);background:rgba(185,28,28,.14)}
.call-badge.s-not_interested{color:var(--text-muted,#78716c);background:rgba(120,113,108,.16)}
.call-badge.s-closed{color:var(--text-muted,#475569);background:rgba(71,85,105,.16)}
/* Quotation states reuse the same pill on the Call Desk (Latest quotation column):
   `won`/`lost` already exist above, these are the sales-only ones. */
.call-badge.s-draft{color:var(--text-muted,#64748b);background:rgba(100,116,139,.14)}
.call-badge.s-quotation{color:var(--tint-info-fg,#2563eb);background:rgba(37,99,235,.14)}
.call-badge.s-cancelled{color:var(--text-muted,#78716c);background:rgba(120,113,108,.16)}
.call-badge.s-duplicated{color:var(--tint-violet-fg,#7c3aed);background:rgba(124,58,237,.14)}
/* Pipeline status (apps/sales/services/pipeline_status.py): an open quotation is
   "Not sent to customer" or "Sent to customer". */
.call-badge.s-unsent{color:var(--tint-warning-fg,#9a3412);background:rgba(234,88,12,.14)}
.call-badge.s-sent{color:var(--tint-info-fg,#2563eb);background:rgba(37,99,235,.14)}
/* two-column layout: queue (left) vs all customers (right) */
.calls-cols{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:18px;align-items:start}
@media(max-width:1080px){.calls-cols{grid-template-columns:1fr}}
.cc-queue{position:sticky;top:8px}
.cc-all .tablewrap{overflow-x:auto}
/* Calls → customer page: who to call inside this company (company lines first, then
   each contact person with their job position). Mirrors the desk's phones column. */
.cd-dir{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.cd-dir-h{font:800 12px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.cd-num{display:grid;grid-template-columns:minmax(150px,300px) 62px minmax(120px,180px) auto;gap:12px;align-items:baseline;justify-content:start;padding:6px 0;border-bottom:1px dashed var(--line)}
.cd-num:last-child{border-bottom:0}
.cd-who{font-weight:650;color:var(--ink)}
.cd-num.person .cd-who{font-weight:600}
.cd-in{color:var(--accent-text,#017878);font-weight:800}
.cd-own{font-weight:600;color:var(--muted);font-size:12px}
.cd-quote{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.cd-qrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;padding:5px 0}
.cd-qrow+.cd-qrow{border-top:1px solid var(--line)}
.cd-qamt{font-weight:800}
/* "there is more history than this" — the Call Desk column and the customer page
   share it, so it lives here rather than in one page's inline styles. */
.ctq-all{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;
  color:var(--muted);text-decoration:none}
.ctq-all:hover{color:var(--accent-text,#017878)}
.cd-title{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
.cd-kind{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cd-na{margin:0 0 10px;padding:9px 12px;border-radius:10px;font-size:12.5px;
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:var(--tint-danger-fg,#b3261e)}
body.dark .cd-na{color:#ff9d92}
/* give the Calls page extra width so the customers table isn't clipped */
.appshell-body:has(.calls-app){max-width:1460px}
.cq-item{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid var(--line)}
.cq-item:last-child{border-bottom:0}
.cq-main{flex:1;min-width:0}
.cq-main b{font:600 14px 'Cabin',sans-serif}
.cq-sub{font-size:12px;color:var(--muted);margin-top:2px}
.cq-sub a{color:var(--accent-text,#017878);text-decoration:none}
.cq-open{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);text-decoration:none;font-size:15px;border:1px solid transparent}
.cq-open:hover{background:rgba(45,212,191,.12);color:var(--accent-text,#017878);border-color:rgba(45,212,191,.35)}
/* log-call modal */
.cm-overlay{position:fixed;inset:0;z-index:5000;background:rgba(5,8,16,.55);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.cm-overlay[hidden]{display:none}
.cm-box{width:580px;max-width:96vw;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
body.holo .cm-box{background:#141f33;border-color:rgba(255,255,255,.14)}
.cm-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);font:700 15px 'Montserrat',sans-serif}
.cm-title{display:flex;align-items:center;gap:8px}
.cm-ic{font-size:16px}
.cm-call{margin-left:auto;color:var(--accent-text,#017878);text-decoration:none;font:700 12.5px 'Cabin',sans-serif;border:1px solid rgba(45,212,191,.45);padding:5px 12px;border-radius:99px}
.cm-call:hover{background:rgba(45,212,191,.14)}
.cm-call[hidden]{display:none}
.cm-x{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;margin-left:6px}
.cm-x:hover{color:var(--ink)}
.cm-box form{padding:18px}
.cm-sec{margin-bottom:16px}
.cm-label{font:700 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.cm-label .muted{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.cm-chips{display:flex;flex-wrap:wrap;gap:7px}
.cm-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 12.5px 'Cabin',sans-serif;cursor:pointer;transition:.12s}
.cm-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#94a3b8;flex:0 0 8px}
.cm-chip:hover{border-color:var(--accent)}
.cm-chip.on{background:var(--accent);color:#04211d;border-color:var(--accent);font-weight:700}
.cm-chip.on::before{background:#04211d}
.cm-chip.s-new::before{background:#64748b}.cm-chip.s-open::before{background:#2563eb}
.cm-chip.s-interested::before{background:#16a34a}.cm-chip.s-callback::before{background:#d97706}
.cm-chip.s-no_answer::before{background:#e2574c}.cm-chip.s-won::before{background:#15803d}
.cm-chip.s-lost::before{background:#b91c1c}.cm-chip.s-not_interested::before{background:#78716c}
.cm-chip.s-closed::before{background:#475569}
.cm-na{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;cursor:pointer;margin-bottom:16px}
.cm-na:hover{border-color:rgba(226,87,76,.5);background:rgba(226,87,76,.05)}
.cm-na input{width:18px;height:18px;accent-color:#e2574c}
.cm-na-txt{font-size:13.5px}.cm-na-txt b{color:var(--tint-danger-fg,#e2574c)}
#cmNoteSec{transition:opacity .15s}
#cmNoteSec.off{opacity:.4}
.cm-box textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font:inherit;background:var(--panel);color:var(--ink);resize:vertical;min-height:84px}
body.holo .cm-box textarea{background:rgba(255,255,255,.06)}
.cm-box input[type=date]{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;background:var(--panel);color:var(--ink);color-scheme:dark}
body.holo .cm-box input[type=date]{background:rgba(255,255,255,.06)}
.cm-cbrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cm-quick{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 12px 'Cabin',sans-serif;cursor:pointer}
.cm-quick:hover{border-color:var(--accent);color:var(--accent-text,#017878)}
.cm-foot{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:15px;border-top:1px solid var(--line)}
.cm-foot .spacer{flex:1}
.cm-link{color:var(--muted);text-decoration:none;font-size:13px}
.cm-link:hover{color:var(--accent-text,#017878)}
/* Contacts — Odoo-style child contacts */
.ct-children a{color:var(--accent-text,#017878);text-decoration:none}
.ct-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.ct-x:hover{color:var(--tint-danger-fg,#e2574c)}
.ct-add{margin-top:14px}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 16px;margin-bottom:10px}
.ct-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.ct-grid input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;background:var(--panel);color:var(--ink)}
body.holo .ct-grid input{background:rgba(255,255,255,.06)}
/* Odoo-style contact form */
.ct-form{margin-top:12px}
.ct-sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:1000px}
body.holo .ct-sheet{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.ct-typebar ul,.ct-typebar{list-style:none;display:flex;gap:8px;margin:0 0 14px;padding:0}
.ct-typebar li{list-style:none}
.ct-typebar label{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border:1px solid var(--line);border-radius:99px;font:600 13px 'Cabin',sans-serif;cursor:pointer}
.ct-typebar input{accent-color:var(--accent)}
.ct-top{display:flex;gap:20px;align-items:flex-start}
.ct-headfields{flex:1;min-width:0}
.ct-name{width:100%;font:800 24px 'Montserrat',sans-serif!important;border:0!important;border-bottom:2px solid var(--line)!important;border-radius:0!important;padding:6px 2px!important;background:transparent!important;margin-bottom:16px}
.ct-name:focus{outline:none;border-bottom-color:var(--accent)!important}
.ct-photo{flex:0 0 104px;width:104px;height:104px;border-radius:12px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.6}
.ct-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
@media(max-width:760px){.ct-cols{grid-template-columns:1fr}.ct-top{flex-direction:column-reverse}}
.ct-col{display:flex;flex-direction:column;gap:8px}
.ct-f{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.ct-f>span{text-align:left}
.ct-vendor-choice{display:flex;align-items:center;gap:9px;min-height:34px;cursor:pointer;color:var(--ink);font:600 13px 'Cabin',sans-serif}
.ct-vendor-choice input.ct-vendor-input{width:18px!important;height:18px!important;min-height:0!important;margin:0;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.ct-vendor-choice b{display:block;font:800 12.5px 'Montserrat',sans-serif;color:var(--ink)}
/* The line UNDER each business-role tick explains a control the reader can
   operate, so it must not wear var(--muted) — that is the grey this ERP
   reserves for blocked (Eddie's rule 11). Measured at rgb(122,131,150) on
   rgb(245,248,248): about 3.6:1, under the 4.5:1 minimum for small text, and
   these two lines are the instructions that make Customer/Vendor usable.
   A step lighter than the label, legible, and clearly not the blocked tone. */
.ct-vendor-choice small{display:block;margin-top:1px;color:var(--text-muted,#4a5568);font-size:11.5px;line-height:1.4}
body.dark .ct-vendor-choice small{color:#b6c0cf}
/* A business role this reader may not change (contacts.business_role) IS blocked —
   so here, and only here, the choice wears the blocked grey; the note under it says why. */
.ct-vendor-choice:has(input:disabled),.ct-vendor-choice:has(input:disabled) b,.ct-vendor-choice:has(input:disabled) small{color:var(--qblocked,var(--text-disabled,#9aa7b4));cursor:not-allowed}
.ct-vendor-choice input.ct-vendor-input:disabled{cursor:not-allowed}
.ct-f .erp-input,.ct-f input,.ct-f select{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;background:var(--panel);color:var(--ink)}
body.holo .ct-f .erp-input,body.holo .ct-f input,body.holo .ct-f select{background:rgba(255,255,255,.06)}
.ct-addr2{display:grid;grid-template-columns:1fr;gap:8px}
.ct-tabs{display:flex;gap:4px;margin:20px 0 0;border-bottom:1px solid var(--line)}
.ct-tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font:700 13px 'Cabin',sans-serif;color:var(--muted);cursor:pointer}
.ct-tab.on{color:var(--accent-text,#017878);border-bottom-color:var(--accent)}
.ct-pane{padding:16px 2px}
.ct-pane[hidden]{display:none}
.ct-pane textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;background:var(--panel);color:var(--ink)}
body.holo .ct-pane textarea{background:rgba(255,255,255,.06)}
/* Odoo-style contact read view */
.ct-view{max-width:1000px}
.ct-view-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ct-vhead{display:flex;align-items:center;gap:18px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ct-vid{min-width:0}
.ct-vtype{font:700 11.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ct-vtype a{color:var(--accent-text,#017878);text-decoration:none}
.ct-vname{font:800 26px 'Montserrat',sans-serif;margin:5px 0 0;line-height:1.12}
.ct-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
@media(max-width:760px){.ct-vgrid{grid-template-columns:1fr}}
.ct-vcol{display:flex;flex-direction:column}
.ct-vf{display:grid;grid-template-columns:118px 1fr;gap:12px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.ct-vf:last-child{border-bottom:0}
.ct-vf>span{font:700 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);align-self:center}
.ct-vf a{color:var(--accent-text,#017878);text-decoration:none}
body.holo .cfg-tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.holo .cfg-name{color:#eaeefb}
/* lead finder */
.lf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:6px}
.lf-grid label{display:flex;flex-direction:column;gap:5px;font:600 12px 'Cabin',sans-serif;color:var(--muted)}
.lf-grid input,.lf-grid select{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;background:var(--surface-1,#fff);color:var(--ink)}
.lf-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.lf-note{font-size:12px}
.lf-alert{margin-top:14px;background:var(--tint-warning-bg,#fdf3e7);border:1px solid var(--tint-warning-line,#e7b765);color:var(--tint-warning-fg,#8a5a12);border-radius:10px;padding:11px 14px;font-size:13px}
.lf-summary{margin:16px 0 8px;color:var(--muted);font-size:13px}
.lf-bar{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.lf-assign{display:flex;align-items:center;gap:8px;font:600 13px 'Cabin',sans-serif}
.lf-assign select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--surface-1,#fff);color:var(--ink)}
.lf-table td,.lf-table th{font-size:13px}
.lf-table .lf-dup td{opacity:.6}
.lf-badge{display:inline-block;font:700 10px 'Cabin',sans-serif;text-transform:uppercase;letter-spacing:.04em;background:rgba(226,87,76,.14);color:var(--tint-danger-fg,#c23b30);border-radius:999px;padding:2px 8px;margin-left:6px}
.lf-src{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.lf-hint,.lf-empty{margin-top:16px}
.lf-hq{display:inline-flex;align-items:center;gap:4px;font:700 10.5px 'Cabin',sans-serif;background:rgba(45,212,191,.16);color:var(--tint-accent-fg,#0f9e86);border:1px solid rgba(45,212,191,.4);border-radius:999px;padding:3px 10px;margin-left:6px;white-space:nowrap}
body.holo .lf-hq{color:#5eead4}
.lf-hqbtn{cursor:pointer}
.lf-hqbtn:hover{background:rgba(45,212,191,.28)}
.lf-hqbtn .lf-car{transition:transform .15s}
.lf-hqbtn.open .lf-car{transform:rotate(180deg)}
.lf-coline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lf-addr{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
.lf-map{text-decoration:none;font-size:14px}
.lf-map:hover{filter:brightness(1.2)}
.lf-brrow>td{background:rgba(45,212,191,.05)}
body.holo .lf-brrow>td{background:rgba(45,212,191,.07)}
.lf-brhead{font:700 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:4px 0 8px}
.lf-brlist{display:flex;flex-direction:column;gap:6px;padding-bottom:6px}
.lf-br{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04)}
.lf-br-n{font-weight:700}
.lf-br-a{font-size:11px;font-weight:700;color:var(--tint-accent-fg,#0f9e86);background:rgba(45,212,191,.14);border-radius:99px;padding:1px 8px}
body.holo .lf-br-a{color:#5eead4}
.lf-br-addr{color:var(--muted);flex:1;min-width:160px}
.lf-br-main{background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.35)}
.lf-br-tag{font:800 9.5px 'Montserrat',sans-serif;letter-spacing:.05em;background:var(--accent);color:#04211d;border-radius:5px;padding:2px 6px}
.lf-noapi{margin-top:6px;background:rgba(231,183,101,.14);border:1px solid rgba(231,183,101,.45);color:var(--tint-warning-fg,#9a6b1e);border-radius:10px;padding:12px 14px;font-size:13.5px}
body.holo .lf-noapi{color:#f3d4a0}
.lf-noapi a{color:var(--accent-text,#017878);font-weight:700}
.lf-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent-text,#017878);font-weight:600}
.lf-status[hidden]{display:none}
.lf-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(45,212,191,.3);border-top-color:var(--accent);display:inline-block;animation:lfspin .7s linear infinite}
@keyframes lfspin{to{transform:rotate(360deg)}}
body.holo .lf-grid input,body.holo .lf-grid select,body.holo .lf-assign select{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#eaeefb}
body.holo .lf-alert{background:rgba(231,183,101,.12);border-color:rgba(231,183,101,.4);color:#f3d4a0}
body.holo .lf-src{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#aab2cc}
body.holo .lf-badge{background:rgba(244,63,94,.18);color:#fda4af}
/* ===================== Discuss (team chat) ===================== */
.dm-app{display:grid;grid-template-columns:266px 1fr;gap:0;height:calc(100vh - 150px);min-height:460px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel,#fff)}
.dm-side{border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding:10px}
.dm-search input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;background:var(--bg)}
.dm-mbx{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--ink);font:600 13.5px 'Cabin',sans-serif;margin-top:6px}
.dm-mbx:hover{background:var(--bg)}
.dm-mbx.on{background:rgba(2,196,196,.12);color:var(--accent-text,#017878)}
.dm-sec{display:flex;align-items:center;justify-content:space-between;margin:16px 6px 4px;font:800 10.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.dm-plus{text-decoration:none;color:var(--muted);font-size:16px;line-height:1}
.dm-plus:hover{color:var(--accent-text,#017878)}
.dm-list{display:flex;flex-direction:column;gap:1px}
.dm-conv{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--ink);font:500 13.5px 'Cabin',sans-serif}
.dm-conv:hover{background:var(--bg)}
.dm-conv.on{background:rgba(2,196,196,.14);color:var(--accent-text,#017878);font-weight:700}
.dm-conv.unread{font-weight:800}
.dm-conv-ic{width:18px;text-align:center;color:var(--muted);font-weight:700}
.dm-conv-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e2574c;color:#fff;font:800 11px 'Cabin',sans-serif;display:inline-flex;align-items:center;justify-content:center}
.dm-badge.soft{background:var(--muted)}
.dm-mutei,.dm-mutei{opacity:.6;font-size:11px}
.dm-empty-s{padding:6px 10px;color:var(--muted);font-size:12px}
.dm-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:#b6bcc8}
.dm-dot.online{background:#22c55e}.dm-dot.away{background:#f59e0b}.dm-dot.offline{background:#b6bcc8}
/* main pane */
.dm-main{display:flex;flex-direction:column;min-width:0;position:relative}
.dm-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.dm-head-l{display:flex;align-items:baseline;gap:10px;min-width:0}
.dm-head h2{margin:0;font:800 17px 'Montserrat',sans-serif}
.dm-head-ic{color:var(--muted);font-weight:800}
.dm-head-sub{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-head-r{display:flex;align-items:center;gap:6px}
.dm-iconbtn,.dm-membtn{background:none;border:1px solid transparent;border-radius:8px;padding:6px 9px;cursor:pointer;font-size:13px;color:var(--muted)}
.dm-iconbtn:hover,.dm-membtn:hover{background:var(--bg);color:var(--ink)}
.dm-head-r form{display:inline}
/* stream */
.dm-stream{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column}
.dm-msg{display:grid;grid-template-columns:42px 1fr auto;gap:10px;padding:4px 6px;border-radius:8px;position:relative}
.dm-msg:hover{background:var(--bg)}
.dm-msg.grouped{padding-top:1px;padding-bottom:1px}
.dm-msg-av img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.dm-av-i{width:36px;height:36px;border-radius:10px;background:var(--grad);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font:800 13px 'Montserrat',sans-serif}
.dm-av-i.sm{width:26px;height:26px;border-radius:7px;font-size:10px}
.dm-msg-body{min-width:0}
.dm-msg-head{display:flex;align-items:baseline;gap:8px}
.dm-author{font:800 13.5px 'Cabin',sans-serif;color:var(--ink)}
.dm-time{color:var(--muted);font-size:11px}
.dm-inchan{color:var(--muted);font-size:11px}
.dm-text{font-size:14px;line-height:1.5;color:var(--ink);word-wrap:break-word;white-space:normal}
.dm-at{color:var(--accent-text,#017878);font-weight:700;background:rgba(2,196,196,.10);border-radius:4px;padding:0 3px}
.dm-at-all{background:rgba(245,158,11,.16);color:var(--tint-warning-fg,#b45309)}
.dm-quote{border-left:3px solid var(--accent);background:rgba(2,196,196,.07);border-radius:6px;padding:4px 8px;margin:2px 0 4px;font-size:12.5px;color:var(--muted);max-width:60ch;white-space:normal}
.dm-quote b{color:var(--ink);margin-right:4px}
.dm-divider{display:flex;align-items:center;gap:10px;color:var(--tint-warning-fg,#b45309);font:800 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;margin:10px 0}
.dm-divider::before,.dm-divider::after{content:'';flex:1;border-top:1px solid rgba(245,158,11,.5)}
.dm-reply{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;padding:5px 10px;font-size:12.5px;color:var(--muted)}
.dm-reply[hidden]{display:none}
.dm-msg.dm-focus{background:rgba(2,196,196,.16);box-shadow:inset 3px 0 0 var(--accent)}
.dm-edited{color:var(--muted);font-size:11px}
.set-status{font-size:13px;border-radius:8px;padding:8px 10px;margin:0 0 10px}
.set-status.ok{background:rgba(16,185,129,.10);color:var(--ink)}
.set-status.bad{background:rgba(185,28,28,.08);color:var(--ink)}
.dm-searchbar{padding:8px 14px 4px;border-bottom:1px solid var(--line)}
.dm-searchbar .ss-wrap{max-width:none}
.dm-mention-box{margin:6px 0 2px}
.dm-mention-status{font-size:12.5px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-radius:8px;padding:5px 9px;background:rgba(245,158,11,.10)}
.dm-mention-status.done{background:rgba(16,185,129,.10)}
.dm-mention-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.dm-mention-form input,.dm-mention-form select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface-1,#fff);min-width:180px}
.dm-deleted{color:var(--muted);font-style:italic}
.dm-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.dm-att{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;text-decoration:none;color:var(--ink);background:var(--bg)}
.dm-att-img img{max-width:220px;max-height:180px;border-radius:10px;border:1px solid var(--line)}
.dm-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.dm-react{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:2px 9px;font-size:12.5px;cursor:pointer}
.dm-react.mine{border-color:var(--accent);background:rgba(2,196,196,.14);color:var(--accent-text,#017878)}
.dm-actions{position:absolute;top:-10px;right:10px;display:none;gap:2px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:9px;padding:2px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.dm-msg:hover .dm-actions{display:flex}
.dm-act{background:none;border:0;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.dm-act:hover{background:var(--bg)}
.dm-sys{text-align:center;color:var(--muted);font-size:12px;margin:8px 0}
.dm-sys span{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.dm-pinbar{border-bottom:1px solid var(--line);padding:6px 18px;font-size:12.5px}
.dm-pinbar summary{cursor:pointer;color:var(--muted);font-weight:700}
.dm-pinitem{padding:5px 0;font-size:12.5px;color:var(--ink);border-top:1px solid var(--line)}
.dm-typing{padding:2px 18px 4px;color:var(--muted);font-size:12px;font-style:italic;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-edit-area{width:100%;border:1px solid var(--accent);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px}
.dm-edit-act{display:flex;gap:8px;margin-top:6px}
.dm-edit-act button{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:4px 12px;cursor:pointer;font-size:12.5px}
.dm-esave{background:var(--grad)!important;color:var(--on-accent)!important;border:0!important}
/* composer */
.dm-composer{border-top:1px solid var(--line);padding:12px 16px;position:relative}
.dm-composer-row{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:14px;padding:6px 8px;background:var(--bg)}
.dm-composer-row textarea{flex:1;border:0;background:none;resize:none;font:inherit;font-size:14px;padding:6px;max-height:160px;outline:none;color:var(--ink)}
.dm-cbtn{background:none;border:0;cursor:pointer;font-size:17px;padding:6px;border-radius:8px}
.dm-cbtn:hover{background:var(--panel,#fff)}
.dm-send{background:var(--grad);color:var(--on-accent);border:0;border-radius:10px;width:38px;height:36px;cursor:pointer;font-size:16px}
.dm-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dm-file-chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px}
.dm-file-chip b{cursor:pointer;color:var(--muted)}
.dm-mention-pop{position:absolute;bottom:64px;left:16px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:5px;z-index:40;min-width:220px}
.dm-mention-i{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px}
.dm-mention-i:hover{background:var(--bg)}
.dm-mention-add{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-text,#017878);background:rgba(2,196,196,.12);border-radius:980px;padding:1px 8px;white-space:nowrap}
/* the fallback emoji picker is a .ds-menu-panel.ds-menu-fixed of .ds-btn-quiet icon buttons
   (discuss/home.html); what is left here is its grid and the emoji's size */
.dm-emoji-pop{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;width:220px}
/* the [hidden] attribute must win over the display rules above */
.dm-emoji-pop[hidden],.dm-files[hidden],.dm-mention-pop[hidden],.dm-panel[hidden],.dm-typing[hidden]{display:none}
.dm-emoji-pop .dm-emoji-pick{font-size:19px}
/* member panel */
.dm-panel{position:absolute;top:58px;right:14px;width:280px;max-height:70%;overflow:auto;background:var(--panel,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.2);z-index:30;padding:12px}
.dm-x{background:none;border:0;cursor:pointer;color:var(--muted)}
/* cannot open Discuss (discuss/services/reach.py): the name stays inked, a pill/line warns */
.dm-noaccess,.dm-unreach{color:var(--tint-warning-fg,#9a3412);background:var(--tint-warning-bg,#fdf0e1)}
.dm-noaccess{margin-left:auto;font-size:11px;font-weight:700;white-space:nowrap;border-radius:980px;padding:1px 8px}
.dm-unreach{margin:8px 18px 0;padding:8px 12px;border-radius:10px;font-size:13px}
.dm-addsel{width:100%;border:1px solid var(--line);border-radius:9px;padding:6px}
/* welcome */
.dm-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--muted)}
.dm-welcome-ic{font-size:46px}
.dm-welcome h2{margin:0;color:var(--ink)}
.dm-welcome-act{display:flex;gap:10px;margin-top:10px}
.dm-empty{padding:30px;text-align:center;color:var(--muted)}
.dm-search-head{padding:6px 4px 12px;color:var(--muted);font-size:12.5px;font-weight:700}
/* browse / people */
.dm-browse{max-width:1000px}
.dm-browse-search input{border:1px solid var(--line);border-radius:9px;padding:8px 12px;min-width:220px}
.dm-newchan-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dm-newchan-row input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.dm-newchan-row select{border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.dm-newchan-desc{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.dm-chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:16px}
.dm-chan-top{display:flex;align-items:center;gap:7px;font-size:15px}
.dm-chan-desc{margin:7px 0;font-size:12.5px;min-height:32px}
.dm-chan-foot{display:flex;align-items:center;justify-content:space-between}
.dm-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.dm-person-btn{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card,var(--surface-1,#fff));cursor:pointer;text-align:left}
.dm-person-btn:hover{border-color:var(--accent)}
.dm-person-btn[disabled]{cursor:not-allowed;color:var(--text-disabled,#9aa7b4);border-color:var(--line)}
.dm-person-name{flex:1;font-weight:600;color:var(--ink)}
.dm-person-status{font-size:11px;text-transform:capitalize}
/* holo theme */
body.holo .dm-app{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body.holo .dm-side{border-right-color:rgba(255,255,255,.12)}
body.holo .dm-search input,body.holo .dm-composer-row,body.holo .dm-att,body.holo .dm-react,body.holo .dm-file-chip,body.holo .dm-sys span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#eaeefb}
body.holo .dm-mbx,body.holo .dm-conv,body.holo .dm-author,body.holo .dm-text,body.holo .dm-head h2{color:#eaeefb}
body.holo .dm-conv:hover,body.holo .dm-mbx:hover,body.holo .dm-msg:hover,body.holo .dm-act:hover,body.holo .dm-cbtn:hover{background:rgba(255,255,255,.06)}
body.holo .dm-head,body.holo .dm-composer,body.holo .dm-pinbar{border-color:rgba(255,255,255,.12)}
body.holo .dm-actions,body.holo .dm-panel,body.holo .dm-emoji-pop,body.holo .dm-mention-pop{background:rgba(20,26,45,.85);border-color:rgba(255,255,255,.18);color:#eaeefb;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
body.holo .dm-person-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.holo .dm-composer-row textarea{color:#eaeefb}
@media(max-width:760px){.dm-app{grid-template-columns:1fr}.dm-side{display:none}}
/* compact display density (whole-system behavior toggle) */
body.compact .appshell-body{padding:14px 20px}
body.compact .launch-body{padding:14px 22px}
body.compact .lst td,body.compact .lst th{padding:6px 10px}
body.compact .card,body.compact .o-sheet,body.compact .qf-card,body.compact .set-card{padding:14px 16px}
body.compact .appgrid{gap:10px}
body.compact .appcard{padding:6px 4px;gap:7px}
body.compact .appico{width:60px;height:60px;border-radius:15px}
body.compact .appico img{width:100%;height:100%;border-radius:15px}
body.compact .o-row,body.compact .qf-row{margin-bottom:7px}
body.compact .sol-table td{padding:3px 5px}

/* ---- user avatar dropdown menu ---- */
.usermenu{position:relative}
.usermenu summary{list-style:none}
.usermenu summary::-webkit-details-marker{display:none}
.um-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:980px;border:1px solid rgba(0,0,0,.18)}
.um-trigger:hover{background:rgba(0,0,0,.07)}
.um-av{overflow:hidden}
.um-av img{width:100%;height:100%;object-fit:cover;display:block}
.um-name{font:600 13px 'Cabin',sans-serif;color:var(--dark);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-caret{font-size:10px;color:rgba(0,0,0,.5)}
/* the user menu is a .ds-menu-panel (ds/components.css); only its place under the avatar is its own */
.usermenu > .um-pop{left:auto;right:0;top:calc(100% + var(--sp-2));width:248px;z-index:120}
.um-sep{height:1px;background:var(--border,#e4e4e7);margin:var(--sp-1)}
.um-pop .um-out{color:var(--tint-danger-fg,#9a2323)}
/* profile page */
.pf-top{display:flex;align-items:center;gap:18px}
.pf-avatar{width:84px;height:84px;border-radius:50%;background:var(--brand-night);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 84px}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-initials{font:800 26px 'Montserrat',sans-serif}
.pf-name{font:800 18px 'Montserrat',sans-serif;color:var(--ink)}
.pf-upload{display:inline-block;margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:6px 12px;font:600 12.5px 'Cabin',sans-serif;color:var(--accent-text,#017878);cursor:pointer}
.pf-upload:hover{background:rgba(2,196,196,.06)}
.pf-sec{font:700 13px 'Montserrat',sans-serif;color:var(--ink);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.pf-ro{font:600 14px 'Cabin',sans-serif;color:var(--ink);padding:9px 2px}
/* inventory overview */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.inv-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-decoration:none;color:var(--ink);transition:transform .14s,box-shadow .14s}
.inv-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(2,196,196,.18)}
.inv-k{font:800 32px 'Montserrat',sans-serif;color:var(--accent-text,#017878)}
.inv-l{font:600 13px 'Cabin',sans-serif;color:var(--muted);margin-top:4px}
.inv-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ---- dashboard ---- */
.dash-head h2{font:800 20px 'Montserrat',sans-serif;margin:4px 0 14px}
.dash-bar{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.dash-bar h2{font:800 20px 'Montserrat',sans-serif;margin:0}
.dash-filter .erp-input{padding:8px 10px}
.dash-range{display:flex;align-items:center;gap:6px}
.dash-app .dash-range input[type=date]{background:var(--dpanel);color:var(--dink);border:1px solid var(--dline);border-radius:10px;padding:7px 9px;font:600 12.5px 'Cabin',sans-serif;color-scheme:dark}
.dash-range-sep{color:var(--dmuted);font-size:13px}
.dash-range-go{background:var(--accent);color:#04211d;border:0;border-radius:10px;padding:8px 14px;font:700 12.5px 'Montserrat',sans-serif;cursor:pointer}
.dash-range-go:hover{filter:brightness(1.08)}
@media(max-width:760px){.dash-range{flex-wrap:wrap}}
.dash-alerts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.alert-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:980px;padding:7px 14px;font:600 12.5px 'Cabin',sans-serif;color:var(--ink);text-decoration:none}
.alert-chip:hover{border-color:var(--accent)}
.alert-chip.warn{background:var(--tint-warning-bg,#fff6e9);border-color:var(--tint-warning-line,#f3d18a);color:var(--tint-warning-fg,#8a5a00)}
.kpi-row.hero{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.kpi-sub{font-size:11.5px;margin-top:4px}
.kpi.grad .kpi-sub{color:rgba(255,255,255,.85)}
.trend{font:700 11px 'Cabin',sans-serif;padding:1px 7px;border-radius:980px}
.trend.up{background:rgba(31,157,99,.14);color:var(--tint-success-fg,#1f9d63)}
.trend.down{background:rgba(194,59,48,.14);color:var(--tint-danger-fg,#c23b30)}
.kpi.grad .trend.up{background:rgba(255,255,255,.22);color:#fff}
.kpi.grad .trend.down{background:rgba(0,0,0,.18);color:#fff}
.spark{width:100%;height:30px;margin-top:8px;display:block}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.funnel{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.fstep{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px}
.fstep-l{font:600 12.5px 'Cabin',sans-serif;color:var(--muted)}
.fstep-track{background:var(--bg);border-radius:10px;overflow:hidden;height:30px}
.fstep-fill{display:flex;align-items:center;justify-content:flex-end;height:100%;min-width:34px;background:var(--grad);color:var(--on-accent);font:800 13px 'Montserrat',sans-serif;padding-right:10px;border-radius:10px}
.hbar-fill.green{background:linear-gradient(90deg,#71cc98,#02c4c4)}
/* graphical KPI cards */
.gcard{position:relative;overflow:hidden;border-radius:18px;padding:18px;color:#fff;text-decoration:none;display:block;box-shadow:0 14px 30px rgba(0,0,0,.18);min-height:118px}
.gcard.g1{background:linear-gradient(135deg,#02c4c4,#0a8f9c)}
.gcard.g2{background:linear-gradient(135deg,#71cc98,#02c4c4)}
.gcard.g3{background:linear-gradient(135deg,#5b6cff,#7b5cff)}
.gcard.g4{background:linear-gradient(135deg,#ff9f43,#ff6b6b)}
.gcard-top{display:flex;align-items:center;justify-content:space-between}
.gci{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:17px}
.gcard-l{font:600 12.5px 'Cabin',sans-serif;opacity:.92;margin-top:12px}
.gcard-v{font:800 22px 'Montserrat',sans-serif;margin-top:2px}
.gcard .spark{position:absolute;left:0;right:0;bottom:0;height:34px;width:100%;opacity:.85}
.gcard .trend{background:rgba(255,255,255,.22);color:#fff}
.g-2-1{grid-template-columns:1.8fr 1fr}
/* area chart */
.area-wrap{margin-top:4px}
.area-svg{width:100%;height:180px;display:block}
.area-x{display:flex;justify-content:space-between;font:500 10px 'Cabin',sans-serif;color:var(--muted);margin-top:4px}
.area-x span{flex:1;text-align:center}
/* donut */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-svg{width:140px;height:140px;flex:0 0 140px}
.donut-legend{display:flex;flex-direction:column;gap:8px;font:600 12.5px 'Cabin',sans-serif;color:var(--ink)}
.ddot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.dleg b{color:var(--muted);font-weight:700}
/* radial gauges */
.gauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.gauge-card{display:flex;flex-direction:column;align-items:center;padding:16px}
.gauge-svg{width:118px;height:118px}
.gauge-num{font:800 19px 'Montserrat',sans-serif;fill:var(--ink)}
.gauge-l{font:700 13px 'Montserrat',sans-serif;color:var(--ink);margin-top:6px}
.gauge-s{font-size:11.5px}
@media(max-width:760px){.dash-grid{grid-template-columns:1fr}.g-2-1{grid-template-columns:1fr}.gauge-row{grid-template-columns:1fr}}
/* ===== sophisticated self-contained dashboard themes ===== */
.dash-app{--dbg:#0e1525;--dpanel:#161f33;--dink:#eef2f8;--dmuted:#93a0b8;--dline:#27314a;--dx:#22d3ee;
  background:var(--dbg);color:var(--dink);margin:-22px -28px;padding:24px 28px;border-radius:0;min-height:calc(100vh - 56px)}
.dash-app.theme-aurora{--dbg:#0f1020;--dpanel:#191436;--dline:#2c2655;--dx:#a78bfa}
.dash-app.theme-sunset{--dbg:#1a0f17;--dpanel:#2a1622;--dline:#4a2233;--dx:#fb7185}
.dash-app.theme-ocean{--dbg:#071a2b;--dpanel:#0d2740;--dline:#1b3b58;--dx:#38bdf8}
.dash-app.theme-light{--dbg:#eef1f6;--dpanel:#ffffff;--dink:#1d2433;--dmuted:#6b7280;--dline:#e3e7ef;--dx:#02c4c4}
/* light theme keeps the bento "big revenue card" hero layout (dark text on white) */
.dash-app.theme-light .kpi-row.hero{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:16px}
.dash-app.theme-light .gcard{border-radius:24px;padding:20px}
.dash-app.theme-light .gcard-l{font-weight:600}
.dash-app.theme-light .gcard-v{font-size:27px}
.dash-app.theme-light .gcard.g1{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.dash-app.theme-light .gcard.g1 .gci{width:40px;height:40px;font-size:19px}
.dash-app.theme-light .gcard.g1 .gcard-l{font-size:14px;margin-top:auto}
.dash-app.theme-light .gcard.g1 .gcard-v{font-size:38px}
.dash-app.theme-light .gcard.g1 .spark{position:static;height:60px;width:100%;margin-top:12px;opacity:.92}
.dash-app.theme-light .panel,.dash-app.theme-light .presence-panel{box-shadow:0 10px 28px rgba(20,40,80,.08)}
@media(max-width:820px){.dash-app.theme-light .kpi-row.hero{grid-template-columns:repeat(2,1fr)}.dash-app.theme-light .gcard.g1{grid-column:span 2}}
.dash-app .muted{color:var(--dmuted)}
.dash-app .dash-bar h2,.dash-app h2{color:var(--dink)}
.dash-app .dash-cog{margin-left:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--dpanel);border:1px solid var(--dline);color:var(--dmuted);text-decoration:none;font-size:16px}
.dash-app .dash-cog:hover{color:var(--dink)}
.dash-app .dash-filter select{background:var(--dpanel);color:var(--dink);border:1px solid var(--dline);border-radius:10px;padding:8px 12px;font:600 13px 'Cabin',sans-serif}
.dash-app .panel{background:var(--dpanel);border:1px solid var(--dline);border-radius:18px;padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.dash-app .chart-title{color:var(--dink)}
.dash-app .dash-sec{color:var(--dx)}
.dash-app .dash-sec::after{background:var(--dline)}
.dash-app .gcard{box-shadow:0 18px 40px rgba(0,0,0,.34)}
.dash-app .gcard.g1{background:linear-gradient(135deg,#22d3ee,#3b82f6)}
.dash-app .gcard.g2{background:linear-gradient(135deg,#34d399,#10b981)}
.dash-app .gcard.g3{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.dash-app .gcard.g4{background:linear-gradient(135deg,#fbbf24,#fb7185)}
.dash-app .gcard.g5{background:linear-gradient(135deg,#f472b6,#a855f7)}
.dash-app .kpi{background:var(--dpanel);border:1px solid var(--dline)}
.dash-app .kpi-v{color:var(--dink)}.dash-app .kpi-l{color:var(--dmuted)}
.dash-app .barchart .bar{background:linear-gradient(180deg,var(--dx),transparent)}
.dash-app .bar.green{background:linear-gradient(180deg,#34d399,var(--dx))}
.dash-app .hbar-l,.dash-app .gauge-l{color:var(--dink)}.dash-app .hbar-v{color:var(--dmuted)}
.dash-app .hbar-track,.dash-app .fstep-track{background:var(--dbg)}
.dash-app .hbar-fill{background:linear-gradient(90deg,var(--dx),#3b82f6)}
.dash-app .hbar-fill.green{background:linear-gradient(90deg,#34d399,var(--dx))}
.dash-app .fstep-fill{background:linear-gradient(90deg,var(--dx),#6366f1)}
.dash-app .fstep-l{color:var(--dmuted)}
.dash-app .gauge-num{fill:var(--dink)}
.dash-app .donut-legend,.dash-app .dleg b{color:var(--dink)}
.dash-app .gauge-svg.big{width:150px;height:150px}
.target-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-app .area-x{color:var(--dmuted)}
/* activity feed */
.act-feed{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
.act-item{display:flex;gap:10px;padding:9px 6px;border-radius:10px;text-decoration:none;border-bottom:1px solid var(--dline)}
.act-item:hover{background:rgba(255,255,255,.03)}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--dx);margin-top:6px;flex:0 0 8px}
.act-dot.note{background:#fbbf24}
.act-b{font:500 12.5px 'Cabin',sans-serif;color:var(--dink);min-width:0}
.act-b b{font-weight:700}
.act-meta{display:block;color:var(--dmuted);font-size:11px;margin-top:2px}
.dash-app .alert-chip{background:var(--dpanel);border:1px solid var(--dline);color:var(--dink)}
.dash-app .alert-chip.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4);color:#fbbf24}
.dash-app .trend.up{background:rgba(52,211,153,.18);color:#34d399}
.dash-app .trend.down{background:rgba(251,113,133,.18);color:#fb7185}
.dash-app .bar,.dash-app .hbar-fill,.dash-app .fstep-fill{animation:dgrow .5s ease}
@keyframes dgrow{from{opacity:.3}to{opacity:1}}
/* ===== Bento Bold ===== */
.dash-app.theme-bento{--dbg:#0e1014;--dpanel:#171a22;--dink:#eef1f7;--dmuted:#8b93a7;--dline:#262b38;--dx:#22d3ee}
.dash-app.theme-bento .panel{border-radius:22px;border-color:#232838}
.dash-app.theme-bento .chart-title{font-weight:800;font-size:15px}
.dash-app.theme-bento .kpi-row.hero{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:16px}
.dash-app.theme-bento .gcard{border-radius:24px;padding:20px}
.dash-app.theme-bento .gcard.g1{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.dash-app.theme-bento .gcard.g1 .gci{width:40px;height:40px;font-size:19px}
.dash-app.theme-bento .gcard.g1 .gcard-l{font-size:14px;margin-top:auto}
.dash-app.theme-bento .gcard.g1 .gcard-v{font-size:38px}
.dash-app.theme-bento .gcard.g1 .spark{position:static;height:60px;width:100%;margin-top:12px;opacity:.9}
.dash-app.theme-bento .gcard-v{font-size:27px}
.dash-app.theme-bento .gcard.g1{background:linear-gradient(140deg,#fbbf24,#f97316 55%,#fb7185)}
.dash-app.theme-bento .gcard.g2{background:linear-gradient(140deg,#22d3ee,#3b82f6)}
.dash-app.theme-bento .gcard.g3{background:linear-gradient(140deg,#a78bfa,#7c3aed)}
.dash-app.theme-bento .gcard.g4{background:linear-gradient(140deg,#34d399,#10b981)}
.dash-app.theme-bento .gcard.g5{background:linear-gradient(140deg,#f472b6,#a855f7)}
.dash-app.theme-bento .gcard-l{font-weight:600}
.dash-app.theme-bento .dash-grid{gap:16px}
.dash-app.theme-bento .gauge-row{gap:16px}
.dash-app.theme-bento .dash-sec{font-weight:800}
@media(max-width:820px){.dash-app.theme-bento .kpi-row.hero{grid-template-columns:repeat(2,1fr)}.dash-app.theme-bento .gcard.g1{grid-column:span 2}}

/* ===== Holographic Iridescent dashboard (matches the app-wide theme) ===== */
.dash-app.theme-holo{--dbg:transparent;--dpanel:rgba(255,255,255,.06);--dink:#eef1ff;
  --dmuted:#aeb6d6;--dline:rgba(255,255,255,.18);--dx:#22d3ee;background:transparent}
/* frosted-glass surfaces over the animated iridescent backdrop */
.dash-app.theme-holo .panel,.dash-app.theme-holo .kpi{
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);border-radius:22px;
  box-shadow:0 18px 44px rgba(10,12,40,.30),inset 0 1px 0 rgba(255,255,255,.18)}
.dash-app.theme-holo .chart-title{font-weight:800;font-size:15px}
/* bento-style hero so it feels premium */
.dash-app.theme-holo .kpi-row.hero{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:16px}
.dash-app.theme-holo .gcard{border-radius:24px;padding:20px;
  box-shadow:0 18px 44px rgba(10,12,40,.40),inset 0 1px 0 rgba(255,255,255,.25)}
.dash-app.theme-holo .gcard.g1{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.dash-app.theme-holo .gcard.g1 .gci{width:40px;height:40px;font-size:19px}
.dash-app.theme-holo .gcard.g1 .gcard-l{font-size:14px;margin-top:auto}
.dash-app.theme-holo .gcard.g1 .gcard-v{font-size:38px}
.dash-app.theme-holo .gcard.g1 .spark{position:static;height:60px;width:100%;margin-top:12px;opacity:.92}
.dash-app.theme-holo .gcard-v{font-size:27px}
/* iridescent KPI gradients */
.dash-app.theme-holo .gcard.g1{background:linear-gradient(140deg,#22d3ee,#6366f1 55%,#a855f7)}
.dash-app.theme-holo .gcard.g2{background:linear-gradient(140deg,#34d399,#22d3ee)}
.dash-app.theme-holo .gcard.g3{background:linear-gradient(140deg,#a855f7,#6366f1)}
.dash-app.theme-holo .gcard.g4{background:linear-gradient(140deg,#f472b6,#a855f7)}
.dash-app.theme-holo .gcard.g5{background:linear-gradient(140deg,#facc15,#fb7185)}
.dash-app.theme-holo .gcard-l{font-weight:600}
/* translucent tracks/lines so charts read on glass */
.dash-app.theme-holo .hbar-track,.dash-app.theme-holo .fstep-track{background:rgba(255,255,255,.12)}
.dash-app.theme-holo .hbar-fill{background:linear-gradient(90deg,#22d3ee,#a855f7)}
.dash-app.theme-holo .hbar-fill.green{background:linear-gradient(90deg,#34d399,#22d3ee)}
.dash-app.theme-holo .fstep-fill{background:linear-gradient(90deg,#22d3ee,#6366f1)}
.dash-app.theme-holo .barchart .bar{background:linear-gradient(180deg,#22d3ee,transparent)}
.dash-app.theme-holo .bar.green{background:linear-gradient(180deg,#a855f7,#22d3ee)}
.dash-app.theme-holo .act-item:hover{background:rgba(255,255,255,.07)}
.dash-app.theme-holo .dash-cog,.dash-app.theme-holo .dash-filter select{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#eef1ff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dash-app.theme-holo .dash-sec{font-weight:800;color:#7dd3fc}
@media(max-width:820px){.dash-app.theme-holo .kpi-row.hero{grid-template-columns:repeat(2,1fr)}.dash-app.theme-holo .gcard.g1{grid-column:span 2}}

/* =====================================================================
   HOLOGRAPHIC IRIDESCENT — app-wide theme
   ===================================================================== */
/* Light theme: the brand gradient keeps slowly cycling — soft moving colour over a white page */
.holo-bg{position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,#a6ecd0,#34d6cf,#c9f3ec,#86e2b6,#34d6cf,#a6ecd0);
  filter:blur(115px);opacity:.4;animation:holospin 32s linear infinite}
/* make the page surface transparent in the LIGHT theme so the moving gradient shows through (white cards float on top) */
body:not(.holo):not(.dark){background:#f5f8f8}
body:not(.holo):not(.dark) .appshell,body:not(.holo):not(.dark) .launch{background:transparent}
/* charcoal "dark mode" = clean solid dark, no bright glow */
body.dark .holo-bg{display:none}
/* "holo" theme keeps the original deep green glow */
body.holo .holo-bg{
  background:conic-gradient(from 0deg,#71cc98,#02c4c4,#0c5b54,#02c4c4,#71cc98);
  filter:blur(90px);opacity:.34}
@keyframes holospin{to{transform:rotate(360deg)}}
body.holo{background:#07110e;color:#eaf3f0;
  --bg:transparent;--panel:rgba(255,255,255,.055);--ink:#eaf3f0;--muted:#9fb3ad;
  --line:rgba(255,255,255,.14);--accent:#02c4c4;--green:#71cc98;--dark:#08130f;
  --grad:linear-gradient(135deg,#71cc98,#02c4c4)}
body.holo h1,body.holo h2,body.holo h3,body.holo .heading{color:#f2f5ff}
.glass,body.holo .card,body.holo .tablewrap,body.holo .o-sheet,body.holo .qf-card,
body.holo .set-card,body.holo .setx,body.holo .cmdk-panel,
body.holo .chatter,body.holo .erp-form,body.holo .o-statusbar .o-stages,
body.holo .appd-card,body.holo .scard{
  background:rgba(255,255,255,.055);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 20px 50px rgba(0,0,0,.34)}
/* top bars */
body.holo .topbar3,body.holo .launch-top{background:rgba(255,255,255,.06);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.12)}
body.holo .tb-crumb,body.holo .tb-crumb b{color:#eaeefb}
body.holo .tb-crumb a{color:#aab2cc}
body.holo .tb-crumb span{color:#6f7893}
body.holo .tb-back,body.holo .tb-apps{color:#cdd3e6}
body.holo .tb-back:hover,body.holo .tb-apps:hover{background:rgba(255,255,255,.1);color:#fff}
body.holo .tb-menu a{color:#aab2cc}
body.holo .tb-menu a:hover,body.holo .tb-menu a.on{background:rgba(255,255,255,.12);color:#fff}
body.holo .who{color:#cdd3e6}
body.holo .topbar3 .btn-ghost,body.holo .launch-top .btn-ghost,body.holo .btn-ghost{color:#cdd3e6;border-color:rgba(255,255,255,.2)}
/* home app grid */
body.holo .appico{background:transparent;border:0;backdrop-filter:none;box-shadow:0 8px 24px rgba(45,212,191,.20)}
body.holo .appname{color:#eaeefb}
body.holo .appcat{color:#7cf3e6}
body.holo .appcat::after{background:linear-gradient(90deg,rgba(124,243,230,.3),transparent)}
/* inputs */
body.holo .erp-input,body.holo .search,body.holo .set-card input,body.holo .set-card select,
body.holo .set-terms,body.holo input.o-money,body.holo textarea,body.holo .p-drop,
body.holo .dash-filter select{
  background:rgba(255,255,255,.07);color:#eaeefb;border:1px solid rgba(255,255,255,.16)}
body.holo .erp-input::placeholder,body.holo textarea::placeholder,body.holo .search::placeholder{color:#8b93ad}
body.holo .erp-input:focus,body.holo .search:focus,body.holo .set-card input:focus{outline:none;border-color:#02c4c4;box-shadow:0 0 0 3px rgba(2,196,196,.18)}
/* native dropdown popups — translucent dark glass with white text,
   matching the user menu (a little see-through, not a solid block) */
body.holo select,body.holo .acc-sel,.dash-app.theme-holo select{color:#fff}
body.holo select option,body.holo .acc-sel option,.dash-app.theme-holo select option{
  background:rgba(20,26,45,.72);color:#fff}
body.holo select option:checked,body.holo .acc-sel option:checked{
  background:rgba(40,50,80,.85);color:#fff}
body.holo .acc-sel{color:#eaeefb}
body.holo .acc-sel.acc-none{color:#aab2cc}
body.holo .acc-sel.acc-own{color:#fbbf24}
body.holo .acc-sel.acc-all{color:#7dd3fc}
body.holo .acc-sel.acc-admin{color:#5ef0c0}
body.holo .p-item:hover,body.holo .p-item.hl{background:rgba(255,255,255,.08)}
/* ===== custom frosted-glass dropdown (enhances native <select>) ===== */
.gs-wrap{position:relative;display:block}
.gs-native{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.gs-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface-1,#fff);color:var(--ink);
  font:600 13px 'Cabin',sans-serif;cursor:pointer;text-align:left}
.gs-btn:hover{border-color:var(--accent)}
.gs-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-car{font-size:10px;opacity:.7;transition:transform .15s}
.gs-wrap.open .gs-car{transform:rotate(180deg)}
/* z-index 6500 keeps the menu ABOVE every modal overlay (tk/aa=6000, cm=5000, hp=1000)
   so enhanced <select> dropdowns inside any popup overlay the modal instead of being
   clipped behind it — standard enterprise behaviour (Odoo/Dynamics/Salesforce). The
   menu is body-appended + position:fixed, so no ancestor overflow/transform can clip it. */
.gs-menu{position:fixed;z-index:6500;border:1px solid var(--line);border-radius:12px;background:var(--surface-3,#fff);
  padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.18);max-height:280px;overflow:auto;display:none}
.gs-menu.open{display:block}
.gs-item{padding:8px 11px;border-radius:8px;font:500 13px 'Cabin',sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.gs-item:hover{background:var(--bg)}
.gs-item.on{background:rgba(2,196,196,.12);color:var(--accent-text,#017878);font-weight:700}
.gs-item.dis{opacity:.4;cursor:not-allowed}
/* holographic glass — matches the user menu */
body.holo .gs-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.holo .gs-btn:hover{border-color:rgba(34,211,238,.5)}
body.holo .gs-menu{background:rgba(20,26,45,.62);border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
body.holo .gs-item{color:#eaeefb}
body.holo .gs-item:hover{background:rgba(255,255,255,.12)}
body.holo .gs-item.on{background:rgba(34,211,238,.20);color:#fff}
/* access-level colour cue on the closed control */
body.holo .gs-btn.gs-acc-none .gs-lbl{color:#aab2cc}
body.holo .gs-btn.gs-acc-own .gs-lbl{color:#fbbf24}
body.holo .gs-btn.gs-acc-all .gs-lbl{color:#7dd3fc}
body.holo .gs-btn.gs-acc-admin .gs-lbl{color:#5ef0c0}
/* buttons */
body.holo .btn,body.holo .btn-mini.pri,body.holo .sol-add{background:linear-gradient(135deg,#71cc98,#02c4c4);color:#06121a;border:0}
body.holo .btn-mini{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#eaeefb}
body.holo .sol-add.ghost{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.25);color:#aab2cc}
/* tables / lists */
body.holo .lst th{color:#aab2cc}
body.holo .lst td{border-color:rgba(255,255,255,.08);color:#eaeefb}
body.holo .lst tbody tr:hover td{background:rgba(255,255,255,.04)}
body.holo .drow{border-color:rgba(255,255,255,.08)}
body.holo .drow b,body.holo .set-card label,body.holo .o-row label,body.holo .qf-row label,body.holo .erp-field label{color:#aab2cc}
body.holo .sol-table th{color:#aab2cc;border-bottom-color:rgba(255,255,255,.18)}
body.holo .sol-table td{border-bottom-color:rgba(255,255,255,.08)}
body.holo .empty,body.holo .muted{color:#aab2cc}
/* messages / chips */
body.holo .msg{background:rgba(34,211,238,.12);color:#bdeffa;border:1px solid rgba(34,211,238,.3)}
/* settings sidebar */
body.holo .setx-side{background:rgba(255,255,255,.04);border-right-color:rgba(255,255,255,.1)}
body.holo .setx-item{color:#cdd3e6}
body.holo .setx-item:hover{background:rgba(255,255,255,.06)}
body.holo .setx-item.on{background:linear-gradient(135deg,#71cc98,#02c4c4);color:#06121a}
body.holo .setx-item img{background:rgba(255,255,255,.85);border-color:transparent}
body.holo .set-subh{color:#7cf3e6}
body.holo .set-toggle{border-bottom-color:rgba(255,255,255,.1)}
/* quote / record */
body.holo .o-doctitle,body.holo .qf-grouph{color:#eaeefb}
body.holo .qf-grouph{border-bottom-color:rgba(255,255,255,.12)}
body.holo .o-tab,body.holo .qf-tab,body.holo .o-tabs .o-tab{color:#eaeefb}
body.holo .note-text{color:#cdd3e6}
body.holo .pf-ro,body.holo .qf-ro{color:#eaeefb}
body.holo .ship-in input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#eaeefb}
body.holo .qf-totals{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
/* inventory overview cards */
body.holo .inv-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);backdrop-filter:blur(20px)}
/* env banner stays */
body.holo .back-link{color:#7cf3e6}
/* login */
body.login-body.holo{background:#090b16}
body.holo .login-card{background:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5)}
body.holo .login-card label{color:#aab2cc}
body.holo .login-card input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#eaeefb}
body.holo .login-card input:focus{outline:none;border-color:#02c4c4;box-shadow:0 0 0 3px rgba(2,196,196,.18)}
body.holo .login-card button{background:linear-gradient(135deg,#71cc98,#02c4c4);color:#06121a;border:0}
body.holo .login-err{background:rgba(244,63,94,.15);color:#fda4af;border:1px solid rgba(244,63,94,.35)}
/* apps store + app detail (standalone pages) */
body.holo .scard,body.holo .appd-ico,body.holo .appd-ico2{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px)}
body.holo .scard-ico{background:transparent}
body.holo .appd-ico2{background:transparent;border:0;backdrop-filter:none}
body.holo .scard-name,body.holo .appd-name{color:#eaeefb}
body.holo .scard-tag,body.holo .appd-tagline,body.holo .appd-author{color:#aab2cc}
body.holo .store-cat,body.holo .appd-crumb{color:#7cf3e6}
body.holo .scard-drop,body.holo .scard-menu>summary{color:#aab2cc}
body.holo .appd-feat,body.holo .appd-desc{color:#cdd3e6}
body.holo .badge-inst{color:#5ef0e0}
.dash-sec{font:800 12px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text,#017878);margin:20px 0 10px;display:flex;align-items:center;gap:10px}
.dash-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.kpi{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .14s,box-shadow .14s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(2,196,196,.16)}
.kpi-v{font:800 24px 'Montserrat',sans-serif;color:var(--ink)}
.kpi-l{font:600 12.5px 'Cabin',sans-serif;color:var(--muted);margin-top:4px}
.kpi.grad{background:var(--grad);border:0;box-shadow:0 12px 26px rgba(2,196,196,.28)}
.kpi.grad .kpi-v,.kpi.grad .kpi-l{color:#fff}
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.chart-card{padding:16px 18px}
.chart-card.wide{grid-column:1 / -1}
.chart-title{font:700 13px 'Montserrat',sans-serif;color:var(--ink);margin-bottom:14px}
.barchart{display:flex;align-items:flex-end;gap:12px;height:160px;padding-top:6px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.bar{width:70%;min-height:3px;background:var(--grad);border-radius:6px 6px 0 0;transition:height .3s}
.bar.green{background:linear-gradient(180deg,#71cc98,#02c4c4)}
.barlbl{font:600 11px 'Cabin',sans-serif;color:var(--muted);margin-top:6px}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;font:600 12.5px 'Cabin',sans-serif}
.hbar-l{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{height:10px;background:var(--bg);border-radius:980px;overflow:hidden}
.hbar-fill{display:block;height:100%;background:var(--grad);border-radius:980px}
.hbar-v{color:var(--muted);text-align:right}
@media(max-width:760px){.dash-charts{grid-template-columns:1fr}}

/* ---- dark mode theme ---- */
/* The dark ROLE MAP lives in static/css/theme-roles.css, linked by templates/_theme_head.html —
   i.e. by every page document, including the sign-in, 2FA, password, error and legal pages
   that never load this stylesheet. What follows are component rules for dark mode. */
/* An e-mail being READ is somebody else's document: it carries its own inline colours
   (Outlook writes color:#000000 everywhere), and an inline colour beats any theme rule, so
   on a dark pane its text disappeared. The message is paper in both themes; the Email screen
   around it stays dark (the viewer-vs-document rule, 2026-09-26).
   .ol-read-body: see .ds-inbox-body (Phase 3). */
body.dark .rd-body,body.dark .msg-body{background:#fff;color:#1f2937;color-scheme:light;border-radius:10px}
body.dark .rd-body a,body.dark .msg-body a{color:#0b6fa4}
/* A pill whose colours are DATA — a role's swatch (apps/core/groups_views.ROLE_SWATCHES) — gets
   them as --sw-bg / --sw-fg, never as inline background/color: an inline colour beats every
   theme rule, so the pale swatch stayed a white slab in dark mode. Dark derives the pill from
   the same hue: a deep tint of it for the ground, a light shade of it for the text (≥ 7 : 1). */
.sw-pill.sw-pill{background:var(--sw-bg);color:var(--sw-fg)}
body.dark .sw-pill.sw-pill{background:color-mix(in srgb,var(--sw-fg) 24%,#212429);color:color-mix(in srgb,var(--sw-fg) 40%,#fff)}
/* The user menu's theme picker (Light · Dark · Auto) */
.um-pop .um-theme{cursor:default}
.um-seg{margin-left:auto;display:inline-flex;border:1px solid var(--border,#e6e9ef);border-radius:8px;overflow:hidden}
.um-seg button{border:0;background:transparent;color:var(--text-2,#4b5563);font:600 11.5px 'Cabin',sans-serif;padding:4px 8px;cursor:pointer}
.um-seg button+button{border-left:1px solid var(--border,#e6e9ef)}
.um-seg button:hover{background:var(--surface-hover,#f1f4f7);color:var(--text,#2d2d2d)}
.um-seg button.on{background:var(--accent);color:var(--on-accent)}
.um-seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
body.dark .card,body.dark .o-sheet,body.dark .qf-card,body.dark .set-card,body.dark .cmdk-panel,body.dark .setx,body.dark .tablewrap,body.dark .o-statusbar .o-stages{background:#212429}
body.dark .erp-input,body.dark .set-card input,body.dark .set-card select,body.dark .set-terms,body.dark input.o-money,body.dark textarea,body.dark .search,body.dark .p-drop{background:#1b1e23;color:var(--ink);border-color:#31353d}
body.dark .appname{color:var(--ink)}
body.dark .setx-side{background:#1b1e23}
body.dark .lst td{border-color:#31353d}
body.dark .badge.draft{background:#2a2e35;color:#c2c7d0}
body.dark .o-tab,body.dark .qf-tab{color:var(--ink)}
body.dark .drow b,body.dark .set-card label{color:var(--muted)}
body.dark .um-trigger{border-color:rgba(0,0,0,.25)}
/* Dark mode: fix every control that hard-codes a white background (so text isn't white-on-white) */
body.dark .gs-btn,body.dark .lf-grid input,body.dark .lf-grid select,body.dark .lf-assign select,
body.dark .acc-sel,body.dark .ship-in input,body.dark .btn-mini,
body.dark .erp-input,body.dark .login-card input{background:#1b1e23;color:var(--ink);border-color:#31353d}
body.dark .gs-btn .gs-lbl{color:var(--ink)}
body.dark .gs-menu,body.dark .scard-drop,body.dark .cmdk-panel,body.dark .login-card{background:#212429;border-color:#31353d;color:var(--ink)}
body.dark .gs-item{color:var(--ink)}
body.dark .gs-item.on,body.dark .gs-item:hover{background:#2a2e35}
body.dark .o-stages,body.dark .o-stage{background:#212429;color:var(--muted);border-color:#31353d}
body.dark .o-stage.on{background:#2a2e35;color:var(--ink)}
body.dark .lf-src,body.dark .appsoon{background:#1b1e23;border-color:#31353d;color:var(--muted)}
body.dark .cmdk-row img,body.dark .appd-ico,body.dark .cmdk-panel img{background:#212429;border-color:#31353d}
body.dark .btn-mini.pri{background:var(--grad);color:#06121a;border:0}   /* primary mini-button: keep the brand gradient + dark ink. The base `body.dark .btn-mini` rule above (higher specificity than `.btn-mini.pri`) had flattened the fill to a dark plate, leaving dark ink invisible on it (the "Log call" / "New customer" bug). */
.set-terms{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:400 13px 'Cabin',sans-serif;color:var(--ink);line-height:1.5;resize:vertical}
.set-terms:focus{outline:none;border-color:var(--accent)}
/* the grand-total row (.tot-grand sibling or .tot-row.grand) and the section/note row
   background are now .ds-totals / .ds-lines (components.css) — every live totals box
   and line table also carries them. A note line keeps the normal ink (rule 11: grey
   means blocked) so it can carry its own colour/highlight — components.css. */
@media(max-width:760px){.qf-bottom{grid-template-columns:1fr}}
/* product type-to-search combo + wrapping description */
.sol-table.grow td{vertical-align:top}
.sol-table .sol-desc{min-width:220px}
/* A line description keeps the line breaks it was typed with (a pasted specification
   sheet is one row per attribute); runs of spaces and tabs still collapse. */
.sol-text{white-space:pre-line}
.p-combo{position:relative}
.p-drop{position:absolute;left:0;right:0;top:100%;margin-top:3px;background:var(--surface-3,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.16);z-index:30;max-height:240px;overflow:auto;padding:4px}
.p-item{padding:8px 10px;border-radius:7px;font:500 13px 'Cabin',sans-serif;color:var(--ink);cursor:pointer;white-space:normal}
.p-item.hl,.p-item:hover{background:var(--bg)}
/* The product's category path under its name in the picker (Release 2 step A5). A step
   lighter than the name because it is context, not the answer — never the blocked grey
   (rule 11): the reader may pick this product. */
.p-cat{display:block;font-size:11px;font-weight:400;color:var(--ink);opacity:.72;margin-top:1px}
/* The part number first in each typeahead row (Release 2 step 13): what a salesperson types
   is a part number, so the row shows the one they typed before the name. Dark ink — it is
   the answer, not context. The "keep typing" footer is a note, not an option. */
.p-code{font-weight:700;margin-right:6px;color:var(--ink)}
.p-more{padding:6px 10px;font-size:11.5px;color:var(--ink);opacity:.8;cursor:default}
/* "＋ Add … to the catalogue" / "Request … for the catalogue" at the foot of the product
   box (Release 2 step 14): an action, so it reads as one — accent, never the blocked grey. */
.p-act{padding:8px 10px;border-top:1px solid var(--line);font:600 12.5px 'Cabin',sans-serif;color:var(--accent-text,#017878);cursor:pointer;border-radius:0 0 7px 7px}
.p-act:hover{background:var(--bg)}
/* A quotation line's unit and packaging, under its quantity (Release 2 step 10). */
.p-units{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.p-units:empty{display:none}
.p-units select,.p-units input{font-size:12px;padding:3px 6px;min-width:0;width:100%}
.p-qty[readonly]{background:var(--bg)}
/* customer many2one — make it look exactly like the glass <select> dropdowns */
.cust-combo{position:relative}
.cust-combo .cust-search{padding-right:30px}
.cust-combo::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:10px;opacity:.7;color:var(--muted)}
.cust-drop{border-radius:12px;padding:6px}
.cust-drop .p-item{padding:8px 11px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cust-drop .p-item:hover,.cust-drop .p-item.hl{background:rgba(2,196,196,.12);color:var(--accent-text,#017878)}
/* child-record hit (contact person / address) — subtitle naming the company the quote goes to */
.cust-drop .p-sub{display:block;font:400 11px 'Cabin',sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
/* customer exists but is owned by another sales agent — hidden, warn instead of picking */
.cust-drop .p-foreign,.rq-opt.rq-foreign{white-space:normal;cursor:default;font-weight:600;
  color:var(--tint-warning-fg,#9a6a00);background:var(--tint-warning-bg,#fff7e6);border:1px solid var(--tint-warning-line,#f6d98a)}
.cust-drop .p-foreign:hover,.rq-opt.rq-foreign:hover{background:var(--tint-warning-bg,#fff7e6);color:var(--tint-warning-fg,#9a6a00)}
body.dark .cust-drop .p-foreign,body.dark .rq-opt.rq-foreign,body.holo .cust-drop .p-foreign{
  color:#ffcf6b;background:rgba(154,106,0,.18);border-color:rgba(246,217,138,.45)}
body.holo .cust-drop .p-sub{color:#aab2cc}
body.holo .cust-drop{background:rgba(20,26,45,.62);border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
body.holo .cust-drop .p-item{color:#eaeefb}
body.holo .cust-drop .p-item:hover,body.holo .cust-drop .p-item.hl{background:rgba(34,211,238,.20);color:#fff}
body.holo .cust-combo::after{color:#aab2cc}
textarea.p-name{resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;line-height:1.35;min-height:34px;width:100%}
.sol-section textarea.p-name,.sol-note textarea.p-name{min-height:30px}
.lead{color:var(--muted);max-width:640px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;position:relative}

/* ---------------------------------------------------------------------------
   PANEL — a titled box with a body. NOT `.card`, which is the dashboard TILE
   above: an icon beside a figure, hence `display:flex;align-items:center`.

   It lived only inside `collections/_collections_css.html`, so eleven Accounting
   and E-invoicing screens that copied the markup got the tile instead — heading
   and body side by side, vertically centred, and `.panel-t` styling nothing at
   all, so every panel title rendered as a raw browser <h2> with its one-line
   explanation swallowed into the heading. Nothing errored and no test could see
   it; only opening the page could. One definition here, so a twelfth screen
   cannot get it wrong.  (2026-09-27)
   ------------------------------------------------------------------------- */
.panel{background:var(--surface-1,#fff);border:1px solid var(--border,#e8eaee);border-radius:12px;overflow:hidden}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border,#f0f1f4)}
.panel-t{font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--text,#2d2d2d);margin:0}
.panel-t small{display:block;font-family:Cabin,sans-serif;font-weight:400;font-size:11.5px;color:var(--text-muted,#9098a3);margin-top:2px}
.panel-h a{font-family:Cabin,sans-serif;font-size:12px;color:var(--tint-accent-fg,#0596a6);text-decoration:none;white-space:nowrap}
.panel-b{padding:6px 0}
.panel-b table.lst{margin:0;table-layout:auto}
/* Names get the slack; dates, refs and day counts never wrap. */
.panel-b .lst td.c-name{line-height:1.35}
.panel-b .lst td.c-name a{word-break:normal;overflow-wrap:anywhere}
.lst td.nw,.lst th.nw{white-space:nowrap}
.panel-empty{padding:22px 16px;text-align:center;color:var(--text-muted,#9098a3);font-family:Cabin,sans-serif;font-size:12.5px}
/* A panel whose body is a form or a prose block rather than a table. `.panel-b`
   is deliberately flush at the sides, because a table inside one supplies its
   own cell padding; anything else needs the gutter asked for explicitly, so no
   existing panel changes shape by inheriting one. */
.panel-b.pad{padding:12px 16px}
.card-ico{font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#eef7f7);border-radius:12px}
.muted{color:var(--muted);font-size:12px}
.soon{position:absolute;top:10px;right:12px;font-size:10px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:980px;padding:1px 8px}
.msg{background:var(--surface-2,#eef7f7);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--grad)}
.login-logo{display:block;margin:0 auto 18px;height:42px}
.login-card{background:var(--surface-1,#fff);border-radius:18px;padding:30px 28px;width:340px;box-shadow:0 24px 60px rgba(0,0,0,.25);display:flex;flex-direction:column}
.login-brand{font-weight:800;font-size:22px;color:var(--plum);text-align:center;margin-bottom:18px}
.login-card label{font-size:12px;color:var(--muted);margin:10px 0 4px}
.login-card input{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.login-card button{margin-top:18px;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:700;cursor:pointer}
.login-err{background:var(--tint-danger-bg,#fdeef0);border:1px solid #e2574c;color:var(--tint-danger-fg,#c23b30);border-radius:8px;padding:8px;font-size:13px}
.login-reset{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--accent-text,#017878);text-decoration:none}
.login-reset:hover{text-decoration:underline}
body.holo .login-reset{color:#7dd3fc}
/* contacts / lists */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.search{flex:1;max-width:420px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px}
.btn{background:var(--accent);color:#04222a;border:0;border-radius:9px;padding:9px 14px;font-weight:700;text-decoration:none;font-size:13px;cursor:pointer}
/* A button the reader cannot press says so (rule 11: grey means BLOCKED). No disabled
   state existed, so a disabled primary looked exactly like one that works — the component
   gallery showed it on 2026-09-26. Opacity rather than a colour, so it holds for every
   variant, the enterprise theme's repaint and both themes. */
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"],.btn-mini:disabled,.btn-mini[disabled],
.btn-ghost[aria-disabled="true"],button.btn-ghost:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
/* A table card stacks its children — it must NEVER inherit `.card`'s flex ROW, or the
   pager (`.bl-pager`, itself a flex box) becomes a sibling COLUMN beside the table and
   steals ~210px of its width, leaving a blank strip down the right of every paginated
   list. `display:block` is load-bearing; keep it. (Same source-order override as the
   `padding:0` above.) */
.tablewrap{padding:0;overflow:auto;display:block}
.lst{width:100%;border-collapse:collapse;font-size:13px}
.lst th{position:sticky;top:0;background:var(--surface-2,#f7f9fb);text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.lst td{padding:9px 12px;border-bottom:1px solid var(--line)}
.lst tbody tr:hover td{background:var(--surface-2,#f3fbfb)}
.tag{font-size:10px;background:var(--surface-2,#eef7f7);border:1px solid var(--line);border-radius:980px;padding:1px 7px;color:var(--muted)}
.sp-ref-chip{display:inline-flex;align-items:center;gap:5px;font:600 12px 'Cabin',sans-serif;padding:3px 10px;border-radius:99px;background:rgba(224,163,47,.14);color:var(--tint-warning-fg,#b9831f);border:1px solid rgba(224,163,47,.34);white-space:nowrap}
.sp-ref-chip.sm{font-size:11px;padding:2px 8px;gap:4px}
.ct-vtags{margin-top:6px}
body.holo .sp-ref-chip{background:rgba(224,163,47,.16);color:#f0c361;border-color:rgba(224,163,47,.40)}
.ct-exp{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:10px;line-height:1;padding:3px 5px;margin-right:3px;border-radius:5px}
.ct-exp:hover{background:rgba(2,196,196,.12);color:var(--accent-text,#017878)}
.ct-exp.open{color:var(--accent-text,#017878)}
.ct-exp-sp{display:inline-block;width:18px}
.ct-count{font-size:10px;background:rgba(2,196,196,.12);color:var(--accent-text,#017878);border:1px solid var(--line);border-radius:980px;padding:1px 8px;margin-left:5px}
.lst tr.ct-child>td{background:rgba(0,0,0,.025)}
.lst tr.ct-child>td.ct-child-name{padding-left:34px;color:var(--muted);font-weight:500}
body.holo .lst tr.ct-child>td{background:rgba(255,255,255,.035)}
.ct-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding:13px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
body.holo .ct-stats{background:rgba(255,255,255,.055);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.13)}
.ct-stat-total{display:flex;flex-direction:column;line-height:1.05;padding-right:16px;border-right:1px solid var(--line)}
.ct-stat-n{font:800 26px 'Montserrat',sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-stat-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ct-stat-of{font:700 14px 'Montserrat',sans-serif;color:var(--ink)}
.ct-stat-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.ct-stat-chips{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.ct-stat-chip{display:inline-flex;align-items:center;gap:7px;font:600 12.5px 'Cabin',sans-serif;padding:5px 12px;border-radius:99px;background:rgba(2,196,196,.10);color:var(--ink);border:1px solid var(--line)}
.ct-stat-chip b{font-family:'Montserrat',sans-serif;color:var(--accent-text,#017878)}
.ct-stat-chip.ref{background:rgba(224,163,47,.12);border-color:rgba(224,163,47,.34)}
.ct-stat-chip.ref b{color:var(--tint-warning-fg,#b9831f)}
body.holo .ct-stat-chip.ref b{color:#f0c361}
.ct-stat-chip.none{background:transparent}
.ct-stat-chip.none b{color:var(--ink)}
.ct-stat-chip.zero{color:var(--qblocked,var(--text-disabled,#9aa7b4));background:transparent;border-style:dashed;cursor:default}
.ct-stat-chip.zero b{color:inherit}
a.ct-stat-chip{text-decoration:none;cursor:pointer;transition:transform .08s ease,box-shadow .15s}
a.ct-stat-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.ct-stat-chip.on{outline:2px solid var(--accent);outline-offset:1px}
.ct-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:9px 14px;border-radius:11px;background:rgba(2,196,196,.10);border:1px solid rgba(2,196,196,.30);font:600 13px 'Cabin',sans-serif;color:var(--ink)}
.ct-filterbar b{color:var(--accent-text,#017878)}
.ct-fb-x{margin-left:auto;text-decoration:none;color:var(--accent-text,#017878);font-weight:700;border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.ct-fb-x:hover{background:rgba(2,196,196,.14)}
body.holo .ct-filterbar{background:rgba(2,196,196,.12);border-color:rgba(2,196,196,.34)}
.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sales-daterange{display:inline-flex;align-items:center;gap:6px}
.sales-daterange input[type=date]{padding:7px 9px}

/* ===================================================================== */
/*  HP MODULE — HP-branded (HP Blue) light surface, even in dark theme    */
/* ===================================================================== */
/* ============================================================================
   HP MODULE — HP Brand Identity
   Core colours:  Electric Blue #024AD8 (logo & stripes ONLY) · Black #000 (type)
                  White #FFF (clean space) · Power Storm #568393 · Orange Bloom #FF5050
   Type: HP Forma DJR Office — Helvetica web stand-in. Headlines Medium, body Regular.
   ============================================================================ */
.hp-app{--hp-blue:#024AD8;--hp-ink:#000;--hp-mut:#6b6b6b;--hp-line:#e3e3e3;--hp-storm:#568393;--hp-bloom:#FF5050;--hp-soft:#f4f4f4;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--hp-ink);position:relative;z-index:1;max-width:1180px;margin:0 auto;letter-spacing:-.005em}
.hp-app *{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
/* wide data pages (funnel table) get the full canvas; forms stay narrow */
.appshell-body:has(.hp-tbl){max-width:1640px}
.hp-app:has(.hp-tbl){max-width:1600px}

/* --- page surface: white space + diagonal blue stripes (brand background) ----- */
body:has(.hp-app){background:#fff}
body:has(.hp-app) .holo-bg{display:none}
body:has(.hp-app).dark{background:#fff;color:#000}
/* subtle stripe accent on data / form pages — kept faint so tables stay readable */
body:has(.hp-app)::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(118deg,var(--hp-blue) 0 26px,#fff 26px 60px);
  -webkit-mask:linear-gradient(118deg,transparent 86%,#000 99%);mask:linear-gradient(118deg,transparent 86%,#000 99%);
  opacity:.10}
/* bold stripes on the landing page */
body:has(.hp-landing)::after{background:repeating-linear-gradient(118deg,var(--hp-blue) 0 46px,#fff 46px 96px);
  -webkit-mask:linear-gradient(118deg,transparent 64%,#000 82%);mask:linear-gradient(118deg,transparent 64%,#000 82%);opacity:1}

/* ============================ HP.com-STYLE TOP MENU ========================== */
.hpnav{position:relative;z-index:2;display:flex;align-items:center;gap:30px;background:var(--surface-3,#fff);border-bottom:1px solid var(--hp-line);
  padding:14px 22px;margin:-4px 0 0;border-radius:2px}
.hpnav-logo{flex:0 0 auto;display:flex;align-items:center}
.hpnav-logo img{height:38px;width:auto;display:block}
.hpnav-links{display:flex;align-items:center;gap:26px;flex:1}
.hpnav-links a{color:var(--text,#000);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;position:relative;white-space:nowrap}
.hpnav-links a:hover,.hpnav-links a.on{color:var(--text,#000)}
.hpnav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:#000;transform:scaleX(0);transition:transform .14s}
.hpnav-links a:hover::after,.hpnav-links a.on::after{transform:scaleX(1)}
.hpnav-search{display:flex;align-items:center;gap:8px;background:var(--surface-1,#fff);border:1px solid var(--border-strong,#cfcfcf);border-radius:980px;padding:8px 14px;min-width:230px}
.hpnav-search:focus-within{border-color:var(--hp-blue);box-shadow:0 0 0 3px rgba(2,74,216,.14)}
.hpnav-search input{border:0;outline:0;background:transparent;font-size:14px;flex:1;color:var(--text,#000)}
.hpnav-search svg{width:18px;height:18px;stroke:#000;flex:0 0 18px}
.hpnav-icons{display:flex;align-items:center;gap:18px}
.hpnav-icons a{display:flex;color:var(--text,#000)}
.hpnav-icons svg{width:23px;height:23px;stroke:#000;fill:none;stroke-width:1.7}
@media(max-width:820px){.hpnav{flex-wrap:wrap;gap:14px}.hpnav-links{order:3;width:100%;overflow-x:auto}.hpnav-search{min-width:0;flex:1}}

/* ============================ LANDING HERO ================================== */
.hp-hero{position:relative;z-index:2;padding:64px 8px 56px;max-width:760px}
.hp-hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#000;margin-bottom:30px}
.hp-hero-eyebrow span{color:var(--hp-mut)}
.hp-hero-title{font-size:clamp(44px,7vw,92px);line-height:1;font-weight:700;letter-spacing:-.03em;margin:0 0 26px}
.hp-hero-title em{font-style:normal;color:var(--hp-blue)}
.hp-hero-sub{font-size:18px;line-height:1.5;color:#000;max-width:520px;margin:0 0 34px}
.hp-hero-cta{display:inline-flex;align-items:center;gap:14px;background:#000;color:#fff;text-decoration:none;
  font-size:16px;font-weight:700;padding:16px 30px}
.hp-hero-cta:hover{background:#1a1a1a}
.hp-hero-cta .sl{color:var(--hp-blue);font-weight:400}

/* ============================ TILES (quick links) ========================== */
.hp-section-h{position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#000;margin:8px 8px 18px;display:flex;align-items:center;gap:14px}
.hp-section-h::after{content:"";flex:1;height:1px;background:var(--hp-line)}
.hp-tiles{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;
  background:var(--hp-line);border:1px solid var(--hp-line)}
.hp-tile{display:flex;flex-direction:column;gap:8px;background:#fff;padding:26px 24px;text-decoration:none;color:#000;transition:background .12s}
.hp-tile:hover{background:var(--hp-soft)}
.hp-tile .hp-ic{font-size:24px;margin-bottom:6px;filter:grayscale(1)}
.hp-tile b{font-size:17px;font-weight:700}
.hp-tile .hp-sub{font-size:13px;color:var(--hp-mut);line-height:1.45}
.hp-tile .hp-go{margin-top:6px;font-size:13px;font-weight:700;color:var(--hp-blue)}

/* ============================ PAGE HEADER (sub-pages) ====================== */
.hp-head{position:relative;z-index:2;display:flex;align-items:center;gap:16px;background:#fff;color:#000;
  border-bottom:3px solid #000;padding:0 0 18px;margin-bottom:26px}
.hp-badge{flex:0 0 auto;display:flex;align-items:center}
.hp-badge img{height:44px;width:auto;display:block}
.hp-h-title{font:700 24px/1.05 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.02em}
.hp-h-sub{font-size:13.5px;color:var(--hp-mut);margin-top:4px}
.hp-head .spacer{flex:1}

/* ============================ BUTTONS ====================================== */
.hp-btn{background:#000;color:#fff;border:1px solid #000;border-radius:0;padding:11px 20px;
  font:600 14px 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.hp-btn:hover{background:#1a1a1a}
.hp-btn.ghost{background:#fff;color:#000;border:1px solid #000}
.hp-btn.ghost:hover{background:#000;color:#fff}
.hp-btn.sm{padding:8px 13px;font-size:13px}

/* ============================ CARDS ======================================== */
.hp-card{position:relative;z-index:2;background:#fff;border:1px solid var(--hp-line);border-radius:2px;padding:24px;color:#000}
.hp-card-flush{padding:0;overflow:hidden}
.hp-alert{background:#fff;border:1px solid var(--hp-bloom);border-left:4px solid var(--hp-bloom);color:#000;
  border-radius:2px;padding:12px 16px;margin-bottom:16px;font-weight:600}

/* ============================ FORMS ======================================== */
.hp-form .hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
@media(max-width:900px){.hp-form .hp-grid{grid-template-columns:1fr 1fr}}
.hp-field{display:flex;flex-direction:column;gap:6px}
.hp-field label{font:700 11px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#000;text-transform:uppercase;letter-spacing:.06em}
.hp-field input,.hp-field select,.hp-field textarea,.hp-modal input,.hp-modal select{border:1px solid #cfcfcf;border-radius:0;padding:10px 12px;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#000;width:100%}
.hp-field input:focus,.hp-field select:focus,.hp-field textarea:focus{outline:none;border-color:var(--hp-blue);box-shadow:0 0 0 3px rgba(2,74,216,.16)}
.hp-field .hp-ro{background:var(--hp-soft);color:var(--hp-mut)}
.hp-inline{display:flex;gap:8px;align-items:center}
.hp-inline select{flex:1}
.req{color:var(--hp-bloom)}
.hp-auto{font-weight:600;color:var(--hp-storm);font-size:11px;text-transform:none;letter-spacing:0}
.hp-sub-h{font:700 12px 'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#000;margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid #000}
.hp-lines{width:100%;border-collapse:collapse}
.hp-lines th{text-align:left;font:700 11px 'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;color:var(--hp-mut);padding:7px 8px;border-bottom:1px solid var(--hp-line)}
.hp-lines th.r{text-align:right}
.hp-lines td{padding:5px 6px}
.hp-lines input{border:1px solid #cfcfcf;border-radius:0;padding:9px 10px;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif;width:100%;background:#fff;color:#000}
.hp-lines input.hp-num{text-align:right}
.hp-x{background:#fff;border:1px solid #cfcfcf;color:var(--hp-bloom);border-radius:0;width:32px;height:32px;cursor:pointer;font-size:13px;line-height:1}
.hp-x:hover{background:var(--hp-bloom);color:#fff;border-color:var(--hp-bloom)}
.hp-totals{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:480px;margin-top:16px}
.hp-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.hp-form textarea{resize:vertical}

/* ============================ FILTERS / KPIs / TABLE ====================== */
.hp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hp-filters input,.hp-filters select{border:1px solid #cfcfcf;border-radius:0;padding:10px 12px;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#000}
.hp-filters input[name=q]{min-width:240px;flex:1}
.hp-kpis{display:flex;gap:1px;margin-bottom:18px;flex-wrap:wrap;background:var(--hp-line);border:1px solid var(--hp-line)}
.hp-kpis>div{flex:1;min-width:150px;background:#fff;padding:16px 18px}
.hp-kpis b{display:block;font:700 26px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#000;letter-spacing:-.02em}
.hp-kpis span{font-size:12px;color:var(--hp-mut);text-transform:uppercase;letter-spacing:.05em}
.hp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.hp-tbl th{text-align:left;background:#000;color:#fff;font:700 11px 'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:12px;border-bottom:1px solid #000}
.hp-tbl th.r{text-align:right}
.hp-tbl td{padding:12px;border-bottom:1px solid var(--hp-line);color:#000}
.hp-tbl td.r{text-align:right}
.hp-tbl tbody tr:hover{background:var(--hp-soft)}
.hp-pill{display:inline-block;background:#fff;color:#000;border:1px solid #000;border-radius:0;padding:2px 9px;font-size:11.5px;font-weight:700}
.hp-status{display:inline-block;background:var(--hp-soft);color:#000;border-radius:0;padding:3px 11px;font-size:11.5px;font-weight:700;border:1px solid var(--hp-line)}
.hp-status.won{background:#fff;color:var(--hp-storm);border-color:var(--hp-storm)}
.hp-status.lost{background:#fff;color:var(--hp-bloom);border-color:var(--hp-bloom)}
.hp-empty{padding:22px;color:var(--hp-mut)}
.hp-empty a{color:var(--hp-blue);text-decoration:none;font-weight:700}

/* ============================ ACCOUNT-MANAGER CARDS ====================== */
.hp-am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.hp-am-card{display:block;background:#fff;border:1px solid var(--hp-line);border-radius:2px;padding:18px 20px;text-decoration:none;color:#000;transition:border-color .12s}
.hp-am-card:hover{border-color:#000}
.hp-am-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hp-am-av{width:40px;height:40px;border-radius:0;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px 'Helvetica Neue',Helvetica,Arial,sans-serif}
.hp-am-top b{font-size:16px}
.hp-am-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--hp-line);font-size:13px;color:var(--hp-mut)}
.hp-am-row span:last-child{color:#000;font-weight:600;text-align:right}

/* ============================ CONFIG ====================================== */
.hp-cfg-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
@media(max-width:1000px){.hp-cfg-grid{grid-template-columns:1fr}}
.hp-cfg-tbl{width:100%;border-collapse:collapse;font-size:13px}
.hp-cfg-tbl th{text-align:left;font:700 11px 'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;color:var(--hp-mut);padding:7px 6px;border-bottom:1px solid var(--hp-line)}
.hp-cfg-tbl td{padding:8px 6px;border-bottom:1px solid var(--hp-line)}
.hp-cfg-tbl td.r{text-align:right}
.hp-cfg-tbl form{display:inline}
.hp-cfg-add{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.hp-cfg-add input,.hp-cfg-add select{border:1px solid #cfcfcf;border-radius:0;padding:8px 10px;font:13px 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#000}
.hp-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--hp-mut)}
.hp-chk input{width:auto}
.hp-am-edit-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--hp-line)}
.hp-am-edit{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex:1}
.hp-am-edit input,.hp-am-edit select{border:1px solid #cfcfcf;border-radius:0;padding:8px 10px;font:13px 'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#000}
.hp-am-edit input[name=name]{width:160px}
.hp-am-edit input[name=phone]{width:120px}
.hp-am-edit input[name=email]{width:190px}
.hp-am-team{font-size:12px;color:var(--hp-mut);min-width:78px}

/* ============================ MODALS ====================================== */
/* The two HP quick-create pop-ups' shell moved onto .ds-dialog-overlay/.ds-dialog/
   -head (components.css, redesign Phase 3, rp2-sales) — .hp-modal stays in the markup
   only as the hpOpen()/hpClose() hook (apps/hp/templates/hp/opg_form.html), with no
   CSS of its own now. */

/* ============================================================================
   HP module — CO-BRANDED TOP BAR
   One banner mixing Quality (green/teal) with HP (Electric Blue). The HP nav +
   roundel fold into the global Quality top bar; only shows on HP pages.
   ============================================================================ */
body:has(.hp-app) .topbar3{background:linear-gradient(90deg,#71cc98 0%,#16b5c4 26%,#0b7fc4 60%,#024AD8 100%)}
body:has(.hp-app) .topbar3 .tb-crumb,
body:has(.hp-app) .topbar3 .tb-crumb b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.22)}
body:has(.hp-app) .topbar3 .tb-crumb a{color:rgba(255,255,255,.82)}
body:has(.hp-app) .topbar3 .tb-crumb a:hover{color:#fff}
body:has(.hp-app) .topbar3 .tb-crumb span{color:rgba(255,255,255,.6)}
body:has(.hp-app) .topbar3 .tb-back,
body:has(.hp-app) .topbar3 .tb-apps{color:#fff}
body:has(.hp-app) .topbar3 .tb-back:hover,
body:has(.hp-app) .topbar3 .tb-apps:hover{background:rgba(255,255,255,.20)}
body:has(.hp-app) .topbar3 .msrch{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.34)}
body:has(.hp-app) .topbar3 .msrch:focus-within{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.65)}
body:has(.hp-app) .topbar3 .msrch input,
body:has(.hp-app) .topbar3 .msrch-ic{color:#fff}
body:has(.hp-app) .topbar3 .msrch input::placeholder{color:rgba(255,255,255,.72)}
body:has(.hp-app) .topbar3 .msrch-kbd{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.42)}
body:has(.hp-app) .topbar3 .um-name{color:#fff}
body:has(.hp-app) .topbar3 .um-caret{color:rgba(255,255,255,.78)}
body:has(.hp-app) .topbar3 .um-trigger{border-color:rgba(255,255,255,.42)}
body:has(.hp-app) .topbar3 .um-trigger:hover{background:rgba(255,255,255,.16)}
body:has(.hp-app) .topbar3 .um-av{background:#fff;color:#024AD8}
/* .hp-topnav's own look retired (redesign Phase 3, 2026-10-10): the HP module's one menu
   is now the shared .tb-menu partial (apps/hp/templates/hp/_hp_topnav.html, registered
   via apps/core/modulemenu.py), which reads the system's own nav styling — never a
   module-private one. The co-branded blue gradient + white-ink top bar itself is unaffected
   (the body:has(.hp-app) rules above). */
.detail{padding:6px 16px}
.drow{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.drow b{width:120px;flex:0 0 120px;color:var(--muted);font-weight:600}
.sub-h{margin:18px 0 8px;font-size:15px}
/* sidebar "soon" tag */
.nav.soon-link{color:var(--text-muted,#8e95a3)}
.nav.soon-link em{font-style:normal;font-size:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:980px;padding:0 6px;margin-left:auto;color:#aab0bd}
.nav.soon-link:hover{background:rgba(255,255,255,.05)}
/* apps launcher grid (Odoo-style) */
.appcat{font-family:'Montserrat','Segoe UI';font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text,#017878);margin:24px 0 12px;display:flex;align-items:center;gap:10px}
.appcat::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,rgba(2,196,196,.25),transparent)}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}
.appcard{position:relative;background:transparent;border:0;border-radius:16px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;color:var(--ink);transition:transform .14s}
.appcard:hover{transform:translateY(-3px)}
.appcard:hover .appico{box-shadow:0 12px 30px rgba(45,212,191,.34);transform:translateY(-2px)}
.appcard.off{opacity:.6}
.appcard.off .appico{filter:grayscale(.65)}
.appcard.off:hover{opacity:1}
.appico{width:var(--appico-px,70px);height:var(--appico-px,70px);padding:var(--appico-pad,0);display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:18px;box-shadow:0 8px 22px rgba(45,212,191,.18);transition:box-shadow .14s,transform .14s}
.appico img,.appico svg{width:100%;height:100%;display:block;border-radius:18px}
.as-ico svg{width:100%;height:100%;display:block;border-radius:14px}
body.compact .appico svg{width:100%;height:100%;border-radius:15px}
.appname{font-family:'Montserrat','Segoe UI';font-weight:700;font-size:13.5px;text-align:center;color:var(--dark)}
.nav-ico{width:18px;height:18px;flex:0 0 18px;display:block;opacity:.92}
.appsoon{position:absolute;top:8px;right:10px;font-size:9px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:980px;padding:1px 7px}
/* coming-soon page */
.soon-page{text-align:center;padding:50px 20px;max-width:480px;margin:0 auto}
.soon-ico{width:92px;height:92px;border-radius:24px;background:transparent;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 12px 30px rgba(45,212,191,.28)}
.soon-ico img{width:100%;height:100%;display:block;border-radius:24px}
.soon-page h2{margin:10px 0}
.soon-page .btn{display:inline-block;margin-top:16px}
/* CRM kanban */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.kcol{flex:0 0 260px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px}
.khd{font-weight:700;font-size:13px;padding:4px 6px 10px;position:relative}
.kcount{background:var(--brand-night);color:#fff;border-radius:980px;padding:0 8px;font-size:11px;margin-left:4px}
.ktotal{font-size:11px;color:var(--muted);font-weight:400}
.kcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:9px;text-decoration:none;color:var(--ink)}
.kcard:hover{border-color:var(--accent)}
.kcard b{font-size:13.5px}
.kmeta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.kempty{color:var(--muted);font-size:12px;text-align:center;padding:14px 0}
/* launcher (Odoo-style home, no sidebar) */
.launch{min-height:100vh;background:var(--bg)}
.launch-top{display:flex;align-items:center;gap:12px;padding:15px 30px;background:var(--grad);position:relative;z-index:100}
.launch-logo img{height:34px;display:block}
.launch-logo svg{height:34px;width:auto;display:block}
svg.login-logo{width:auto}
.launch-top .who{color:rgba(0,0,0,.62);font-size:13px;font-weight:600}
.launch-top .btn-ghost{border:1px solid rgba(0,0,0,.22);color:var(--dark);font-weight:600}
.launch-top .btn-ghost:hover{background:rgba(0,0,0,.07)}
.launch-search{display:inline-flex;align-items:center;gap:8px;margin-left:16px;padding:8px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.55);color:rgba(0,0,0,.6);font:600 13px 'Cabin',sans-serif;cursor:pointer;min-width:230px}
.launch-search:hover{background:rgba(255,255,255,.85)}
.launch-search .ls-ico{font-size:15px}
.launch-search .ls-kbd{margin-left:auto;border:1px solid rgba(0,0,0,.2);border-radius:6px;padding:0 7px;font-size:12px;background:var(--surface-1,#fff)}
/* drag state */
.appcard{cursor:pointer}
.appcard.dragging{opacity:.4;transform:scale(.96)}
.appcard:active{cursor:grabbing}
/* command palette */
.cmdk{position:fixed;inset:0;background:rgba(20,20,24,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding-top:12vh}
.cmdk[hidden]{display:none}
.cmdk-panel{width:min(620px,92vw);background:var(--surface-3,#fff);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;animation:cmdkIn .12s ease}
@keyframes cmdkIn{from{transform:translateY(-10px);opacity:.6}to{transform:none;opacity:1}}
.cmdk-search{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cmdk-search .cmdk-ico{font-size:20px;color:var(--muted)}
.cmdk-search input{flex:1;border:0;outline:none;font:500 17px 'Cabin',sans-serif;color:var(--ink);background:transparent}
.cmdk-esc{border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:11px;color:var(--muted)}
.cmdk-list{list-style:none;margin:0;padding:8px;max-height:50vh;overflow:auto}
.cmdk-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer}
.cmdk-row img{width:30px;height:30px;flex:0 0 30px;background:var(--surface-3,#fff);border:1px solid var(--line);border-radius:8px;padding:3px}
.cmdk-row.on{background:var(--bg)}
.cmdk-name{font:700 14px 'Montserrat',sans-serif;color:var(--ink)}
.cmdk-tag{margin-left:auto;font:500 12px 'Cabin',sans-serif;color:var(--muted)}
.cmdk-empty{padding:18px;text-align:center;color:var(--muted)}
.cmdk-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.launch-body{padding:24px 30px;max-width:1120px;margin:0 auto}
.launch-hero{background:var(--brand-night);border-radius:20px;padding:26px 30px;color:#fff;margin:6px 0 8px;box-shadow:0 12px 30px rgba(0,0,0,.18);position:relative;overflow:hidden}
.launch-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.lh-tag{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:3px;opacity:.9}
.launch-hero h1{font-family:'Montserrat';font-weight:800;margin:6px 0 2px;font-size:26px}
.launch-hero p{margin:0;opacity:.92;font-size:14px}
/* Apps store */
.store-h{font-family:'Montserrat','Segoe UI';font-weight:800;font-size:26px;margin:6px 0 2px}
.store-card{padding-bottom:16px}
.store-act{margin-top:4px;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:30px}
.store-act form{margin:0}
.btn-mini{font-size:12px;padding:6px 13px;border-radius:9px;text-decoration:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:var(--surface-1,#fff);font-weight:700;font-family:'Cabin'}
.btn-mini.pri{background:var(--grad);color:var(--on-accent);border:0}
.btn-mini.ghost{color:var(--tint-danger-fg,#c23b30);border-color:var(--tint-danger-line,#e8b6b0)}
.btn-mini.ghost:hover{background:var(--tint-danger-bg,#fdeef0)}
.badge-inst{font-size:11.5px;color:var(--st-won-fg);font-weight:700}
.badge-soon{font-size:11.5px;color:var(--muted)}
.store-link{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:inherit}
/* app detail page */
.back-link{display:inline-block;color:var(--accent-text,#017878);text-decoration:none;font-weight:700;margin-bottom:16px;font-size:13px}
.appd-head{display:flex;gap:24px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 28px}
.appd-ico{width:96px;height:96px;flex:0 0 96px;border-radius:24px;background:var(--surface-1,#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.10)}
.appd-ico img{width:70px;height:70px}
.appd-meta{flex:1;min-width:0}
.appd-cat{font-family:'Montserrat','Segoe UI';font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text,#017878)}
.appd-meta h1{font-family:'Montserrat','Segoe UI';font-weight:800;margin:4px 0 8px;font-size:28px}
.appd-meta p{color:var(--muted);max-width:620px;font-size:14.5px;margin:0 0 16px;line-height:1.5}
.appd-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.appd-actions form{margin:0}
.appd-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-top:18px;max-width:620px}
.appd-card h3{font-family:'Montserrat','Segoe UI';margin:0 0 8px;font-size:16px}
.appd-feats{margin:0;padding:0;list-style:none}
.appd-feats li{padding:9px 0 9px 28px;border-bottom:1px dashed var(--line);position:relative;font-size:14px}
.appd-feats li:last-child{border-bottom:0}
.appd-feats li::before{content:"\2713";position:absolute;left:2px;color:var(--green);font-weight:800}
@media(max-width:640px){.appd-head{flex-direction:column}}
/* Apps store cards (Odoo-style) */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.scard{position:relative;display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.scard:hover{box-shadow:0 8px 20px rgba(0,0,0,.07)}
.scard-ico{width:56px;height:56px;flex:0 0 56px;border-radius:15px;background:transparent;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(45,212,191,.18)}
.scard-ico img{width:100%;height:100%;border-radius:15px}
.scard-body{flex:1;min-width:0}
.scard-name{font-family:'Montserrat','Segoe UI';font-weight:700;font-size:15px;color:var(--dark);text-decoration:none;display:block}
.scard-name:hover{color:var(--accent-text,#017878)}
.scard-tag{color:var(--muted);font-size:12.5px;margin:2px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard-foot{display:flex;gap:8px;align-items:center}
.scard-foot form{margin:0}
.scard-menu{position:absolute;top:10px;right:10px}
.scard-menu summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;line-height:1}
.scard-menu summary::-webkit-details-marker{display:none}
.scard-menu summary:hover{background:var(--bg)}
.scard-drop{position:absolute;right:0;top:30px;background:var(--surface-3,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.14);min-width:150px;padding:6px;z-index:20}
.scard-drop a,.scard-drop button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;color:var(--ink);font-size:13px;border-radius:7px;cursor:pointer;text-decoration:none;font-family:'Cabin'}
.scard-drop a:hover,.scard-drop button:hover{background:var(--bg)}
.scard-drop form{margin:0}
/* app detail page */
.appd-bar{display:flex;align-items:center;gap:10px;padding:12px 30px;border-bottom:1px solid var(--line);background:var(--panel);font-size:13px}
.appd-crumb a{color:var(--accent-text,#017878);text-decoration:none;font-weight:700}
.appd-crumb span{color:var(--muted);margin:0 4px}
.appd-pager{display:flex;align-items:center;gap:8px;color:var(--muted)}
.pg{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
.pg.off{opacity:.35}
.pg-num{font-size:12px}
.appd-card2{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 32px;margin-top:8px}
.appd-ico2{position:absolute;top:28px;right:32px;width:84px;height:84px;border-radius:22px;background:transparent;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(45,212,191,.24)}
.appd-ico2 img{width:100%;height:100%;border-radius:22px}
.appd-top h1{font-family:'Montserrat','Segoe UI';font-weight:800;font-size:30px;margin:0}
.appd-tag{color:var(--muted);font-size:16px;margin:4px 0 6px}
.appd-author{color:var(--muted);font-size:13px;margin:0 0 14px}
.appd-body{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;max-width:680px}
.appd-body h2{font-family:'Montserrat','Segoe UI';font-weight:800;font-size:22px;margin:0 0 14px;line-height:1.3}
.appd-body h3{font-family:'Montserrat','Segoe UI';font-size:15px;margin:0 0 8px}
/* Settings page */
.set-savebar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.set-savebar b{font-family:'Montserrat','Segoe UI';font-size:15px}
.set-layout{display:flex;gap:20px;align-items:flex-start}
.set-nav{flex:0 0 210px;position:sticky;top:72px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px}
.set-nav a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600}
.set-nav a:hover{background:var(--bg)}
.set-nav .set-tech{color:var(--muted);font-weight:500;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.set-main{flex:1;min-width:0}
.set-sec{margin-bottom:22px}
.set-sec h2{font-family:'Montserrat','Segoe UI';font-size:18px;margin:0 0 10px}
.set-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.set-card label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.set-card input,.set-card select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:'Cabin';color:var(--ink);background:var(--surface-1,#fff)}
.set-card input:focus,.set-card select:focus{outline:none;border-color:var(--accent)}
.set-subh{font-family:'Montserrat','Segoe UI';font-weight:700;font-size:12px;color:var(--accent-text,#017878);margin:8px 0 12px;text-transform:uppercase;letter-spacing:.05em}
.set-userstat{font-size:14px;margin-bottom:14px}
.set-userstat b{font-size:20px;font-family:'Montserrat','Segoe UI'}
.set-invite{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.set-invite input,.set-invite select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:'Cabin';flex:1;min-width:120px}
.link{color:var(--accent-text,#017878);text-decoration:none;font-weight:600;font-size:13px;margin-left:10px}
.set-toggle{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink);font-weight:500;cursor:pointer}
.set-toggle:last-child{border-bottom:0}
.set-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.set-card input[type=color]{height:40px;padding:3px;width:100%;cursor:pointer;border-radius:9px}
.set-card input[type=file]{font-size:12.5px;padding:7px;background:var(--bg)}
@media(max-width:820px){.set-layout{flex-direction:column}.set-nav{position:static;width:100%;flex:none;display:flex;flex-wrap:wrap;gap:4px}}

/* ---- Odoo-style settings: left sidebar + per-section pages ---- */
.setx{display:flex;gap:0;align-items:stretch;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:560px}
.setx-side{flex:0 0 230px;background:var(--surface-2,#fafafb);border-right:1px solid var(--line);padding:12px 10px}
.setx-side-h{font:800 12px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 12px 12px}
.setx-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font:600 13.5px 'Cabin',sans-serif;margin-bottom:2px}
.setx-item img{width:26px;height:26px;background:transparent;border:0;border-radius:7px;padding:0;flex:0 0 26px}
.setx-item:hover{background:var(--surface-1,#fff)}
.setx-item.on{background:var(--grad);color:var(--on-accent)}
.setx-item.on img{background:transparent;border-color:transparent}
.setx-main{flex:1;min-width:0;padding:20px 24px}
.setx-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}

/* ===== Odoo-style Settings shell (ost-*) ===== */
.ost-menubar{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);padding:0 4px 0 0;margin:-6px 0 0;flex-wrap:wrap}
.ost-menu-title{font:800 14px 'Montserrat',sans-serif;color:var(--ink);padding:10px 16px 10px 4px}
.ost-menu-item{font:600 13px 'Cabin',sans-serif;color:var(--muted);text-decoration:none;padding:11px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.ost-menu-item:hover{color:var(--ink)}
.ost-menu-item.on{color:var(--accent-text,#017878);border-bottom-color:var(--accent)}
.ost-actionbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:0}
/* The one Save button every settings page and page-save bar wears. It was #714b67 —
   ODOO'S BRAND PURPLE — and only ever looked right because enterprise-theme.css paints
   over it with !important; that stylesheet is conditional on `ui_enterprise`, so with
   the theme off the primary control of the whole Settings module was purple (Eddie,
   2026-09-12, with a screenshot). It wears the brand now, and the same ink as the
   shared `.btn` above so the contrast is the same 7.6:1 rather than white-on-teal. */
.ost-btn-save{background:var(--accent);color:#04222a;border:0;border-radius:6px;padding:7px 18px;font:700 13px 'Cabin',sans-serif;cursor:pointer}
.ost-btn-save:hover{filter:brightness(1.08)}
.ost-btn-discard{background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px 16px;font:600 13px 'Cabin',sans-serif;color:var(--ink);text-decoration:none}
.ost-btn-discard:hover{background:rgba(0,0,0,.04)}
.ost-crumb{font:700 14px 'Cabin',sans-serif;color:var(--ink);margin-left:8px}
.ost-search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:var(--panel);min-width:240px}
.ost-search svg{width:15px;height:15px;color:var(--muted);flex:none}
.ost-search input{border:0;outline:none;background:transparent;padding:8px 0;font:inherit;color:var(--ink);width:100%}
/* shell: app list + content */
.ost-shell{border:0;border-radius:0;background:transparent;min-height:calc(100vh - 230px)}
.ost-applist{flex:0 0 240px;background:transparent;border-right:1px solid var(--line);padding:16px 8px}
.ost-applist .setx-item{padding:8px 12px;font-weight:600;color:var(--ink);border-radius:8px}
.ost-applist .setx-item.on{background:rgba(2,196,196,.10);color:var(--accent-text,#017878)}
.ost-applist .setx-item.on img{filter:none}
.ost-main{padding:18px 30px}
.ost-secthead{font:800 18px 'Montserrat',sans-serif;color:var(--ink);padding:0 0 10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ost-body{max-width:1000px}
/* dark mode */
body.dark .ost-actionbar,body.holo .ost-actionbar{background:transparent}
body.dark .ost-applist .setx-item.on,body.holo .ost-applist .setx-item.on{background:rgba(2,196,196,.18)}
body.dark .ost-search,body.holo .ost-search{background:#1b1e23;border-color:#31353d}
@media(max-width:860px){.ost-applist{flex-basis:170px}.ost-search{min-width:140px}}
.setx-head h2{font:800 19px 'Montserrat',sans-serif;color:var(--ink);margin:0}
.setx-body{max-width:760px}
@media(max-width:820px){.setx{flex-direction:column}.setx-side{flex:none;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px}.setx-side-h{width:100%}}

/* In-page message toast popups (new Discuss messages, any page) */
.dm-toasts{position:fixed;right:18px;bottom:18px;z-index:4000;display:flex;flex-direction:column;gap:10px;max-width:360px}
.dm-toast{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;width:340px;max-width:90vw;cursor:pointer;
  background:#16233a;border:1px solid rgba(45,212,191,.4);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.45);
  color:#eef2ff;opacity:0;transform:translateX(24px);transition:opacity .22s ease,transform .22s ease}
.dm-toast.in{opacity:1;transform:none}
.dm-toast-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#2dd4bf,#14b8a6);
  color:#04211d;display:flex;align-items:center;justify-content:center;font:700 14px 'Montserrat',sans-serif;overflow:hidden}
.dm-toast-av img{width:100%;height:100%;object-fit:cover}
.dm-toast-body{flex:1;min-width:0}
.dm-toast-h{font:700 13.5px 'Cabin',sans-serif;color:var(--tint-accent-fg,#2dd4bf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-toast-msg{font-size:13px;color:#dfe5f5;line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dm-toast-x{flex:0 0 auto;background:none;border:0;color:#8b95ad;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.dm-toast-x:hover{color:#fff}

/* ---- Team presence panel (manager dashboard) — compact, scales to 50+ ---- */
.presence-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 16px 14px;margin-bottom:18px}
body.holo .presence-panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.pp-head{display:flex;align-items:center;gap:14px;cursor:pointer;user-select:none}
.pp-title{font:800 15px 'Montserrat',sans-serif;white-space:nowrap}
.pp-spacer{flex:1}
.pp-sum{display:inline-flex;gap:12px;font:700 13px 'Cabin',sans-serif}
.pp-s{display:inline-flex;align-items:center;gap:5px}
.pp-s.on{color:var(--tint-success-fg,#22c55e)}.pp-s.idle{color:#f59e0b}.pp-s.off{color:#8b95ad}
.pp-asof{font-size:12px}
.pp-caret{color:var(--muted);font-size:12px;width:14px;text-align:center}
.pp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 16px;
  max-height:232px;overflow-y:auto;margin-top:12px;padding-right:4px}
.presence-panel.collapsed .pp-list{display:none}
.pp-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;min-width:0}
.pp-row:hover{background:rgba(127,127,127,.10)}
.pp-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18)}
.st-online .pp-dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.20)}
.st-away .pp-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.20)}
.pp-nm{font:600 13px 'Cabin',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.pp-meta{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.st-online .pp-meta{color:var(--tint-success-fg,#16a34a)}
.st-away .pp-meta{color:var(--tint-warning-fg,#d97706)}
.pp-list::-webkit-scrollbar{width:8px}
.pp-list::-webkit-scrollbar-thumb{background:rgba(127,127,127,.3);border-radius:8px}

/* ============================================================= *
 * Quotation order-lines — refined card + table (UI/UX polish)   *
 * ============================================================= */
.sol-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-1,#fff);
  padding:0 12px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
/* the header row's look is .ds-lines th (components.css). It is NOT pinned: the lines pane no
   longer scrolls on its own (above), so a sticky header would resolve against the page and
   slide under the pinned command bar — the column titles scroll away with the document, as
   the reference ERP's do. */
.sol-table input.p-price,.sol-table input.p-disc{text-align:right;font-variant-numeric:tabular-nums}
.sol-table td.sol-num,.sol-table th.sol-num{white-space:nowrap}
/* delete control: quiet by default, red affordance on hover */
.p-del{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted,#55555b);background:transparent;transition:background .12s,color .12s,transform .08s}
.sol-row:hover .p-del{color:var(--text,#2d2d2d)}
.p-del:hover{background:rgba(194,59,48,.12);color:var(--tint-danger-fg,#c23b30)}
.p-del:active{transform:scale(.92)}
/* the "Add a line" button is now .ds-lines + .sol-actions .sol-add, and the section/note
   row banner .ds-lines :is(.sol-section,.d-section) td (components.css) */

/* ---- Shared reusable tag chips (apps.core.tags / core/_tag_chips.html) ---- */
.tagchips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.tagchip{font-size:11px;font-weight:700;color:#fff;border-radius:11px;padding:1px 9px;line-height:1.7;
  white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tagchips.sm .tagchip{font-size:10px;padding:0 7px}

/* auto dark-mode contrast (generated) */
body.dark .sol-card{ background:#1b1e23; border-color:#31353d; }
body.dark .nav.disabled{ color:#b8c0cc; }
body.dark .label-invalid,body.dark .label-invalid>span{ color:#e48481; }
body.dark .erp-field .err{ color:#e18b84; }
body.dark .err-box{ color:#e18b84; }
body.dark .o-row .err{ color:#e18b84; }
body.dark .confirmed-tag{ color:#7fe6b7; }
body.dark .p-del{ color:#e18b84; }
body.dark .acc-sel.perm-none{ color:#eab87b; }
body.dark .acc-sel.perm-view{ color:#7ba7ea; }
body.dark .acc-sel.perm-edit{ color:#7fe6b7; }
body.dark .link.danger{ color:#ea837b; }
body.dark .cm-na-txt b{ color:#ea837b; }
body.dark .ct-x:hover{ color:#ea837b; }

/* ---- View-only mode (apps/core viewreadonly.js): greyed, locked write controls -- */
.view-ro-field{ opacity:.55; cursor:not-allowed !important; }
input.view-ro-field, select.view-ro-field, textarea.view-ro-field{
  background:var(--surface-2,#f3f4f6); color:var(--text-muted,#6b7280); border-color:var(--border,#e5e7eb); pointer-events:none; }
form.view-ro button.view-ro-field, .view-ro-field[type="submit"]{ filter:grayscale(1); pointer-events:none; }
.view-ro-banner{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:8px 14px;
  border:1px solid var(--tint-info-line,#bfdbfe); border-left:4px solid #3b82f6; border-radius:8px;
  background:var(--tint-info-bg,#eff6ff); color:var(--tint-info-fg,#1e40af); font-size:13px; font-weight:600; }
body.dark input.view-ro-field, body.dark select.view-ro-field, body.dark textarea.view-ro-field{
  background:#26282e; color:#9aa0ab; border-color:#3a3d45; }
body.dark .view-ro-banner{ background:#182236; border-color:#27406e; color:#9db8e8; }

/* ---- Recipient picker (static/js/recipients.js) --------------------------
   Any `<input data-recipients>` becomes chips + a type-ahead over the ERP's
   own people. Styled here rather than in settings.css because the widget is
   ERP-wide: a module that needs an address list marks its input and inherits
   the whole control. */
.rcp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:38px;width:100%;max-width:520px;
  border:1px solid var(--line,#e6e9ef);border-radius:9px;background:var(--surface-3,#fff);padding:5px 8px;cursor:text;
  transition:border-color .15s, box-shadow .15s}
.rcp:focus-within{border-color:#02c4c4;box-shadow:0 0 0 3px rgba(2,196,196,.14)}
.rcp.bad{border-color:#e23d3d;box-shadow:0 0 0 3px rgba(226,61,61,.14)}
.rcp-chips{display:contents}
.rcp-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 10px;
  border:1px solid var(--tint-accent-line,#d7e9ea);border-radius:980px;background:var(--surface-2,#eefafa);color:var(--tint-accent-fg,#12626a);
  font-size:12.5px;font-weight:600;line-height:1.5}
.rcp-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.rcp .rcp-chip.rcp-off{border-color:var(--tint-warning-line,#f3d18a);background:var(--tint-warning-bg,#fff8e8);color:var(--tint-warning-fg,#8a5a00)}
.rcp-x{border:0;background:transparent;color:var(--tint-accent-fg,#4e9aa1);cursor:pointer;font-size:11px;line-height:1;
  padding:3px 4px;border-radius:50%;font-family:inherit}
.rcp-x:hover{background:var(--tint-accent-bg,#d5f0f0);color:var(--tint-accent-fg,#0b4e55)}
.rcp-entry{flex:1 1 130px;min-width:130px;border:0!important;outline:0;background:transparent;
  font-size:13px;padding:4px 2px!important;color:inherit;box-shadow:none!important}
.rcp-menu{position:relative;z-index:5;max-width:520px;margin-top:4px;border:1px solid var(--line,#e6e9ef);
  border-radius:9px;background:var(--surface-3,#fff);box-shadow:0 10px 26px rgba(20,30,50,.12);overflow:hidden}
.rcp-opt{display:flex;flex-direction:column;gap:1px;padding:7px 11px;cursor:pointer;font-size:13px}
.rcp-opt b{font-weight:600;font-size:13px}
.rcp-opt-e{color:var(--text-muted,#8b97a8);font-size:11.5px}
.rcp-opt:hover,.rcp-opt.on{background:var(--surface-2,#f1fbfb)}
.rcp-err{margin-top:5px;font-size:12px;font-weight:600;color:var(--tint-danger-fg,#c62828)}
body.dark .rcp{background:#1a1d22;border-color:#31353d}
body.dark .rcp-chip{background:#123338;border-color:#1c4a51;color:#7fd4dc}
body.dark .rcp-x{color:#5fa8b0}
body.dark .rcp-x:hover{background:#1c4a51;color:#c8f0f4}
body.dark .rcp-menu{background:#1a1d22;border-color:#31353d}
body.dark .rcp-opt:hover,body.dark .rcp-opt.on{background:#22262d}
@media(max-width:767px){.rcp,.rcp-menu{max-width:100%}}

/* ---- the customer's REGISTERED name, beside the trading one (Eddie, 2026-08-30) ----
   Two customers may legitimately trade under one name — "Archrodon" is both
   الامريكيون and المستثمرين — so wherever a customer is searched, listed or picked,
   both are shown. One rule, app-wide: it is used by Sales, CRM and RFQ lists, and a
   fourth module should reuse it rather than invent a fourth grey.

   It is DATA, not a disabled control, so it keeps readable ink — a step lighter than
   the trading name above it because it is the secondary line, and never the grey that
   means "blocked" (CLAUDE.md rule 11). */
.q-rlegal{font-size:12px;color:var(--text-muted,#41535f);font-weight:600;line-height:1.3;margin-top:1px}
body.dark .q-rlegal{color:#c2ccd8}

/* ===== Re-pricing round-trip on the quotation (INTERNAL) =================
   The agent asks Purchasing for a better price on a quotation the customer
   already has; Purchasing re-prices and hands the same quotation back. Never
   printed, never emailed, never in the portal. Eddie, 2026-09-01. */
.rp-card{margin:0 2px 16px;padding:14px 18px;border:1px solid var(--line,#e6e9ef);
  border-radius:14px;background:var(--surface-1,#fff)}
.rp-card.is-open{border-left:5px solid #7048ad;background:rgba(112,72,173,.045)}
.rp-head{display:flex;align-items:flex-start;gap:10px}
.rp-ic{font-size:17px;line-height:1.2}
.rp-sub{font-size:11.5px;color:var(--muted,#7a8396);margin-top:2px}
.rp-reason{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink,#1d2733)}
.rp-target{margin-top:6px;font-size:12.5px}
.rp-answer{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rp-answer-acts{display:flex;gap:8px;flex-wrap:wrap}
.rp-hint{font-size:11.5px;color:var(--muted,#7a8396);line-height:1.45}
.rp-ask summary{display:inline-flex;cursor:pointer;list-style:none}
.rp-ask summary::-webkit-details-marker{display:none}
.rp-ask form{margin-top:10px;display:flex;flex-direction:column;gap:9px;max-width:620px}
.rp-ask label{display:flex;flex-direction:column;gap:4px;font:600 12.5px 'Cabin',sans-serif;
  color:var(--muted,#7a8396)}
.rp-ask-targets{display:flex;gap:12px;flex-wrap:wrap}
.rp-ask-targets label{flex:1;min-width:150px}
/* Purchasing changed a price after the quotation was made (sales/_price_updates.html) */
.pu-card{border-left:5px solid #e0a800;background:rgba(224,168,0,.05)}
.pu-card.is-focus{box-shadow:0 0 0 3px rgba(224,168,0,.35)}
.pu-table{width:100%;border-collapse:collapse;margin:10px 0 12px;font-size:13px}
.pu-table th{text-align:left;font:600 11.5px 'Cabin',sans-serif;color:var(--muted,#7a8396);padding:6px 8px;border-bottom:1px solid var(--line,#e6e9ef)}
.pu-table td{padding:7px 8px;border-bottom:1px solid var(--line2,var(--border,#eef2f7));color:var(--ink,#1d2733);vertical-align:top}
.pu-table .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pu-table .pu-tick{width:28px}
.pu-down{color:var(--tint-success-fg,#1d7a46)}.pu-up{color:var(--tint-danger-fg,#b3261e)}
.pu-delta{font-size:11px;font-weight:700;color:var(--ink,#1d2733)}
.pu-when{font-size:11.5px;color:var(--ink,#1d2733)}
.pu-change{margin:1px 0}.pu-what{display:inline-block;min-width:78px;font-weight:600;color:var(--ink,#1d2733)}
.pu-old{color:var(--ink,#1d2733)}
.pu-now{font-size:11.5px;margin-top:3px;color:var(--ink,#1d2733)}
.pu-kind{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:8px;margin-right:4px;background:rgba(29,122,70,.12);color:var(--tint-success-fg,#1d7a46)}
.pu-kind.is-na{background:rgba(179,38,30,.12);color:var(--tint-danger-fg,#b3261e)}
body.dark .rp-card{background:#1b1e23;border-color:#31353d}
body.dark .pu-card{background:rgba(224,168,0,.09)}
body.dark .pu-table td{color:#e8eaee}
body.dark .rp-card.is-open{background:rgba(112,72,173,.12)}
body.dark .rp-reason{color:#e8eaee}

/* Re-pricing: the quiet ask lives among the quotation's own actions, and the
   line pickers say WHICH item the customer is objecting to (Eddie, 2026-09-02).
   The card above is only for state — a full-width card holding one button
   outranked the document and pushed it down the page. The ask itself is a .ds-dialog
   (sales/_reprice_btn.html, record pages wave 4). */
.rp-inline{display:inline-block}
.rp-inline summary{display:inline-flex;cursor:pointer;list-style:none}
.rp-inline summary::-webkit-details-marker{display:none}
.rp-lines{display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:10px;
  background:var(--bg,#f7f9fb);border:1px solid var(--line,#e6e9ef)}
.rp-lines>b{font:800 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-text,#017878)}
.rp-lines-hint{font-size:11.5px;color:var(--muted,#7a8396);line-height:1.4;margin-bottom:3px}
.rp-line{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:8px;
  font:500 12.5px 'Cabin',sans-serif!important;color:var(--ink,#1d2733)!important;cursor:pointer}
.rp-line input{margin-top:2px;flex:0 0 auto}
.rp-line i{font-style:normal;color:var(--muted,#7a8396)}
.rp-scope{margin-top:7px;font-size:12.5px;color:var(--ink,#1d2733)}
.rp-banner-scope{font-size:12px}
body.dark .rp-lines{background:#22262c;border-color:#31353d}
body.dark .rp-line{color:#e8eaee!important}

/* Margin under the quotation total — INTERNAL (Eddie, 2026-09-02). Set apart
   from the customer-facing figures above it so nobody reads it as part of the
   offer, and coloured only when it is NEGATIVE, which is the one case a manager
   must not scroll past. */
.tot-row.margin{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,#e6e9ef)}
.tot-row.margin b{font-weight:700}
/* The percent is the other HALF of the margin, and the note says the figure is
   incomplete — both are data the reader must act on, so both take the normal ink.
   Grey here means blocked (Eddie's rule); a muted percent and a whisper-grey
   caveat were the two most washed-out things on a page full of money. */
.tot-row.margin i{font-style:normal;color:var(--ink,#2d2d2d);font-weight:600;margin-left:4px}
.tot-row.margin.neg b,.tot-row.margin.neg i{color:var(--tint-danger-fg,#c0392b)}
.tot-row.margin-note{font-size:11.5px;color:var(--ink,#2d2d2d);justify-content:flex-end}
.vd-tr.margin{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,#e6e9ef)}
/* Each line's Margin cell (Eddie, 2026-09-13) — the Margin line's rules: every figure
   in the normal ink, red only when the line sells under cost. */
/* The cell WRAPS: the line card shares the page with the chatter (~716px), so
   amount, percent and cost stack when the column is narrow — each figure stays whole
   (.sol-nw), nothing runs under the next column (measured by
   tools/shots/capture_status_margin.py). The cell is deliberately NOT `td.r`: the
   quotation page's own `.sol-table.view td.r{white-space:nowrap}` would win and push
   the percent under the Availability chip, so it right-aligns here instead. */
.sol-mgn{white-space:normal;line-height:1.3;overflow-wrap:normal;text-align:right}
.sol-nw{white-space:nowrap}
.sol-mgn-amt{font-weight:700;color:var(--ink,#2d2d2d)}
.sol-mgn-pct{font-weight:600;color:var(--ink,#2d2d2d);white-space:nowrap;display:inline-block}
.sol-mgn-amt.neg,.sol-mgn-pct.neg{color:var(--tint-danger-fg,#c0392b)}
.sol-mgn-cost{font-size:11px;color:var(--ink,#2d2d2d);margin-top:2px}
.sol-mgn-none{font-size:11.5px;font-style:italic;color:var(--ink,#2d2d2d)}
body.dark .tot-row.margin,body.dark .vd-tr.margin{border-top-color:#31353d}
/* "provisional" — the margin rests on awarded offers, not yet on a placed P.O. */
.tot-row.margin .margin-prov{font-style:normal;font:700 9.5px 'Montserrat',sans-serif;
  text-transform:uppercase;letter-spacing:.05em;color:var(--tint-warning-fg,#a05a00);background:rgba(245,158,11,.14);
  border-radius:999px;padding:1px 6px;margin-left:6px}
body.dark .tot-row.margin .margin-prov{color:#e0b071;background:rgba(224,176,113,.16)}

/* Two independent business-role ticks on the contact form — Customer and Vendor.
   Eddie, 2026-09-02: "sometimes we have someone saved as a vendor but we sell to
   them as well", so they stack rather than being a single either/or control. */
.ct-role-hint{display:block;margin-top:4px;font-size:11.5px;color:var(--ink)}

/* "Won · nothing ordered" on the Purchasing dashboard — work waiting outside the
   module. Amber because it is a backlog to clear, not an error. */
.po-kpi-warn dd a{color:var(--tint-warning-fg,#a05a00);text-decoration:none;border-bottom:1px dashed rgba(160,90,0,.45)}
.po-kpi-warn dd a:hover{border-bottom-style:solid}

/* Contextual help "?" (templates/core/_helplink.html). Normal ink on a soft chip:
   it is a live control, and grey in this ERP means blocked. Its own ground, so its own ink. */
.helpq { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; border:1px solid var(--line,#dcdfe3); background:var(--surface-1,#fff); color:var(--text,#2d2d2d);
  font:600 12px/1 system-ui,sans-serif; text-decoration:none; vertical-align:middle; flex:none; }
.helpq:hover { background:var(--surface-2,#eef6f4); border-color:#9fc9bf; }
body.dark .helpq { background:#1f2a2e; border-color:#33454b; }
body.dark .helpq:hover { background:#27373c; border-color:#4b6b72; }

/* ===== Field changes — before → after (templates/core/_fieldchanges.html) =====
   One vocabulary for every chatter and history panel (apps/core/recordchanges.py).
   Values are dark ink: grey means BLOCKED (CLAUDE.md rule 11), and a value the reader
   may see is a value they may use. The old value is struck, the new one bold. */
.fc-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
.fc-row{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:baseline;font-size:12.5px;line-height:1.45;color:var(--text,#1d2733)}
.fc-fld{font-weight:700;color:var(--text,#1d2733)}
.fc-fld::after{content:':'}
.fc-old{color:var(--tint-danger-fg,#a32d2d);text-decoration:line-through;word-break:break-word}
.fc-arr{color:var(--text-muted,#65758a);font-weight:700}
.fc-new{color:var(--tint-accent-fg,#0f6e56);font-weight:700;word-break:break-word}
.fc-row.is-removed .fc-new{color:var(--tint-danger-fg,#a32d2d)}
.fc-hid{font-style:italic;color:var(--text-muted,#65758a)}
.fc-fold{margin-top:2px}
.fc-fold>summary{cursor:pointer;list-style:none;font:700 12px 'Cabin',sans-serif;color:var(--tint-accent-fg,#02747f);padding:2px 0}
.fc-fold>summary::-webkit-details-marker{display:none}
.fc-fold>summary::before{content:'▸ '}
.fc-fold[open]>summary::before{content:'▾ '}
.fc-fold[open]>summary{margin-bottom:3px}
body.dark .fc-row,body.dark .fc-fld{color:#e7edf3}
body.dark .fc-old,body.dark .fc-row.is-removed .fc-new{color:#de8787}
body.dark .fc-new{color:#7beace}
body.dark .fc-arr,body.dark .fc-hid{color:#9aa7b4}

/* ===== Mail attachment states (templates/mailer/_attfiles.html) =====
   Three screens list the files of an e-mail and each brings its own chip class
   (.rd-att / .ol-att / .msg-att); these are the STATES layered on top, defined once so
   the reading pane, the open message and the sent-history page cannot disagree.
   Grey means blocked (CLAUDE.md rule 11) and nothing else does: a file the retention
   removed, or one the Security Center stopped. A file with a warning still opens, so it
   keeps normal ink and carries its reason beside it.
   The colours are `!important` on purpose: all three host screens define their chip class
   in a page-local <style> that the browser reads AFTER this file, and at equal specificity
   the later rule wins — so a blocked chip would have rendered in the same inviting blue as
   an openable one, which is exactly the state grey exists to signal. */
/* The Security Center's word about the E-MAIL itself (templates/mailer/_security_notice.html,
   2026-09-18). Not decorative grey: this is a warning a reader must not miss, and it is the
   only red in the reading pane. */
.ol-secnote{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:10px 13px;
  border-radius:9px;font-size:13px;line-height:1.5;border:1px solid}
.ol-secnote.danger{background:var(--tint-danger-bg,#fdecea);border-color:var(--tint-danger-line,#f3b5ae);color:var(--tint-danger-fg,#8a1c12)}
.ol-secnote.warning{background:var(--tint-warning-bg,#fff6e5);border-color:var(--tint-warning-line,#f3d9a4);color:var(--tint-warning-fg,#7a5100)}
.ol-secnote-icon{font-size:15px;line-height:1.3}
.ol-unsafe{color:var(--tint-danger-fg,#c0392b)}
body.dark .ol-secnote.danger{background:#3a201d;border-color:#7a3a32;color:#f3b5ae}
body.dark .ol-secnote.warning{background:#3a2f1a;border-color:#7a6330;color:#f3d9a4}
.att-held{color:var(--qblocked,var(--text-disabled,#9aa7b4)) !important;background:var(--surface-2,#f4f6f8) !important;
  border:1px solid var(--line,#e6eaf0) !important;
  border-radius:8px;padding:5px 11px;font-size:12px;cursor:not-allowed;text-decoration:none}
.att-warn{border-color:#e3b341 !important;background:var(--tint-warning-bg,#fdf6e3) !important;color:var(--tint-warning-fg,#7a4f01) !important}
.att-note{font-size:11.5px;color:var(--tint-warning-fg,#7a4f01);align-self:center}
.ml-imgheld{border:1px solid #e3b341;background:var(--tint-warning-bg,#fdf6e3);color:var(--tint-warning-fg,#7a4f01);border-radius:8px;
  padding:7px 11px;margin-bottom:10px;font-size:12.5px}
body.dark .att-held{background:#2a2928 !important;border-color:#3a3836 !important}
body.dark .att-warn{background:#3a2f12 !important;border-color:#7a5c14 !important;color:#f0cf7e !important}
body.dark .att-note{color:#f0cf7e}
body.dark .ml-imgheld{background:#3a2f12;border-color:#7a5c14;color:#f0cf7e}