to opt in. Deliberately body-only (not the header --
.table-light already gives the header its own distinct look). Lower
precedence than a selected-row highlight (use !important there, it'll
always win) and than :hover (the second rule here re-asserts a
slightly-darker-still tint specifically on the striped columns while
hovering, so table-hover's own row feedback doesn't go missing on
exactly the striped cells). */
.bsc-col-striped > tbody > tr > td:nth-child(even) {
background-color: rgba(0, 0, 0, .03);
}
.bsc-col-striped.table-hover > tbody > tr:hover > td:nth-child(even) {
background-color: rgba(0, 0, 0, .075);
}
#inv-tbody tr.bsc-inv-row:has(.inv-cb:checked) td {
background-color: rgba(255, 214, 0, .15) !important;
box-shadow: none !important;
}
#inv-tbody tr.bsc-inv-row:has(.inv-cb:checked):hover td {
background-color: rgba(255, 214, 0, .22) !important;
}
.bsc-inv-td-name { max-width: 160px; }
/* Status badges */
.bsc-inv-badge {
font-size: .65rem;
font-weight: 700;
padding: .25em .65em;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.bsc-inv-badge-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.bsc-inv-badge-primary { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.bsc-inv-badge-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.bsc-inv-badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.bsc-inv-badge-secondary{ background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.bsc-inv-badge-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
/* Extra colour slots (2026-09-09), added for the Department column's
deterministic name→colour hash (deptColorClass() in invoices.html) --
departments are open-ended, not a small fixed enum like payment/approval
status, so the original 6 status-badge colours weren't enough slots to
keep collisions rare. */
.bsc-inv-badge-purple { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.bsc-inv-badge-teal { background: #ccfbf1; color: #115e59; border: 1px solid #99f6e4; }
.bsc-inv-badge-orange { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.bsc-inv-badge-pink { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }
.bsc-inv-badge-indigo { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.bsc-inv-badge-lime { background: #ecfccb; color: #3f6212; border: 1px solid #d9f99d; }
.bsc-inv-badge-slate { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; }
.bsc-inv-badge-brown { background: #efe4dc; color: #7c4a2d; border: 1px solid #e0cbb9; }
.bsc-inv-badge-sm { font-size: .6rem; padding: .2em .5em; }
/* SPV cell fill (2026-09-23, explicit request, Projects list) -- the SPV
column stopped being a small badge-in-a-cell and became a full-cell
colour fill instead (same colour hash / same 13 hues as the badges
above, just filling the whole , normal table font size, not bold,
acts as a link to open the company detail modal). !important because
.bsc-col-striped's own even-column tint (ID-less but still a background-
color on the same element) must never wash this out if SPV happens to
land on an even column. */
.bsc-spv-cell {
cursor: pointer;
font-weight: 400;
}
.bsc-spv-cell:hover { text-decoration: underline; }
.bsc-spv-success { background: #dcfce7 !important; color: #166534; }
.bsc-spv-primary { background: #dbeafe !important; color: #1e40af; }
.bsc-spv-warning { background: #fef9c3 !important; color: #854d0e; }
.bsc-spv-danger { background: #fee2e2 !important; color: #991b1b; }
.bsc-spv-info { background: #e0f2fe !important; color: #075985; }
.bsc-spv-purple { background: #f3e8ff !important; color: #6b21a8; }
.bsc-spv-teal { background: #ccfbf1 !important; color: #115e59; }
.bsc-spv-orange { background: #ffedd5 !important; color: #9a3412; }
.bsc-spv-pink { background: #fce7f3 !important; color: #9d174d; }
.bsc-spv-indigo { background: #e0e7ff !important; color: #3730a3; }
.bsc-spv-lime { background: #ecfccb !important; color: #3f6212; }
.bsc-spv-slate { background: #e2e8f0 !important; color: #334155; }
.bsc-spv-brown { background: #efe4dc !important; color: #7c4a2d; }
/* Approval labels — fill column width */
.bsc-inv-app-badge {
display: block;
width: 100%;
text-align: center;
}
/* Approval column, 2026-09-09 (explicit request): 4 small labels side by
side (1st/2nd/3rd/4th, colour-coded same as before) instead of a
vertically-stacked "1st: Approved" list -- much more compact, the full
"status (approver)" detail moves to a tooltip instead of being printed
inline. */
.bsc-inv-approval-row {
display: flex;
gap: .25rem;
justify-content: center;
flex-wrap: nowrap;
}
.bsc-inv-approval-pill {
min-width: 1.9rem;
text-align: center;
padding: .2em .35em;
}
/* Payments library data-card header, 2026-09-09: the count badge / "Clear
filters" pill / Refresh button all stay on one line -- flex-wrap: nowrap
on the whole right-hand group (explicit "keep the header height"
request), overflow-x: auto as the fallback rather than wrapping to a
second line. (The per-currency totals that used to live here moved into
the floating bulk bar itself, next to "N selected" -- see
.bsc-bulk-summary below -- so selection count and total read as one
cohesive place instead of two disconnected ones.) */
.bsc-inv-data-hdr { flex-wrap: nowrap; }
.bsc-inv-hdr-right {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
min-width: 0;
}
.bsc-inv-hdr-right::-webkit-scrollbar { display: none; }
/* Document number, plain text now (2026-09-09, was a mono badge/pill) --
same font style/size as Amount (mono, semibold, .82rem, see renderRow())
but a distinct colour so the two never read as the same kind of value. */
.bsc-inv-docnum-text { color: #4338ca; }
/* Compact columns (dates, payment) */
.bsc-inv-th-compact {
width: 78px;
white-space: normal;
font-size: .75rem;
line-height: 1.25;
vertical-align: middle;
}
/* Standard-width columns: doc number, dept, approval, uploaded by */
.bsc-inv-col-std { width: 105px; }
/* Amount column — same width as department */
.bsc-inv-col-amount { width: 120px; }
/* Company / Vendor / Department column widths */
.bsc-inv-col-company { width: 180px; }
.bsc-inv-col-vendor { width: 180px; }
.bsc-inv-col-dept { width: 120px; }
/* Filter card label style */
.form-label-sm { font-size: .72rem; letter-spacing: .02em; }
/* ── SearchSelect (bsc-ss) ─────────────────────────────────────────────── */
.bsc-ss { position: relative; }
.bsc-ss-wrap { position: relative; display: flex; align-items: center; }
.bsc-ss-search { padding-right: 1.6rem !important; cursor: pointer; }
.bsc-ss-search:read-only { background-color: #fff; }
.bsc-ss-clear {
position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
border: none; background: none; color: #9ca3af; cursor: pointer;
font-size: .85rem; line-height: 1; padding: 0 .1rem;
}
.bsc-ss-clear:hover { color: #374151; }
.bsc-ss-drop {
position: fixed; z-index: 1060;
background: #fff; border: 1px solid #dee2e6; border-radius: .375rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
max-height: 220px; overflow-y: auto;
padding: .2rem 0;
}
.bsc-ss-opt {
padding: .3rem .75rem; cursor: pointer; font-size: .82rem; white-space: nowrap;
}
.bsc-ss-opt:hover { background: #f3f4f6; }
/* Uploaded-by badge — full column width, centered, hover highlight */
.bsc-inv-uploader-badge {
display: block;
width: 100%;
text-align: center;
transition: filter .15s;
}
a:hover .bsc-inv-uploader-badge,
.bsc-inv-uploader-badge:hover {
filter: brightness(.88);
cursor: pointer;
}
/* Infinite scroll sentinel */
.bsc-inv-sentinel { height: 1px; }
/* ── Filter grid: every field exactly as wide as its column ──────────────
Bootstrap's grid columns are already equal-width by construction, but
Tom Select's own wrapper doesn't reliably stretch to fill its
parent on its own (it can size to content instead) -- forced to 100%
here so a long option's text can never make one filter visually wider
than its neighbours. Also has to beat the pre-existing ".bsc-filter-select
{ max-width: 150px }" rule above (sized for Tickets'/Work Presence's/
Shipments' own narrow horizontal filter bars) -- Tom Select copies the
wrapped 's classes onto its wrapper div, so that old unqualified
rule was clamping every select-based filter here to 150px regardless of
how wide its actual grid column was; overridden with max-width here,
scoped to these filter panels only so those other pages are untouched. */
[id$="-filter-body"] .row > [class*="col-"] {
min-width: 0; /* the grid column's width wins, not a child's intrinsic content width */
}
[id$="-filter-body"] input.form-control,
[id$="-filter-body"] select.form-select,
[id$="-filter-body"] .ts-wrapper {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* Active filter highlight — yellow glow on filled controls */
.bsc-filter-active.form-control {
background: #fffbe6 !important;
border-color: var(--bsc-accent) !important;
box-shadow: 0 0 0 2px rgba(255,214,0,.25) !important;
}
.bsc-ss.bsc-filter-active .bsc-ss-search {
background: #fffbe6;
border-color: var(--bsc-accent) !important;
box-shadow: 0 0 0 2px rgba(255,214,0,.25);
}
.bsc-filter-active.form-select,
select.bsc-filter-active + .ts-wrapper .ts-control {
background: #fffbe6 !important;
border-color: var(--bsc-accent) !important;
box-shadow: 0 0 0 2px rgba(255,214,0,.25) !important;
}
/* MultiSelect option row — checkbox + label inline */
.bsc-ms-opt { display: flex; align-items: center; gap: .45rem; }
.bsc-ms-opt .bsc-ms-cb { flex-shrink: 0; pointer-events: none; }
/* ── FX Rates inline section ──────────────────────────────────────────────── */
.bsc-fx-hdr {
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--bsc-muted);
}
.bsc-fx-date { font-size: .68rem; color: var(--bsc-muted); }
.bsc-fx-row {
display: flex;
align-items: center;
gap: .35rem;
padding: .2rem 0;
border-bottom: 1px solid var(--bsc-border);
}
.bsc-fx-row:last-child { border-bottom: none; }
.bsc-fx-row-flag { font-size: 1rem; line-height: 1; width: 1.25rem; text-align: center; }
.bsc-fx-row-code {
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--bsc-muted);
width: 26px;
}
.bsc-fx-row-val {
font-size: .92rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--bsc-text);
flex: 1;
}
.bsc-fx-up { font-size: .65rem; font-weight: 700; color: #16a34a; white-space: nowrap; }
.bsc-fx-down { font-size: .65rem; font-weight: 700; color: #dc2626; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
.bsc-fx-up { color: #4ade80; }
.bsc-fx-down { color: #f87171; }
}
:root[data-theme="dark"] .bsc-fx-up { color: #4ade80; }
:root[data-theme="dark"] .bsc-fx-down { color: #f87171; }
/* ── Invoice Detail Modal ───────────────────────────────────────────────────── */
/* Full content-area sizing (mirrors .bsc-content margin-left) */
@media (min-width: 992px) {
.bsc-inv-detail-modal .modal-dialog {
max-width: none;
width: calc(100vw - var(--bsc-sidebar-w) - 40px);
margin-left: calc(var(--bsc-sidebar-w) + 20px);
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
height: calc(100vh - 40px);
}
.bsc-inv-detail-modal .modal-content { height: 100%; }
}
@media (max-width: 991px) {
.bsc-inv-detail-modal .modal-dialog {
max-width: calc(100vw - 32px);
margin: 16px auto;
}
}
.bsc-inv-detail-docnum {
font-size: 1.05rem;
font-weight: 700;
font-family: var(--bsc-font-mono, monospace);
letter-spacing: .03em;
}
/* Detail modal header's 4 icon actions -- download / copy link / delete /
close -- one shared style, one shared gap between all of them (explicit
request, 2026-09-11; previously copy-link and delete sat edge to edge
with 0 gap and close used a visually different native .btn-close). */
.bsc-inv-detail-actions {
gap: 5px;
}
.bsc-inv-detail-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--bsc-muted);
margin-bottom: .15rem;
}
.bsc-inv-detail-val {
font-size: .88rem;
color: var(--bsc-text);
}
.bsc-inv-detail-section {
display: flex;
align-items: center;
gap: .4rem;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--bsc-muted);
border-bottom: 1px solid var(--bsc-border);
padding-bottom: .25rem;
margin-bottom: .75rem;
margin-top: 1.1rem;
}
/* Approval stepper */
.bsc-inv-stepper {
display: flex;
align-items: flex-start;
overflow-x: auto;
padding: .5rem 0 .75rem;
}
.bsc-inv-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 72px;
flex: 1;
}
.bsc-inv-step-icon {
width: 38px; height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
border: 2px solid #d1d5db;
background: #f9fafb;
color: #9ca3af;
}
.bsc-inv-step.approved .bsc-inv-step-icon { background: #d1fae5; color: #16a34a; border-color: #16a34a; }
.bsc-inv-step.rejected .bsc-inv-step-icon { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.bsc-inv-step.in-progress .bsc-inv-step-icon { background: #fef3c7; color: #d97706; border-color: #f59e0b; }
.bsc-inv-step-tier { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--bsc-muted); margin-top: .3rem; }
.bsc-inv-step-status{ font-size: .68rem; margin-top: .15rem; font-weight: 600; }
.bsc-inv-step.approved .bsc-inv-step-status { color: #16a34a; }
.bsc-inv-step.rejected .bsc-inv-step-status { color: #dc2626; }
.bsc-inv-step.in-progress .bsc-inv-step-status { color: #d97706; }
.bsc-inv-step-person { font-size: .66rem; color: var(--bsc-muted); margin-top: .1rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsc-inv-connector {
height: 2px;
flex: 1;
background: #d1d5db;
margin-top: 18px;
min-width: 16px;
}
.bsc-inv-connector.approved { background: #16a34a; }
.bsc-inv-connector.rejected { background: #dc2626; }
/* Attachment row */
.bsc-att-row {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .5rem;
border-radius: .4rem;
font-size: .83rem;
}
.bsc-att-row:hover { background: var(--bsc-card-inner, #f3f4f6); }
.bsc-att-link {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--bsc-accent);
text-decoration: none;
}
.bsc-att-link:hover { text-decoration: underline; }
.bsc-att-row-active { background: rgba(255,214,0,.12) !important; }
/* Add Attachment inline overlay — fixed over the content area (right of sidebar) */
.bsc-att-overlay {
position: fixed;
top: 0;
left: var(--bsc-sidebar-w);
right: 0;
bottom: 0;
z-index: 9999;
display: none; /* shown via JS: style.display = 'flex' */
align-items: center;
justify-content: center;
}
@media (max-width: 991px) {
.bsc-att-overlay { left: 0; }
}
.bsc-att-overlay-back {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .5);
}
.bsc-att-overlay-box {
position: relative;
z-index: 1;
background: #fff;
border-radius: .5rem;
width: min(440px, 90%);
box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
overflow: hidden;
}
/* Attachment type selector cards (add attachment overlay) */
.bsc-att-type-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 90px;
padding: .75rem .5rem;
border: 2px solid var(--bsc-border, #e5e7eb);
border-radius: .5rem;
text-align: center;
cursor: pointer;
transition: border-color .15s, background .15s;
-webkit-user-select: none;
user-select: none;
}
.bsc-att-type-card:hover { border-color: var(--bsc-accent, #f59e0b); }
.bsc-att-type-card.active {
border-color: var(--bsc-accent, #f59e0b);
background: rgba(245,158,11,.08);
}
.bsc-att-type-label { font-size: .82rem; }
/* ===== Tom Select vertical-centering fix (2026-09-08, app-wide) =====
The vendored tom-select.bootstrap5.min.css zeroes out .ts-control's
bottom padding once a compact (.form-select-sm) single-select has a
value chosen, while keeping the top padding -- pushes the selected
value's text down toward the bottom edge instead of centering it.
Affects every form-select-sm Tom-Select dropdown in the app (most
noticeable on Documentless Payment's dense multi-column form, where it
was reported), not just one page, so this is a global override, not
page-scoped.
⚠️ First attempt at this fix (same day) used the wrong selector and
silently never applied -- verified only via Jinja/HTML-text checks,
which can't catch a losing CSS specificity battle. The real vendored
selector is the 4-class compound ".ts-wrapper.form-select-sm.has-items
.ts-control" (confirmed by grepping the actual vendored file, not a
truncated view of it), not the 3-class ".form-select-sm.has-items
.ts-control" this rule originally used -- one specificity level lower,
so it always lost regardless of source order. Fixed by matching the
real selector exactly (plus !important, belt-and-braces, matching the
vendored file's own convention on the adjacent multi-select rule) and
confirmed this time with a real Playwright browser measuring the
computed style, not just source-text presence. */
.ts-wrapper.form-select-sm.has-items .ts-control {
padding-top: calc(.375rem - 1px) !important;
padding-bottom: calc(.375rem - 1px) !important;
}
/* ===== Required-field validity colour on Tom-Select-wrapped s =====
classList.toggle('is-invalid'/'is-valid', ...) on the underlying
has no visible effect once Tom Select has wrapped it -- the real select
is display:none and Tom Select's own visible ".ts-wrapper" sibling only
ever copies classes from it once, at construction time, so a class added
later never reaches the visible control. Same adjacent-sibling-selector
fix already used for the filter-panel "active" glow above
(select.bsc-filter-active + .ts-wrapper .ts-control) -- targets the
*visible* .ts-control via the hidden select's own live class instead.
Generic on `select`, not scoped to one page's field class (`.dp-f` /
`.ap-f` / any future one) -- Documentless Payment and regular Add
Payment both hit this exact bug, and any future page doing the same
required-field validation pattern should get it for free. */
select.is-invalid + .ts-wrapper .ts-control,
select.is-invalid + .ts-wrapper.form-select-sm .ts-control,
select.is-invalid + .ts-wrapper.form-select.single.input-active .ts-control,
select.is-invalid + .ts-wrapper.form-control.single.input-active .ts-control {
border-color: var(--bs-danger, #dc3545) !important;
}
select.is-valid + .ts-wrapper .ts-control,
select.is-valid + .ts-wrapper.form-select-sm .ts-control,
select.is-valid + .ts-wrapper.form-select.single.input-active .ts-control,
select.is-valid + .ts-wrapper.form-control.single.input-active .ts-control {
border-color: var(--bs-success, #198754) !important;
}
/* ⚠️ Second real bug found and fixed live, 2026-09-09, in this exact same
problem space: the two 4-class rules above (kept, still correct and
needed for the non-focused state) silently lose to the vendored
".ts-wrapper.form-select.single.input-active .ts-control,
.ts-wrapper.form-control.single.input-active .ts-control
{border-color:currentcolor!important}" rule -- 5 compound classes vs.
this file's 4 -- for as long as the control is actually focused
(clicked into/being typed in). Confirmed live: right after picking a
value via a real click, the border read a neutral currentcolor gray
(RGB 52,58,64), not red or green, until the control lost focus, at
which point it correctly showed green -- a real, reproducible "looks
wrong while you're still looking at it" bug, not a Playwright
testing-API artifact like the similar-sounding report investigated and
dismissed earlier the same day. The two rules just above add the exact
focused-state selector shape (6 compound classes, still beating
vendored's 5) so validity colour now wins in every state, not just
once blurred. */
/* ===== Real bug found and fixed, 2026-09-09: narrow Tom Select controls
visibly grow taller the instant they're opened =====
The vendored tom-select.bootstrap5.min.css hardcodes
`.ts-control > input { min-width: 7rem }` (112px) on the live search
input a single-select control switches to showing once opened/focused.
Any field narrower than that (this app's dense field grids commonly run
~100-160px wide -- Payments' col-md-2 fields nested inside col-lg-8 are
a clear example, confirmed live: a 103px-wide control grew from 31px to
52px tall the moment it was clicked, because the too-wide-to-fit input
forced the control's own flex-wrap layout onto a second line) hits
this. Reported as "dropdowns aren't allowed to change size" -- fixed at
the actual cause (the input's own min-width) rather than by disabling
the dropdown, which would break the ability to type a search term.
App-wide, not Payments-scoped, since any narrow Tom Select field
anywhere could hit the same layout bug. */
.ts-control > input {
min-width: 0 !important;
}
.ts-wrapper.single .ts-control {
flex-wrap: nowrap !important;
}
/* The actual root cause, found by measuring the real box model live (the
two rules above are still correct/worth keeping, just weren't
sufficient alone): opening a narrow single-select control shrinks the
shared space between the still-visible selected-item label and the new
live search input, and the vendored CSS never gives that label
`white-space: nowrap` -- once its own width drops below what "No need"
(or any other value) needs on one line, the text wraps inside the
label itself (measured live: 21px -> 42px, i.e. 1 line -> 2), which is
what actually grows the parent control's height. Ellipsis-truncate
instead of wrapping -- the field is still fully legible via its full
value once selected/closed at its normal width; only the transient
open state on a very narrow field would ever truncate at all. */
.ts-control .item {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ===== Dropdown search legibility (2026-09-10, app-wide, explicit request) =====
Two real, reproducible issues found live (measured via a real Playwright
browser, not just reading the vendored CSS):
1. A single-select's previously-picked item stays visibly rendered
alongside the live search input the whole time you're typing to
filter (confirmed: .ts-control's own text still read the full old
selection's name while "a" was being typed into the search box) --
the vendored CSS never hides `.item` during the "actively searching"
state, only ever removes/replaces it on an actual new pick.
⚠️ 2026-09-11 regression fix: this was originally scoped to Tom
Select's `.input-active` class ("the live search input is focused"),
which is ALSO true for a few ticks right after you click an option --
Tom Select's own addItem()→inputState() runs before the control
loses focus, so `.input-active` doesn't clear until blur. Net result,
confirmed live: pick a value, the control renders blank until you
click something else. Rescoped to `.dropdown-active` (Tom Select's
class for "the options panel is actually open") instead: true for
the entire time you're searching (open on focus, before AND while
typing), and — critically — already false by the time addItem() closes
a single-select's dropdown on pick, so the chosen value shows
immediately, no blur needed. Still reverts the instant the dropdown
closes for any reason (Escape, click-away), matching the original intent.
2. The dropdown panel itself was measured narrower than its own control
(78px vs. an 88px control) when using `dropdownParent: 'body'` (this
app's own default, see base.html/every explicit TomSelect(...) call --
avoids .card{overflow:hidden} clipping) -- Tom Select sizes a
body-parented dropdown to exactly the control's width, which reads
fine for a short value but truncates/wraps real option text badly on
this app's narrow field grids (col-md-2 columns, long vendor/company
names). Given a real floor width instead, so there's room to actually
read what's being searched, regardless of how narrow the field itself
is -- still anchored to the control's left edge (Tom Select's own
positioning, untouched), just allowed to extend further right. */
.ts-wrapper.single.dropdown-active .ts-control > .item {
display: none;
}
.ts-dropdown {
min-width: 260px;
}
/* ===== Real bug found and fixed live, 2026-09-11: a Tom Select dropdown
inside a Bootstrap modal rendered completely invisible/unclickable =====
Reported as "the SIM Card Edit dropdown does nothing when clicked" but
confirmed live (Playwright) to be a general, app-wide problem, not a
SIM-Card-only one: every dropdown in this app uses `dropdownParent:
'body'` (base.html), so its `.ts-dropdown` panel is appended straight
to -- a *sibling* of an open `.modal`, not a descendant, so
Bootstrap's own modal stacking gives it no help. The vendored
tom-select.bootstrap5.min.css hardcodes `.ts-dropdown { z-index: 1000 }`,
which loses to Bootstrap 5's own `.modal-backdrop` (1050) AND `.modal`
(1055) -- confirmed live via getComputedStyle + elementFromPoint: the
dropdown WAS open (display:block, options present, clickable in the
DOM) but rendered entirely *underneath* the modal, so every real click
landed on the modal's own content behind it instead. Any ``
inside ANY Bootstrap modal in the app had this problem (Device/SIM
Card/Equipment/License Edit modals, any other modal with a dropdown
field) -- it was only reported against SIM Card's Operator/Location
because those two were still a native `
elements too -- they're always display:none in this app (Tom Select's
own .ts-control carries its own separate caret, untouched by this). */
.ap-f.is-valid, .ap-f.is-invalid,
.dp-f.is-valid, .dp-f.is-invalid {
background-image: none !important;
padding-right: .5rem !important;
}
/* ===== Document preview widget (BscDocPreview, doc-preview.js) — 2026-09-09
Every Payments "add a payment" form now shows its source/preview
document in a 1/3-width column next to the 2/3-width field grid,
replacing the previous plain