:root {
	/* Theme tokens with sensible defaults (will be overwritten by runtime theme switcher) */
	--theme-primary: #0f7ac7;
	--theme-primary-strong: #0c639f;
	--theme-secondary: #2ca66f;
	--theme-accent: #8fd9a8;
	--theme-gradient-start: #0c639f;
	--theme-gradient-end: #1390e0;
	--theme-secondary-gradient-start: #2c9b64;
	--theme-secondary-gradient-end: #38c487;
	--theme-surface: #f4f9ff;
	--theme-surface-alt: #e8f4ef;
	--theme-border: #cfe5f7;
	--theme-hover: #dcedf9;
	--theme-text: #0f172a;
	--theme-text-muted: #475569;
	--theme-text-dark: #0b1220;
	--theme-text-light: #ffffff;

	/* Backwards-compatible vars used across components */
	--primary-color: var(--theme-primary);
	--primary-600: var(--theme-primary-strong);
	--surface-card: var(--theme-surface);
	--surface-border: var(--theme-border);
	--surface-hover: var(--theme-hover);
	--text-color: var(--theme-text);
	--primary-text-color: #ffffff;
	--secondary-background-color: var(--theme-secondary);
}

/* Fix PrimeVue overlay z-index conflicts with Vuetify modals */
/* Vuetify dialogs typically use z-index 2400+, so PrimeVue overlays need to be higher */
.p-component-overlay {
	z-index: 2500 !important;
}

.p-select-overlay,
.p-autocomplete-overlay,
.p-dropdown-overlay {
	z-index: 2500 !important;
}

.page-turn-button {
	border-radius: 5px;
	border: none;
}

.page-num-button {
	border: none;
	background-color: Transparent;
}

.interaction-button {
	border: none;
	border-radius: 5px;
	/*background-color: mediumseagreen;*/
	color: white;
	background-color: rgb(69, 112, 101);
}

.interaction-button:hover {
	background-color: rgb(82, 132, 119);
}

#client-content {
	display: flex;
	flex-direction: column;
	width: 95%;
	justify-content: center;
}

#filter-container {
	display: flex;
	flex-direction: row;
	gap: 5px 5px;
}

#paging-controls {
	display: flex;
	justify-content: flex-end;
	gap: 5px;
}

/* Vuetify Switch and Checkbox Styling */
.v-switch {
	align-self: center;
	transform: scale(0.85);
	transform-origin: center;
}

.v-switch .v-switch__thumb {
	pointer-events: auto !important; /* Make thumb clickable */
}

.v-checkbox {
	align-self: center;
	transform: scale(0.75);
	transform-origin: center;
}