/* PanelSelect — unified dropdown / autocomplete styles
 *
 * Combobox-style: control IS the search input (no separate search row in dropdown).
 * BEM naming (root: .panel-select). All colors via design tokens defined in
 * funkcije/panel.php :root + body.dark — supports dark mode automatically.
 * No hardcoded hex / rgb values.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.panel-select {
	position: relative;
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 13px;
	color: var(--text-primary);
	margin-bottom: 20px;
}

/* Source <select>/<input> са `.last` класом одваja поље да нема bottom space — wrapper
   треба исто да изостави margin јер source je скривен унутар wrapper-а. */
.panel-select:has(> .last) {
	margin-bottom: 0;
}

.panel-select__native {
	position: absolute !important;
	clip: rect(0 0 0 0);
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

/* ── Control (the visible input + chrome) ─────────────────────────────── */
.panel-select__control {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: var(--space-3) var(--space-3);
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: text;
	box-sizing: border-box;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
	gap: var(--space-2);
}

.panel-select__control:hover {
	border-color: var(--border-color-dark);
}

.panel-select--open .panel-select__control,
.panel-select__control:focus-within {
	outline: none;
	border-color: rgba(var(--color-primary), .6);
	box-shadow: 0 0 0 3px rgba(var(--color-primary), .12);
}

/* Compact variant — for very narrow columns (one column / ~56px). Smaller padding,
   no placeholder text, smaller chevron, centered value. Opt-in via data-compact="true". */
.panel-select--compact .panel-select__control {
	padding: var(--space-2) var(--space-2);
	gap: var(--space-1);
}

.panel-select--compact .panel-select__input {
	min-width: 0;
	padding: 0;
	text-align: center;
}

.panel-select--compact .panel-select__caret {
	font-size: 14px;
	flex: 0 0 auto;
}

.panel-select--compact .panel-select__caret > i {
	font-size: 14px;
}

.panel-select--compact .panel-select__clear {
	font-size: 14px;
	padding: 0 2px;
}

/* Compact dropdown — center option text, smaller padding, hide footer count.
   No check icon — instead use stronger background fill on selected (no room
   for both text + icon in narrow rows). */
.panel-select__dropdown--compact .panel-select__option {
	padding: var(--space-2) var(--space-3);
	justify-content: center;
	text-align: center;
}

.panel-select__dropdown--compact .panel-select__option--selected::after {
	display: none;
}

.panel-select__dropdown--compact .panel-select__option--selected {
	background: rgba(var(--color-primary), .15);
	color: rgba(var(--color-primary), 1);
	font-weight: 600;
}

.panel-select__dropdown--compact .panel-select__more {
	display: none;
}

.panel-select--disabled .panel-select__control {
	background: var(--border-color);
	color: var(--text-muted);
	cursor: not-allowed;
}

/* The actual <input> — borderless, fills available space.
 * Eksplicitna height + line-height u px-evima (ne procentima/em-ovima) da focus
 * state i caret rendering NE menjaju visinu. Globalni `* { transition: all .15s }`
 * iz custom.css:20 inače animira font metrike — eksplicitno isključeno ovde. */
.panel-select__input {
	flex: 1 1 auto;
	min-width: 60px;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit;
	font-size: 13px;
	color: var(--text-primary) !important;
	height: 24px !important;
	min-height: 24px;
	line-height: 24px;
	width: 100%;
	transition: none !important;
}

.panel-select__input::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

.panel-select--has-value:not(.panel-select--multiple) .panel-select__input {
	color: var(--text-primary) !important;
	font-weight: 400;
}

/* Caret */
.panel-select__caret {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 16px;
	cursor: pointer;
	transition: transform .15s, color .15s;
	width: 20px;
	height: 20px;
}

.panel-select__caret:hover {
	color: var(--text-secondary);
}

.panel-select--open .panel-select__caret {
	transform: rotate(180deg);
}

/* Clear button */
.panel-select__clear {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: var(--text-muted);
	line-height: 1;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-circle);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s, color .15s;
}

.panel-select__clear:hover {
	background: rgba(var(--black-rgb), .08);
	color: var(--text-primary);
}

.panel-select__clear[hidden] { display: none; }

/* Result count + spinner — inline in control */
.panel-select__count {
	flex: 0 0 auto;
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 700;
	padding: 2px var(--space-2);
	white-space: nowrap;
	line-height: 1.4;
}

.panel-select__count[hidden] { display: none; }

.panel-select__spinner {
	flex: 0 0 auto;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Eksplicitne dimenzije da spinner ne menja visinu kontrole pri pojavi/nestajanju.
	 * MDI ikone imaju internal padding i mogu rasti veće od font-size — ovde se
	 * sve pakuje u fiksni 20×20 boks. */
	width: 20px;
	height: 20px;
	line-height: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

.panel-select__spinner i {
	font-size: 16px;
	line-height: 1;
	animation: panel-select-spin 1s linear infinite;
}

.panel-select__spinner[hidden] { display: none; }

@keyframes panel-select-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ── Multi-select tags ────────────────────────────────────────────────── */
.panel-select--multiple .panel-select__control {
	padding: var(--space-2) var(--space-3);
	flex-wrap: wrap;
}

.panel-select__tags {
	display: contents; /* tags are direct flex children alongside input */
}

.panel-select__tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(var(--color-primary), .12);
	color: rgba(var(--color-primary), 1);
	border-radius: var(--radius-pill);
	padding: 2px var(--space-2) 2px var(--space-3);
	font-size: 13px;
	max-width: 100%;
}

.panel-select__tag-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.panel-select__tag-remove {
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	width: 18px;
	height: 18px;
	border-radius: var(--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s;
}

.panel-select__tag-remove:hover {
	background: rgba(var(--black-rgb), .12);
}

/* ── Dropdown (portal-mode appended to body, inline-mode inside wrapper) ─ */
.panel-select__dropdown {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	min-width: 240px;
	max-width: 720px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-height: 320px;
	/* Project-wide `* { transition: all .15s }` u custom.css:20 inače animira
	 * width/top/left/box-shadow kad se dropdown postavi position-om iz JS-a —
	 * vidi kao "širenje" pri otvaranju. Explicitno isključeno. */
	transition: none !important;
}

.panel-select__dropdown--portal {
	position: absolute;
	z-index: 350; /* above modals (--z-modal: 300) but below loader (--z-loader: 400) and toasts (--z-toast: 500) */
	/* Prevent click-through to elements behind the dropdown — defensive against
	   underlying buttons (e.g., card-footer .action) capturing clicks on the
	   option's empty flex area when text doesn't fill full width. */
	pointer-events: auto;
}

.panel-select__dropdown--portal .panel-select__option {
	/* Explicit pointer-events + z-index lock — global `* { transition: all .15s }`
	   from custom.css can briefly animate stacking, causing click-through bugs. */
	pointer-events: auto;
	position: relative;
	z-index: 1;
	transition: background-color .12s, color .12s !important;
}

.panel-select:not(.panel-select--open) .panel-select__dropdown:not(.panel-select__dropdown--portal) {
	display: none;
}

/* ── List ────────────────────────────────────────────────────────────── */
.panel-select__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
	/* Default (small rows): 7 × 40px = 280px (border je inside via box-sizing border-box). */
	max-height: 280px;
	/* Scroll snap u proximity mode-u — soft snap kad se skrol prirodno smiri,
	   ali ne prekida brz scroll (mandatory + scroll-snap-stop: always blokirao
	   wheel evente pri brzom skrolu, posebno tokom infinite-scroll loadinga). */
	scroll-snap-type: y proximity;
	overscroll-behavior: contain;
}

/* Large mode — auto-detected u JS (vidi _renderList) kad rendered options imaju
 * .panel-select__option-secondary (dvolinijski sadržaj). Ovde se prilagođava i
 * visina opcije i max-height liste tako da je tačno 5 velikih opcija vidljivo. */
.panel-select__list--has-large {
	max-height: 300px; /* 5 × 60 */
}
.panel-select__list--has-large .panel-select__option {
	min-height: 60px;
}
.panel-select__list--has-large .panel-select__option-text {
	line-height: 24px;
}
.panel-select__list--has-large .panel-select__option-secondary {
	font-size: 12px;
	line-height: 16px;
}

.panel-select__option {
	padding: var(--space-3) var(--space-4);
	min-height: 40px;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	transition: background-color .12s, color .12s;
	color: var(--text-primary);
	line-height: 1.7;
	border-bottom: 1px solid var(--border-color);
	scroll-snap-align: start;
	/* scroll-snap-stop: always uklonjeno — blokirao je brz scroll jer je
	   browser MORAO da stane na svakoj opciji, što je presretalo wheel evente
	   tokom infinite-scroll fetch-a. Sa proximity mode-om to nije potrebno. */
}

.panel-select__option:last-child {
	border-bottom: none;
}

.panel-select__option:hover {
	background: var(--bg-hover);
}

.panel-select__option--active {
	background: rgba(var(--color-primary), .08);
	color: var(--text-primary);
}

.panel-select__option--selected {
	font-weight: 500;
	color: rgba(var(--color-primary), 1);
	background: rgba(var(--color-primary), .06);
	position: relative;
}

.panel-select__option--selected::after {
	content: "\F012C"; /* mdi-check */
	font-family: "Material Design Icons";
	font-size: 16px;
	color: rgba(var(--color-primary), 1);
	margin-left: auto;
	padding-left: 8px;
	flex: 0 0 auto;
}

/* When option is both active (keyboard) and selected — keep primary highlight visible */
.panel-select__option--selected.panel-select__option--active {
	background: rgba(var(--color-primary), .12);
}

.panel-select__option--disabled {
	cursor: not-allowed;
	color: var(--text-muted);
	opacity: .6;
}

.panel-select__option--disabled:hover {
	background: transparent;
}

.panel-select__option-row {
	flex: 1 1 auto;
	min-width: 0;
}

.panel-select__option-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.panel-select__option-secondary {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.panel-select__option-badge {
	flex: 0 0 auto;
	background: var(--bg-input);
	color: var(--text-secondary);
	border-radius: var(--radius-sm);
	font-size: 11px;
	padding: 2px var(--space-2);
	font-family: "JetBrains Mono", monospace;
	white-space: nowrap;
}

.panel-select__group-label {
	padding: var(--space-3) var(--space-4);
	font-size: 11px;
	font-weight: 600;
	color: rgba(var(--color-accent), 1);
	background: rgba(var(--color-accent), .05);
	border-bottom: 1px solid var(--border-color);
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: default;
	user-select: none;
}

/* ── Empty / loading / more ──────────────────────────────────────────── */

/* Empty state — visually paired with .panel-select__prompt below.
 * Same padding, icon size/color, text size/weight, background tint —
 * so users perceive empty + prompt as the same "info" component family. */
.panel-select__empty {
	padding: var(--space-5) var(--space-4);
	text-align: center;
	color: var(--text-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	background: rgba(var(--color-primary), .04);
}

.panel-select__empty-icon {
	font-size: 28px;
	color: rgba(var(--color-primary), .7);
	opacity: 1;
	line-height: 1;
}

.panel-select__empty-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
}

.panel-select__empty-hint {
	font-size: 12px;
	color: var(--text-muted);
}

.panel-select__loading {
	padding: var(--space-5) var(--space-4);
	text-align: center;
	color: var(--text-muted);
	font-size: 13px;
}

/* Prompt — shown when user has typed below minChars threshold.
 * Different visual from "no results" — this is a hint, not a failure. */
.panel-select__prompt {
	padding: var(--space-5) var(--space-4);
	text-align: center;
	color: var(--text-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	background: rgba(var(--color-primary), .04);
}

.panel-select__prompt-icon {
	font-size: 28px;
	color: rgba(var(--color-primary), .7);
	line-height: 1;
}

.panel-select__prompt-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
}

.panel-select__empty[hidden],
.panel-select__loading[hidden],
.panel-select__prompt[hidden],
.panel-select__more[hidden] { display: none; }

.panel-select__more {
	padding: var(--space-2) var(--space-4);
	text-align: center;
	font-size: 12px;
	color: var(--text-muted);
	background: var(--bg-card-header);
	border-top: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════════
 * EMPTY STATE VARIANTS — pick one as canonical
 * ══════════════════════════════════════════════════════════════════════ */

/* Variant: compact — small icon inline, single line */
.panel-select__empty--compact {
	flex-direction: row;
	gap: var(--space-3);
	padding: var(--space-4);
	justify-content: center;
	align-items: center;
}
.panel-select__empty--compact .panel-select__empty-icon {
	font-size: 18px;
	margin-bottom: 0;
	opacity: 1;
	color: var(--text-secondary);
}
.panel-select__empty--compact .panel-select__empty-text {
	font-size: 13px;
	font-weight: 500;
}
.panel-select__empty--compact .panel-select__empty-hint {
	display: none;
}

/* Variant: minimal — text only, no icon, small */
.panel-select__empty--minimal .panel-select__empty-icon {
	display: none;
}
.panel-select__empty--minimal {
	padding: var(--space-4);
	gap: 2px;
}
.panel-select__empty--minimal .panel-select__empty-text {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-secondary);
	font-style: italic;
}
.panel-select__empty--minimal .panel-select__empty-hint {
	font-size: 11px;
}

/* Variant: card — bordered light card around content */
.panel-select__empty--card {
	margin: var(--space-3);
	padding: var(--space-5) var(--space-4);
	background: var(--bg-input);
	border: 1px dashed var(--border-color-dark);
	border-radius: var(--radius-md);
}
.panel-select__empty--card .panel-select__empty-icon {
	font-size: 32px;
	color: var(--text-muted);
}
.panel-select__empty--card .panel-select__empty-text {
	font-size: 14px;
}

/* Variant: illustrated — icon in primary-tinted circle, big visual */
.panel-select__empty--illustrated {
	padding: var(--space-6) var(--space-4) var(--space-5);
}
.panel-select__empty--illustrated .panel-select__empty-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-circle);
	background: rgba(var(--color-primary), .1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: rgba(var(--color-primary), 1);
	opacity: 1;
	margin-bottom: var(--space-3);
}
.panel-select__empty--illustrated .panel-select__empty-text {
	font-size: 15px;
	font-weight: 600;
}

/* Variant: action — base empty state + CTA link to clear search.
 * Inherits paired (icon/text/bg) styling from the base — only adds the button. */
.panel-select__empty--action .panel-select__empty-action {
	display: inline-block;
	margin-top: var(--space-2);
	padding: 6px 14px;
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s;
}
.panel-select__empty--action .panel-select__empty-action:hover {
	background: rgba(var(--color-primary), .85);
}

/* ═══════════════════════════════════════════════════════════════════════
 * FOOTER COUNT VARIANTS — pick one as canonical
 * ══════════════════════════════════════════════════════════════════════ */

/* Variant: emphasized — primary color bg, bold count */
.panel-select__more--emphasized {
	background: rgba(var(--color-primary), .08);
	color: rgba(var(--color-primary), 1);
	font-weight: 600;
	font-size: 12px;
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid rgba(var(--color-primary), .15);
}

/* Variant: two-line — large count + small label */
.panel-select__more--two-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-3) var(--space-4);
}
.panel-select__more--two-line .ps-count-num {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	font-family: "JetBrains Mono", monospace;
	line-height: 1;
}
.panel-select__more--two-line .ps-count-label {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Variant: stat-bar — split: shown left, total right */
.panel-select__more--stat-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	font-size: 12px;
}
.panel-select__more--stat-bar .ps-stat-left {
	color: var(--text-secondary);
}
.panel-select__more--stat-bar .ps-stat-right {
	color: var(--text-primary);
	font-weight: 600;
	font-family: "JetBrains Mono", monospace;
}
.panel-select__more--stat-bar .ps-stat-total {
	color: var(--text-muted);
}

/* Variant: chip — count rendered as a styled pill in middle */
.panel-select__more--chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
	font-size: 11px;
	color: var(--text-muted);
}
.panel-select__more--chip .ps-chip {
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
	border-radius: var(--radius-pill);
	padding: 2px var(--space-3);
	font-size: 11px;
	font-weight: 700;
	font-family: "JetBrains Mono", monospace;
}

/* Variant: progress — count + thin progress bar showing shown/total */
.panel-select__more--progress {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-4);
	background: rgba(var(--color-primary), .08);
	color: rgba(var(--color-primary), 1);
	border-top: 1px solid rgba(var(--color-primary), .15);
	font-size: 12px;
}
.panel-select__more--progress .ps-prog-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: rgba(var(--color-primary), 1);
}
.panel-select__more--progress .ps-prog-row strong {
	font-weight: 700;
}
.panel-select__more--progress .ps-prog-bar {
	height: 3px;
	background: rgba(var(--color-primary), .2);
	border-radius: var(--radius-pill);
	overflow: hidden;
	margin-bottom: 3px;
}
.panel-select__more--progress .ps-prog-fill {
	height: 100%;
	background: rgba(var(--color-primary), 1);
	border-radius: var(--radius-pill);
}

/* ── EMPTY STATE — 10 додатних варијанти (7-16) ──────────────────────── */

/* 7. side-by-side — horizontal: icon left, text right */
.panel-select__empty--side-by-side {
	flex-direction: row;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	text-align: left;
	justify-content: flex-start;
}
.panel-select__empty--side-by-side .panel-select__empty-icon {
	font-size: 32px;
	margin-bottom: 0;
	flex: 0 0 auto;
}
.panel-select__empty--side-by-side > div {
	flex: 1 1 auto;
	text-align: left;
}

/* 8. friendly — colored icon, friendlier copy via class */
.panel-select__empty--friendly .panel-select__empty-icon {
	color: rgba(var(--status-orange), 1);
	opacity: 1;
	font-size: 36px;
}
.panel-select__empty--friendly .panel-select__empty-text {
	color: var(--text-primary);
	font-size: 14px;
}
.panel-select__empty--friendly .panel-select__empty-hint {
	color: var(--text-secondary);
	font-size: 12px;
	font-style: normal;
}

/* 9. quote — left primary border + italic */
.panel-select__empty--quote {
	flex-direction: row;
	align-items: stretch;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-left: 3px solid rgba(var(--color-primary), 1);
	background: rgba(var(--color-primary), .04);
	margin: var(--space-3);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.panel-select__empty--quote .panel-select__empty-icon {
	display: none;
}
.panel-select__empty--quote > div {
	text-align: left;
}
.panel-select__empty--quote .panel-select__empty-text {
	font-style: italic;
	font-size: 13px;
	color: var(--text-primary);
}
.panel-select__empty--quote .panel-select__empty-hint {
	color: var(--text-muted);
	font-size: 11px;
}

/* 10. outlined-icon — icon in outline circle */
.panel-select__empty--outlined .panel-select__empty-icon {
	width: 56px;
	height: 56px;
	border: 2px solid rgba(var(--color-primary), .3);
	border-radius: var(--radius-circle);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: rgba(var(--color-primary), .7);
	opacity: 1;
	background: transparent;
}

/* 11. text-only-large — just big text, no icon */
.panel-select__empty--big-text .panel-select__empty-icon {
	display: none;
}
.panel-select__empty--big-text {
	padding: var(--space-6) var(--space-4);
	gap: var(--space-2);
}
.panel-select__empty--big-text .panel-select__empty-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -.5px;
}
.panel-select__empty--big-text .panel-select__empty-hint {
	font-size: 13px;
}

/* 12. banner — horizontal thin banner */
.panel-select__empty--banner {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--bg-card-header);
	border-bottom: 1px solid var(--border-color);
	justify-content: flex-start;
}
.panel-select__empty--banner .panel-select__empty-icon {
	font-size: 16px;
	margin-bottom: 0;
}
.panel-select__empty--banner .panel-select__empty-text {
	font-size: 13px;
	font-weight: 500;
}
.panel-select__empty--banner .panel-select__empty-hint {
	margin-left: auto;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
}

/* 13. dotted-bg — subtle dotted background pattern */
.panel-select__empty--dotted {
	background-image: radial-gradient(rgba(var(--color-primary), .08) 1px, transparent 1px);
	background-size: 12px 12px;
	padding: var(--space-6) var(--space-4);
}
.panel-select__empty--dotted .panel-select__empty-icon {
	color: rgba(var(--color-primary), .6);
	opacity: 1;
}

/* 14. suggestion-chips — empty + "Покушај: chip chip chip" */
.panel-select__empty--suggest .panel-select__empty-suggest {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--space-3);
}
.panel-select__empty--suggest .panel-select__empty-suggest-label {
	font-size: 11px;
	color: var(--text-muted);
	margin-right: var(--space-2);
	align-self: center;
}
.panel-select__empty--suggest .panel-select__empty-chip {
	background: var(--bg-input);
	color: var(--text-primary);
	padding: 3px var(--space-3);
	border-radius: var(--radius-pill);
	font-size: 11px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
	border: 1px solid var(--border-color);
}
.panel-select__empty--suggest .panel-select__empty-chip:hover {
	background: rgba(var(--color-primary), .15);
	color: rgba(var(--color-primary), 1);
	border-color: rgba(var(--color-primary), .3);
}

/* 15. ghost — very subtle, muted */
.panel-select__empty--ghost {
	padding: var(--space-4);
	opacity: .55;
}
.panel-select__empty--ghost .panel-select__empty-icon {
	font-size: 24px;
}
.panel-select__empty--ghost .panel-select__empty-text {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 400;
}
.panel-select__empty--ghost .panel-select__empty-hint {
	display: none;
}

/* 16. error-style — uses status-red */
.panel-select__empty--error .panel-select__empty-icon {
	color: rgba(var(--status-red), 1);
	opacity: 1;
}
.panel-select__empty--error .panel-select__empty-text {
	color: rgba(var(--status-red), 1);
	font-weight: 600;
}

/* ── FOOTER COUNT — 10 додатних варијанти (7-16) ─────────────────────── */

/* 7. bracket-mono — [ 50 / 118 ] */
.panel-select__more--bracket {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--text-secondary);
	padding: var(--space-3) var(--space-4);
	letter-spacing: .5px;
}
.panel-select__more--bracket .ps-bracket-num {
	color: rgba(var(--color-primary), 1);
	font-weight: 700;
}

/* 8. icon-prefix — small magnify icon + count */
.panel-select__more--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	font-size: 12px;
	color: var(--text-secondary);
}
.panel-select__more--icon i {
	font-size: 14px;
	color: rgba(var(--color-primary), .7);
}

/* 9. right-aligned — hint left, count right */
.panel-select__more--right {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-3) var(--space-4);
	font-size: 12px;
}
.panel-select__more--right .ps-right-hint {
	color: var(--text-muted);
	font-size: 11px;
}
.panel-select__more--right .ps-right-count {
	color: var(--text-primary);
	font-weight: 600;
	font-family: "JetBrains Mono", monospace;
}

/* 10. hairline — ultra thin top divider, tight padding */
.panel-select__more--hairline {
	padding: var(--space-2) var(--space-3);
	font-size: 11px;
	color: var(--text-muted);
	background: transparent;
	border-top: 1px solid var(--border-color);
}

/* 11. pill-row — two side-by-side pills */
.panel-select__more--pill-row {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
	padding: var(--space-3);
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
}
.panel-select__more--pill-row .ps-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px var(--space-3);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 500;
}
.panel-select__more--pill-row .ps-pill--shown {
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
}
.panel-select__more--pill-row .ps-pill--total {
	background: var(--bg-input);
	color: var(--text-secondary);
}

/* 12. with-action — count + clickable "Прикажи све" link */
.panel-select__more--action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	font-size: 12px;
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
}
.panel-select__more--action .ps-action-count {
	color: var(--text-secondary);
}
.panel-select__more--action .ps-action-link {
	color: rgba(var(--color-primary), 1);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-size: 12px;
}
.panel-select__more--action .ps-action-link:hover {
	text-decoration: underline;
}

/* 13. donut — small circular progress */
.panel-select__more--donut {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	font-size: 12px;
	color: var(--text-secondary);
}
.panel-select__more--donut .ps-donut {
	width: 22px;
	height: 22px;
	border-radius: var(--radius-circle);
	background: conic-gradient(rgba(var(--color-primary), 1) 0deg 152deg, var(--border-color) 152deg 360deg);
	position: relative;
	flex: 0 0 auto;
}
.panel-select__more--donut .ps-donut::after {
	content: "";
	position: absolute;
	inset: 4px;
	background: var(--bg-card);
	border-radius: var(--radius-circle);
}

/* 14. orange-warn — orange-tinted when capped */
.panel-select__more--warn {
	background: rgba(var(--status-orange), .1);
	color: rgba(var(--status-orange), 1);
	font-weight: 500;
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid rgba(var(--status-orange), .25);
	font-size: 12px;
}

/* 15. dot-separator — minimal "X · Y · Z" with dots */
.panel-select__more--dots {
	padding: var(--space-2) var(--space-4);
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: .3px;
	font-family: "JetBrains Mono", monospace;
}
.panel-select__more--dots .ps-dot-num {
	color: var(--text-primary);
	font-weight: 600;
}

/* 16. compact-stat — left aligned single-line, no border */
.panel-select__more--compact {
	padding: 6px var(--space-4);
	font-size: 11px;
	color: var(--text-muted);
	background: transparent;
	border-top: none;
	text-align: left;
	letter-spacing: .3px;
}
.panel-select__more--compact .ps-compact-num {
	color: rgba(var(--color-primary), 1);
	font-weight: 700;
}

/* ── Highlight (reuses project-wide .highlight) ──────────────────────── */
.panel-select__option .highlight {
	background: rgba(var(--color-primary), .15);
	color: rgba(var(--color-primary), 1);
	padding: 0 1px;
	border-radius: var(--radius-xs);
	font-weight: 600;
}

.panel-select__dropdown--above {
	box-shadow: 0 -4px 10px rgba(var(--black-rgb), .1);
}

/* ── Has-value chrome tweaks ─────────────────────────────────────────── */
.panel-select--has-value .panel-select__control {
	background: var(--bg-card);
}

/* ── Mobile responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.panel-select__dropdown {
		max-width: 95vw;
		max-height: 50vh;
	}
	.panel-select__list {
		max-height: 35vh;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * THEMES
 *
 * Apply via `theme: "..."` option or `data-theme="..."` attribute.
 *
 * Material variants (5):
 *   material          → filled, bottom-line accent (default Material)
 *   material-outlined → outlined box, primary border on focus
 *   material-elevated → elevated card with soft shadow
 *   material-tonal    → primary tinted background
 *   material-bold     → Material You — large pill, bold accent
 *
 * Other variants:
 *   apple, minimal, glass, sharp
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Material Mix (FINAL — filled + elevated, left-accent, padding-shift, bottom count) ──
 *
 * Mix of Material Filled (filled bg + left-border accent on active) and
 * Material Elevated (padding-shift on hover/active). Bottom count instead of
 * in-control badge. No bottom-line border — softly rounded all around.
 * This is the canonical/final style. */
.panel-select--theme-material-mix .panel-select__control {
	background: var(--bg-input);
	/* Border je UVEK 1px видљив (само mu се mijenja boja) — да transparent → color
	 * tranzicija ne даје utisak da se kontrola "povećava" za debljinu border-a. */
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: background-color .2s, border-color .2s;
}
.panel-select--theme-material-mix .panel-select__control:hover {
	background: rgba(var(--color-primary), .06);
	border-color: var(--border-color-dark);
}
.panel-select--theme-material-mix.panel-select--open .panel-select__control,
.panel-select--theme-material-mix .panel-select__control:focus-within {
	background: rgba(var(--color-primary), .06);
	border-color: rgba(var(--color-primary), .35);
	box-shadow: none;
}
/* Hide top count — moved to bottom in this theme */
.panel-select--theme-material-mix .panel-select__count {
	display: none !important;
}
.panel-select--theme-material-mix .panel-select__caret {
	color: rgba(var(--color-primary), .7);
}

.panel-select__dropdown--theme-material-mix {
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(var(--black-rgb), .18), 0 2px 6px rgba(var(--black-rgb), .08);
}
.panel-select__dropdown--theme-material-mix .panel-select__option {
	border-left: 3px solid transparent;
	transition: background-color .15s, border-left-color .15s, padding-left .15s;
}
.panel-select__dropdown--theme-material-mix .panel-select__option:hover {
	background: rgba(var(--color-primary), .06);
	padding-left: calc(var(--space-4) + 4px);
}
.panel-select__dropdown--theme-material-mix .panel-select__option--active {
	background: rgba(var(--color-primary), .1);
	border-left-color: rgba(var(--color-primary), 1);
	padding-left: calc(var(--space-4) + 4px);
}
/* NOTE: __more / __empty styling for material-mix is intentionally NOT overridden here.
 * Otherwise that would beat the footer/empty variant classes (--emphasized, --action, etc.)
 * via specificity. Variants are the "intended" footer/empty look — theme stays out of it. */

/* ── Material (filled, bottom-line) ──────────────────────────────────── */
.panel-select--theme-material .panel-select__control {
	background: var(--bg-input);
	border: none;
	border-bottom: 2px solid var(--border-color-dark);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	transition: border-color .25s, background-color .2s;
}
.panel-select--theme-material .panel-select__control:hover {
	background: rgba(var(--color-primary), .07);
	border-bottom-color: rgba(var(--color-primary), .4);
}
.panel-select--theme-material.panel-select--open .panel-select__control,
.panel-select--theme-material .panel-select__control:focus-within {
	border-bottom: 2px solid rgba(var(--color-primary), 1);
	background: rgba(var(--color-primary), .07);
	box-shadow: none;
}
.panel-select--theme-material .panel-select__caret {
	color: rgba(var(--color-primary), .8);
}
.panel-select__dropdown--theme-material {
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(var(--black-rgb), .18), 0 2px 6px rgba(var(--black-rgb), .08);
}
.panel-select__dropdown--theme-material .panel-select__option {
	border-left: 3px solid transparent;
}
.panel-select__dropdown--theme-material .panel-select__option--active {
	background: rgba(var(--color-primary), .1);
	border-left-color: rgba(var(--color-primary), 1);
}

/* ── Material Outlined ───────────────────────────────────────────────── */
.panel-select--theme-material-outlined .panel-select__control {
	background: var(--bg-card);
	border: 1px solid var(--border-color-dark);
	border-radius: var(--radius-sm);
	transition: border-color .2s, box-shadow .2s;
}
.panel-select--theme-material-outlined .panel-select__control:hover {
	border-color: rgba(var(--color-primary), .5);
}
.panel-select--theme-material-outlined.panel-select--open .panel-select__control,
.panel-select--theme-material-outlined .panel-select__control:focus-within {
	border: 2px solid rgba(var(--color-primary), 1);
	padding: calc(var(--space-3) - 1px) calc(var(--space-3) - 1px);
	box-shadow: none;
}
.panel-select__dropdown--theme-material-outlined {
	border: 1px solid var(--border-color-dark);
	border-radius: var(--radius-sm);
	box-shadow: 0 4px 12px rgba(var(--black-rgb), .12);
}
.panel-select__dropdown--theme-material-outlined .panel-select__option--active {
	background: rgba(var(--color-primary), .08);
}

/* ── Material Elevated (card-like) ───────────────────────────────────── */
.panel-select--theme-material-elevated .panel-select__control {
	background: var(--bg-card);
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 1px 3px rgba(var(--black-rgb), .12), 0 1px 2px rgba(var(--black-rgb), .08);
	transition: box-shadow .25s, transform .15s;
}
.panel-select--theme-material-elevated .panel-select__control:hover {
	box-shadow: 0 4px 8px rgba(var(--black-rgb), .14), 0 2px 4px rgba(var(--black-rgb), .1);
}
.panel-select--theme-material-elevated.panel-select--open .panel-select__control,
.panel-select--theme-material-elevated .panel-select__control:focus-within {
	box-shadow: 0 8px 16px rgba(var(--black-rgb), .18), 0 4px 8px rgba(var(--black-rgb), .12),
	            0 0 0 2px rgba(var(--color-primary), .4);
	background: var(--bg-card);
}
.panel-select__dropdown--theme-material-elevated {
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 12px 32px rgba(var(--black-rgb), .2), 0 4px 12px rgba(var(--black-rgb), .1);
}
.panel-select__dropdown--theme-material-elevated .panel-select__option {
	transition: background-color .12s, padding-left .15s;
}
.panel-select__dropdown--theme-material-elevated .panel-select__option--active {
	background: rgba(var(--color-primary), .12);
	padding-left: calc(var(--space-4) + 4px);
}

/* ── Material Tonal (primary tinted) ─────────────────────────────────── */
.panel-select--theme-material-tonal .panel-select__control {
	background: rgba(var(--color-primary), .08);
	border: none;
	border-radius: var(--radius-md);
	transition: background-color .2s, box-shadow .2s;
}
.panel-select--theme-material-tonal .panel-select__control:hover {
	background: rgba(var(--color-primary), .14);
}
.panel-select--theme-material-tonal.panel-select--open .panel-select__control,
.panel-select--theme-material-tonal .panel-select__control:focus-within {
	background: rgba(var(--color-primary), .16);
	box-shadow: 0 0 0 2px rgba(var(--color-primary), .35);
}
.panel-select--theme-material-tonal .panel-select__caret,
.panel-select--theme-material-tonal .panel-select__input::placeholder {
	color: rgba(var(--color-primary), .8);
}
.panel-select--theme-material-tonal .panel-select__input {
	color: rgba(var(--color-primary), 1) !important;
	font-weight: 500;
}
.panel-select__dropdown--theme-material-tonal {
	border: none;
	border-radius: var(--radius-md);
	background: var(--bg-card);
	box-shadow: 0 8px 24px rgba(var(--black-rgb), .15);
}
.panel-select__dropdown--theme-material-tonal .panel-select__option--active {
	background: rgba(var(--color-primary), .14);
	color: rgba(var(--color-primary), 1);
}

/* ── Material Bold (Material You — large pill, bold) ─────────────────── */
.panel-select--theme-material-bold .panel-select__control {
	background: rgba(var(--color-primary), .1);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	min-height: 48px;
	padding: 0 var(--space-4);
	font-size: 15px;
	font-weight: 500;
	transition: all .25s cubic-bezier(.2, 0, 0, 1);
}
.panel-select--theme-material-bold .panel-select__control:hover {
	background: rgba(var(--color-primary), .15);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--color-primary), .2);
}
.panel-select--theme-material-bold.panel-select--open .panel-select__control,
.panel-select--theme-material-bold .panel-select__control:focus-within {
	background: rgba(var(--color-primary), 1);
	border-color: rgba(var(--color-primary), 1);
	box-shadow: 0 6px 16px rgba(var(--color-primary), .35);
}
.panel-select--theme-material-bold.panel-select--open .panel-select__input,
.panel-select--theme-material-bold .panel-select__control:focus-within .panel-select__input {
	color: var(--text-white) !important;
}
.panel-select--theme-material-bold.panel-select--open .panel-select__input::placeholder,
.panel-select--theme-material-bold .panel-select__control:focus-within .panel-select__input::placeholder {
	color: rgba(var(--white-rgb), .8);
}
.panel-select--theme-material-bold.panel-select--open .panel-select__caret,
.panel-select--theme-material-bold .panel-select__control:focus-within .panel-select__caret {
	color: var(--text-white);
}
.panel-select__dropdown--theme-material-bold {
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 36px rgba(var(--black-rgb), .2);
	overflow: hidden;
	padding: var(--space-2);
}
.panel-select__dropdown--theme-material-bold .panel-select__option {
	border-radius: var(--radius-md);
	margin-bottom: 2px;
	font-weight: 500;
}
.panel-select__dropdown--theme-material-bold .panel-select__option--active {
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
}
.panel-select__dropdown--theme-material-bold .panel-select__option--active .panel-select__option-secondary,
.panel-select__dropdown--theme-material-bold .panel-select__option--active .caption-text {
	color: rgba(var(--white-rgb), .85);
}

/* ── Apple iOS ───────────────────────────────────────────────────────── */
.panel-select--theme-apple .panel-select__control {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	padding: 0 var(--space-4);
	min-height: 38px;
	transition: border-color .2s, box-shadow .2s;
	box-shadow: 0 1px 2px rgba(var(--black-rgb), .04);
}
.panel-select--theme-apple .panel-select__control:hover {
	border-color: var(--border-color-dark);
}
.panel-select--theme-apple.panel-select--open .panel-select__control,
.panel-select--theme-apple .panel-select__control:focus-within {
	border-color: rgba(var(--color-primary), 1);
	box-shadow: 0 0 0 4px rgba(var(--color-primary), .15);
}
.panel-select--theme-apple .panel-select__caret {
	font-size: 14px;
}
.panel-select--theme-apple.panel-select--multiple .panel-select__control {
	border-radius: var(--radius-lg);
}

.panel-select__dropdown--theme-apple {
	border-radius: var(--radius-lg);
	border: 1px solid rgba(var(--black-rgb), .08);
	box-shadow: 0 12px 40px rgba(var(--black-rgb), .15), 0 2px 8px rgba(var(--black-rgb), .08);
	overflow: hidden;
}
body.dark .panel-select__dropdown--theme-apple {
	border-color: rgba(var(--white-rgb), .08);
}
.panel-select__dropdown--theme-apple .panel-select__option {
	margin: 0 var(--space-2);
	border-radius: var(--radius-md);
}
.panel-select__dropdown--theme-apple .panel-select__option--active {
	background: rgba(var(--color-primary), 1);
	color: var(--text-white);
}
.panel-select__dropdown--theme-apple .panel-select__option--active .panel-select__option-secondary,
.panel-select__dropdown--theme-apple .panel-select__option--active .caption-text {
	color: rgba(var(--white-rgb), .85);
}
.panel-select__dropdown--theme-apple .panel-select__option--active .panel-select__option-badge {
	background: rgba(var(--white-rgb), .25);
	color: var(--text-white);
}
.panel-select__dropdown--theme-apple .panel-select__option--active .highlight {
	background: rgba(var(--white-rgb), .3);
	color: var(--text-white);
}

/* ── Minimal (underlined) ────────────────────────────────────────────── */
.panel-select--theme-minimal .panel-select__control {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-color-dark);
	border-radius: 0;
	padding: 0 var(--space-2) 0 0;
	min-height: 36px;
	transition: border-bottom-color .2s;
}
.panel-select--theme-minimal .panel-select__control:hover {
	border-bottom-color: var(--text-secondary);
}
.panel-select--theme-minimal.panel-select--open .panel-select__control,
.panel-select--theme-minimal .panel-select__control:focus-within {
	border-bottom: 2px solid rgba(var(--color-primary), 1);
	box-shadow: none;
	background: transparent;
}
.panel-select--theme-minimal .panel-select__caret {
	font-size: 14px;
}

.panel-select__dropdown--theme-minimal {
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: 0 4px 16px rgba(var(--black-rgb), .08), 0 0 0 1px rgba(var(--black-rgb), .04);
}
.panel-select__dropdown--theme-minimal .panel-select__option {
	font-size: 13px;
	transition: padding-left .15s, background-color .12s;
}
.panel-select__dropdown--theme-minimal .panel-select__option--active {
	background: transparent;
	padding-left: calc(var(--space-4) + 4px);
	color: rgba(var(--color-primary), 1);
	font-weight: 500;
}

/* ── Glass (glassmorphism) ───────────────────────────────────────────── */
.panel-select--theme-glass .panel-select__control {
	background: rgba(var(--white-rgb), .55);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border: 1px solid rgba(var(--white-rgb), .6);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(var(--black-rgb), .08), inset 0 1px 0 rgba(var(--white-rgb), .6);
}
body.dark .panel-select--theme-glass .panel-select__control {
	background: rgba(var(--white-rgb), .08);
	border-color: rgba(var(--white-rgb), .15);
}
.panel-select--theme-glass.panel-select--open .panel-select__control,
.panel-select--theme-glass .panel-select__control:focus-within {
	border-color: rgba(var(--color-primary), .5);
	box-shadow: 0 0 0 4px rgba(var(--color-primary), .15), 0 4px 16px rgba(var(--black-rgb), .1);
}

.panel-select__dropdown--theme-glass {
	background: rgba(var(--white-rgb), .75);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(var(--white-rgb), .5);
	box-shadow: 0 16px 40px rgba(var(--black-rgb), .15), inset 0 1px 0 rgba(var(--white-rgb), .6);
}
body.dark .panel-select__dropdown--theme-glass {
	background: rgba(35, 39, 46, .8);
	border-color: rgba(var(--white-rgb), .12);
}
.panel-select__dropdown--theme-glass .panel-select__option--active {
	background: rgba(var(--color-primary), .18);
}

/* ── Sharp (brutalist, monospace) ────────────────────────────────────── */
.panel-select--theme-sharp .panel-select__control {
	background: var(--bg-card);
	border: 2px solid var(--text-primary);
	border-radius: 0;
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	min-height: 42px;
	box-shadow: 4px 4px 0 0 var(--text-primary);
	transition: transform .08s, box-shadow .08s;
}
.panel-select--theme-sharp .panel-select__control:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 var(--text-primary);
}
.panel-select--theme-sharp.panel-select--open .panel-select__control,
.panel-select--theme-sharp .panel-select__control:focus-within {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--text-primary);
}
.panel-select--theme-sharp .panel-select__input {
	font-family: "JetBrains Mono", monospace !important;
}
.panel-select--theme-sharp .panel-select__caret {
	color: var(--text-primary);
}

.panel-select__dropdown--theme-sharp {
	border: 2px solid var(--text-primary);
	border-radius: 0;
	box-shadow: 4px 4px 0 0 var(--text-primary);
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
}
.panel-select__dropdown--theme-sharp .panel-select__option {
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-2) var(--space-3);
	transition: none;
}
.panel-select__dropdown--theme-sharp .panel-select__option:last-child {
	border-bottom: none;
}
.panel-select__dropdown--theme-sharp .panel-select__option--active,
.panel-select__dropdown--theme-sharp .panel-select__option:hover {
	background: var(--text-primary);
	color: var(--bg-card);
}
.panel-select__dropdown--theme-sharp .panel-select__option--active .panel-select__option-secondary,
.panel-select__dropdown--theme-sharp .panel-select__option--active .caption-text {
	color: rgba(var(--white-rgb), .8);
}
.panel-select__dropdown--theme-sharp .panel-select__option--active .panel-select__option-badge {
	background: var(--bg-card);
	color: var(--text-primary);
}
.panel-select__dropdown--theme-sharp .highlight {
	background: rgba(var(--status-yellow), 1);
	color: var(--text-primary);
	font-weight: 700;
}
.panel-select__dropdown--theme-sharp .panel-select__option--active .highlight {
	background: var(--bg-card);
	color: var(--text-primary);
}