/* ============================================================
   Sarus reusable form controls
   Keep page layout in the page CSS — only controls here.

   Components:
     1. sarus-toggle   — binary and tri-state toggle switch
     2. sarus-spinedit — numeric spin edit
     3. sarus-pagination — page number bar (was: database-series-page-numbers)
     4. sarus-date     — date field + calendar popup (was: database-series-date-*)
   ============================================================ */


/* ── 1. Toggle / Switch ──────────────────────────────────────────────────── */

.sarus-toggle,
.sarus-switch,
.customer-switch,
.download-switch {
	--sarus-toggle-width: 58px;
	--sarus-toggle-height: 24px;
	--sarus-toggle-pad: 3px;
	--sarus-toggle-thumb-offset-x: 2px;
	--sarus-toggle-thumb: 20px;
	--sarus-toggle-track-off: #d1d5db;
	--sarus-toggle-track-off-border: #9ca3af;
	--sarus-toggle-track-on: #066fd1;
	--sarus-toggle-track-on-border: #0558a8;
	--sarus-toggle-track-unset: #e5e7eb;
	--sarus-toggle-track-unset-border: #9ca3af;
	--sarus-toggle-thumb-color: rgba(255, 255, 255, 0.97);
	--sarus-toggle-thumb-border: #d1d5db;
	--sarus-toggle-thumb-unset: rgba(255, 255, 255, 0.97);
	--sarus-toggle-text-off: #6b7280;
	--sarus-toggle-text-on: #FFFFFF;
	--sarus-toggle-text-int: #374151;
	--sarus-toggle-text-disabled: #FFFFFF;
	--sarus-toggle-disabled-track: #bfdbfe;
	--sarus-toggle-disabled-border: #93c5fd;
	--sarus-toggle-disabled-thumb-border: #bfdbfe;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 650;
	white-space: nowrap;
}

.sarus-toggle--lg,
.sarus-switch--lg,
.download-switch {
	--sarus-toggle-width: 58px;
	--sarus-toggle-height: 24px;
	--sarus-toggle-pad: 3px;
	--sarus-toggle-thumb-offset-x: 2px;
	--sarus-toggle-thumb: 20px;
	gap: 10px;
	color: var(--text-soft, var(--text));
	font-weight: 500;
}

.sarus-toggle input,
.sarus-switch input,
.customer-switch input,
.download-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.sarus-toggle__slider,
.sarus-switch__slider,
.customer-switch-slider,
.download-switch-slider {
	position: relative;
	width: var(--sarus-toggle-width);
	height: var(--sarus-toggle-height);
	border-radius: 999px;
	background: var(--sarus-toggle-track-off);
	border: 1px solid var(--sarus-toggle-track-off-border);
	flex: 0 0 auto;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 16px rgba(27, 25, 22, 0.12);
}

.sarus-toggle__copy {
	position: absolute;
	top: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(11px, calc(var(--sarus-toggle-height) * 0.34), 16px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--sarus-toggle-text-off);
	text-align: center;
	padding: 0 10px;
	pointer-events: none;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.sarus-toggle__copy--off, .sarus-toggle__copy--on {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(var(--sarus-toggle-width) - var(--sarus-toggle-thumb) - (var(--sarus-toggle-pad) * 2));
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
}
.sarus-toggle__copy--off {
	color: var(--sarus-toggle-text-off);
	right: 0;
	padding-left: 4px;
}
.sarus-toggle__copy--on {
	color: var(--sarus-toggle-text-on);
	left: 0;
	padding-right: 4px;
}

.sarus-toggle input + .sarus-toggle__slider .sarus-toggle__copy--off,
.sarus-switch input + .sarus-switch__slider .sarus-toggle__copy--off,
.customer-switch input + .customer-switch-slider .sarus-toggle__copy--off,
.download-switch input + .download-switch-slider .sarus-toggle__copy--off {
	opacity: 1;
}

.sarus-toggle input:checked + .sarus-toggle__slider .sarus-toggle__copy--off,
.sarus-switch input:checked + .sarus-switch__slider .sarus-toggle__copy--off,
.customer-switch input:checked + .customer-switch-slider .sarus-toggle__copy--off,
.download-switch input:checked + .download-switch-slider .sarus-toggle__copy--off {
	opacity: 0;
}

.sarus-toggle input:checked + .sarus-toggle__slider .sarus-toggle__copy--on,
.sarus-switch input:checked + .sarus-switch__slider .sarus-toggle__copy--on,
.customer-switch input:checked + .customer-switch-slider .sarus-toggle__copy--on,
.download-switch input:checked + .download-switch-slider .sarus-toggle__copy--on {
	opacity: 1;
}

.sarus-toggle__slider::before,
.sarus-switch__slider::before,
.customer-switch-slider::before,
.download-switch-slider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--sarus-toggle-thumb-offset-x);
	width: var(--sarus-toggle-thumb);
	height: var(--sarus-toggle-thumb);
	border-radius: 50%;
	background: var(--sarus-toggle-thumb-color);
	border: 1px solid var(--sarus-toggle-thumb-border, var(--sarus-toggle-track-off-border));
	box-shadow: 0 4px 10px rgba(27, 25, 22, 0.18);
	transition: transform 0.15s ease, background 0.15s ease;
	transform: translateY(-50%);
	z-index: 2;
}

.sarus-toggle input:checked + .sarus-toggle__slider,
.sarus-switch input:checked + .sarus-switch__slider,
.customer-switch input:checked + .customer-switch-slider,
.download-switch input:checked + .download-switch-slider {
	background: var(--sarus-toggle-track-on);
	border-color: var(--sarus-toggle-track-on-border);
}

.sarus-toggle--lg input:checked + .sarus-toggle__slider,
.sarus-switch--lg input:checked + .sarus-switch__slider,
.download-switch input:checked + .download-switch-slider {
	background: var(--sarus-toggle-track-on);
	border-color: var(--sarus-toggle-track-on-border);
}

.sarus-toggle--status .sarus-toggle__slider,
.sarus-switch--status .sarus-switch__slider {
	background: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 78%, #000);
}

.sarus-toggle--status input:checked + .sarus-toggle__slider,
.sarus-switch--status input:checked + .sarus-switch__slider {
	background: var(--success);
	border-color: color-mix(in srgb, var(--success) 78%, #000);
}

.sarus-toggle input:checked + .sarus-toggle__slider::before,
.sarus-switch input:checked + .sarus-switch__slider::before,
.customer-switch input:checked + .customer-switch-slider::before,
.download-switch input:checked + .download-switch-slider::before {
	transform: translate(calc(var(--sarus-toggle-width) - var(--sarus-toggle-thumb) - var(--sarus-toggle-thumb-offset-x) - var(--sarus-toggle-thumb-offset-x)), -50%);
	background: var(--sarus-toggle-thumb-color);
}

.sarus-toggle input:focus + .sarus-toggle__slider,
.sarus-switch input:focus + .sarus-switch__slider,
.customer-switch input:focus + .customer-switch-slider {
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.16);
}

.sarus-toggle--lg input:focus + .sarus-toggle__slider,
.sarus-switch--lg input:focus + .sarus-switch__slider,
.download-switch input:focus + .download-switch-slider {
	box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12);
}

.sarus-toggle input:disabled + .sarus-toggle__slider,
.sarus-switch input:disabled + .sarus-switch__slider,
.customer-switch input:disabled + .customer-switch-slider,
.download-switch input:disabled + .download-switch-slider {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	opacity: 0.92;
	cursor: not-allowed;
}

.sarus-toggle input:disabled + .sarus-toggle__slider::before,
.sarus-switch input:disabled + .sarus-switch__slider::before,
.customer-switch input:disabled + .customer-switch-slider::before,
.download-switch input:disabled + .download-switch-slider::before {
	background: var(--sarus-toggle-disabled-thumb);
	border-color: var(--sarus-toggle-disabled-thumb-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.sarus-toggle input:disabled ~ span,
.sarus-switch input:disabled ~ span,
.customer-switch input:disabled ~ span,
.download-switch input:disabled ~ span {
	color: color-mix(in srgb, var(--text) 38%, var(--muted));
	cursor: not-allowed;
}

/* Tri-state toggle */
.sarus-toggle[data-tristate="true"],
.sarus-tristate {
	--sarus-toggle-tri-width: 78px;
	--sarus-toggle-tri-height: 24px;
	--sarus-toggle-tri-pad: 3px;
	--sarus-toggle-tri-thumb: 20px;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-tri-track-off: #F5E5E5;
	--sarus-toggle-tri-track-off-border: #1257A4;
	--sarus-toggle-tri-track-unset: #F7F7F8;
	--sarus-toggle-tri-track-unset-border: #1257A4;
	--sarus-toggle-tri-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-tri-thumb-border: #828487;
	--sarus-toggle-tri-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}

.sarus-tristate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font-size: 14px;
	font-weight: 650;
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider,
.sarus-tristate__control {
	position: relative;
	width: var(--sarus-toggle-tri-width);
	height: var(--sarus-toggle-tri-height);
	border-radius: 999px;
	border: 1px solid var(--sarus-toggle-tri-track-unset-border);
	background: var(--sarus-toggle-tri-track-unset);
	padding: 0 calc((var(--sarus-toggle-tri-thumb) * 0.68) + var(--sarus-toggle-tri-pad));
	cursor: pointer;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 16px rgba(27, 25, 22, 0.12);
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__copy,
.sarus-tristate .sarus-toggle__copy,
.sarus-toggle[data-tristate="true"] .sarus-tristate__copy,
.sarus-tristate .sarus-tristate__copy { color: var(--sarus-toggle-text-int); }

.sarus-toggle[data-tristate="true"][data-sarus-state="off"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="off"] .sarus-toggle__copy { color: var(--sarus-toggle-text-off); }

.sarus-toggle[data-tristate="true"][data-sarus-state="on"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="on"] .sarus-toggle__copy { color: var(--sarus-toggle-text-on); }

.sarus-toggle[data-tristate="true"][data-sarus-state="int"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="int"] .sarus-toggle__copy { color: var(--sarus-toggle-text-int); }

.sarus-toggle[data-tristate="true"][data-sarus-state="off"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="off"] .sarus-toggle__copy {
	left: calc(var(--sarus-toggle-tri-pad) + var(--sarus-toggle-tri-thumb));
	width: calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"][data-sarus-state="on"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="on"] .sarus-toggle__copy {
	left: var(--sarus-toggle-tri-pad);
	width: calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"][data-sarus-state="int"] .sarus-toggle__copy,
.sarus-tristate[data-sarus-state="int"] .sarus-toggle__copy {
	left: var(--sarus-toggle-tri-pad);
	width: calc(var(--sarus-toggle-tri-width) - (var(--sarus-toggle-tri-pad) * 2));
}

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider::before { display: none; }

.sarus-toggle__thumb,
.sarus-tristate__thumb {
	position: absolute;
	top: 50%;
	left: var(--sarus-toggle-tri-pad);
	width: var(--sarus-toggle-tri-thumb);
	height: var(--sarus-toggle-tri-thumb);
	border-radius: 50%;
	background: var(--sarus-toggle-tri-thumb-color);
	border: 1px solid var(--sarus-toggle-tri-thumb-border, var(--sarus-toggle-tri-track-off-border));
	box-shadow: 0 4px 10px rgba(27, 25, 22, 0.18);
	transition: transform 0.15s ease, background 0.15s ease;
	transform: translateY(-50%);
	z-index: 2;
}

.sarus-toggle[data-tristate="true"][data-value="0"] .sarus-toggle__slider,
.sarus-tristate[data-value="0"] .sarus-tristate__control { background: var(--sarus-toggle-tri-track-off); border-color: var(--sarus-toggle-tri-track-off-border); }

.sarus-toggle[data-tristate="true"][data-value=""] .sarus-toggle__slider,
.sarus-tristate[data-value=""] .sarus-tristate__control { background: var(--sarus-toggle-tri-track-unset); border-color: var(--sarus-toggle-tri-track-unset-border); }

.sarus-toggle[data-tristate="true"][data-value="1"] .sarus-toggle__slider,
.sarus-tristate[data-value="1"] .sarus-tristate__control { background: var(--sarus-toggle-track-on); border-color: var(--sarus-toggle-track-on-border); }

.sarus-toggle[data-tristate="true"][data-value="0"] .sarus-toggle__thumb,
.sarus-tristate[data-value="0"] .sarus-tristate__thumb { transform: translate(0, -50%); background: var(--sarus-toggle-tri-thumb-color); }

.sarus-toggle[data-tristate="true"][data-value=""] .sarus-toggle__thumb,
.sarus-tristate[data-value=""] .sarus-tristate__thumb { transform: translate(calc((var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - var(--sarus-toggle-tri-pad) - var(--sarus-toggle-tri-pad)) / 2), -50%); background: var(--sarus-toggle-tri-thumb-unset); }

.sarus-toggle[data-tristate="true"][data-value="1"] .sarus-toggle__thumb,
.sarus-tristate[data-value="1"] .sarus-tristate__thumb { transform: translate(calc(var(--sarus-toggle-tri-width) - var(--sarus-toggle-tri-thumb) - var(--sarus-toggle-tri-pad) - var(--sarus-toggle-tri-pad)), -50%); background: var(--sarus-toggle-tri-thumb-color); }

.sarus-toggle[data-tristate="true"] .sarus-toggle__slider:focus-visible,
.sarus-tristate__control:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.16); }

.sarus-toggle.is-disabled .sarus-toggle__slider,
.sarus-toggle[data-disabled="true"] .sarus-toggle__slider,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider,
.sarus-tristate.is-disabled .sarus-tristate__control,
.sarus-tristate[data-disabled="true"] .sarus-tristate__control {
	background: var(--sarus-toggle-disabled-track);
	border-color: var(--sarus-toggle-disabled-border);
	box-shadow: none;
	opacity: 0.92;
	cursor: not-allowed;
}

.sarus-toggle.is-disabled .sarus-toggle__thumb,
.sarus-toggle[data-disabled="true"] .sarus-toggle__thumb,
.sarus-toggle[data-tristate="true"] input:disabled + .sarus-toggle__slider .sarus-toggle__thumb,
.sarus-tristate.is-disabled .sarus-tristate__thumb,
.sarus-tristate[data-disabled="true"] .sarus-tristate__thumb {
	background: var(--sarus-toggle-disabled-thumb);
	border-color: var(--sarus-toggle-disabled-thumb-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.sarus-toggle.is-disabled, .sarus-toggle[data-disabled="true"],
.sarus-tristate.is-disabled, .sarus-tristate[data-disabled="true"] {
	color: color-mix(in srgb, var(--text) 38%, var(--muted));
	cursor: not-allowed;
}

.sarus-toggle.is-readonly, .sarus-tristate.is-readonly { pointer-events: none; cursor: default; }
.sarus-toggle.is-readonly .sarus-toggle__slider, .sarus-tristate.is-readonly .sarus-tristate__control { cursor: default; }

body[data-theme="dark"] .sarus-toggle[data-tristate="true"],
body[data-theme="dark"] .sarus-tristate {
	--sarus-toggle-tri-track-off: #1976D2;
	--sarus-toggle-tri-track-off-border: #1257A4;
	--sarus-toggle-tri-track-unset: #1976D2;
	--sarus-toggle-tri-track-unset-border: #1257A4;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-tri-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-tri-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .sarus-toggle,
body[data-theme="dark"] .sarus-switch,
body[data-theme="dark"] .customer-switch,
body[data-theme="dark"] .download-switch {
	--sarus-toggle-track-off: #1976D2;
	--sarus-toggle-track-off-border: #1257A4;
	--sarus-toggle-track-on: #1976D2;
	--sarus-toggle-track-on-border: #1257A4;
	--sarus-toggle-track-unset: #1976D2;
	--sarus-toggle-track-unset-border: #1257A4;
	--sarus-toggle-thumb-color: rgba(255, 255, 255, 0.96);
	--sarus-toggle-thumb-unset: rgba(255, 255, 255, 0.96);
	--sarus-toggle-disabled-track: #8FA7C4;
	--sarus-toggle-disabled-border: #5D7694;
	--sarus-toggle-disabled-thumb: rgba(255, 255, 255, 0.72);
}


/* ── 2. Spin Edit ────────────────────────────────────────────────────────── */

.sarus-spinedit,
.sarus-spin {
	position: relative;
	display: inline-block;
	width: 6rem;
	min-width: 6rem;
}

.sarus-spinedit--narrow,
.sarus-spin--narrow {
	width: 52px;
	min-width: 52px;
}

.sarus-spinedit .form-control,
.sarus-spin .form-control {
	width: 100%;
	min-width: 0;
	padding-left: 8px;
	padding-right: calc(1.35rem + 9px);
	text-align: right;
}

.sarus-spinedit__buttons,
.sarus-spin__buttons {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 1.35rem;
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--border);
	background: transparent;
}

.sarus-spinedit__btn,
.sarus-spin__btn {
	flex: 1;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sarus-spinedit__btn:hover, .sarus-spinedit__btn:focus-visible,
.sarus-spin__btn:hover, .sarus-spin__btn:focus-visible {
	background: var(--hover);
	color: var(--text);
	outline: none;
}

.sarus-spinedit__triangle,
.sarus-spin__triangle { width: 0; height: 0; display: block; }

.sarus-spinedit__triangle--up, .sarus-spin__triangle--up {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid currentColor;
}

.sarus-spinedit__triangle--down, .sarus-spin__triangle--down {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

input[type="number"].no-native-spinner::-webkit-inner-spin-button,
input[type="number"].no-native-spinner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].no-native-spinner { appearance: textfield; -moz-appearance: textfield; }

body[data-theme="dark"] .sarus-spinedit__buttons,
body[data-theme="dark"] .sarus-spin__buttons { border-left-color: rgba(103, 128, 167, 0.42); }

body[data-theme="dark"] .sarus-spinedit__btn,
body[data-theme="dark"] .sarus-spin__btn { color: var(--muted); }

body[data-theme="dark"] .sarus-spinedit__btn:hover, body[data-theme="dark"] .sarus-spinedit__btn:focus-visible,
body[data-theme="dark"] .sarus-spin__btn:hover, body[data-theme="dark"] .sarus-spin__btn:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	outline: none;
}


/* ── 3. Pagination ───────────────────────────────────────────────────────── */
/* Renamed from: database-series-page-numbers / database-series-page-number  */

.sarus-pagination {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto !important;
	text-align: left !important;
}

.sarus-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	height: 30px;
	min-width: 30px;
	padding: 0 9px;
	border-radius: 2px;
	border: 1px solid #d0d5dd;
	background: #fff;
	box-shadow: none;
	font-size: 13px;
	line-height: 1;
	color: #344054;
	cursor: pointer;
}

.sarus-pagination__item.active {
	border-color: var(--primary);
	color: var(--primary);
	background: #fff;
}

.sarus-pagination__item:not(:disabled):hover {
	border-color: var(--primary);
	color: var(--primary);
	background: var(--hover);
}

.sarus-pagination__item:disabled {
	opacity: 0.35;
	cursor: default;
}

.sarus-pagination__ellipsis {
	pointer-events: none;
	border: none;
	color: var(--muted);
}

.sarus-pagination__nav {
	font-size: 16px;
	padding-bottom: 2px;
}

.sarus-pagination__size,
.sarus-pagination__jump {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	order: 10;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.sarus-pagination__size .form-control {
	width: 60px;
	height: 28px;
	padding: 2px 20px 2px 6px;
	border-radius: 2px;
}

.sarus-pagination__jump .form-control {
	width: 48px;
	height: 28px;
	padding: 2px 6px;
	border-radius: 2px;
	text-align: right;
}


/* ── 4. Date Field + Calendar Popup ─────────────────────────────────────── */
/* Renamed from: database-series-date-*                                      */

.sarus-date-input {
	width: 128px;
	font-variant-numeric: tabular-nums;
	padding-right: 34px;
}

.sarus-date-field {
	position: relative;
	display: inline-flex;
	align-items: stretch;
}

.sarus-date-popup {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 40;
	width: 322px;
	max-width: calc(100vw - 24px);
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
	box-sizing: border-box;
	contain: layout paint;
}

.sarus-date-popup[hidden] { display: none; }

.sarus-date-popup-header {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) minmax(0, 88px) 32px;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
}

.sarus-date-popup-select {
	width: 100% !important;
	height: 32px;
	padding: 0 8px;
	font-size: 13px;
	line-height: 30px;
	font-variant-numeric: tabular-nums;
}

.sarus-date-popup-nav {
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--panel);
	color: var(--muted);
	font-size: 20px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.sarus-date-popup-nav:hover, .sarus-date-popup-nav:focus-visible {
	background: var(--hover);
	color: var(--text);
	outline: none;
}

.sarus-date-popup-nav:disabled { opacity: 0.45; cursor: default; }

.sarus-date-popup-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: 30px repeat(6, 40px);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--border);
	gap: 1px;
}

.sarus-date-popup-dayname {
	padding: 6px 0;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}

.sarus-date-popup-grid .sarus-date-popup-dayname:nth-child(6),
.sarus-date-popup-grid .sarus-date-popup-dayname:nth-child(7) { color: #4f637d; }

.sarus-date-popup-day {
	min-height: 40px;
	padding: 4px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
}

.sarus-date-popup-grid .sarus-date-popup-day.weekend:not(.muted) { color: #4f637d; }
.sarus-date-popup-grid .sarus-date-popup-day.weekend:not(.muted):hover { color: #42556d; }

.sarus-date-popup-day--disabled,
.sarus-date-popup-day:disabled { cursor: not-allowed; }

.sarus-date-popup-day:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	position: relative;
	z-index: 1;
}

.sarus-date-native-picker {
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.sarus-date-native-picker::-webkit-calendar-picker-indicator {
	opacity: 0;
	pointer-events: none;
	width: 0;
	margin: 0;
	padding: 0;
}

.sarus-date-button {
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	width: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-left: 1px solid var(--border);
	background: transparent;
	color: var(--muted);
	padding: 0;
	cursor: pointer;
	z-index: 1;
}

.sarus-date-button:hover, .sarus-date-button:focus-visible {
	color: var(--text);
	background: color-mix(in srgb, var(--hover) 80%, transparent);
	outline: none;
}

.sarus-date-button svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 1.9;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.sarus-date-popup-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.sarus-date-popup-quick {
	min-width: 78px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--panel);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.sarus-date-popup-quick:hover, .sarus-date-popup-quick:focus-visible {
	background: var(--hover);
	outline: none;
}