` and nothing else, while a labelled button carries a text node
beside its icon and a toggler carries a `.caret` as a second ELEMENT child. The calendar addon is
addressed by its own class because its glyph is a `.glyphicon`, not a `.fa`.
Scoped to `.content-wrapper` so the header's global-search group — a labelled "Vyhledat" plus a
caret toggle — is out of reach by construction. */
.content-wrapper .input-group > .input-group-addon.kv-date-picker,
.content-wrapper .input-group > .input-group-btn > .btn:has(> .fa:only-child) {
width: var(--size-input-addon);
min-width: var(--size-input-addon);
padding-left: 0;
padding-right: 0;
text-align: center;
}
/* ---------- A date picker fills its field, in a filter, a form or a dialog ----------
ONE ROOT CAUSE, THREE REPORTS. kartik's DatePicker renders ``, and
bootstrap 3 gives `.input-group` `display: table` with NO width. A table box shrinks to fit, so
the control is as wide as its input's default size plus the 40px addon and IGNORES the column it
sits in — 214px inside a 272px `col-md-3`, ~300px inside a full-width form row — while the selects
and text inputs around it (plain `.form-control`, `width: 100%`) fill theirs. It showed up in a
filter panel, in a create form and in a bsdialog.
SCOPED TO `.input-group.date` ON PURPOSE — `date` is kartik's own marker class on the picker and
nothing else in the app uses it. Widening every `.input-group` would also widen the ones that are
deliberately content-sized (the bank-account prefix/number pair, amount + currency), so the rule
names the control that is wrong rather than the box class it happens to use. `.form-group` keeps
it to a rendered field. */
.form-group .input-group.date { width: 100%; }
/* ---------- One disabled treatment for every full-size control ----------
Two disabled fills stood side by side on the same form: bootstrap's own `#EEEEEE` on a native
`select.form-control[disabled]`, which no rule in this layer had ever restated, and
`--surface-disabled` on a select2 — a token sized for a 24px checkbox. 12 points apart; one read
as disabled, one did not. Both now take --surface-disabled-field, so a disabled input, select,
textarea and select2 are one surface. The ink is --text-muted (was bootstrap's off-palette #555)
and the cursor is not-allowed on all of them.
`[readonly]` is in the list because a readonly field makes the reader the same promise a disabled
one does, and because bootstrap already paints the two together — keeping them apart would
re-create the split this closes. It reaches nothing today, so it is a guard, not a change.
NOT TOUCHED, on purpose: the disabled CHECKBOX / RADIO and the disabled BUTTON (`.btn.disabled`).
They keep --surface-disabled — a 24px mark and a ghost tile do not need the heavier fill, and the
checkbox's checked-disabled state has its own mint answer that a grey fill would undo.
Specificity: (0,2,0) for the native half, which beats bootstrap's own (0,2,0) on order and the
base `.form-control` background (0,1,0) outright. The select2 half is stated in 2c itself, on the
rule that already owned that fill, rather than as a competitor. */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: var(--surface-disabled-field);
color: var(--text-muted);
cursor: not-allowed;
opacity: 1;
}
/* ============================================================================================
2c. BASE / select2
============================================================================================ */
/* ---------- Select2: revive the 13 dead krajee overrides.
v2.2.5 renders .select2-container--krajee-bs3; old rules targeted --krajee.
[class*=] matches bs3/bs4/bs5. ---------- */
[class*="select2-container--krajee"] .select2-selection {
height: var(--control-height);
border: 1px solid var(--border-default);
border-radius: var(--radius-control);
box-shadow: none;
}
[class*="select2-container--krajee"] .select2-selection--single .select2-selection__arrow {
height: calc(var(--control-height) - 2px);
}
[class*="select2-container--krajee"].select2-container--focus .select2-selection,
[class*="select2-container--krajee"].select2-container--open .select2-selection {
border-color: var(--ok-green);
box-shadow: var(--ring-focus);
}
.select2-dropdown {
border-color: var(--ok-green);
border-radius: var(--radius-control);
box-shadow: var(--shadow-dropdown);
}
.has-error [class*="select2-container--krajee"] .select2-selection { border-color: var(--status-danger); }
.has-success [class*="select2-container--krajee"] .select2-selection { border-color: #00A65A; }
.form-control, select.form-control, [class*="select2-container--krajee"] .select2-selection { background: var(--surface-input); }
/* Select2 dropdown: brand states (selected = tint, highlighted = green already set) */
.select2-results__option[aria-selected="true"] { background: var(--surface-tint); color: var(--ok-green); }
.select2-results__option { padding: 7px 12px; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--ok-green); box-shadow: var(--ring-focus); }
[class*="select2-container--krajee"] .select2-selection__clear { color: var(--text-placeholder); }
[class*="select2-container--krajee"] .select2-selection__clear:hover { color: var(--status-danger-text); }
/* Form grid: never let a select truncate — inputs fill their column */
.form-group .form-control, .form-group .select2-container { min-width: 0; max-width: 100%; }
[class*="select2-container--krajee"] .select2-selection--single .select2-selection__clear {
position: absolute; right: 26px; left: auto; top: 50%;
transform: translateY(-50%); margin: 0; padding: 0 4px;
font-size: 15px; font-weight: 700; line-height: 1; color: var(--text-placeholder);
}
[class*="select2-container--krajee"] .select2-selection--single .select2-selection__clear:hover { color: var(--status-danger-text); }
/* Select2 single geometry: pin the clear ✕ to the right, vertically centred (site.css's legacy rule
floated it above), and undo krajee's 6px vertical padding, which pushed the text line 7px down. */
[class*="select2-container--krajee"] .select2-selection--single { position: relative; padding: 0 24px 0 12px; }
[class*="select2-container--krajee"] .select2-selection--single .select2-selection__rendered { padding: 0 24px 0 0; line-height: calc(var(--control-height) - 2px); }
[class*="select2-container--krajee"] .select2-selection--multiple .select2-selection__choice__remove {
float: none; margin: 0; order: 2;
font-size: 14px; line-height: 1;
}
[class*="select2-container--krajee"] .select2-selection--multiple .select2-search--inline .select2-search__field { margin: 0; height: calc(var(--control-height) - 6px); }
/* The MULTI placeholder is a floated span (krajee-bs3:343) — it wrapped to two lines inside the
flexified selection. Single line, ellipsized, vertically centred. */
[class*="select2-container--krajee"] .select2-selection--multiple .select2-selection__placeholder {
float: none; margin: 0; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: calc(var(--control-height) - 4px);
}
/* Multiselect chips: text + ✕ centred on one line, and one chip row must not exceed the control
height (it was ~38px). */
[class*="select2-container--krajee"] .select2-selection--multiple .select2-selection__choice {
border-radius: var(--radius-sm);
background: var(--surface-tint);
border: 1px solid var(--border-default);
color: var(--ok-green);
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
float: none;
margin: 3px 4px 3px 0;
padding: 1px 8px;
}
/* Client ruling, overriding the designer's documented intent: the solid dark-green dropdown
highlight band reads too heavy — soften to mint. */
[class*="select2-container--krajee"] .select2-results__option--highlighted[aria-selected] { background-color: var(--brand-mint-bg); color: var(--ok-green); }
/* A multi-select must GROW instead of holding a fixed height, or wrapped chips break it — and the
root cause of both "one chip makes it a two-liner" and "a long placeholder is still a two-liner"
is a select2 VERSION difference. The app ships select2 4.1, whose multi-select markup is
.select2-selection--multiple
> ul.select2-selection__rendered (the chips, li.select2-selection__choice)
> span.select2-search--inline
> textarea.select2-search__field (carries the PLACEHOLDER as an attribute)
i.e. the search box is a SIBLING of the chip list, not an item inside it, and there is no
`li.select2-selection__placeholder` element at all. Two consequences:
(a) a `…__rendered { display: flex; width: 100% }` written for the 4.0 markup (where the search
really was inside the ul) makes the chip list claim the full row, so the sibling search span
is pushed onto a second line the moment a single chip exists;
(b) the search field is a