/* ─── Shared filter component styles ─────────────────────────────────────────
 * Imported by FilterRow, FilterAddForm, SavedViewsMenu, ToolbarHeader,
 * and ToolbarFilterPanel to avoid duplicating common patterns.
 * Because these are global imports, all class names use the `tb-` prefix
 * to prevent collisions with other components.
 * ────────────────────────────────────────────────────────────────────────── */

/* ─── Theme tokens for Customers toolbar + filter UI ───────────────────── */

:root {
	--tb-toolbar-surface: var(--tblr-secondary-bg, #243248);
	--tb-toolbar-border: var(--tblr-border-color, #354861);
	--tb-toolbar-strong: #e7edf6;
	--tb-toolbar-text: #d7e0ec;
	--tb-toolbar-muted: #97a8bc;
	--tb-toolbar-subtle: #8fa2b7;
	--tb-toolbar-search-bg: #121c2b;
	--tb-toolbar-search-border: #3b4f68;
	--tb-toolbar-search-text: #e8eef7;
	--tb-toolbar-search-placeholder: #92a3b8;
	--tb-toolbar-control-bg: transparent;
	--tb-toolbar-control-border: transparent;
	--tb-toolbar-control-hover-bg: rgba(255, 255, 255, 0.06);
	--tb-toolbar-control-hover-border: rgba(143, 162, 183, 0.24);
	--tb-toolbar-control-hover-text: #eef4fb;
	--tb-toolbar-control-active-bg: rgba(255, 255, 255, 0.08);
	--tb-toolbar-control-active-border: rgba(143, 162, 183, 0.3);
	--tb-toolbar-control-active-text: #eef4fb;
	--tb-toolbar-focus-ring: 0 0 0 0.18rem rgba(31, 134, 255, 0.16);
	--tb-toolbar-input-bg: #121b29;
	--tb-toolbar-input-border: #405169;
	--tb-toolbar-input-text: #e4ebf5;
	--tb-toolbar-input-placeholder: #8fa2b7;
	--tb-toolbar-input-disabled-bg: #162131;
	--tb-toolbar-input-disabled-text: #5a6a7e;
	--tb-toolbar-panel-inset-bg: rgba(17, 27, 41, 0.24);
	--tb-toolbar-panel-inset-border: #36485f;
	--tb-toolbar-dropdown-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
	--tb-toolbar-danger-text: #ff9ca0;
	--tb-toolbar-danger-hover-bg: rgba(220, 53, 69, 0.15);
	--tb-toolbar-danger-hover-text: #ff8a8a;
	--tb-toolbar-badge-border: #617186;
	--tb-toolbar-badge-bg: #1f86ff;
	--tb-toolbar-badge-text: #ffffff;
	--tb-toolbar-badge-shadow: rgba(31, 134, 255, 0.22);
	--tb-toolbar-chip-bg: rgba(255, 255, 255, 0.05);
	--tb-toolbar-chip-border: #44566e;
	--tb-toolbar-chip-text: #e4ebf5;
	--tb-toolbar-chip-muted: #a7b4c6;
	--tb-toolbar-chip-remove: #ff9ca0;
	--tb-toolbar-chip-remove-hover: #ffb4b7;
	--tb-toolbar-switch-bg: #152132;
	--tb-toolbar-switch-border: #4b5f79;
}

html[data-bs-theme='light'],
body[data-bs-theme='light'] {
	--tb-toolbar-surface: #f7f9fc;
	--tb-toolbar-border: #d8e0ea;
	--tb-toolbar-strong: #1f2a37;
	--tb-toolbar-text: #334155;
	--tb-toolbar-muted: #64748b;
	--tb-toolbar-subtle: #7b8ca2;
	--tb-toolbar-search-bg: #ffffff;
	--tb-toolbar-search-border: #bcc8d8;
	--tb-toolbar-search-text: #1f2a37;
	--tb-toolbar-search-placeholder: #8da0b3;
	--tb-toolbar-control-bg: #ffffff;
	--tb-toolbar-control-border: #c7d2df;
	--tb-toolbar-control-hover-bg: #eef4fb;
	--tb-toolbar-control-hover-border: #aac0da;
	--tb-toolbar-control-hover-text: #17365d;
	--tb-toolbar-control-active-bg: #e7effb;
	--tb-toolbar-control-active-border: #8fb0d4;
	--tb-toolbar-control-active-text: #17365d;
	--tb-toolbar-focus-ring: 0 0 0 0.18rem rgba(31, 134, 255, 0.12);
	--tb-toolbar-input-bg: #ffffff;
	--tb-toolbar-input-border: #bcc8d8;
	--tb-toolbar-input-text: #1f2a37;
	--tb-toolbar-input-placeholder: #8da0b3;
	--tb-toolbar-input-disabled-bg: #eef3f8;
	--tb-toolbar-input-disabled-text: #738396;
	--tb-toolbar-panel-inset-bg: #eef3f8;
	--tb-toolbar-panel-inset-border: #d3dde9;
	--tb-toolbar-dropdown-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
	--tb-toolbar-danger-text: #d63939;
	--tb-toolbar-danger-hover-bg: rgba(220, 53, 69, 0.08);
	--tb-toolbar-danger-hover-text: #b42318;
	--tb-toolbar-badge-border: #b8c7d8;
	--tb-toolbar-badge-bg: #066fd1;
	--tb-toolbar-badge-text: #ffffff;
	--tb-toolbar-badge-shadow: rgba(6, 111, 209, 0.2);
	--tb-toolbar-chip-bg: #f4f8fc;
	--tb-toolbar-chip-border: #d8e3ef;
	--tb-toolbar-chip-text: #334155;
	--tb-toolbar-chip-muted: #718096;
	--tb-toolbar-chip-remove: #d63939;
	--tb-toolbar-chip-remove-hover: #b42318;
	--tb-toolbar-switch-bg: #d5dee9;
	--tb-toolbar-switch-border: #b3c0d1;
}

/* ─── Filter grid row (FilterRow + FilterAddForm) ────────────────────────── */

.tb-filter-grid {
	display: grid;
	grid-template-columns: minmax(10.5rem, 0.95fr) minmax(9rem, 0.7fr) minmax(14rem, 1.35fr) auto;
	gap: 0.6rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	align-items: center;
}

.tb-filter-grid__col {
	min-width: 0;
}

/* ─── Form inputs inside filter rows ─────────────────────────────────────── */

.tb-filter-input {
	min-height: 2.2rem;
	border: 1px solid var(--tb-toolbar-input-border);
	border-radius: 0.68rem;
	background: var(--tb-toolbar-input-bg);
	color: var(--tb-toolbar-input-text);
	font-size: 0.88rem;
}

.tb-filter-input:disabled {
	opacity: 1;
	cursor: not-allowed;
	border-color: var(--tb-toolbar-input-border);
	background: var(--tb-toolbar-input-disabled-bg);
	color: var(--tb-toolbar-input-disabled-text);
}

.tb-filter-input::placeholder {
	color: var(--tb-toolbar-input-placeholder);
}

.tb-filter-input:focus {
	border-color: var(--tblr-primary, #1f86ff);
	box-shadow: var(--tb-toolbar-focus-ring);
	background: var(--tb-toolbar-input-bg);
	color: var(--tb-toolbar-input-text);
}

.tb-filter-select {
	max-width: none !important;
}

/* ─── Action button (FilterAddForm + ToolbarFilterPanel) ─────────────────── */

.tb-filter-btn {
	min-height: 2.2rem;
	padding-inline: 0.95rem;
	border-radius: 0.72rem;
	font-size: 0.88rem;
}

/* ─── Toolbar control button (ToolbarHeader + SavedViewsMenu) ────────────── */

.tb-toolbar-ctrl-btn,
.toolbar-extra-button {
	min-height: 2.4rem;
	padding: 0 0.85rem;
	border: 1px solid var(--tb-toolbar-control-border);
	border-radius: 0.65rem;
	display: flex;
	align-items: center;
	background: var(--tb-toolbar-control-bg);
	color: var(--tb-toolbar-text);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.15;
	white-space: nowrap;
	box-shadow: none;
	transition:
		background-color 140ms ease,
		border-color 140ms ease,
		color 140ms ease,
		box-shadow 140ms ease;
}

.tb-toolbar-ctrl-btn {
	gap: 0.4rem;
}

.toolbar-extra-button {
	gap: 0.45rem;
}

.tb-toolbar-ctrl-btn:hover,
.tb-toolbar-ctrl-btn.tb-toolbar-btn-active {
	background: var(--tb-toolbar-control-hover-bg);
	border-color: var(--tb-toolbar-control-hover-border);
	color: var(--tb-toolbar-control-hover-text);
}

.tb-toolbar-ctrl-btn.tb-toolbar-btn-active {
	background: var(--tb-toolbar-control-active-bg);
	border-color: var(--tb-toolbar-control-active-border);
	color: var(--tb-toolbar-control-active-text);
}

.tb-toolbar-ctrl-btn:focus-visible,
.toolbar-extra-button:focus-visible,
.add-filter-btn:focus-visible,
.filter-row__remove:focus-visible {
	outline: 0;
	box-shadow: var(--tb-toolbar-focus-ring);
}

/* ─── Scope badge (SavedViewsMenu + ToolbarFilterPanel) ──────────────────── */

.tb-scope-badge {
	font-size: 0.68rem;
	white-space: nowrap;
	padding: 0.2rem 0.45rem;
	border-color: var(--tb-toolbar-badge-border) !important;
	background: transparent;
	color: var(--tb-toolbar-muted) !important;
}

.tb-filter-count-badge {
	min-width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.42rem;
	border-radius: 999px;
	background: var(--tb-toolbar-badge-bg) !important;
	color: var(--tb-toolbar-badge-text) !important;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 2px var(--tb-toolbar-badge-shadow);
}

/* ─── Responsive: filter grid ────────────────────────────────────────────── */

@media (max-width: 1200px) {
	.tb-filter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.tb-filter-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Responsive: page container padding for data table pages ────────────── */

@media (max-width: 1230px) {
	.page-body > .container-xl {
		max-width: 100%;
		padding-inline: 0.75rem;
	}
}

@media (max-width: 768px) {
	.page-body > .container-xl {
		padding-inline: 0.5rem;
	}
}

/* ─── Extra toolbar slot (ToolbarHeader) ─────────────────────────────────── */

.toolbar-extra-cell {
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: visible;
}

.toolbar-extra-button:hover {
	background: var(--tb-toolbar-control-hover-bg);
	border-color: var(--tb-toolbar-control-hover-border);
	color: var(--tb-toolbar-control-hover-text);
}

.toolbar-extra-toggle {
	width: auto;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--tb-toolbar-text);
	white-space: nowrap;
}

.toolbar-extra-cell--show-merged .toolbar-extra-toggle {
	min-height: 2.4rem;
	padding: 0 0.85rem;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	justify-content: flex-start;
}

.toolbar-extra-toggle .form-check-input {
	margin-top: 0;
	width: 2.25rem;
	height: 1.2rem;
	background-color: var(--tb-toolbar-switch-bg);
	border-color: var(--tb-toolbar-switch-border);
}

.toolbar-extra-toggle .form-check-input:checked {
	background-color: var(--tblr-primary);
	border-color: var(--tblr-primary);
}

.toolbar-extra-toggle-label {
	color: var(--tb-toolbar-text);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.15;
	flex: 0 1 auto;
	min-width: 0;
}

@media (max-width: 1380px) {
	.toolbar-extra-cell {
		width: 100%;
	}

	.tb-toolbar-ctrl-btn,
	.toolbar-extra-button {
		width: 100%;
		min-width: 0;
		justify-content: flex-start;
	}

	.toolbar-extra-cell--merge {
		order: 3;
	}

	.toolbar-extra-cell--show-merged {
		order: 4;
	}

	.toolbar-extra-cell--columns {
		order: 5;
	}

	.toolbar-extra-cell--show-merged .toolbar-extra-toggle {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.toolbar-extra-cell--merge,
	.toolbar-extra-cell--show-merged {
		grid-column: 1 / -1;
	}
}