:root {
	--primary-50: #eff6ff;
	--primary-100: #dbeafe;
	--primary-400: #60a5fa;
	--primary-500: #2563eb;
	--primary-600: #1d4ed8;
	--primary-700: #1e40af;

	--secondary-500: #16a34a;
	--secondary-600: #15803d;

	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2933;
	--gray-900: #111827;

	--danger-50: #fee2e2;
	--danger-500: #ef4444;

  /* Global Surfaces */
	--surface-1: #ffffff;
	--surface-2: #f1f5f9;
	--surface-3: #e9eef5;
	--surface-4: #ffffff;
	--divider: rgb(229, 231, 235);

	/* Global Text */
	--text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);

	/* Utilities */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
	--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
	--gradient-primary-tr-bl: linear-gradient(
		to bottom left,
		var(--primary-400),
		var(--primary-500),
		var(--primary-700)
	);
	--radius-sm: 8px;
	--radius-md: 10px;
	
	--surface-sidebar: #0f172a;
	--sidebar-border: rgba(255, 255, 255, 0.06);
	--sidebar-hover-bg: rgba(255, 255, 255, 0.06);
	--sidebar-active-bg: rgba(37, 99, 235, 0.18);
	--sidebar-text-primary: #f8fafc;
	--sidebar-text-secondary: #cbd5e1;
	--sidebar-text-muted: #94a3b8;

	--sidebar-hover-bg: rgba(255, 255, 255, 0.06);
	--sidebar-active-bg: rgba(255, 255, 255, 0.12);
	--sidebar-border: rgba(255, 255, 255, 0.08);

	--min-header-height: 64px;
	--header-text-primary: var(--gray-900);
	--header-text-secondary: var(--gray-600);
	--header-divider: rgb(229, 231, 235);
	--header-input-bg: var(--surface-1);
	--header-input-border: rgba(0, 0, 0, 0.08);
	--header-input-focus-ring: color-mix(
		in srgb,
		var(--primary-500) 25%,
		transparent
	);

	/* Button System */
	--btn-default-bg: #ffffff;
	--btn-default-border: #d1d5db;
	--btn-default-text: #374151;
	--btn-default-hover-bg: #f9fafb;
	--btn-default-hover-border: #9ca3af;
	--btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--btn-primary-bg: var(--primary-500);
	--btn-primary-hover: var(--primary-600);
	--btn-primary-text: #ffffff;
	--btn-primary-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
	--btn-danger-soft-bg: #fee2e2;
	--btn-danger-soft-text: #ef4444;
	--btn-danger-soft-hover: #fecaca;
	--btn-danger-bg: #ef4444;
	--btn-danger-hover: #dc2626;
	--btn-danger-text: #ffffff;

	/* Icon Buttons */
	--icon-btn-size: 36px;
	--icon-btn-radius: 8px;
	--icon-btn-color: #94a3b8;
	--icon-btn-hover-bg: rgba(0, 0, 0, 0.05);
	--icon-btn-hover-color: #0f172a;
	--icon-btn-accent-hover: var(--primary-500);

	/* Table System */
	--table-bg: var(--surface-1);
	--table-header-bg: var(--surface-1);
	--table-row-bg: var(--surface-2);
	--table-row-hover: rgba(37, 99, 235, 0.2);
	--table-row-selected: rgba(37, 99, 235, 0.08);
	--table-divider: rgba(0, 0, 0, 0.06);
	--table-space: rgba(0, 0, 0, 0.02);
	--table-text-primary: #0f172a;
	--table-text-secondary: #475569;
	--sort-accent: var(--primary-500);

	/* Pagination */
	--pagination-divider: rgb(229, 231, 235);

	/* Checkbox */
	--checkbox-bg: #ffffff;
	--checkbox-border: #cbd5e1;
	--checkbox-checked-bg: var(--primary-500);
	/* Dropdowns */
	--dropdown-bg: var(--surface-1);
	--dropdown-border: rgba(0, 0, 0, 0.06);
	--dropdown-shadow:
		0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.05),
		0 24px 32px -8px rgba(0, 0, 0, 0.08);
	--dropdown-item-text: #334155;
	--dropdown-item-hover-bg: rgba(0, 0, 0, 0.04);
	--dropdown-danger-text: #dc2626;
	--dropdown-danger-hover-bg: rgba(220, 38, 38, 0.08);

	/* Editables */
	--editable-bg: var(--surface-2);
	--editable-bg-editing: var(--surface-1);
	--editable-text: #1f2937;
	--editable-placeholder: #9ca3af;
	--editable-border-focus: var(--primary-500);
	--editable-radius: 6px;
	--editable-padding-x: 12px;
	--editable-padding-y: 4px;

	/* Drawer Component */
	--drawer-bg: var(--surface-4);
	--drawer-backdrop: rgba(0, 0, 0, 0.45);
	--drawer-header-bg: linear-gradient(
		to bottom,
		var(--gray-800) 0%,
		var(--gray-900) 100%
	);
	--drawer-border: rgba(0, 0, 0, 0.06);
	--drawer-text-primary: var(--text-primary);
	--drawer-text-secondary: var(--text-secondary);
	--drawer-text-muted: var(--text-muted);
	--drawer-shadow:
		-10px 0 25px -5px rgba(0, 0, 0, 0.1), -4px 0 10px -5px rgba(0, 0, 0, 0.04);
	--drawer-tab-color: var(--gray-500);
	--drawer-tab-hover: var(--gray-700);
	--drawer-tab-active: var(--primary-600);
	--drawer-tab-indicator: var(--primary-600);

	--drawer-card-bg: var(--surface-1);
	--drawer-card-border: var(--gray-200);
	--drawer-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

	--drawer-detail-label: var(--gray-500);
	--drawer-detail-icon: var(--gray-400);
	--drawer-detail-value: var(--gray-900);
	--drawer-detail-link: var(--primary-600);
	--drawer-detail-link-hover: underline;
	--drawer-section-title: var(--gray-400);
	--drawer-detail-bg: var(--drawer-card-bg);
	--drawer-detail-border: var(--drawer-card-border);
	--drawer-detail-border-dashed: #e5e7eb;
	--drawer-detail-radius: 12px;
	--drawer-detail-gap: 6px;
	--drawer-detail-padding: 24px;
}

:root[data-theme="dark"] {
	--surface-1: #0b0e12;
	--surface-2: #13171c;
	--surface-3: #1a1f26;
	--surface-4: #252c36;
	--divider: #252b33;

	/* Global Text */
	--text-primary: #e4e7eb;
	--text-secondary: #8a94a8;
	--text-muted: #5f6b7a;

	/* Primary  */
	--primary-400: #7a5cf5;
	--primary-500: #4b7bec;
	--primary-600: #3a63d2;

	/* Sidebar */
	--surface-sidebar: #0b0e12;
	--sidebar-text-primary: #e4e7eb;
	--sidebar-text-secondary: #8a94a8;
	--sidebar-text-muted: #5f6b7a;
	--sidebar-hover-bg: #1a1f26;
	--sidebar-active-bg: #252c36;
	--sidebar-border: #252b33;

	/* Header */
	--header-text-primary: white;
	--header-text-secondary: #8a94a8;
	--header-divider: #252b33;
	--header-input-bg: #1a1f26;
	--header-input-border: #252b33;
	--header-input-focus-ring: rgba(75, 123, 236, 0.35);

	/* Button System */
	--btn-default-bg: #1a1f26;
	--btn-default-border: #252b33;
	--btn-default-text: #e4e7eb;
	--btn-default-hover-bg: #252c36;
	--btn-default-hover-border: #3d4552;
	--btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

	--btn-primary-bg: var(--primary-500);
	--btn-primary-hover: var(--primary-600);
	--btn-primary-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.4);

	--btn-danger-soft-bg: #2f2428;
	--btn-danger-soft-text: #f97066;
	--btn-danger-soft-hover: #3a242b;

	--btn-danger-bg: #dc2626;
	--btn-danger-hover: #ef4444;

	--focus-ring: 0 0 0 3px rgba(75, 123, 236, 0.35);

	/* Icon Buttons */
	--icon-btn-color: #9aa1b0;
	--icon-btn-hover-bg: #252c36;
	--icon-btn-hover-color: white;
	--icon-btn-accent-hover: var(--primary-500);

	/* Table System */
	--table-bg: #13171c;
	--table-header-bg: #1a1f26;
	--table-row-bg: #13171c;
	--table-row-hover: #1a1f28;
	--table-row-selected: #1e2530;
	--table-divider: #1f252e;
	--table-space: transparent;
	--table-text-primary: #8a94a8;
	--table-text-secondary: var(--text-secondary);
	--sort-accent: var(--primary-500);

	/* Pagination */
	--pagination-divider: var(--divider);

	/* Checkbox */
	--checkbox-bg: #13171c;
	--checkbox-border: #2f3742;
	--checkbox-checked-bg: var(--primary-500);

	/* Dropdowns */
	--dropdown-bg: #1a1f26;
	--dropdown-border: #252b33;
	--dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	--dropdown-item-text: #e4e7eb;
	--dropdown-item-hover-bg: #252c36;
	--dropdown-danger-text: #f97066;
	--dropdown-danger-hover-bg: #2f2428;

	/* Editables */
	--editable-bg: #1a1f26;
	--editable-bg-editing: #13171c;
	--editable-text: var(--text-primary);
	--editable-placeholder: #5f6b7a;
	--editable-border-focus: var(--primary-500);

	/* Drawer Component */
	--drawer-bg: var(--surface-2);
	--drawer-backdrop: rgba(0, 0, 0, 0.75);
	--drawer-border: var(--divider);
	--drawer-text-primary: var(--text-primary);
	--drawer-text-secondary: var(--text-secondary);
	--drawer-text-muted: var(--text-muted);
	--drawer-tab-color: var(--text-muted);
	--drawer-tab-hover: var(--text-primary);
	--drawer-tab-active: var(--primary-500);
	--drawer-tab-indicator: var(--primary-500);
	--drawer-card-bg: var(--surface-3);
	--drawer-card-border: var(--divider);
	--drawer-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	--drawer-detail-label: var(--text-muted);
	--drawer-detail-icon: #5f6b7a;
	--drawer-detail-value: var(--text-primary);
	--drawer-detail-link: var(--primary-500);
	--drawer-detail-border-dashed: #252b33;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #3a4452 transparent;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 8px;
}

::-webkit-scrollbar-thumb {
	background-color: #3a4452;
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #5f6d80;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
		"Helvetica Neue", "Inter", "Segoe UI", Roboto, sans-serif;

	background: var(--surface-1);
	margin: 0;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.perf-hud {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--surface-1);
	color: #10b981;
	padding: 10px 15px;
	border-radius: 8px;
	font-family: monospace;
	font-size: 12px;
	display: flex;
	gap: 10px;
}

.app-layout {
	display: flex;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.main-content {
	flex-grow: 1;
	margin-left: 72px;
	height: 100%;
	display: flex;
	overflow: hidden;

	min-width: 0;
	min-height: 0;
}
[x-cloak] {
	display: none !important;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	height: 36px;
	padding: 0 14px;

	font-size: 13px;
	font-weight: 500;

	border-radius: var(--radius-sm);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:active:not(:disabled) {
	transform: scale(0.96);
	transition: transform 0.1s ease;
}
.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.btn svg,
.btn i,
.btn iconify-icon {
	color: currentColor;
	width: 16px;
	height: 16px;
	fill: currentColor;
	opacity: 0.9;
}
.btn-icon-text {
	padding: 0 12px;
}
.btn-label {
	transition:
		opacity 0.2s ease,
		width 0.2s ease;
}
.btn-ghost.is-active {
	background: var(--btn-default-hover-bg) !important;
	color: var(--primary-500);
}
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	/* pointer-events: none;  */
}

.btn-primary {
	background: var(--btn-primary-bg) !important;
	border: 1px solid transparent;
	color: var(--btn-primary-text);
	box-shadow: var(--btn-primary-shadow);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover:not(:disabled) {
	background: var(--btn-primary-hover) !important;
}
.btn-secondary {
	background: var(--btn-default-bg);
	border: 1px solid var(--btn-default-border);
	color: var(--btn-default-text);
	box-shadow: var(--btn-shadow);
}
.btn-secondary:hover:not(:disabled) {
	background: var(--btn-default-hover-bg);
	border-color: var(--btn-default-hover-border);
}
.btn-danger {
	background: var(--btn-danger-bg);
	border: 1px solid transparent;
	color: var(--btn-danger-text);
	box-shadow: var(--btn-primary-shadow);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.btn-danger:hover:not(:disabled) {
	background: var(--btn-danger-hover);
}
.btn-danger-soft {
	background: var(--btn-danger-soft-bg);
	border: 1px solid transparent;
	color: var(--btn-danger-soft-text);
}
.btn-danger-soft:hover:not(:disabled) {
	background: var(--btn-danger-soft-hover);
}
.btn-ghost {
	background: transparent !important;
	border: 1px solid transparent;
	color: var(--btn-default-text);
	box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
	background: var(--surface-3) !important;
	border-color: var(--divider);
	color: var(--text-primary);
}
.btn-ghost.is-active {
	background: var(--surface-2) !important;
	border-color: var(--primary-500);
	color: var(--primary-500);
	font-weight: 600;
}
.btn-danger-subtle {
	background: rgba(239, 68, 68, 0.08);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, 0.15);
}
.btn-danger-subtle:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.4);
	color: #ef4444;
}
.btn-danger-soft {
	background: var(--btn-danger-soft-bg);
	border: 1px solid transparent;
	color: var(--btn-danger-soft-text);
	box-shadow: none;
	transition: all 0.2s ease;
}
.btn-danger-soft:hover:not(:disabled) {
	background: var(--btn-danger-soft-hover);
	border-color: color-mix(
		in srgb,
		var(--btn-danger-soft-text) 20%,
		transparent
	);
}
.btn-danger-subtle:active:not(:disabled),
.btn-danger-soft:active:not(:disabled) {
	transform: scale(0.97);
	background: var(--btn-danger-soft-bg);
}
/* Split pill button (paired buttons with rounded capsule look) */
.split-pill {
	display: inline-flex;
	border-radius: 9999px;
	overflow: hidden;
	border: 1px solid var(--divider);
	align-items: center;
	height: 40px;
}
.split-pill .btn {
	height: 40px;
	border-radius: 0;
	box-shadow: none;
}
.split-pill .btn:first-child {
	padding-left: 16px;
	padding-right: 12px;
	border-right: 1px solid rgba(0,0,0,0.04);
}
.split-pill .btn:last-child {
	padding-left: 12px;
	padding-right: 18px;
}
.split-pill .btn svg {
	width: 18px;
	height: 18px;
}
/* .btn:hover:not(:disabled) iconify-icon, 
.btn:hover:not(:disabled) i,
.btn:hover:not(:disabled) svg {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
} */
.btn-primary-subtle {
	background: color-mix(in srgb, var(--primary-500) 8%, transparent);
	color: var(--primary-400);
	border: 1px solid color-mix(in srgb, var(--primary-500) 15%, transparent);
	box-shadow: none;
	transition: all 0.2s ease;
}
.btn-primary-subtle:hover:not(:disabled) {
	background: color-mix(in srgb, var(--primary-500) 15%, transparent);
	border-color: color-mix(in srgb, var(--primary-500) 40%, transparent);
	color: var(--primary-500);
}
.btn-primary-subtle:active:not(:disabled) {
	background: color-mix(in srgb, var(--primary-500) 20%, transparent);
}

.btn-badge {
	background: var(--primary-500);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	height: 18px;
	min-width: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	padding: 1px;
	margin-left: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.btn-badge-subtle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	min-width: 18px;
	padding: 1px;
	margin-left: 4px;
	border-radius: 100%;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: currentColor;
	background: color-mix(in srgb, currentColor 15%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);

	transition: all 0.2s ease;
}

.btn:hover .btn-badge-subtle {
	background: color-mix(in srgb, currentColor 25%, transparent);
	transform: scale(1.05);
}

.th-sort-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm, 4px);
	border: none;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s ease;
	padding: 0;
}

.th-sort-btn:hover {
	background: var(--btn-hover-bg);
}

.th-sort-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* --- MODAL --- */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--drawer-backdrop);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 50;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	pointer-events: none;
}

.modal-overlay.show {
	opacity: 1;
	pointer-events: auto;
}

.modal-card {
	background: var(--surface-1);
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	border: 1px solid var(--divider);
	box-shadow:
		0 24px 48px -12px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.05);
	transform: scale(0.96) translateY(12px);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.show .modal-card {
	transform: scale(1) translateY(0);
}

.modal-header {
	padding: 20px 24px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.modal-title-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.modal-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	letter-spacing: -0.01em;
}

.modal-subtitle {
	font-size: 12px;
	color: var(--primary-500);
	font-weight: 500;
}

.btn-close-modal {
	background: var(--surface-2);
	border: 1px solid transparent;
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.btn-close-modal:hover {
	background: var(--surface-3);
	color: var(--text-primary);
}

.modal-body {
	padding: 20px 24px;
	overflow-y: auto;
	flex-grow: 1;
	min-height: 0;
}

.modal-footer {
	padding: 16px 24px;
	background: var(--surface-1);
	border-top: 1px solid var(--divider);
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
}

.form-group {
	margin-bottom: 20px;
}

.form-label {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
}

.form-input {
	width: 100%;
	padding: 10px 12px;
	background-color: var(--surface-2);
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	color: var(--text-primary);
	box-sizing: border-box;
	transition: all 0.15s ease;
	line-height: 1.5;
}
.form-input::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
	font-style: italic;
}
.form-input:hover {
	background-color: var(--surface-3);
}
.form-input:focus,
.form-input.is-focused {
	outline: none;
	background-color: var(--surface-1);
	border-color: var(--primary-500);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 15%, transparent);
}
.form-input:not(:placeholder-shown):invalid {
	border-color: var(--btn-danger-bg, #ef4444) !important;
	color: var(--btn-danger-bg, #ef4444);
	box-shadow: inset 0 0 0 1px var(--btn-danger-bg, #ef4444);
}
.custom-select-wrapper {
	position: relative;
	width: 100%;
}
.select-trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}
.select-trigger .select-text {
	color: var(--text-muted);
	font-style: italic;
}

.select-trigger.has-value .select-text {
	color: var(--text-primary);
	font-style: normal;
	font-weight: 500;
}

.select-icon {
	color: var(--text-muted);
	transition: transform 0.2s ease;
}

.select-trigger.is-focused .select-icon {
	color: var(--primary-500);
}

.custom-select-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--divider);
	border-radius: 8px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
	z-index: 50;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.custom-select-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.custom-select-item:hover {
	background: var(--surface-3);
}

.custom-select-item.is-active {
	background: color-mix(in srgb, var(--primary-500) 15%, transparent);
	color: var(--primary-500);
}

.custom-select-item.neutral {
	color: var(--text-muted);
	gap: 8px;
	justify-content: flex-start;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--divider);
	border-radius: 4px 4px 0 0;
	padding-bottom: 10px;
}

.custom-select-item.neutral:hover {
	color: var(--text-primary);
}

.check-icon {
	color: var(--primary-500);
}

.dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 8px;
	width: 160px;
	background: var(--dropdown-bg);
	border: 1px solid var(--dropdown-border);
	border-radius: 10px;
	box-shadow: var(--dropdown-shadow);
	z-index: 50;
	overflow: hidden;
	padding: 4px;
}

.dropdown-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	border-radius: 4px;
	font-weight: 500;

	color: var(--dropdown-item-text);
	background: transparent;

	border: none;
	cursor: pointer;
	text-align: left;

	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.dropdown-item:hover {
	background: var(--dropdown-item-hover-bg);
}

.dropdown-item:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.dropdown-item.delete {
	color: var(--dropdown-danger-text);
}

.dropdown-item.delete:hover {
	background: var(--dropdown-danger-hover-bg);
}

.dropdown-item svg {
	margin-right: 10px;
	width: 16px;
	height: 16px;
	opacity: 0.8;
}

.menu-transition-enter {
	transition:
		opacity 0.15s cubic-bezier(0, 0, 0.2, 1),
		transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}

.menu-transition-leave {
	transition:
		opacity 0.1s ease-in,
		transform 0.1s ease-in;
}

.menu-hidden {
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
}

.menu-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.split-btn-group {
	display: inline-flex;
	position: relative;
	align-items: stretch;
}

@keyframes spin-icon {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.icon-spin {
	animation: spin-icon 2s linear infinite;
}
.toast-viewport { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; width: 290px; max-width: calc(100vw - 32px); }
.toast-card { 
  pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 12px; 
  padding: 14px 16px; border-radius: var(--radius-md, 10px); overflow: hidden;
  background: color-mix(in srgb, var(--surface-3) 85%, transparent);  
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
  border: 1px solid var(--divider); box-shadow: var(--dropdown-shadow); 
  transform-origin: top right; 
  will-change: transform, opacity;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Added transition */
}
.toast-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.toast-card:hover .toast-progress {
  animation-play-state: paused;
}
.toast-icon-box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; margin-top: 1px; }
.toast-card.is-success .toast-icon-box { color: var(--secondary-500); }
.toast-card.is-error .toast-icon-box { color: var(--danger-500); }
.toast-card.is-info .toast-icon-box { color: var(--primary-500); }
.toast-card.is-warning .toast-icon-box { color: #f59e0b; }
.toast-card.is-loading .toast-icon-box { color: var(--primary-500); }
.toast-content { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.toast-title, .toast-description { 
  margin: 0; color: var(--text-primary); line-height: 1.3; 
  word-break: break-word; 
  overflow-wrap: anywhere; 
}
.toast-title { font-size: 14px; font-weight: 600; }
.toast-description { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; margin-right: -4px; }
.toast-close:hover { background: var(--surface-2); color: var(--text-primary); }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--primary-500); width: 100%; transform-origin: left; animation: toast-shrink linear forwards; }
.toast-card.is-success .toast-progress { background: var(--secondary-500); }
.toast-card.is-error .toast-progress { background: var(--danger-500); }
.toast-card.is-warning .toast-progress { background: #f59e0b; }
.toast-progress-indeterminate { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--primary-500); width: 30%; animation: toast-indeterminate 1.5s infinite ease-in-out; }
.toast-spin { animation: toast-spin 1.5s linear infinite; color: var(--primary-500); }
.toast-enter-active { transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast-leave-active { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.toast-enter-from { opacity: 0; transform: translateX(100%); }
.toast-enter-to { opacity: 1; transform: translateX(0); }
.toast-leave-from { opacity: 1; transform: scale(1); }
.toast-leave-to { opacity: 0; transform: scale(0.9); }
@keyframes toast-shrink { from { width: 100%; } to { width: 0%; } }
@keyframes toast-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
@keyframes toast-spin { 100% { transform: rotate(360deg); } }
.srd-calendar-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	min-width: 303px;
	min-height: 405px;
	background: var(--surface-1);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 10px;
	font-family: inherit;
	user-select: none;
}

.srd-skeleton-day {
	width: 38px;
	height: 38px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: linear-gradient(
		90deg,
		var(--surface-2) 25%,
		var(--surface-3) 50%,
		var(--surface-2) 75%
	);
	font-size: 14px;
	font-weight: 500;
	background-size: 200% 100%;
	animation: skeleton-pulse 1.5s infinite linear;
	pointer-events: none;
}

.srd-cal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.srd-cal-title-wrapper {
	position: relative;
}

.srd-cal-title-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--text-primary);
	transition: background 0.15s ease;
}

.srd-cal-title-btn:hover {
	background: var(--surface-2);
}

.srd-cal-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.srd-cal-chevron {
	width: 16px;
	height: 16px;
	color: var(--text-muted);
}

.srd-cal-dropdown {
	top: 100%;
	left: 0;
	min-width: 140px;
	max-height: 250px;
	overflow-y: auto;
}

.srd-cal-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.srd-cal-today-btn {
	height: 32px;
	padding: 0 12px;
	font-size: 12px;
	border-radius: 16px;
}

.srd-cal-nav-group {
	gap: 2px;
}

.srd-cal-nav-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
}

.srd-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}

.srd-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	row-gap: 6px;
	flex-grow: 1;
}

.srd-cal-cell {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 44px;
	z-index: 1;
}

.srd-cal-cell.is-in-range::before {
	content: "";
	position: absolute;
	height: 38px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	background: color-mix(in srgb, var(--primary-500) 15%, transparent);
	z-index: -1;
}

.srd-cal-cell.is-range-start::before {
	left: 50%;
}

.srd-cal-cell.is-range-end::before {
	right: 50%;
}

.srd-cal-cell.is-range-start.is-range-end::before {
	display: none;
}

.srd-cal-day {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		background 0.2s ease,
		transform 0.1s ease,
		color 0.2s ease;
}

.srd-cal-day:focus {
	outline: none;
}

.srd-cal-day:hover:not(.is-disabled):not(.is-selected) {
	background: var(--surface-3);
	color: var(--text-primary);
}

.srd-cal-day:active:not(.is-disabled):not(.is-selected) {
	transform: scale(0.92);
}

.srd-cal-day.is-muted {
	color: var(--text-muted);
	opacity: 0.5;
}

.srd-cal-day.is-disabled {
	color: var(--text-muted);
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
}

.srd-cal-day.is-today {
	color: var(--primary-500);
	font-weight: 700;
}
.srd-cal-day.is-today::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--primary-500);
}

.srd-cal-day.is-selected {
	background: var(--primary-500) !important;
	color: #ffffff !important;
	font-weight: 600;
	box-shadow: var(--btn-primary-shadow);
}

.srd-cal-day.is-today.is-selected::after {
	background: #ffffff;
}

.srd-calendar-sm {
	padding: 10px;
	width: 260px;
	min-width: 260px;
	min-height: auto;
}

.srd-calendar-sm .srd-cal-header {
	margin-bottom: 8px;
}

.srd-calendar-sm .srd-cal-title {
	font-size: 13px;
}

.srd-calendar-sm .srd-cal-nav-btn {
	padding: 2px;
	width: 26px;
	height: 26px;
}

.srd-calendar-sm .srd-cal-nav-btn svg {
	width: 14px;
	height: 14px;
}

.srd-calendar-sm .srd-cal-weekdays {
	margin-bottom: 0px;
}

.srd-calendar-sm .srd-cal-weekdays span {
	font-size: 11px;
	height: 20px;
}

.srd-calendar-sm .srd-cal-grid {
	gap: 0;
}

.srd-calendar-sm .srd-cal-cell {
	height: 32px;
}

.srd-calendar-sm .srd-cal-cell.is-in-range::before {
	height: 28px;
}

.srd-calendar-sm .srd-cal-day {
	height: 28px;
	width: 28px;
	font-size: 12px;
}

.srd-calendar-sm .srd-cal-today-btn {
	display: none !important;
}

.srd-calendar-sm .srd-cal-day.is-today {
	color: var(--text-primary);
	font-weight: 500;
}

.srd-calendar-sm .srd-cal-day.is-today::after {
	display: none;
}

.filter-panel,
.filter-stack {
	overflow: visible !important;
}

@media (max-width: 400px) {
	.srd-calendar-container {
		padding: 12px 14px;
	}

	.srd-cal-header {
		margin-bottom: 12px;
	}

	.srd-cal-title {
		font-size: 14px;
	}

	.srd-cal-grid {
		row-gap: 2px;
		column-gap: 2px;
	}

	.srd-cal-cell {
		height: 36px;
	}

	.srd-cal-cell.is-in-range::before {
		height: 30px;
	}

	.srd-cal-day {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}
}
@media (max-width: 640px) { .toast-viewport { top: 16px; right: 50%; transform: translateX(50%); align-items: center; } .toast-card { width: 100%; } }
@media (max-width: 900px) {
	.btn-label {
		opacity: 0;
		width: 0;
		overflow: hidden;
	}

	.btn-icon-text {
		padding: 0 10px;
	}
}