/* CMS v2_ui — component styles. Plain CSS (no @apply). */

:root {
	--brand-50:  #eef2ff;
	--brand-100: #e0e7ff;
	--brand-200: #c7d2fe;
	--brand-400: #818cf8;
	--brand-500: #6366f1;
	--brand-600: #4f46e5;
	--brand-700: #4338ca;
	--brand-900: #312e81;
	--shadow-soft: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
	--shadow-pop:  0 8px 20px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
	--shadow-lift: 0 12px 28px -8px rgba(15, 23, 42, 0.16), 0 6px 12px -4px rgba(15, 23, 42, 0.08);
	--ring-brand: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #334155;
	background: #f8fafc;
	letter-spacing: -0.005em;
}
::selection { background: var(--brand-100); color: var(--brand-900); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; background-clip: content-box; border: 2px solid transparent; }

/* Cards */
.card {
	background: #fff;
	border-radius: 0.875rem;
	border: 1px solid #e2e8f0;
	box-shadow: var(--shadow-soft);
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.card.hover\:shadow-pop:hover, .card:hover.shadow-soft { box-shadow: var(--shadow-pop); }

/* ============================================================
   BUTTONS — premium SaaS tier
   Variants are SELF-SUFFICIENT: any .btn-primary / .btn-secondary /
   .btn-ghost / .btn-danger / .btn-success / .btn works on its own
   without needing an explicit .btn base class.
   :is() lets us share base layout across all variants in one rule.
   Higher-specificity (button.x, a.x, input.x) defeats Tailwind preflight.
   ============================================================ */

:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning),
:is(button, a, input):is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5625rem 1.125rem;
	border-radius: 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms ease,
	            color 200ms ease,
	            border-color 200ms ease,
	            filter 200ms ease;
	cursor: pointer;
	border: 0;
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	background-image: revert;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
}

:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning):focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35);
}
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning):disabled,
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning)[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	filter: saturate(0.6);
}
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning):active:not(:disabled) {
	transform: translateY(1px) scale(0.985);
	transition-duration: 80ms;
}
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning) > svg,
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning) > [data-lucide],
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning) > i {
	width: 1rem; height: 1rem; flex-shrink: 0;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Spinner shown when .is-loading */
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning).is-loading {
	color: transparent !important;
	pointer-events: none;
}
:is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning).is-loading::after {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.65s linear infinite;
	color: #fff;
	opacity: 0.95;
	z-index: 3;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { color: var(--brand-600); }

/* Subtle shimmer wash on hover for filled surfaces */
.btn-primary, .btn-danger, .btn-success, .btn-warning {
	background-size: 100% 100%;
	background-position: center;
}
.btn-primary::before, .btn-danger::before, .btn-success::before, .btn-warning::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
	transform: translateX(-110%);
	transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}
.btn-primary:hover:not(:disabled)::before,
.btn-danger:hover:not(:disabled)::before,
.btn-success:hover:not(:disabled)::before,
.btn-warning:hover:not(:disabled)::before { transform: translateX(110%); }

/* ---- Primary ---- */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
	background: linear-gradient(180deg, #818cf8 0%, #6366f1 32%, #4f46e5 68%, #3730a3 100%) !important;
	background-image: linear-gradient(180deg, #818cf8 0%, #6366f1 32%, #4f46e5 68%, #3730a3 100%) !important;
	color: #fff !important;
	border: 1px solid #4338ca !important;
	box-shadow:
		0 2px 4px 0 rgba(67, 56, 202, 0.30),
		0 0 0 1px rgba(67, 56, 202, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
}
.btn-primary > *, button.btn-primary > *, a.btn-primary > * { position: relative; z-index: 2; }
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled) {
	background: linear-gradient(180deg, #93a0fd 0%, #7079f8 32%, #5a4ff0 68%, #3f37b3 100%) !important;
	background-image: linear-gradient(180deg, #93a0fd 0%, #7079f8 32%, #5a4ff0 68%, #3f37b3 100%) !important;
	box-shadow:
		0 14px 28px -8px rgba(79, 70, 229, 0.55),
		0 6px 12px -3px rgba(79, 70, 229, 0.30),
		0 0 0 1px rgba(67, 56, 202, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.btn-primary:hover:not(:disabled) > svg,
.btn-primary:hover:not(:disabled) > [data-lucide],
.btn-primary:hover:not(:disabled) > i { transform: scale(1.1); }

/* ---- Secondary ---- */
.btn-secondary,
button.btn-secondary,
a.btn-secondary,
input.btn-secondary {
	background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
	background-image: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
	box-shadow:
		0 1px 2px 0 rgba(15, 23, 42, 0.06),
		0 1px 0 0 rgba(255,255,255,0.7) inset;
	font-weight: 500;
}
.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover:not(:disabled) {
	background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
	background-image: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
	box-shadow:
		0 10px 18px -4px rgba(15,23,42,0.14),
		0 4px 6px -1px rgba(15,23,42,0.08),
		0 1px 0 0 rgba(255,255,255,0.7) inset;
	transform: translateY(-2px);
}
.btn-secondary:hover:not(:disabled) > svg,
.btn-secondary:hover:not(:disabled) > [data-lucide],
.btn-secondary:hover:not(:disabled) > i { transform: scale(1.1); color: var(--brand-600) !important; }

/* ---- Ghost (transparent, compact — also default for icon-only "p-1.5" buttons) ---- */
.btn-ghost,
button.btn-ghost,
a.btn-ghost {
	background: transparent !important;
	color: #475569 !important;
	padding: 0.4375rem 0.6875rem !important;
	border-radius: 0.5rem !important;
	font-weight: 500 !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
}
.btn-ghost:hover:not(:disabled),
button.btn-ghost:hover:not(:disabled),
a.btn-ghost:hover:not(:disabled) {
	background: #f1f5f9 !important;
	color: #0f172a !important;
	transform: translateY(-1px);
}
.btn-ghost:hover:not(:disabled) > svg,
.btn-ghost:hover:not(:disabled) > [data-lucide],
.btn-ghost:hover:not(:disabled) > i { transform: scale(1.12); color: var(--brand-600) !important; }
/* Ghost-with-rose tint (used for delete icon-only buttons) */
.btn-ghost.text-rose-500:hover:not(:disabled),
.btn-ghost.text-rose-600:hover:not(:disabled) { background: #fff1f2 !important; color: #be123c !important; }
.btn-ghost.text-rose-500:hover:not(:disabled) > svg,
.btn-ghost.text-rose-600:hover:not(:disabled) > svg { color: #e11d48 !important; }

/* ---- Danger ---- */
.btn-danger,
button.btn-danger,
a.btn-danger {
	background: linear-gradient(180deg, #fb7185 0%, #f43f5e 32%, #e11d48 68%, #9f1239 100%) !important;
	background-image: linear-gradient(180deg, #fb7185 0%, #f43f5e 32%, #e11d48 68%, #9f1239 100%) !important;
	color: #fff !important;
	border: 1px solid #be123c !important;
	box-shadow:
		0 2px 4px 0 rgba(190, 18, 60, 0.30),
		0 0 0 1px rgba(190, 18, 60, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
}
.btn-danger > *, button.btn-danger > * { position: relative; z-index: 2; }
.btn-danger:hover:not(:disabled),
button.btn-danger:hover:not(:disabled) {
	background: linear-gradient(180deg, #fda4af 0%, #fb6f7f 32%, #ee2c54 68%, #b21845 100%) !important;
	background-image: linear-gradient(180deg, #fda4af 0%, #fb6f7f 32%, #ee2c54 68%, #b21845 100%) !important;
	box-shadow:
		0 14px 28px -8px rgba(244, 63, 94, 0.55),
		0 6px 12px -3px rgba(244, 63, 94, 0.30),
		0 0 0 1px rgba(190, 18, 60, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.btn-danger:hover:not(:disabled) > svg,
.btn-danger:hover:not(:disabled) > [data-lucide],
.btn-danger:hover:not(:disabled) > i { transform: scale(1.1); }

/* ---- Success ---- */
.btn-success,
button.btn-success,
a.btn-success {
	background: linear-gradient(180deg, #34d399 0%, #10b981 32%, #059669 68%, #065f46 100%) !important;
	background-image: linear-gradient(180deg, #34d399 0%, #10b981 32%, #059669 68%, #065f46 100%) !important;
	color: #fff !important;
	border: 1px solid #047857 !important;
	box-shadow:
		0 2px 4px 0 rgba(4, 120, 87, 0.30),
		0 0 0 1px rgba(4, 120, 87, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
}
.btn-success > *, button.btn-success > * { position: relative; z-index: 2; }
.btn-success:hover:not(:disabled),
button.btn-success:hover:not(:disabled) {
	background: linear-gradient(180deg, #6ee7b7 0%, #34d399 32%, #0fb37c 68%, #07724f 100%) !important;
	background-image: linear-gradient(180deg, #6ee7b7 0%, #34d399 32%, #0fb37c 68%, #07724f 100%) !important;
	box-shadow:
		0 14px 28px -8px rgba(16, 185, 129, 0.55),
		0 6px 12px -3px rgba(16, 185, 129, 0.30),
		0 0 0 1px rgba(4, 120, 87, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.btn-success:hover:not(:disabled) > svg,
.btn-success:hover:not(:disabled) > [data-lucide],
.btn-success:hover:not(:disabled) > i { transform: scale(1.1); }

/* ---- Warning (orange/amber — for non-destructive but attention-grabbing actions) ---- */
.btn-warning,
button.btn-warning,
a.btn-warning {
	background: linear-gradient(180deg, #fdba74 0%, #fb923c 32%, #f97316 68%, #c2410c 100%) !important;
	background-image: linear-gradient(180deg, #fdba74 0%, #fb923c 32%, #f97316 68%, #c2410c 100%) !important;
	color: #fff !important;
	border: 1px solid #c2410c !important;
	box-shadow:
		0 2px 4px 0 rgba(194, 65, 12, 0.30),
		0 0 0 1px rgba(194, 65, 12, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
}
.btn-warning > *, button.btn-warning > * { position: relative; z-index: 2; }
.btn-warning:hover:not(:disabled),
button.btn-warning:hover:not(:disabled) {
	background: linear-gradient(180deg, #fed7aa 0%, #fdba74 32%, #fb923c 68%, #c2410c 100%) !important;
	background-image: linear-gradient(180deg, #fed7aa 0%, #fdba74 32%, #fb923c 68%, #c2410c 100%) !important;
	box-shadow:
		0 14px 28px -8px rgba(249, 115, 22, 0.55),
		0 6px 12px -3px rgba(249, 115, 22, 0.30),
		0 0 0 1px rgba(194, 65, 12, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -2px 0 rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}
.btn-warning:hover:not(:disabled) > svg,
.btn-warning:hover:not(:disabled) > [data-lucide],
.btn-warning:hover:not(:disabled) > i { transform: scale(1.1); }

/* ---- Sizes (apply to any variant) ---- */
.btn-sm, button.btn-sm, a.btn-sm { padding: 0.375rem 0.75rem !important; font-size: 0.75rem !important; border-radius: 0.5rem !important; gap: 0.375rem !important; }
.btn-sm > svg, .btn-sm > [data-lucide], .btn-sm > i { width: 0.875rem !important; height: 0.875rem !important; }
.btn-lg, button.btn-lg, a.btn-lg { padding: 0.75rem 1.625rem !important; font-size: 0.9375rem !important; border-radius: 0.75rem !important; gap: 0.625rem !important; }
.btn-lg > svg, .btn-lg > [data-lucide], .btn-lg > i { width: 1.125rem !important; height: 1.125rem !important; }
.btn-xs, button.btn-xs, a.btn-xs { padding: 0.25rem 0.5rem !important; font-size: 0.6875rem !important; border-radius: 0.4375rem !important; gap: 0.25rem !important; }
.btn-xs > svg, .btn-xs > [data-lucide], .btn-xs > i { width: 0.75rem !important; height: 0.75rem !important; }

/* Pill — fully rounded variant */
.btn-pill { border-radius: 9999px !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

/* Bulk-action bar (sticks at top of list pages when rows selected) */
.bulk-bar {
	background: linear-gradient(180deg, #6366f1 0%, #4f46e5 70%, #4338ca 100%);
	color: #fff;
	border-radius: 0.75rem;
	box-shadow:
		0 8px 16px -4px rgba(67, 56, 202, 0.30),
		0 0 0 1px rgba(67, 56, 202, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bulk-bar-btn {
	display: inline-flex; align-items: center; gap: 0.375rem;
	padding: 0.4375rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	cursor: pointer;
	transition: all 180ms ease;
	letter-spacing: -0.005em;
}
.bulk-bar-btn:hover { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); }
.bulk-bar-btn-danger { background: rgba(244, 63, 94, 0.95); border-color: rgba(190, 18, 60, 0.6); }
.bulk-bar-btn-danger:hover { background: rgba(225, 29, 72, 1); border-color: rgba(159, 18, 57, 0.8); }

/* Icon-only square button (combines with any variant or size) */
.btn-icon, button.btn-icon, a.btn-icon {
	width: 2.25rem !important;
	height: 2.25rem !important;
	padding: 0 !important;
	border-radius: 0.5rem !important;
	flex-shrink: 0;
}
.btn-icon.btn-sm, button.btn-icon.btn-sm, a.btn-icon.btn-sm { width: 1.875rem !important; height: 1.875rem !important; }
.btn-icon.btn-lg, button.btn-icon.btn-lg, a.btn-icon.btn-lg { width: 2.625rem !important; height: 2.625rem !important; }
.btn-icon.btn-xs, button.btn-icon.btn-xs, a.btn-icon.btn-xs { width: 1.625rem !important; height: 1.625rem !important; }

/* Segmented button group */
.btn-group {
	display: inline-flex;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 0.625rem;
	padding: 0.1875rem;
	gap: 0.125rem;
}
.btn-group .btn-segment {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #64748b;
	background: transparent;
	border: 0;
	border-radius: 0.4375rem;
	cursor: pointer;
	transition: all 180ms ease;
}
.btn-group .btn-segment:hover { color: #0f172a; }
.btn-group .btn-segment.active {
	background: #fff;
	color: #0f172a;
	box-shadow: 0 1px 2px 0 rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
}

/* ============================================================
   FORM INPUTS — premium SaaS tier
   High-specificity selectors so Tailwind preflight cannot win
   ============================================================ */
.input,
input.input,
textarea.input,
select.input {
	display: block !important;
	width: 100% !important;
	border-radius: 0.625rem !important;
	border: 1px solid #e2e8f0 !important;
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
	background-image: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
	padding: 0.6875rem 0.9375rem !important;
	font-size: 0.875rem !important;
	color: #0f172a !important;
	box-shadow:
		0 1px 2px 0 rgba(15, 23, 42, 0.05),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
	transition: border-color 200ms ease,
	            box-shadow 200ms ease,
	            background 200ms ease,
	            transform 100ms ease !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	caret-color: var(--brand-600);
	line-height: 1.4;
}
.input::placeholder { color: #94a3b8; transition: color 180ms ease; }
.input:hover:not(:focus):not(:disabled) {
	border-color: #cbd5e1;
	box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06);
}
.input:focus {
	outline: 0;
	border-color: var(--brand-500);
	background: #fff;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, 0.14),
		0 1px 2px 0 rgba(15, 23, 42, 0.06),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
.input:focus::placeholder { color: #cbd5e1; }
.input:disabled {
	background: #f1f5f9;
	color: #64748b;
	cursor: not-allowed;
	box-shadow: none;
}
.input.is-invalid { border-color: #f43f5e; }
.input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.14), 0 1px 2px 0 rgba(15, 23, 42, 0.06); }
.input.is-success { border-color: #10b981; }
.input.is-success:focus { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14); }

textarea.input { line-height: 1.55; min-height: 5rem; resize: vertical; }

/* Custom select chevron */
select.input {
	appearance: none;
	background-image:
		linear-gradient(180deg, #ffffff 0%, #fafbfc 100%),
		url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 10 13 14 9'/%3e%3c/svg%3e");
	background-position: 100% 0, right 0.625rem center;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 1.125em;
	padding-right: 2.5rem;
	cursor: pointer;
}
select.input:hover { background-image: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%), url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 10 13 14 9'/%3e%3c/svg%3e"); }

/* ----- Input group (with leading/trailing icons) ----- */
.input-group {
	position: relative;
	display: block;
}
.input-group .input,
.input-group input.input,
.input-group textarea.input { padding-left: 2.625rem !important; }
.input-group.has-trailing .input,
.input-group.has-trailing input.input { padding-right: 2.625rem !important; }
.input-group > svg,
.input-group > i,
.input-group > [data-lucide] {
	position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
	width: 1rem; height: 1rem; color: #94a3b8;
	pointer-events: none;
	transition: color 180ms ease, transform 200ms ease;
	z-index: 1;
}
.input-group:focus-within > svg,
.input-group:focus-within > i,
.input-group:focus-within > [data-lucide] {
	color: var(--brand-600);
	transform: translateY(-50%) scale(1.05);
}
.input-group .trailing {
	position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; gap: 0.25rem;
	color: #94a3b8;
}

/* Search-specific styling — instant recognizable */
.search-input { padding-left: 2.625rem; }
.search-input + .kbd { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); }

/* Override base .input !important padding when Tailwind pl-* utilities are applied
   (used by inline search icons across list pages — pl-9/pl-10 weren't winning otherwise). */
input.input.pl-7  { padding-left: 1.75rem !important; }
input.input.pl-8  { padding-left: 2.25rem !important; }
input.input.pl-9  { padding-left: 2.5rem  !important; }
input.input.pl-10 { padding-left: 2.75rem !important; }
input.input.pl-11 { padding-left: 3rem    !important; }
input.input.pr-7  { padding-right: 1.75rem !important; }
input.input.pr-8  { padding-right: 2.25rem !important; }
input.input.pr-9  { padding-right: 2.5rem  !important; }
input.input.pr-10 { padding-right: 2.75rem !important; }

/* ----- Topbar pill buttons (colored quick-access actions) ----- */
.topbar-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border-radius: 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid transparent;
	transition: background 150ms ease, border-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
	white-space: nowrap;
	cursor: pointer;
}
.topbar-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.08); }
.topbar-pill:active { transform: translateY(0); }

.topbar-pill-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.topbar-pill-amber:hover   { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

.topbar-pill-emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.topbar-pill-emerald:hover { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }

.topbar-pill-brand   { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.topbar-pill-brand:hover   { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }

/* ----- Floating-label inputs (use .float-label wrapper) ----- */
.float-label {
	position: relative;
}
.float-label > .input {
	padding-top: 1.125rem;
	padding-bottom: 0.375rem;
}
.float-label > .input::placeholder { color: transparent; }
.float-label > label {
	position: absolute;
	left: 0.875rem;
	top: 0.875rem;
	font-size: 0.875rem;
	color: #94a3b8;
	pointer-events: none;
	transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent;
	padding: 0 0.25rem;
	margin-left: -0.25rem;
}
.float-label > .input:focus + label,
.float-label > .input:not(:placeholder-shown) + label {
	top: -0.4375rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--brand-600);
	background: #fff;
}

/* ----- Labels & helper text ----- */
.label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 0.4375rem;
	letter-spacing: -0.005em;
}
.label-required::after { content: ' *'; color: #f43f5e; font-weight: 700; }
.help-text { font-size: 0.75rem; color: #64748b; margin-top: 0.4375rem; line-height: 1.5; }
.error-text {
	font-size: 0.75rem;
	color: #e11d48;
	margin-top: 0.4375rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.error-text::before {
	content: '⚠'; font-size: 0.875rem;
}

/* ----- Toggle switch (premium) ----- */
.toggle {
	position: relative;
	display: inline-block;
	width: 2.5rem;
	height: 1.375rem;
	cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
	border-radius: 9999px;
	transition: background 250ms ease;
	box-shadow: inset 0 1px 2px 0 rgba(15, 23, 42, 0.10);
}
.toggle-thumb {
	position: absolute; top: 0.125rem; left: 0.125rem;
	width: 1.125rem; height: 1.125rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 9999px;
	box-shadow:
		0 1px 2px 0 rgba(15, 23, 42, 0.20),
		0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
	transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle input:checked ~ .toggle-track {
	background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
	box-shadow: inset 0 1px 2px 0 rgba(67, 56, 202, 0.25);
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(1.125rem); }
.toggle input:focus-visible ~ .toggle-track { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); }
.toggle:hover .toggle-thumb { transform: scale(1.05); }
.toggle:hover input:checked ~ .toggle-thumb { transform: translateX(1.125rem) scale(1.05); }

/* ----- Checkbox / radio polish ----- */
input[type=checkbox].rounded,
input[type=radio].rounded,
input[type=checkbox].dt-bulk-cb {
	width: 1rem; height: 1rem;
	border: 1.5px solid #cbd5e1;
	border-radius: 0.3125rem;
	background-color: #fff;
	background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	color: var(--brand-600);
	transition: all 150ms ease;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex-shrink: 0;
}
input[type=radio].rounded { border-radius: 50%; }
input[type=checkbox].rounded:hover,
input[type=radio].rounded:hover,
input[type=checkbox].dt-bulk-cb:hover { border-color: var(--brand-400); }
input[type=checkbox].rounded:checked,
input[type=checkbox].dt-bulk-cb:checked {
	background-color: var(--brand-600);
	background-image: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
	border-color: var(--brand-700);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
input[type=checkbox].rounded:checked::after,
input[type=checkbox].dt-bulk-cb:checked::after {
	content: ''; position: absolute;
	left: 0.1875rem; top: 0.0625rem;
	width: 0.3125rem; height: 0.5625rem;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type=radio].rounded:checked {
	border-color: var(--brand-600);
	background-image: radial-gradient(circle, var(--brand-600) 40%, #fff 50%);
}
input[type=checkbox].rounded:focus-visible,
input[type=radio].rounded:focus-visible,
input[type=checkbox].dt-bulk-cb:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); outline: none; }

/* Form section divider — used inside long modal forms */
.form-section {
	padding-top: 1.25rem;
	margin-top: 0.5rem;
	border-top: 1px solid #f1f5f9;
}
.form-section-title {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #94a3b8;
	margin-bottom: 0.75rem;
}

/* Checkbox / radio polish */
input[type=checkbox].rounded, input[type=radio].rounded {
	width: 1rem; height: 1rem;
	border: 1.5px solid #cbd5e1;
	border-radius: 0.3125rem;
	background-color: #fff;
	color: var(--brand-600);
	transition: all 150ms ease;
	cursor: pointer;
}
input[type=checkbox].rounded:hover { border-color: var(--brand-400); }
input[type=checkbox].rounded:checked { background-color: var(--brand-600); border-color: var(--brand-600); }
input[type=checkbox].rounded:focus { box-shadow: var(--ring-brand); outline: none; }

/* ============================================================
   BADGES + FILTER PILLS
   ============================================================ */
.badge {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: 0.4375rem;
	font-size: 0.7rem;
	font-weight: 600;
	border: 1px solid transparent;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none;
	transition: all 180ms ease;
	white-space: nowrap;
}
a.badge:hover, button.badge:hover { transform: translateY(-1px); }

.badge-success {
	background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
	color: #065f46; border-color: #a7f3d0;
	box-shadow: 0 1px 2px 0 rgba(5, 150, 105, 0.08);
}
a.badge-success:hover { background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%); border-color: #6ee7b7; box-shadow: 0 4px 8px -2px rgba(16, 185, 129, 0.20); }

.badge-warning {
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	color: #92400e; border-color: #fde68a;
	box-shadow: 0 1px 2px 0 rgba(245, 158, 11, 0.08);
}
a.badge-warning:hover { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); border-color: #fcd34d; box-shadow: 0 4px 8px -2px rgba(245, 158, 11, 0.20); }

.badge-danger  {
	background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
	color: #9f1239; border-color: #fecdd3;
	box-shadow: 0 1px 2px 0 rgba(244, 63, 94, 0.08);
}
a.badge-danger:hover { background: linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%); border-color: #fda4af; box-shadow: 0 4px 8px -2px rgba(244, 63, 94, 0.20); }

.badge-neutral {
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	color: #475569; border-color: #e2e8f0;
	box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
}
a.badge-neutral:hover { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); color: #0f172a; border-color: #cbd5e1; box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.08); }

.badge-info    {
	background: linear-gradient(180deg, var(--brand-50) 0%, #dbeafe 100%);
	color: var(--brand-700); border-color: var(--brand-200);
	box-shadow: 0 1px 2px 0 rgba(99, 102, 241, 0.10);
}
a.badge-info:hover, a.badge-info {
	background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%);
}
a.badge-info:hover { border-color: var(--brand-400); box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.25); color: var(--brand-700); }

/* Solid filter pill — used as the primary "active filter" indicator */
.pill-solid {
	background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 4px -1px rgba(79, 70, 229, 0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.kbd {
	display: inline-flex; align-items: center;
	padding: 0.125rem 0.375rem;
	border-radius: 0.3125rem;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	font-size: 0.7rem;
	font-family: ui-monospace, SFMono-Regular, monospace;
	color: #64748b;
	box-shadow: 0 1px 0 0 #e2e8f0;
}

/* Sidebar nav */
.nav-link {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #475569;
	text-decoration: none;
	transition: all 150ms ease;
	position: relative;
}
.nav-link:hover { color: #0f172a; background: #f1f5f9; transform: translateX(2px); }
.nav-link svg { width: 1rem; height: 1rem; color: #94a3b8; transition: color 150ms ease; }
.nav-link:hover svg { color: var(--brand-600); }
.nav-link-active {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--brand-700);
	background: var(--brand-50);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.1);
}
.nav-link-active::before {
	content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
	width: 3px; height: 1.25rem; background: var(--brand-600); border-radius: 0 3px 3px 0;
}
.nav-link-active svg { width: 1rem; height: 1rem; color: var(--brand-600); }

/* Tables — modern + DataTables compatible */
.table-modern { width: 100%; font-size: 0.875rem; border-collapse: separate; border-spacing: 0; }
.table-modern thead th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-size: 0.6875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
	border-bottom: 1px solid #e2e8f0;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
}
.table-modern tbody td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid #f1f5f9;
	color: #334155;
	vertical-align: middle;
}
.table-modern tbody tr { transition: background 120ms ease; }
.table-modern tbody tr:hover { background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%); }
.table-modern tbody tr:last-child td { border-bottom: 0; }
.table-modern tbody tr.row-selected { background: var(--brand-50); }
.table-modern tbody tr.row-selected:hover { background: #e7eaff; }

/* DataTables overrides — match our design */
.dataTables_wrapper { font-size: 0.875rem; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
	color: #64748b; padding: 0.875rem 1rem;
}
.dataTables_wrapper .dataTables_filter input {
	display: inline-block; width: 240px;
	border-radius: 0.5rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: 0.4375rem 0.625rem;
	font-size: 0.8125rem;
	margin-left: 0.5rem;
	transition: all 180ms ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
	outline: 0; border-color: var(--brand-500); box-shadow: var(--ring-brand);
}
.dataTables_wrapper .dataTables_length select {
	border-radius: 0.5rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: 0.3125rem 1.5rem 0.3125rem 0.625rem;
	font-size: 0.8125rem;
	margin: 0 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	display: inline-flex !important;
	align-items: center;
	padding: 0.375rem 0.625rem !important;
	min-width: 2rem;
	margin: 0 0.0625rem !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: #475569 !important;
	font-size: 0.8125rem;
	border-radius: 0.5rem !important;
	cursor: pointer;
	transition: all 150ms ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
	border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--brand-600) !important;
	color: #fff !important;
	border-color: var(--brand-600) !important;
	box-shadow: 0 1px 2px 0 rgba(79, 70, 229, 0.3);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: #cbd5e1 !important;
	background: transparent !important;
	cursor: not-allowed;
}
table.dataTable thead th, table.dataTable thead td {
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid #e2e8f0 !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	color: #64748b !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
	text-align: left !important;
}
table.dataTable thead th:last-child, table.dataTable tbody td:last-child { text-align: right !important; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	cursor: pointer;
	background-image: none !important;
	padding-right: 1.75rem !important;
	position: relative;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
	content: ''; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
	width: 8px; height: 12px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='%23cbd5e1'%3e%3cpath d='M4 0L0 5h8L4 0zM4 12L8 7H0l4 5z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.7;
}
table.dataTable thead .sorting_asc::after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='%234f46e5'%3e%3cpath d='M4 0L0 5h8L4 0z'/%3e%3c/svg%3e");
	opacity: 1;
}
table.dataTable thead .sorting_desc::after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='%234f46e5'%3e%3cpath d='M4 12L8 7H0l4 5z'/%3e%3c/svg%3e");
	opacity: 1;
}
table.dataTable tbody td { padding: 0.875rem 1rem !important; border-top: 1px solid #f1f5f9 !important; vertical-align: middle; text-align: left !important; }
table.dataTable tbody tr { transition: background 120ms ease; }
table.dataTable tbody tr:hover { background: #fafbff !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }

/* DataTables AJAX loading overlay */
.dataTables_processing {
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 0.625rem !important;
	box-shadow: var(--shadow-pop) !important;
	padding: 0.75rem 1rem !important;
	color: #475569 !important;
	font-size: 0.8125rem !important;
	font-weight: 500;
	backdrop-filter: blur(4px);
}

/* Skeleton */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
	background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
	background-size: 200% 100%;
	animation: shimmer 1.4s ease-in-out infinite;
	border-radius: 0.375rem;
}

/* Loading spinner */
@keyframes spin { 100% { transform: rotate(360deg); } }
.spin { animation: spin 0.6s linear infinite; }

/* Custom shadow utilities */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-pop  { box-shadow: var(--shadow-pop); }
.shadow-lift { box-shadow: var(--shadow-lift); }

/* Subtle entrance animation for cards/lists */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 280ms cubic-bezier(0.4, 0, 0.2, 1) both; }

/* ============================================================
   FLATPICKR — themed to match the brand
   ============================================================ */
.flatpickr-calendar {
	border-radius: 0.875rem !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: var(--shadow-lift) !important;
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	padding: 0.375rem !important;
	background: #fff !important;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none !important; }

.flatpickr-months {
	padding: 0.5rem 0.5rem 0.25rem !important;
	background: transparent !important;
}
.flatpickr-month {
	color: #0f172a !important;
	background: transparent !important;
	height: 2.25rem !important;
	border-radius: 0.5rem !important;
}
.flatpickr-current-month {
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	letter-spacing: -0.005em !important;
	padding: 0.25rem 0 !important;
}
.flatpickr-current-month .cur-month, .flatpickr-current-month .cur-year {
	color: #0f172a !important;
	font-weight: 600 !important;
}
.flatpickr-current-month input.cur-year {
	background: transparent !important;
	border-radius: 0.4375rem !important;
	padding: 0 0.25rem !important;
}
.flatpickr-current-month input.cur-year:hover { background: #f1f5f9 !important; }

.flatpickr-monthDropdown-months {
	background: transparent !important;
	border-radius: 0.4375rem !important;
	padding: 0.125rem 0.375rem !important;
	color: #0f172a !important;
	font-weight: 600 !important;
	transition: background 150ms ease;
}
.flatpickr-monthDropdown-months:hover { background: #f1f5f9 !important; }

.flatpickr-prev-month, .flatpickr-next-month {
	width: 2rem !important; height: 2rem !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	border-radius: 0.5rem !important;
	color: #64748b !important;
	transition: all 150ms ease !important;
	padding: 0 !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
	background: #f1f5f9 !important;
	color: var(--brand-600) !important;
	transform: translateY(-1px);
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { width: 0.75rem !important; height: 0.75rem !important; fill: currentColor !important; }

.flatpickr-weekdays { background: transparent !important; padding: 0.375rem 0 0.125rem !important; }
.flatpickr-weekday {
	color: #94a3b8 !important;
	font-weight: 600 !important;
	font-size: 0.6875rem !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: transparent !important;
}

.flatpickr-days, .dayContainer { padding: 0 0.25rem 0.25rem !important; }
.flatpickr-day {
	border-radius: 0.5rem !important;
	color: #334155 !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
	max-width: 2.375rem !important;
	height: 2.375rem !important;
	line-height: 2.375rem !important;
	margin: 1px !important;
	border: 0 !important;
	transition: background 150ms ease, color 150ms ease, transform 120ms ease !important;
}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
	transform: translateY(-1px);
}
.flatpickr-day.today {
	color: var(--brand-700) !important;
	font-weight: 700 !important;
	background: var(--brand-50) !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1px var(--brand-200) !important;
}
.flatpickr-day.today:hover { background: var(--brand-100) !important; color: var(--brand-700) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
	background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%) !important;
	color: #fff !important;
	box-shadow: 0 2px 6px -1px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
	border: 0 !important;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1 !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
	color: #e2e8f0 !important;
	background: transparent !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* Time picker */
.flatpickr-time { border-top: 1px solid #f1f5f9 !important; padding-top: 0.375rem !important; }
.flatpickr-time input {
	color: #0f172a !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	background: #f8fafc !important;
	border-radius: 0.375rem !important;
	transition: background 150ms ease !important;
}
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--brand-50) !important; }
.flatpickr-time .flatpickr-time-separator { color: #64748b !important; font-weight: 700 !important; }
.flatpickr-time .arrowUp:after, .flatpickr-time .arrowDown:after { border-bottom-color: #64748b !important; }

/* ============================================================
   CALENDAR GRID — used on reminders.php (and reusable elsewhere)
   ============================================================ */
.calendar-grid {
	background: #f1f5f9;
	gap: 1px;
	border-top: 1px solid #e2e8f0;
}
.calendar-cell {
	background: #fff;
	min-height: 7.5rem;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	position: relative;
	transition: background 150ms ease;
}
.calendar-cell:hover { background: #fafbff; }
.calendar-cell.calendar-cell-blank { background: #f8fafc; min-height: 5rem; }
.calendar-cell.calendar-cell-blank:hover { background: #f8fafc; }
.calendar-cell.is-today { background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 100%); }
.calendar-cell.is-today:hover { background: linear-gradient(180deg, var(--brand-100) 0%, #ffffff 100%); }
.calendar-cell.is-past .calendar-day-num { color: #94a3b8; }

.calendar-day-num {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0 0.375rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #475569;
	background: transparent;
	border: 0;
	cursor: pointer;
	gap: 0.25rem;
	transition: all 150ms ease;
}
.calendar-day-num:hover {
	background: var(--brand-600);
	color: #fff;
	width: 3rem;
	box-shadow: 0 4px 8px -2px rgba(79, 70, 229, 0.3);
}
.calendar-day-num:hover svg { opacity: 1 !important; }
.calendar-cell.is-today .calendar-day-num {
	background: var(--brand-600);
	color: #fff;
	box-shadow: 0 1px 2px 0 rgba(79, 70, 229, 0.3);
}
.calendar-cell.is-today .calendar-day-num:hover { background: var(--brand-700); }

.calendar-day-events {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.calendar-event {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	width: 100%;
	padding: 0.1875rem 0.4375rem;
	border-radius: 0.3125rem;
	font-size: 0.6875rem;
	font-weight: 500;
	text-align: left;
	border: 0;
	cursor: pointer;
	transition: all 140ms ease;
	white-space: nowrap;
	overflow: hidden;
}
.calendar-event:hover { transform: translateX(2px); box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.10); }
.calendar-event.is-open {
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	color: #92400e;
	border: 1px solid #fde68a;
}
.calendar-event.is-open:hover { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); }
.calendar-event.is-done {
	background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
	color: #065f46;
	border: 1px solid #a7f3d0;
	text-decoration: line-through;
	opacity: 0.85;
}
.calendar-event-dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
	opacity: 0.8;
}
.calendar-event-more {
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--brand-600);
	padding: 0.125rem 0.375rem;
	text-decoration: none;
	transition: color 150ms ease;
}
.calendar-event-more:hover { color: var(--brand-800); }

/* Webmail dropdown — <details> based, hide the native disclosure triangle. */
.webmail-dd > summary { list-style: none; }
.webmail-dd > summary::-webkit-details-marker { display: none; }
.webmail-dd > summary::marker { display: none; content: ''; }

/* ============================================================
   MAILBOX — 3-pane Gmail/Notion-style shell (mailbox.php)
   ============================================================ */
.mailbox-shell {
	display: grid;
	grid-template-columns: 14rem minmax(20rem, 24rem) 1fr;
	height: calc(100vh - 11rem);
	min-height: 32rem;
}
@media (max-width: 900px) {
	.mailbox-shell { grid-template-columns: 1fr; height: auto; }
	.mailbox-rail, .mailbox-list { border-right: 0 !important; border-bottom: 1px solid #e2e8f0; }
}
/* Full-window mailbox (sidebar/topbar removed): let the shell flex-fill the
   viewport instead of the fixed calc() height tuned for the chromed layout. */
.mailbox-shell.mailbox-shell--full { height: auto; min-height: 32rem; }
@media (min-width: 901px) {
	.mailbox-shell.mailbox-shell--full { min-height: 0; }
}

.mailbox-rail {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	border-right: 1px solid #e2e8f0;
	overflow-y: auto;
}
.mailbox-folder {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #475569;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease, transform 120ms ease;
}
.mailbox-folder:hover { background: #f1f5f9; color: #0f172a; transform: translateX(2px); }
.mailbox-folder.is-active {
	background: var(--brand-50);
	color: var(--brand-700);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12);
}
.mailbox-folder.is-active svg { color: var(--brand-600); }
.mailbox-folder svg { color: #94a3b8; }

.mailbox-list {
	border-right: 1px solid #e2e8f0;
	background: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.mailbox-list-items {
	flex: 1;
	overflow-y: auto;
}
.mailbox-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #f1f5f9;
	transition: background 140ms ease, border-color 140ms ease;
	text-decoration: none;
	color: inherit;
	position: relative;
}
.mailbox-row:hover { background: #fafbff; }
.mailbox-row.is-open {
	background: linear-gradient(90deg, var(--brand-50) 0%, #ffffff 100%);
	border-left: 3px solid var(--brand-600);
	padding-left: calc(1rem - 3px);
}
.mailbox-row.is-unread .mailbox-row-from,
.mailbox-row.is-unread .mailbox-row-subject {
	color: #0f172a;
	font-weight: 600;
}
.mailbox-row.is-unread::before {
	content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--brand-600);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.mailbox-row-avatar {
	width: 2rem; height: 2rem;
	border-radius: 9999px;
	background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-600) 100%);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.mailbox-row-from { font-size: 0.8125rem; color: #475569; }
.mailbox-row-date { font-size: 0.6875rem; color: #94a3b8; flex-shrink: 0; white-space: nowrap; }
.mailbox-row-subject { font-size: 0.8125rem; color: #334155; margin-top: 0.0625rem; }
.mailbox-row-peer { margin-top: 0.125rem; }

.mailbox-reader {
	background: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.mailbox-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.mailbox-body-frame {
	flex: 1;
	width: 100%;
	border: 0;
	background: #fff;
	min-height: 16rem;
}

/* ----- Label filter chips above message list ----- */
.mailbox-label-chip {
	display: inline-flex; align-items: center;
	padding: 0.1875rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.6875rem; font-weight: 600;
	color: #475569; background: #f1f5f9;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
	white-space: nowrap;
}
.mailbox-label-chip:hover { background: #e2e8f0; color: #0f172a; }
.mailbox-label-chip.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-700); }
.mailbox-label-chip.tone-amber.is-active   { background: #d97706; border-color: #b45309; }
.mailbox-label-chip.tone-sky.is-active     { background: #0284c7; border-color: #0369a1; }
.mailbox-label-chip.tone-rose.is-active    { background: #e11d48; border-color: #be123c; }
.mailbox-label-chip.tone-violet.is-active  { background: #7c3aed; border-color: #6d28d9; }
.mailbox-label-chip.tone-emerald.is-active { background: #059669; border-color: #047857; }

/* ----- Tiny inline label pill shown inside a row or in the reader header ----- */
.mailbox-label-pill {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.0625rem 0.4375rem;
	border-radius: 9999px;
	font-size: 0.625rem; font-weight: 700;
	letter-spacing: 0.01em;
	background: #f1f5f9; color: #475569;
	white-space: nowrap;
}
.mailbox-label-pill.tone-amber   { background: #fef3c7; color: #92400e; }
.mailbox-label-pill.tone-sky     { background: #e0f2fe; color: #075985; }
.mailbox-label-pill.tone-rose    { background: #ffe4e6; color: #9f1239; }
.mailbox-label-pill.tone-violet  { background: #ede9fe; color: #5b21b6; }
.mailbox-label-pill.tone-emerald { background: #d1fae5; color: #065f46; }

/* ----- Contact CRM label pill (contactbucket) shown inline on each list row.
   Colour comes from contact_labels.label_color via an inline background. ----- */
.mailbox-contact-pill {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.0625rem 0.4375rem;
	border-radius: 9999px;
	font-size: 0.625rem; font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	white-space: nowrap;
}
.mailbox-contact-pill i { width: 0.625rem; height: 0.625rem; }

/* ----- Thread / reply-count pill (email-client style "N replies" indicator) ----- */
.mailbox-thread-pill {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.0625rem 0.4375rem;
	border-radius: 9999px;
	font-size: 0.625rem; font-weight: 700;
	letter-spacing: 0.01em;
	background: #eef2ff; color: #4338ca;
	white-space: nowrap;
}
.mailbox-thread-pill i { width: 0.625rem; height: 0.625rem; }

/* ----- Per-row action buttons (hover-revealed icon strip on each list row) ----- */
.mailbox-row-wrap { position: relative; }
.mailbox-row-actions {
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	display: flex;
	gap: 0.125rem;
	padding: 0.1875rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease, transform 140ms ease;
	transform: translateY(-2px);
	z-index: 5;
}
.mailbox-row-wrap:hover .mailbox-row-actions,
.mailbox-row-actions:focus-within {
	opacity: 1; pointer-events: auto; transform: translateY(0);
}
.mb-act {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.625rem; height: 1.625rem;
	border-radius: 0.375rem;
	border: 0; background: transparent;
	color: #475569;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
.mb-act:hover { background: #f1f5f9; color: #0f172a; }
.mb-act.mb-act-danger:hover { background: #fee2e2; color: #b91c1c; }

/* ----- Label dropdown menu (used in row actions and reader pane) ----- */
.mailbox-label-dropdown { position: relative; display: inline-flex; }
.mailbox-label-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 9.5rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	box-shadow: var(--shadow-lift);
	padding: 0.25rem;
	z-index: 30;
}
.mailbox-label-menu-right { left: auto; right: 0; }
.mailbox-label-menu-item {
	display: flex; align-items: center; gap: 0.5rem;
	width: 100%;
	padding: 0.375rem 0.625rem;
	font-size: 0.75rem; font-weight: 500;
	color: #334155;
	background: transparent; border: 0;
	border-radius: 0.375rem;
	text-align: left;
	cursor: pointer;
	transition: background 100ms ease;
}
.mailbox-label-menu-item:hover { background: #f1f5f9; }
.mailbox-label-dot {
	display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #cbd5e1;
}
.mailbox-label-dot.tone-amber   { background: #d97706; }
.mailbox-label-dot.tone-sky     { background: #0284c7; }
.mailbox-label-dot.tone-rose    { background: #e11d48; }
.mailbox-label-dot.tone-violet  { background: #7c3aed; }
.mailbox-label-dot.tone-emerald { background: #059669; }

/* ============================================================
   FILTER PILLS — status/segment filter chips on list pages
   Markup: <a class="filter-pill" href="?status=…">Label <span class="filter-pill-count">12</span></a>
   Add `.active` to mark the selected pill. Optional tone classes
   .tone-emerald / .tone-amber / .tone-rose / .tone-brand for variety.
   ============================================================ */
.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: #475569;
	background: #fff;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 160ms ease;
	white-space: nowrap;
	user-select: none;
}
.filter-pill:hover {
	color: #0f172a;
	border-color: #cbd5e1;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	box-shadow: 0 6px 12px -3px rgba(15, 23, 42, 0.10);
	transform: translateY(-1px);
}
.filter-pill > .filter-pill-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.375rem; height: 1.25rem;
	padding: 0 0.4375rem;
	border-radius: 9999px;
	background: #f1f5f9;
	color: #64748b;
	font-size: 0.6875rem;
	font-weight: 700;
	transition: background 160ms ease, color 160ms ease;
}
.filter-pill:hover > .filter-pill-count { background: #e2e8f0; color: #0f172a; }

/* Active state — solid brand fill with bright count chip */
.filter-pill.active {
	background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 6px 12px -3px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
	transform: translateY(-1px);
}
.filter-pill.active:hover { color: #fff; box-shadow: 0 10px 18px -4px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active > .filter-pill-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Tone variants — used to colour the active fill differently per filter type */
.filter-pill.active.tone-emerald { background: linear-gradient(180deg, #10b981 0%, #047857 100%); box-shadow: 0 6px 12px -3px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-emerald:hover { box-shadow: 0 10px 18px -4px rgba(16,185,129,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-amber   { background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%); box-shadow: 0 6px 12px -3px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-amber:hover { box-shadow: 0 10px 18px -4px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-rose    { background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%); box-shadow: 0 6px 12px -3px rgba(244,63,94,0.35),  inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-rose:hover { box-shadow: 0 10px 18px -4px rgba(244,63,94,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.filter-pill.active.tone-slate   { background: linear-gradient(180deg, #64748b 0%, #334155 100%); box-shadow: 0 6px 12px -3px rgba(15,23,42,0.20),   inset 0 1px 0 rgba(255,255,255,0.2); }

/* Group container — adds a subtle pill-tray look + responsive wrapping */
.filter-pill-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4375rem;
	align-items: center;
}

/* ============================================================
   ACCESS-CONTROL TOGGLE PILL — used on access_controls.php cells
   ============================================================ */
.ac-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.625rem; height: 1.625rem;
	border-radius: 9999px;
	border: 0;
	cursor: pointer;
	transition: all 160ms ease;
}
.ac-toggle.is-on  { background: #ecfdf5; color: #059669; box-shadow: inset 0 0 0 1px #a7f3d0; }
.ac-toggle.is-off { background: #f1f5f9; color: #cbd5e1; box-shadow: inset 0 0 0 1px transparent; }
.ac-toggle:hover  { transform: translateY(-1px) scale(1.08); }
.ac-toggle.is-on:hover  { background: #d1fae5; color: #047857; box-shadow: inset 0 0 0 1px #6ee7b7, 0 4px 8px -2px rgba(16,185,129,0.25); }
.ac-toggle.is-off:hover { background: #fff1f2; color: #f43f5e; box-shadow: inset 0 0 0 1px #fecdd3; }

/* ============================================================
   BREADCRUMB — premium SaaS look, used on every detail page.
   Self-contained: just <div class="breadcrumb">...</div>
   ============================================================ */
.breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3125rem 0.625rem 0.3125rem 0.4375rem;
	border-radius: 0.625rem;
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	font-size: 0.8125rem;
	color: #64748b;
	margin-bottom: 1.25rem;
	max-width: 100%;
	overflow: hidden;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.breadcrumb:hover { border-color: #cbd5e1; box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.08); }
.breadcrumb > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.1875rem 0.5rem;
	border-radius: 0.4375rem;
	color: #64748b;
	font-weight: 500;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.breadcrumb > a:hover {
	background: var(--brand-50);
	color: var(--brand-700);
}
.breadcrumb > a > svg,
.breadcrumb > a > [data-lucide],
.breadcrumb > a > i {
	width: 0.875rem !important; height: 0.875rem !important;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.breadcrumb > a:hover > svg,
.breadcrumb > a:hover > [data-lucide],
.breadcrumb > a:hover > i { transform: translateX(-2px); color: var(--brand-600); }

/* Chevron dividers between segments — slim, muted */
.breadcrumb > svg,
.breadcrumb > [data-lucide],
.breadcrumb > i {
	width: 0.875rem !important; height: 0.875rem !important;
	color: #cbd5e1;
	flex-shrink: 0;
}

/* Trailing span = current page label — bold + dark + truncates if long */
.breadcrumb > span {
	color: #0f172a;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 0.125rem 0.375rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.breadcrumb > span.font-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8125rem; }

/* When a page wraps the breadcrumb in a flex with action buttons (e.g. invoice_detail) — keep it pill-style */
.breadcrumb-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.breadcrumb-row .breadcrumb { margin-bottom: 0; }

/* Print */
@media print {
	body { background: #fff; }
	.no-print { display: none !important; }
}