/* ============================================================================= Searchable dropdown panel (combo.js). The panel is a document-level popover: it is appended to and placed with fixed coordinates, so it is never clipped by a modal body, a scrolling card or a table cell, and never inherits a transform. z-index sits above the modal overlay (400) and below the toast (600) — a toast must stay readable while a list is open. Colour comes from local --cbo-* variables, remapped in one block when the Accounting application is showing, so the panel matches whichever surface it was opened over instead of carrying a look of its own. Loaded last in the cascade. ============================================================================= */ .cbo-pop{ --cbo-bg:var(--bg,#fff); --cbo-line:var(--line,#e6e9ef); --cbo-line-soft:var(--line-soft,#f0f1f4); --cbo-ink:var(--ink,#323338); --cbo-mute:var(--ink-soft,#676879); --cbo-hover:var(--hover,#f5f6f8); --cbo-accent:var(--blue,#0073ea); --cbo-fs:13.5px; /* Above MDI windows (#mdi-layer 700), modals (#ovl 2000) and toasts (2200) — the dropdown opens inside all of them and must never sit behind. */ position:fixed; z-index:2600; background:var(--cbo-bg); border:1px solid var(--cbo-line); border-radius:10px; box-shadow:0 14px 34px rgba(16,24,40,.18); overflow:hidden; font-size:var(--cbo-fs); color:var(--cbo-ink); } /* ── search row ─────────────────────────────────────────────────────────── */ .cbo-pop__head{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--cbo-line-soft); color:var(--cbo-mute); } .cbo-pop__head svg{flex:none} .cbo-pop__q{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; color:var(--cbo-ink); padding:1px 0; } .cbo-pop__q::placeholder{color:var(--cbo-mute); opacity:.85} /* Result count: a bare number, so it reads the same in both directions. */ .cbo-pop__n{ flex:none; font-size:11px; font-weight:600; color:var(--cbo-mute); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:plaintext; } /* ── options ────────────────────────────────────────────────────────────── */ .cbo-pop__list{overflow-y:auto; overscroll-behavior:contain; padding:5px} .cbo-opt{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; cursor:pointer; line-height:1.35; } /* The account number keeps Latin digits and its own reading direction whatever language the label is in — a code is an id, not prose. */ .cbo-opt__code{ flex:none; min-width:52px; font-size:11.5px; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:plaintext; text-align:start; color:var(--cbo-mute); background:var(--cbo-line-soft); border-radius:5px; padding:2px 6px; } .cbo-opt__name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .cbo-opt.is-on{background:var(--cbo-hover)} .cbo-opt.is-sel{font-weight:600} /* The tick is a flex item of the row, not of the name — inside the name it would be clipped away by the ellipsis on a long label. */ .cbo-opt.is-sel::after{content:'✓'; flex:none; margin-inline-start:auto; padding-inline-start:8px; color:var(--cbo-accent)} .cbo-opt.is-on .cbo-opt__code{background:var(--cbo-bg)} .cbo-opt.is-off{opacity:.45; cursor:default} .cbo-opt mark{ background:color-mix(in srgb, var(--cbo-accent) 18%, transparent); color:inherit; border-radius:3px; padding:0 1px; } @supports not (background:color-mix(in srgb, red 10%, transparent)){ .cbo-opt mark{background:rgba(0,115,234,.18)} } .cbo-pop__none{padding:14px 10px; text-align:center; color:var(--cbo-mute); font-size:12.5px} /* label, kept while filtering so a narrowed list still says where its rows came from. */ .cbo-grp{ padding:8px 9px 4px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cbo-mute); } /* ── inside the Accounting application ────────────────────────────────────── Its type scale is driven by --acc-fs (acc-app.css), so the panel scales with the rest of the ledger instead of staying at the CRM's fixed size. */ body.acc-fullscreen .cbo-pop{ --cbo-bg:var(--acc-surface); --cbo-line:var(--acc-line-firm); --cbo-line-soft:var(--acc-line-soft); --cbo-ink:var(--acc-ink); --cbo-mute:var(--acc-ink-soft); --cbo-hover:var(--acc-line-soft); --cbo-accent:var(--acc-accent-deep); --cbo-fs:calc(13px * var(--acc-fs, 1)); border-radius:var(--acc-r,10px); box-shadow:var(--acc-shadow-pop,0 14px 34px rgba(20,32,60,.2)); } body.acc-fullscreen .cbo-pop__n{font-size:calc(11px * var(--acc-fs, 1))} body.acc-fullscreen .cbo-opt__code{font-size:calc(11.5px * var(--acc-fs, 1))}