: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}
/* 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-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}
.qf-actbar{display:flex;align-items:center;gap:8px;margin:2px 0 12px;position:sticky;top:0;z-index:6;background:var(--bg);padding:6px 0}
.qf-actbar .back-link{margin:0}
.qf-actbar .btn-mini{padding:8px 16px;border-radius:10px;font-weight:700}
/* 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}
body.holo .qf-actbar{background:transparent}
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-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 (Stock = green, Back-to-Back = orange) */
.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}
/* the weeks dropdown (2nd control) shows only for Back to Back — native OR glass */
.avail-wrap.stock > :nth-child(2){display:none}
/* colour the availability control green (stock) / orange (back-to-back),
   targeting both the native select and the glass button that replaces it */
.avail-wrap.stock > :first-child .gs-btn,.avail-wrap.stock .p-avail{color:#1f9d63}
.avail-wrap.b2b > :first-child .gs-btn,.avail-wrap.b2b .p-avail{color:#d97706}
body.holo .avail-wrap.stock > :first-child .gs-btn{color:#5ef0c0}
body.holo .avail-wrap.b2b > :first-child .gs-btn{color:#fbbf24}
/* "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}
.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)}
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}
.calls-tbl td:nth-child(6){overflow-wrap:anywhere}
.calls-tbl th:nth-child(1),.calls-tbl td:nth-child(1){width:14%}
.calls-tbl th:nth-child(2),.calls-tbl td:nth-child(2){width:11%}
.calls-tbl th:nth-child(3),.calls-tbl td:nth-child(3){width:9%}
.calls-tbl th:nth-child(4),.calls-tbl td:nth-child(4){width:11%}
.calls-tbl th:nth-child(5),.calls-tbl td:nth-child(5){width:9%}
.calls-tbl th:nth-child(6),.calls-tbl td:nth-child(6){width:15%}
.calls-tbl th:nth-child(7),.calls-tbl td:nth-child(7){width:7%}
.calls-tbl th:nth-child(8),.calls-tbl td:nth-child(8){width:8%}
.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)}
/* 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}
/* 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-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{color:#06121a}   /* gradient button keeps dark text */
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)}
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}
.tablewrap{padding:0;overflow:auto}
.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:70px;height:70px;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) */
.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}