/*
	FurnStream design layer: the tokens the offerte/factuur mockups are built on, applied backoffice-wide
	on top of UBold. The light-only block carries the mockup values; every rule below it reads a theme
	variable, so dark mode keeps UBold's own palette and a rebranded theme carries straight through.
	Loaded from index.tpl directly after custom.css, so on equal specificity this file wins.
	Windows correction: weight 800 becomes 700 on text smaller than 13px.
*/

/* === Tokens: the light-only ground, card border, text colours and chip tints === */

/* Every light skin: the FurnStream-only tokens, derived from the theme so a skin (Retro, Neon, …) carries its own
	palette into the tables, chips, strips and panels. The --theme-* variables themselves are left to UBold's skin
	blocks; only the heading colour, which UBold leaves unset in the light theme, gets the body colour as its value. */
html:not([data-bs-theme="dark"]) {
	--theme-heading-color: var(--theme-body-color);
	--furnstream-table-head-bg: color-mix(in srgb, var(--theme-tertiary-bg) 40%, var(--theme-secondary-bg));
	--furnstream-danger-outline-border: rgba(var(--theme-danger-rgb), .35);
	--furnstream-chip-neutral-bg: var(--theme-tertiary-bg);
	--furnstream-chip-neutral-color: var(--theme-secondary-color);
	--furnstream-strip-warning-color: var(--theme-warning-text-emphasis);
	--furnstream-strip-danger-color: var(--theme-danger-text-emphasis);
	--furnstream-strip-success-color: var(--theme-success-text-emphasis);
	--furnstream-strip-info-color: var(--theme-info-text-emphasis);
	--furnstream-strip-info-bold-color: color-mix(in srgb, var(--theme-info-text-emphasis) 80%, var(--theme-black));
	--furnstream-panel-bg: var(--theme-tertiary-bg);
	--furnstream-primary-outline-border: rgba(var(--theme-primary-rgb), .25);
	--furnstream-row-highlight-bg: color-mix(in srgb, var(--theme-tertiary-bg) 30%, var(--theme-secondary-bg));
	--furnstream-floating-shadow: 0 12px 34px rgba(0, 0, 0, .12);
}

/* The default skin only: the mockup's exact ground, text colours and tints. Scoped to data-skin="default" (index.tpl
	always sets the attribute), because pinned for every skin these *-bg-subtle and *-text-emphasis values painted
	Retro and Neon in the default purple — chips, steps, avatars, links, button hovers and the dialog layer alike. */
html:not([data-bs-theme="dark"])[data-skin="default"] {
	--theme-body-bg: #f4f4f9;
	--theme-body-bg-rgb: 244, 244, 249;
	--theme-border-color: #ebebf3;
	--theme-body-color: #3d3f4e;
	--theme-body-color-rgb: 61, 63, 78;
	--theme-heading-color: #2f3140;
	--theme-secondary-color: #8f95a8;
	--theme-secondary-color-rgb: 143, 149, 168;
	--theme-primary-bg-subtle: #eceafb;
	--theme-primary-text-emphasis: #574bbc;
	--theme-success-bg-subtle: #e2f7f0;
	--theme-warning-bg-subtle: #fdf1d7;
	--theme-danger-bg-subtle: #fde7eb;
	--theme-info-bg-subtle: #e3f2f7;
	--theme-success-text-emphasis: #0aa87e;
	--theme-warning-text-emphasis: #c98908;
	--theme-danger-text-emphasis: #e6455f;
	--theme-info-text-emphasis: #2b93b1;
	--furnstream-table-head-bg: #fafafd;
	--furnstream-danger-outline-border: #f3b4bf;
	--furnstream-chip-neutral-bg: #eef0f4;
	--furnstream-chip-neutral-color: #6a7183;
	--furnstream-strip-warning-color: #8a5d05;
	--furnstream-strip-danger-color: #b2293f;
	--furnstream-strip-success-color: #05704f;
	--furnstream-strip-info-color: #1f6f86;
	--furnstream-strip-info-bold-color: #155a6e;
	--furnstream-panel-bg: #f3f3f8;
	--furnstream-primary-outline-border: #d9d4f7;
	--furnstream-row-highlight-bg: #fbfbfe;
	--furnstream-floating-shadow: 0 12px 34px rgba(20, 16, 60, .12);
}

/* The mockup's white menu palette applies to the light menu colour only; dark, gray, gradient and image keep
	UBold's own per-menu-colour palette, so a dark sidebar under the light theme stays readable. */
html:not([data-bs-theme="dark"])[data-skin="default"][data-menu-color="light"] {
	--theme-sidenav-item-color: #5b6070;
	--theme-sidenav-item-hover-color: #574bbc;
	--theme-sidenav-item-hover-bg: #f3f3f8;
	--theme-sidenav-item-active-color: #574bbc;
	--theme-sidenav-item-active-bg: #eceafb;
}

[data-bs-theme="dark"] {
	--furnstream-table-head-bg: var(--theme-tertiary-bg);
	--furnstream-danger-outline-border: rgba(var(--theme-danger-rgb), .5);
	--furnstream-chip-neutral-bg: var(--theme-tertiary-bg);
	--furnstream-chip-neutral-color: var(--theme-secondary-color);
	--furnstream-strip-warning-color: var(--theme-warning-text-emphasis);
	--furnstream-strip-danger-color: var(--theme-danger-text-emphasis);
	--furnstream-strip-success-color: var(--theme-success-text-emphasis);
	--furnstream-strip-info-color: var(--theme-info-text-emphasis);
	--furnstream-strip-info-bold-color: var(--theme-info-text-emphasis);
	--furnstream-panel-bg: var(--theme-tertiary-bg);
	--furnstream-primary-outline-border: rgba(var(--theme-primary-rgb), .25);
	--furnstream-row-highlight-bg: var(--theme-tertiary-bg);
	--furnstream-floating-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

/* Dark keeps UBold's menu colours; only the active/hover tint follows the primary so the pill stays readable.
	The card shadow is invisible on the dark ground, so it is switched off (this selector outranks :root below). */
html[data-bs-theme="dark"] {
	--theme-sidenav-item-hover-bg: rgba(var(--theme-primary-rgb), .1);
	--theme-sidenav-item-active-bg: rgba(var(--theme-primary-rgb), .18);
	--furnstream-card-shadow: none;
	/* On the dark ground the lighter emphasis tint is the readable link, as UBold's own dark link is. */
	--theme-link-color: var(--theme-primary-text-emphasis);
	--theme-link-hover-color: var(--theme-primary);
}

/* Soft card shadow, shared by cards and the active fase card (furnstream-components.css); the menu measures are mode-free.
	UBold does not re-skin its link colours (a literal purple in its :root), so links and nav-links follow the skin's primary here. */
:root {
	--furnstream-card-shadow: 0 2px 12px rgba(0, 0, 0, .06);
	--theme-link-color: var(--theme-primary);
	--theme-link-hover-color: var(--theme-primary-text-emphasis);
	--theme-sidenav-item-font-size: 13.5px;
	--theme-sidenav-item-font-weight: 600;
	--theme-sidenav-item-gap: 11px;
	--theme-sidenav-item-padding-x: 12px;
	--theme-sidenav-item-padding-y: 8px;
	--theme-sidenav-item-icon-size: 17px;
}

/* UBold paints a link from its rgb triple, which no skin redefines; the hex variables above do follow the skin. */
a {
	color: var(--theme-link-color);
}

a:hover {
	color: var(--theme-link-hover-color);
}

/* UBold pins a literal text colour on its subtle backgrounds (the background itself follows the skin); the skin's own tone applies. */
.bg-primary-subtle {
	color: var(--theme-primary) !important;
}

.bg-success-subtle {
	color: var(--theme-success) !important;
}

.bg-danger-subtle {
	color: var(--theme-danger) !important;
}

.bg-warning-subtle {
	color: var(--theme-warning) !important;
}

.bg-info-subtle {
	color: var(--theme-info) !important;
}

/* === Sidebar menu: the mockup's item pill (radius 10px, tinted hover/active) and the small caption titles === */

/* Breathing room between the logo bar and the first item (the former top <hr> carried it). The menu follows
	the body font (Nunito, as in the mockup) instead of UBold's heavier secondary face (Public Sans). */
.side-nav {
	padding-top: 14px;
	font-family: var(--theme-font-sans-serif);
}

.side-nav .side-nav-item .side-nav-link {
	border-radius: 10px;
	transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item .side-nav-link:focus {
	background-color: var(--theme-sidenav-item-hover-bg);
}

.side-nav .side-nav-title {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--theme-secondary-color);
	padding: 14px 22px 6px;
}

/* The menu counters (mockup .cnt): a quiet pill at the end of the link, white on the active item. */
.side-nav .side-nav-link .side-nav-count {
	margin-inline-start: auto;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	background: var(--theme-tertiary-bg);
	color: var(--theme-body-color);
}

.side-nav > .side-nav-item.active > .side-nav-link .side-nav-count {
	background: var(--theme-secondary-bg);
	color: var(--theme-primary-text-emphasis);
}

/* Condensed menu: UBold hides its badges there; the counter moves to the icon's top-right corner instead and
	returns to the end of the link in the hover flyout (the item is position: relative in condensed mode). */
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:not(:hover) > .side-nav-link > .side-nav-count {
	display: block;
	position: absolute;
	top: 6px;
	inset-inline-start: calc(50% + 4px);
	margin: 0;
	min-width: 18px;
	padding: 0 5px;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	background: var(--theme-primary);
	color: var(--theme-white);
}

/* === Topbar: the user name follows the topbar item colour, so it stays readable on a dark topbar === */

.app-topbar .nav-user .topbar-link h5 {
	color: inherit;
}

/* === Cards === */

.card {
	--theme-card-border-width: 1px;
	--theme-card-border-color: var(--theme-border-color);
	--theme-card-border-radius: 14px;
	--theme-card-inner-border-radius: 13px;
	--theme-card-cap-padding-y: 15px;
	--theme-card-cap-padding-x: 22px;
	--theme-card-spacer-y: 18px;
	--theme-card-spacer-x: 22px;
	--theme-card-box-shadow: var(--furnstream-card-shadow);
	box-shadow: var(--furnstream-card-shadow);
}

.card-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--theme-heading-color);
}

/* The mockup's card header closes with a solid hairline; UBold draws it dashed. .border-dashed still wins. */
.card-header {
	border-bottom-style: solid;
}

/* === Tabs: the mockup's underline strip (labels mockup 4) — muted bold labels on one hairline, the active
	tab in the primary tone with a 2px primary underline, counts as quiet pills that tint along with the tab === */

.nav-tabs {
	--theme-nav-link-padding-x: 14px;
	--theme-nav-link-padding-y: 10px;
	--theme-nav-link-font-size: 13.5px;
	--theme-nav-link-font-weight: 700;
	--theme-nav-link-color: var(--theme-secondary-color);
	--theme-nav-link-hover-color: var(--theme-primary-text-emphasis);
	--theme-nav-tabs-border-radius: 0;
	--theme-nav-tabs-link-hover-border-color: transparent;
	--theme-nav-tabs-link-active-color: var(--theme-primary-text-emphasis);
	--theme-nav-tabs-link-active-bg: transparent;
	--theme-nav-tabs-link-active-border-color: transparent transparent var(--theme-primary);
	gap: 4px;
}

.nav-tabs .nav-link {
	display: inline-flex;
	align-items: center;
	border-width: 0 0 2px;
	transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

/* Tabs in a card header fill the header's height, so the underline lands on the header's own hairline. */
.card-header-tabs {
	align-self: stretch;
	margin-top: calc(-1 * var(--theme-card-cap-padding-y));
}

.card-header-tabs .nav-item {
	display: flex;
}

.card-header-tabs .nav-link.active {
	background-color: transparent;
	border-bottom-color: var(--theme-primary);
}

/* The tab counters (mockup .tab .n): a quiet pill after the label, primary-tinted on the active tab. */
.nav-tabs .furnstream-tab-count {
	margin-inline-start: 7px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	background: var(--theme-tertiary-bg);
	color: var(--theme-body-color);
}

.nav-tabs .nav-link.active .furnstream-tab-count {
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

/* === Page frame === */

/* The mockup kit (sessions 106 to 110) frames the content 30px from the sides; the same 30px sits between the last card and the footer (Kevin, 2026-09-25). UBold keeps 24px. */
.content-page {
	padding: 0 1.125rem;
}

.content-page > .container-fluid {
	padding-bottom: 0.375rem;
}

.footer {
	margin-left: -1.125rem;
	margin-right: -1.125rem;
}

/* === Page title === */

/* Air above and below the title row (Kevin, 2026-09-17): UBold only centres it inside a 70px band. The mockup kit puts 26px under the topbar and 18px above the first card; 16px/20px reads as one even frame with the 30px sides (Kevin, 2026-09-25). */
.page-title-head {
	padding-top: 14px;
	padding-bottom: 20px;
}

.page-title-head h4 {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--theme-heading-color);
}

.page-title-head .breadcrumb {
	font-size: 12.5px;
	margin-top: 2px;
	color: var(--theme-secondary-color);
}

.page-title-head h4 .furnstream-chip {
	font-size: 11px;
}

.page-title-head .breadcrumb-item a {
	color: var(--theme-secondary-color);
}

.page-title-head .breadcrumb-item.active {
	color: var(--theme-body-color);
	font-weight: 700;
}

/* === Buttons === */

.btn,
.btn-sm,
.btn-lg,
.btn-group-sm > .btn,
.btn-group-lg > .btn {
	--theme-btn-border-radius: 10px;
}

/* Every button is bold in the mockup; UBold's base weight is medium. */
.btn {
	--theme-btn-font-weight: 700;
}

/* The mockup's .btn-sm: 13px text on 8×15 padding with a tight line height. UBold pins .btn.btn-sm to
	line-height: normal with a double class, so the line height needs the same weight to take effect. */
.btn-sm,
.btn-group-sm > .btn {
	--theme-btn-padding-y: 8px;
	--theme-btn-padding-x: 15px;
	--theme-btn-font-size: 13px;
	--theme-btn-line-height: 1.2;
}

.btn.btn-sm,
.btn-group-sm > .btn {
	line-height: var(--theme-btn-line-height);
}

/* The mockup's .btn-md (the "+ Vrije regel" button next to the 42px search field): 13.5px text on 10×18 padding. */
.btn-md {
	--theme-btn-padding-y: 10px;
	--theme-btn-padding-x: 18px;
	--theme-btn-font-size: 13.5px;
	--theme-btn-line-height: 1.2;
}

/* The mockup's .btn-xs: 12px text on 6×12 padding with a tight line height; icon-only buttons stay square. */
.btn-xs {
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.2;
	border-radius: 10px;
}

.btn-icon.btn-xs {
	padding: 0;
	width: 28.4px;
	height: 28.4px;
}

/* The mockup draws its button icons at 14px; Tabler's inherit would give 12px inside .btn-xs. */
.btn-xs > .ti {
	font-size: 14px;
}

.btn-primary:not(:disabled):not(.disabled) {
	box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), .32);
}

/* The action-bar workhorse: a white button with a hairline border and body text; hover draws the primary outline. */
.btn-neutral {
	--theme-btn-color: var(--theme-body-color);
	--theme-btn-bg: var(--theme-secondary-bg);
	--theme-btn-border-color: var(--theme-border-color);
	--theme-btn-hover-color: var(--theme-primary);
	--theme-btn-hover-bg: var(--theme-secondary-bg);
	--theme-btn-hover-border-color: var(--theme-primary);
	--theme-btn-focus-shadow-rgb: var(--theme-primary-rgb);
	--theme-btn-active-color: var(--theme-primary-text-emphasis);
	--theme-btn-active-bg: var(--theme-primary-bg-subtle);
	--theme-btn-active-border-color: var(--theme-primary);
	--theme-btn-disabled-color: var(--theme-secondary-color);
	--theme-btn-disabled-bg: var(--theme-secondary-bg);
	--theme-btn-disabled-border-color: var(--theme-border-color);
	--theme-btn-font-weight: 700;
}

/* The quiet card-header button (Toevoegen, + Taak, Open): a soft grey fill without border, primary tint on hover. */
.btn-soft-neutral {
	--theme-btn-color: var(--theme-body-color);
	--theme-btn-bg: var(--theme-tertiary-bg);
	--theme-btn-border-color: transparent;
	--theme-btn-hover-color: var(--theme-primary-text-emphasis);
	--theme-btn-hover-bg: var(--theme-primary-bg-subtle);
	--theme-btn-hover-border-color: transparent;
	--theme-btn-focus-shadow-rgb: var(--theme-primary-rgb);
	--theme-btn-active-color: var(--theme-primary-text-emphasis);
	--theme-btn-active-bg: var(--theme-primary-bg-subtle);
	--theme-btn-active-border-color: transparent;
	--theme-btn-disabled-color: var(--theme-secondary-color);
	--theme-btn-disabled-bg: var(--theme-tertiary-bg);
	--theme-btn-disabled-border-color: transparent;
	--theme-btn-font-weight: 700;
}

/* The destructive button: white with a soft red border, red text; fills on hover as UBold does. */
.btn-outline-danger {
	--theme-btn-bg: var(--theme-secondary-bg);
	--theme-btn-border-color: var(--furnstream-danger-outline-border);
	--theme-btn-disabled-bg: var(--theme-secondary-bg);
	--theme-btn-disabled-border-color: var(--furnstream-danger-outline-border);
}

/* === Alerts: the mockup strip (radius 12px, padding 12/16), so every .alert matches furnstream-alert === */

.alert {
	--theme-alert-border-radius: 12px;
	--theme-alert-padding-x: 16px;
	--theme-alert-padding-y: 12px;
}

/* === Status chips: a pill with a dot in currentColor; meta chips (Type, Locatie, counters) carry no dot.
	The colour modifier is the payload colour (statusColor / paymentStatusColor); 'secondary' is the neutral grey. === */

.furnstream-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 999px;
	padding: 4px 11px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	vertical-align: middle;
}

.furnstream-chip::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.furnstream-chip-meta::before {
	display: none;
}

.furnstream-chip-sm {
	font-size: 10.5px;
	padding: 2px 8px;
}

.furnstream-chip-success {
	background: var(--theme-success-bg-subtle);
	color: var(--theme-success-text-emphasis);
}

.furnstream-chip-warning {
	background: var(--theme-warning-bg-subtle);
	color: var(--theme-warning-text-emphasis);
}

.furnstream-chip-danger {
	background: var(--theme-danger-bg-subtle);
	color: var(--theme-danger-text-emphasis);
}

.furnstream-chip-info {
	background: var(--theme-info-bg-subtle);
	color: var(--theme-info-text-emphasis);
}

.furnstream-chip-primary {
	background: var(--theme-primary-bg-subtle);
	color: var(--theme-primary-text-emphasis);
}

.furnstream-chip-secondary,
.furnstream-chip-neutral {
	background: var(--furnstream-chip-neutral-bg);
	color: var(--furnstream-chip-neutral-color);
}

/* === Avatar: the 42px gradient circle with initials on the Klant card (13px, so the mockup's 800 stays) === */

.furnstream-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 70%, var(--theme-white)), var(--theme-primary));
	color: var(--theme-white);
	font-size: 13px;
	font-weight: 800;
}

/* The Medewerker card's avatar: an info-tinted circle with a user icon, apart from the customer's gradient. */
.furnstream-avatar-employee {
	background: var(--theme-info-bg-subtle);
	color: var(--theme-info-text-emphasis);
	font-size: 18px;
}

/* === Tables === */

.table {
	font-variant-numeric: tabular-nums;
}

/* The two caption head variants (thead.table-light / thead.bg-light) plus every DataTable head (DataTables
	builds its own bare <thead>), all in the mockup's caption style. */
.table > thead.table-light > tr > th,
.table > thead.table-light > tr > td,
.table > thead.bg-light > tr > th,
.table > thead.bg-light > tr > td,
.table.dataTable > thead > tr > th,
.table.dataTable > thead > tr > td {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	padding: 12px 14px;
	background-color: var(--furnstream-table-head-bg) !important;
	color: var(--theme-secondary-color) !important;
	border-color: var(--theme-border-color) !important;
}

/* DataTables' sort arrows keep their own colour; the caption head only needs them to sit level with the text.
	Non-sortable heads have no arrow span, so the row centres vertically instead of Bootstrap's bottom alignment. */
.table.dataTable > thead > tr > th {
	vertical-align: middle;
}

.table.dataTable > thead > tr > th span.dt-column-order {
	opacity: .7;
}

/* Body cells under a caption head take the head's 14px side padding (mockup 13×14), so text and head line up;
	the action cell of custom.css keeps its narrow width. Bare <thead> tables keep UBold's own cell padding.
	The document tables in furnstream-components.css widen their edge cells with heavier selectors than these. */
.table.dataTable > tbody > tr > td:not(.datatable-action-cell),
.table:has(> thead.table-light) > tbody > tr > td:not(.datatable-action-cell),
.table:has(> thead.bg-light) > tbody > tr > td:not(.datatable-action-cell) {
	padding-left: 14px;
	padding-right: 14px;
}

.card .table > tbody > tr:last-child > td,
.card .table > tbody > tr:last-child > th {
	border-bottom-width: 0;
}

/* === Inputs === */

.form-control,
.form-select {
	border-radius: 10px;
	min-height: 38px;
}

.input-group-text {
	border-radius: 10px;
}

.form-control-sm,
.form-select-sm {
	min-height: 34px;
}

textarea.form-control {
	min-height: 38px;
}

/* select2's own stylesheet is collected after this skin (index.tpl prints the library CSS last), so on equal
	specificity its --default rules win: a 28px high, #aaa-bordered, 4px-rounded box next to the 38px inputs.
	The html prefix outranks those rules without !important and lines the box up with .form-control / .form-select. */
html .select2-container .select2-selection--single,
html .select2-container .select2-selection--multiple {
	min-height: 38px;
	height: auto;
	background-color: var(--theme-secondary-bg);
	border: var(--theme-border-width) solid var(--theme-border-color);
	border-radius: 10px;
}

html .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
	padding-inline-start: 12px;
	padding-inline-end: 32px;
	color: var(--theme-body-color);
}

html .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--theme-secondary-color);
}

html .select2-container .select2-selection--single .select2-selection__arrow {
	height: 36px;
	top: 0;
	inset-inline-end: 8px;
}

html .select2-container .select2-selection--multiple .select2-selection__rendered {
	padding-inline-start: 8px;
}

/* Same focus border as .form-control:focus; !important only because UBold's multiple border is declared that way. */
html .select2-container--focus .select2-selection--single,
html .select2-container--open .select2-selection--single {
	border-color: var(--theme-dark-border-subtle);
}

html .select2-container--focus .select2-selection--multiple,
html .select2-container--open .select2-selection--multiple {
	border-color: var(--theme-dark-border-subtle) !important;
}

html .select2-dropdown {
	border-color: var(--theme-border-color);
	border-radius: 10px;
}

html .select2-dropdown--below {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

html .select2-dropdown--above {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

html .select2-container--default .select2-search--dropdown .select2-search__field {
	border-color: var(--theme-border-color);
	border-radius: 10px;
}

/* === Topbar search === */

.global-search .topbar-search {
	width: 320px;
	border-radius: 10px;
	font-size: 13px;
}

.global-search-results {
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	width: 100%;
	min-width: 0;
	max-height: 60vh;
	overflow-y: auto;
	padding: 6px;
	border-radius: 12px;
	box-shadow: var(--theme-box-shadow);
}

.global-search-caption {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
	padding: 8px 10px 4px;
}

.global-search-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 10px;
	border-radius: 8px;
	white-space: normal;
}

.global-search-item.active,
.global-search-item:hover,
.global-search-item:focus {
	background-color: var(--theme-tertiary-bg);
	color: var(--theme-body-color);
}

.global-search-item-label {
	font-size: 13px;
	font-weight: 700;
}

.global-search-item-sub {
	font-size: 12px;
	color: var(--theme-secondary-color);
}

.global-search-empty {
	padding: 10px;
	font-size: 13px;
	color: var(--theme-secondary-color);
}

/* Below xl the field is hidden behind a topbar icon; opened, it floats full-width under the topbar. */
@media (max-width: 1199.98px) {
	.global-search.global-search-open {
		display: flex !important;
		position: absolute;
		left: 16px;
		right: 16px;
		top: calc(var(--theme-topbar-height) + 8px);
		z-index: 1006;
	}

	.global-search.global-search-open .topbar-search {
		width: 100%;
		background-color: var(--theme-secondary-bg) !important;
		color: var(--theme-body-color) !important;
		border-color: var(--theme-border-color) !important;
		box-shadow: var(--theme-box-shadow);
	}
}