: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:#7a8396;
  --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:#2f6fd6;    /* Sent / quotation / in-progress */
  --st-won-bg:#e3f7ee;    --st-won-fg:#1f9d63;     /* Won / confirmed / active / done */
  --st-lost-bg:#fdecec;   --st-lost-fg:#c23b30;    /* Lost / failed */
  --st-cancel-bg:#f2eee9; --st-cancel-fg:#8a7a63;  /* Cancelled */
  --st-warn-bg:#fff4e0;   --st-warn-fg:#a9741b;    /* Pending / overdue / attention */
}
*{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 modal (avatar menu) */
.aa-overlay{position:fixed;inset:0;z-index:6000;background:rgba(5,8,16,.55);display:flex;align-items:flex-start;justify-content:center;padding:80px 16px 16px;backdrop-filter:blur(3px)}
.aa-overlay[hidden]{display:none}
.aa-box{width:460px;max-width:96vw;max-height:70vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
body.holo .aa-box{background:#141f33;border-color:rgba(255,255,255,.14)}
.aa-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font:700 15px 'Montserrat',sans-serif}
.aa-x{background:none;border:0;color:var(--muted);font-size:23px;line-height:1;cursor:pointer}
.aa-x:hover{color:var(--ink)}
.aa-search{margin:12px 16px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:var(--panel);color:var(--ink)}
body.holo .aa-search{background:rgba(255,255,255,.06)}
.aa-list{overflow-y:auto;padding:0 8px 10px}
.aa-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:9px 10px;border-radius:10px;color:var(--ink)}
.aa-row:hover{background:rgba(45,212,191,.12)}
.aa-av{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px 'Montserrat',sans-serif}
.aa-id{display:flex;flex-direction:column;min-width:0}
.aa-id b{font:600 14px 'Cabin',sans-serif}
.aa-id span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--dark);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:#fff}
.nav.disabled{color:#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}
.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}}
/* Odoo-style notifications + invalid-field validation */
.qn-wrap{position:fixed;top:70px;right:16px;z-index:7000;display:flex;flex-direction:column;gap:10px;max-width:380px}
.qn{position:relative;background:#fff;color:#374151;border-radius:8px;border-left:4px solid #d9534f;box-shadow:0 12px 34px rgba(0,0,0,.22);padding:14px 36px 14px 16px;opacity:0;transform:translateX(22px);transition:opacity .2s,transform .2s}
.qn.in{opacity:1;transform:none}
.qn-success{border-left-color:#22c55e}.qn-info{border-left-color:#2563eb}.qn-warning{border-left-color:#f59e0b}
.qn-title{font:800 14px 'Cabin',sans-serif;color:#b02a37}
.qn-success .qn-title{color:#15803d}.qn-info .qn-title{color:#1d4ed8}.qn-warning .qn-title{color:#b45309}
.qn-list{margin:7px 0 0;padding-left:18px;font-size:13.5px;color:#374151}
.qn-list li{margin:2px 0}
.qn-msg{font-size:13.5px;margin-top:3px;color:#374151}
.qn-x{position:absolute;top:7px;right:9px;background:none;border:0;font-size:19px;color:#9ca3af;cursor:pointer;line-height:1}
.qn-x:hover{color:#374151}
.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:#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. */
.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:#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:#c23b30;font-size:11.5px}
.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:#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:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.o-stage{appearance:none;border:0;background:#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:#f4f4f5}
.o-stage.done{color:var(--ink)}
.o-stage.active{background:var(--grad);color:#fff}
.o-sheet{background:#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:#c7c7cc;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:#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);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%}
.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)}
/* Power Dialer tab — high-contrast amber pill so it stands out in the toolbar */
.tb-menu a.pd-tab{background:#f59e0b;color:#fff !important;font-weight:800;box-shadow:0 2px 8px rgba(245,158,11,.4)}
.tb-menu a.pd-tab:hover{background:#ea8a06;color:#fff !important}
.tb-menu a.pd-tab.on{background:#ea8a06;color:#fff !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)}
/* 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:#1f9d63;font-weight:700;font-size:13px}
.rate-note{font:600 13px 'Cabin',sans-serif;color:var(--accent)}
.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}
.sol-table{width:100%;border-collapse:collapse}
.sol-table th{font:700 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:2px solid var(--line)}
.sol-table th.r,.sol-table td.r{text-align:right}
.sol-table td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.sol-table .sol-num{width:88px}
.sol-table .sol-prod{width:190px}
.sol-table .sol-part{width:130px}
.sol-table .sol-x{width:30px;text-align:center}
.sol-table .erp-input{padding:7px 8px;font-size:13px}
.sol-table.view td{font-size:13px;color:var(--ink)}
.sol-table .p-sub{font-weight:700;color:var(--ink)}
.p-del{border:0;background:transparent;color:#c23b30;font-size:15px;cursor:pointer;line-height:1}
.sol-add{margin-top:10px;border:1px dashed var(--accent);background:rgba(2,196,196,.06);color:var(--accent);font:700 13px 'Cabin',sans-serif;padding:8px 14px;border-radius:9px;cursor:pointer}
.sol-add:hover{background:rgba(2,196,196,.12)}
.sol-totals{margin:18px 0 6px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.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)}
.tot-row.grand{border-top:2px solid var(--line);padding-top:8px;font-size:17px}
.tot-row.grand b{color:var(--accent);font-family:'Montserrat',sans-serif;font-weight:800}
.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:#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-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}
.qf-logo{height:30px;display:block}
.qf-banner-l{display:flex;align-items:center;gap:14px}
.qf-co-name{font:800 14px 'Montserrat',sans-serif;color:#fff}
.qf-co-addr{font:500 11.5px 'Cabin',sans-serif;color:rgba(255,255,255,.88);margin-top:2px;max-width:240px}
.qf-title{font:800 30px 'Montserrat',sans-serif;color:#fff;letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.18);position:relative;z-index:1}
.qf-banner-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:relative;z-index:1}
.qf-ref{font:800 16px 'Montserrat',sans-serif;color:#fff}
.qf-arrow{color:#fff}
.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:#f6f6f7}
.sol-table input.p-vat[readonly]{background:#f6f6f7;color:var(--muted)}
/* 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}
/* fit-to-screen quote form */
.qf-fit .qf-card{display:flex;flex-direction:column}
.qf-fit .qf-pane[data-pane=lines] .sol-wrap{max-height:46vh;overflow:auto}
/* 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;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;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-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(--dark);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}}
.qf-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--grad);border-radius:18px 18px 0 0;padding:20px 26px;color:#fff;box-shadow:0 12px 28px rgba(2,196,196,.26);position:relative;overflow:hidden}
.qf-banner::after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.qf-kicker{font:800 11px 'Montserrat',sans-serif;letter-spacing:3px;opacity:.92}
.qf-number{font:800 28px 'Montserrat',sans-serif;line-height:1.1;margin-top:2px}
.qf-ribbon{display:inline-flex;background:rgba(255,255,255,.18);border-radius:980px;padding:4px;gap:2px;position:relative;z-index:1}
.qfs{padding:7px 16px;border-radius:980px;font:700 12.5px 'Cabin',sans-serif;color:rgba(255,255,255,.9)}
.qfs.active{background:#fff;color:var(--accent)}
.qf-card{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;padding:24px 26px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.qf-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
/* 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:#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:#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:#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:#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:#fef2f2;border:1px solid #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}
.qf-permitwarn-h{font:800 12.5px 'Montserrat',sans-serif;color:#dc2626}
.qf-permitwarn-n{font:600 13px 'Cabin',sans-serif;color:#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. Same red as the permit warning (it is the same class
   of internal alert), but its second line wraps onto its own row because it says
   what the agent can and cannot do about it. */
.qf-fzwarn .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:700 11.5px 'Montserrat',sans-serif;color:#dc2626}
.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}
body.dark .tot-fz-t{color:#fca5a5}
.qf-grouph{font:800 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.qf-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin-bottom:11px}
.qf-row label{font:600 12.5px 'Cabin',sans-serif;color:var(--muted)}
.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)}
.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-add.ghost{border:1px dashed var(--line);background:#fff;color:var(--muted)}
.sol-add.ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(2,196,196,.05)}
.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:#fafafb}
.qf-bottom{display:grid;grid-template-columns:1fr 330px;gap:24px;margin-top:26px;align-items:start}
.qf-terms .erp-input{width:100%}
.qf-totals{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.qf-totals .tot-row{display:flex;justify-content:space-between;font:600 14px 'Cabin',sans-serif;color:var(--muted);margin-bottom:8px}
.qf-totals .tot-row[hidden]{display:none}   /* let the [hidden] attribute actually hide the discount rows */
/* 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);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)}
/* "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:#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}
.qf-totals .tot-row b{color:var(--ink)}
.qf-totals .tot-row b{font-weight:400}
.sol-totals .tot-row:not(.grand) b{font-weight:400}
.qf-totals .tot-row.disc b{color:#1f9d63;font-weight:400}
.qf-totals .tot-ship{align-items:center}
.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:#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)}
/* 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:#fff;min-width:140px}
.acc-sel:focus{outline:none;border-color:var(--accent)}
.acc-sel.acc-none{color:#9aa1ab}
.acc-sel.acc-own{color:#b4690e}
.acc-sel.acc-all{color:#1f6feb}
.acc-sel.acc-admin{color:#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);background:var(--card,#fff);border-color:var(--line);border-bottom:1px solid var(--card,#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,#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:#b4690e}.acc-sel.perm-view{color:#1f6feb}.acc-sel.perm-edit{color:#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,#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,#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,#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);background:rgba(2,196,196,.12);border-radius:999px;padding:2px 9px}
.mng-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.mng-crumb{font:700 16px 'Montserrat',sans-serif;color:var(--ink)}
.mng-crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.mng-crumb a:hover{color:var(--accent)}
.mng-crumb span{color:var(--muted);font-weight:400;margin:0 2px}
.mng-search input{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;min-width:200px}
.mng-form{display:flex;flex-direction:column;gap:14px;max-width:700px}
.mng-row{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:start}
.mng-row>label{font-weight:600;color:var(--muted);padding-top:8px}
.mng-input{min-width:0}
.mng-input input,.mng-input select,.mng-input textarea{width:100%;max-width:400px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-family:'Cabin',sans-serif;background:#fff;color:var(--ink)}
.mng-input .gs-wrap{max-width:400px}
.mng-check .mng-input{padding-top:6px}
.mng-check input{width:auto}
.mng-help{font-size:12px;margin-top:4px}
.mng-err{color:#e2574c;font-size:12px;margin-top:4px}
.mng-archived td{opacity:.5}
.mng-actions{display:flex;gap:12px;align-items:center;white-space:nowrap}
.mng-actions form{display:inline}
.link.danger{color:#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:#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)}
.call-kpis .ck.done b{color:#16a34a}
.calls-tbl a{color:var(--accent);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-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:#64748b;background:rgba(100,116,139,.14)}
.call-badge.s-open{color:#2563eb;background:rgba(37,99,235,.14)}
.call-badge.s-interested{color:#16a34a;background:rgba(22,163,74,.14)}
.call-badge.s-callback{color:#d97706;background:rgba(217,119,6,.15)}
.call-badge.s-no_answer{color:#e2574c;background:rgba(226,87,76,.14)}
.call-badge.s-won{color:#15803d;background:rgba(21,128,61,.16)}
.call-badge.s-lost{color:#b91c1c;background:rgba(185,28,28,.14)}
.call-badge.s-not_interested{color:#78716c;background:rgba(120,113,108,.16)}
.call-badge.s-closed{color:#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:#64748b;background:rgba(100,116,139,.14)}
.call-badge.s-quotation{color:#2563eb;background:rgba(37,99,235,.14)}
.call-badge.s-cancelled{color:#78716c;background:rgba(120,113,108,.16)}
.call-badge.s-duplicated{color:#7c3aed;background:rgba(124,58,237,.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,#02c4c4);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,#02c4c4)}
.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:#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-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);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-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:#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)}
.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)}
/* Contacts — Odoo-style child contacts */
.ct-children a{color:var(--accent);text-decoration:none}
.ct-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.ct-x:hover{color:#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)}
.ct-vendor-choice small{display:block;margin-top:1px;color:var(--muted);font-size:11px;line-height:1.35}
.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);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-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-decoration:none}
body.holo .cfg-tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.holo .cfg-name,body.holo .mng-crumb{color:#eaeefb}
body.holo .mng-search input,body.holo .mng-input input,body.holo .mng-input select,body.holo .mng-input textarea{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#eaeefb}
body.holo .mng-input input:focus,body.holo .mng-search input:focus{outline:none;border-color:#02c4c4;box-shadow:0 0 0 3px rgba(2,196,196,.18)}
/* 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:#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:#fdf3e7;border:1px solid #e7b765;color:#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:#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:#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:#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:#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:#9a6b1e;border-radius:10px;padding:12px 14px;font-size:13.5px}
body.holo .lf-noapi{color:#f3d4a0}
.lf-noapi a{color:var(--accent);font-weight:700}
.lf-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent);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)}
.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)}
.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);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:#fff;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);font-weight:700;background:rgba(2,196,196,.10);border-radius:4px;padding:0 3px}
.dm-edited{color:var(--muted);font-size:11px}
.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)}
.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}
.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:#fff!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:#fff;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,#0e9f8e);background:rgba(2,196,196,.12);border-radius:980px;padding:1px 8px;white-space:nowrap}
.dm-emoji-pop{position:fixed;background:var(--panel,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.18);padding:6px;z-index:130;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-pick{background:none;border:0;font-size:19px;padding:5px;border-radius:8px;cursor:pointer}
.dm-emoji-pick:hover{background:var(--bg)}
/* 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-panel-h{display:flex;align-items:center;justify-content:space-between;font:800 11px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 2px}
.dm-x{background:none;border:0;cursor:pointer;color:var(--muted)}
.dm-member{display:flex;align-items:center;gap:9px;padding:6px 4px;font-size:13.5px}
.dm-addsel{width:100%;border:1px solid var(--line);border-radius:9px;padding:6px}
.dm-addform{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
/* 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-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dm-browse-head h2{margin:0}
.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-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card,#fff)}
.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,#fff);cursor:pointer;text-align:left}
.dm-person-btn:hover{border-color:var(--accent)}
.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,body.holo .dm-member{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-chan-card,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{width:30px;height:30px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px 'Montserrat',sans-serif;overflow:hidden;flex:0 0 30px}
.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)}
.um-pop{position:absolute;right:0;top:calc(100% + 8px);width:248px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.24);padding:8px;z-index:120}
.um-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.um-av.big{width:42px;height:42px;flex:0 0 42px;font-size:15px}
.um-fn{font:700 14px 'Montserrat',sans-serif;color:var(--ink)}
.um-em{font:500 12px 'Cabin',sans-serif;color:var(--muted);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:9px;font:600 13.5px 'Cabin',sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left}
.um-item:hover{background:var(--bg)}
.um-ic{width:18px;text-align:center;opacity:.85}
.um-switch{margin-left:auto;width:34px;height:20px;border-radius:980px;background:var(--line);position:relative;transition:.15s;flex:0 0 34px}
.um-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.um-switch.on{background:var(--accent)}
.um-switch.on::after{left:16px}
.um-sep{height:1px;background:var(--line);margin:6px 4px}
.um-out{color:#c23b30}
.um-logout{margin:0}
/* profile page */
.pf-top{display:flex;align-items:center;gap:18px}
.pf-avatar{width:84px;height:84px;border-radius:50%;background:var(--dark);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);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)}
.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:#fff6e9;border-color:#f3d18a;color:#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:#1f9d63}
.trend.down{background:rgba(194,59,48,.14);color:#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:#fff;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 .um-pop,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,body.holo .um-name{color:#cdd3e6}
body.holo .topbar3 .btn-ghost,body.holo .launch-top .btn-ghost,body.holo .um-trigger,body.holo .btn-ghost{color:#cdd3e6;border-color:rgba(255,255,255,.2)}
body.holo .um-caret{color:#aab2cc}
/* 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:#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:#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);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 .qf-co-addr{color:rgba(255,255,255,.85)}
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)}
body.holo .um-item{color:#eaeefb}
body.holo .um-item:hover{background:rgba(255,255,255,.06)}
/* 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);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 ---- */
body.dark{--bg:#16181d;--panel:#212429;--ink:#e8e9ec;--muted:#9aa0ab;--line:#31353d;background:#16181d;color:var(--ink)}
body.dark .card,body.dark .o-sheet,body.dark .qf-card,body.dark .set-card,body.dark .um-pop,body.dark .cmdk-panel,body.dark .setx,body.dark .tablewrap,body.dark .o-statusbar .o-stages,body.dark .qf-totals{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 .mng-input input,body.dark .mng-input select,body.dark .mng-input textarea,
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). */
body.dark .um-switch::after{background:#e8e9ec}
body.dark ::placeholder{color:#7d8493}
.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)}
.tot-grand{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:12px 14px;border-radius:11px;background:var(--grad);color:#fff;font:700 15px 'Cabin',sans-serif}
.tot-grand b{font:800 18px 'Montserrat',sans-serif}
@media(max-width:760px){.qf-cols{grid-template-columns:1fr;gap:18px}.qf-bottom{grid-template-columns:1fr}.qf-row{grid-template-columns:1fr}}
.sol-table .d-section td{font:800 13px 'Montserrat',sans-serif;color:var(--dark);background:rgba(2,196,196,.06);border-bottom:1px solid var(--line)}
.sol-table .d-note td{font-style:italic;color:var(--muted)}
/* product type-to-search combo + wrapping description */
.sol-table.grow td{vertical-align:top}
.sol-table .sol-desc{min-width:220px}
.p-combo{position:relative}
.p-drop{position:absolute;left:0;right:0;top:100%;margin-top:3px;background:#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)}
/* 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)}
/* 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:#9a6a00;background:#fff7e6;border:1px solid #f6d98a}
.cust-drop .p-foreign:hover,.rq-opt.rq-foreign:hover{background:#fff7e6;color:#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}
.card-ico{font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#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:#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:#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:#fdeef0;border:1px solid #e2574c;color:#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-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 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:#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:#f3fbfb}
.tag{font-size:10px;background:#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:#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)}
.ct-exp.open{color:var(--accent)}
.ct-exp-sp{display:inline-block;width:18px}
.ct-count{font-size:10px;background:rgba(2,196,196,.12);color:var(--accent);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-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)}
.ct-stat-chip.ref{background:rgba(224,163,47,.12);border-color:rgba(224,163,47,.34)}
.ct-stat-chip.ref b{color:#b9831f}
body.holo .ct-stat-chip.ref b{color:#f0c361}
.ct-stat-chip.none{background:transparent;color:var(--muted)}
.ct-stat-chip.none b{color:var(--muted)}
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)}
.ct-fb-x{margin-left:auto;text-decoration:none;color:var(--accent);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:#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:#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:#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:#fff;border:1px solid #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:#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:#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 ====================================== */
.hp-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.hp-modal[hidden]{display:none}
.hp-modal-box{background:#fff;border-radius:2px;padding:24px;width:min(440px,92vw);box-shadow:0 30px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--hp-blue)}
.hp-modal-h{display:flex;align-items:center;justify-content:space-between;font:700 17px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#000}

/* ============================================================================
   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}
body:has(.hp-app) .topbar3 .dmsys-trigger{color:#fff}
/* HP pages keep the co-branded blue gradient + white text, but use the SAME
   top-bar layout as every other module (logo left, search centre, nav + icons
   right). The previous `order:` overrides reordered some items but left
   .tb-right unset (order 0), which pushed the icons/user to the far left —
   making the HP bar inconsistent with the rest of the app. Removed. */
.hp-topnav{display:flex;align-items:center;gap:20px}
.hp-topnav-chip{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.20)}
.hp-topnav-chip img{height:24px;width:auto;display:block}
.hp-topnav a{position:relative;color:#fff;text-decoration:none;font:600 14px 'Helvetica Neue',Helvetica,Arial,sans-serif;white-space:nowrap;padding:4px 0;text-shadow:0 1px 2px rgba(0,0,0,.20)}
.hp-topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#fff;transform:scaleX(0);transition:transform .14s}
.hp-topnav a:hover::after,.hp-topnav a.on::after{transform:scaleX(1)}
.hp-topnav a.on{font-weight:700}
@media(max-width:1100px){.hp-topnav{gap:13px}.hp-topnav a{font-size:13px}}
@media(max-width:860px){.hp-topnav-chip{display:none}.hp-topnav{gap:10px}}
.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:#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);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(--plum);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:#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:#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:#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(--dark);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:#fff;font-weight:700;font-family:'Cabin'}
.btn-mini.pri{background:var(--grad);color:#fff;border:0}
.btn-mini.ghost{color:#c23b30;border-color:#e8b6b0}
.btn-mini.ghost:hover{background:#fdeef0}
.badge-inst{font-size:11.5px;color:var(--good);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-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:#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)}
.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)}
.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:#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-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:#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);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-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:#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:#fff}
.setx-item.on{background:var(--grad);color:#fff}
.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);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}
.ost-btn-save{background:#714b67;color:#fff;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)}
.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%}}

/* ---- Messaging systray (app-wide notification menu, like Odoo) ---- */
.dmsys{position:relative;z-index:120}
.dmsys-trigger{list-style:none;cursor:pointer;position:relative;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid transparent;transition:background .15s,border-color .15s}
.dmsys-trigger::-webkit-details-marker{display:none}
.dmsys-trigger svg{width:21px;height:21px}
.dmsys-trigger:hover{background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.35)}
.dmsys.has .dmsys-trigger{color:var(--accent)}
.dmsys-badge{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ef4444;color:#fff;font:700 10.5px 'Montserrat',sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--panel)}
.dmsys-badge[hidden]{display:none}

/* 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:#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}
.dmsys[open] .dmsys-trigger{background:rgba(45,212,191,.14);border-color:rgba(45,212,191,.4)}
.dmsys-pop{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:88vw;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;z-index:200}
body.holo .dmsys-pop{background:rgba(20,30,46,.92);border-color:rgba(255,255,255,.16);backdrop-filter:blur(16px)}
.dmsys-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font:800 13px 'Montserrat',sans-serif}
.dmsys-tools{display:flex;align-items:center;gap:12px}
.dmsys-mute{background:none;border:0;cursor:pointer;font-size:15px;line-height:1;padding:0}
.dmsys-open{color:var(--accent);text-decoration:none;font:700 12px 'Cabin',sans-serif}
.dmsys-list{max-height:60vh;overflow-y:auto}
.dmsys-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px}
.dmsys-item{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .12s}
.dmsys-item:last-child{border-bottom:0}
.dmsys-item:hover{background:rgba(45,212,191,.10)}
.dmsys-av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px 'Montserrat',sans-serif;overflow:hidden}
.dmsys-av img{width:100%;height:100%;object-fit:cover}
.dmsys-body{flex:1;min-width:0}
.dmsys-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dmsys-title{font:700 13.5px 'Cabin',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmsys-when{flex:0 0 auto;color:var(--muted);font-size:11px}
.dmsys-prev{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmsys-prev b{color:var(--ink);font-weight:700}
.dmsys-n{flex:0 0 auto;align-self:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#04211d;font:800 10.5px 'Montserrat',sans-serif;display:flex;align-items:center;justify-content:center}

/* ---- 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:#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:#16a34a}
.st-away .pp-meta{color:#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:#fff;
  padding:0 12px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.sol-table thead th{
  background:#f7f8fa !important;
  padding:11px 10px;
  color:#7b8494;
  border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.05em;
}
/* Sticky header only where the list actually scrolls (the editable lines pane).
   top MUST stay 0: .sol-wrap is itself the scroll container (max-height:46vh;
   overflow:auto, above), so sticky resolves against the CARD, not the viewport — the
   header can never reach the pinned command bar and needs no clearance for it. A
   viewport-sized offset here (it once tracked the command bar's height) pushed the
   titles ~60px down inside the card at rest, leaving a blank strip on top and burying
   the first line's inputs under the header band. */
.qf-pane[data-pane=lines] .sol-table thead th{position:sticky;top:0;z-index:3}
.sol-table thead th:first-child{border-top-left-radius:10px}
.sol-table thead th:last-child{border-top-right-radius:10px}
.sol-table td{padding:9px 10px;border-bottom:1px solid #eef0f4}
.sol-table tbody tr{transition:background .12s ease}
.sol-table tbody tr:hover{background:rgba(2,196,196,.04)}
.sol-table tbody tr:last-child td{border-bottom:0}
.sol-table .erp-input{border-radius:8px !important;transition:border-color .12s,box-shadow .12s}
.sol-table .erp-input:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(2,196,196,.15) !important}
.sol-table input.p-qty{text-align:center}
.sol-table input.p-price,.sol-table input.p-disc{text-align:right;font-variant-numeric:tabular-nums}
.sol-table .p-sub{font-weight:800;color:var(--ink);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:#c2c8d2;background:transparent;transition:background .12s,color .12s,transform .08s}
.sol-row:hover .p-del{color:#9aa1ad}
.p-del:hover{background:rgba(194,59,48,.12);color:#c23b30}
.p-del:active{transform:scale(.92)}
/* action buttons under the table */
.sol-actions{margin-top:16px}
.sol-add{border-radius:10px;transition:transform .08s ease,background .12s,border-color .12s,box-shadow .12s}
.sol-add:hover{box-shadow:0 2px 8px rgba(2,196,196,.18)}
.sol-add.ghost:hover{box-shadow:none}
.sol-add:active{transform:translateY(1px)}
/* section / note rows read as soft banners inside the card */
.sol-table .d-section td,.sol-table .sol-section td{background:rgba(2,196,196,.06)}

/* ---- 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 .qn-title{ color:#e2838d; }
body.dark .qn-success .qn-title{ color:#7ce9a5; }
body.dark .qn-info .qn-title{ color:#7b98ea; }
body.dark .qn-warning .qn-title{ color:#eaab7b; }
body.dark .qn-list{ color:#e8e9ec; }
body.dark .qn-msg{ color:#e8e9ec; }
body.dark .qn-x:hover{ color:#e8e9ec; }
body.dark .label-invalid,.label-invalid>span{ color:#e48481; }
body.dark .erp-field .err{ color:#e18b84; }
body.dark .err-box{ color:#e18b84; }
body.dark .confirmed-tag{ color:#7fe6b7; }
body.dark .p-del{ color:#e18b84; }
body.dark .qf-totals .tot-row.disc b{ color:#7fe6b7; }
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 .mng-err{ color:#ea837b; }
body.dark .link.danger{ color:#ea837b; }
body.dark .cm-na-txt b{ color:#ea837b; }
body.dark .ct-x:hover{ color:#ea837b; }
body.dark .um-out{ color:#e18b84; }

/* ---- 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:#f3f4f6; color:#6b7280; border-color:#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 #bfdbfe; border-left:4px solid #3b82f6; border-radius:8px;
  background:#eff6ff; color:#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:#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 #d7e9ea;border-radius:980px;background:#eefafa;color:#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-x{border:0;background:transparent;color:#4e9aa1;cursor:pointer;font-size:11px;line-height:1;
  padding:3px 4px;border-radius:50%;font-family:inherit}
.rcp-x:hover{background:#d5f0f0;color:#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:#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:#8b97a8;font-size:11.5px}
.rcp-opt:hover,.rcp-opt.on{background:#f1fbfb}
.rcp-err{margin-top:5px;font-size:12px;font-weight:600;color:#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%}}