:root {
	--admin-input-border: #cdd5e2;
	--admin-input-bg: #fdfdfd;
	--admin-input-focus-border: #2563eb;
	--admin-input-focus-shadow: rgba(37, 99, 235, 0.25);
	--admin-input-transition: 120ms ease;
	--field-error-bg: #ffffff;
	--field-error-border: #f87171;
	--field-error-ring: rgba(248, 113, 113, 0.25);
	--field-error-label: #b91c1c;
	--toast-success-bg: #ecfdf5;
	--toast-success-border: #34d399;
	--toast-success-color: #065f46;
	--toast-error-bg: #fef2f2;
	--toast-error-border: #f87171;
	--toast-error-color: #991b1b;
}

html.dark {
	--field-error-bg: #1f1320;
	--field-error-border: #fca5a5;
	--field-error-ring: rgba(248, 113, 113, 0.35);
	--field-error-label: #fecdd3;
	--toast-success-bg: #064e3b;
	--toast-success-border: #10b981;
	--toast-success-color: #d1fae5;
	--toast-error-bg: #7f1d1d;
	--toast-error-border: #fca5a5;
	--toast-error-color: #fee2e2;
}

@media (prefers-color-scheme: dark) {
	html:not(.light) {
		--field-error-bg: #1f1320;
		--field-error-border: #fca5a5;
		--field-error-ring: rgba(248, 113, 113, 0.35);
		--field-error-label: #fecdd3;
		--toast-success-bg: #064e3b;
		--toast-success-border: #10b981;
		--toast-success-color: #d1fae5;
		--toast-error-bg: #7f1d1d;
		--toast-error-border: #fca5a5;
		--toast-error-color: #fee2e2;
	}
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
	border: 1px solid var(--admin-input-border);
	background-color: var(--admin-input-bg);
	border-radius: 0.5rem;
	width: 100%;
	max-width: 100%;
	padding: 0.55rem 0.85rem;
	font-size: 0.95rem;
	line-height: 1.4;
	transition: border-color var(--admin-input-transition), box-shadow var(--admin-input-transition), background-color var(--admin-input-transition);
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.08);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--admin-input-focus-border);
	box-shadow: 0 0 0 3px var(--admin-input-focus-shadow);
	background-color: #fff;
}

textarea {
	min-height: 120px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: #94a3b8;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select {
	background-color: #0f172a;
	border-color: #273043;
	color: #f8fafc;
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.4);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark textarea:focus,
.dark select:focus {
	border-color: #60a5fa;
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
	background-color: #0b1220;
}

.user-card {
	position: relative;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.user-card-dirty {
	border-color: #2563eb !important;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.dark .user-card-dirty {
	box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}

.user-card--deleted {
	border-color: #f97316 !important;
	background-color: #fff7ed;
}

.dark .user-card--deleted {
	border-color: #fb923c !important;
	background-color: rgba(249, 115, 22, 0.1);
}

.user-dirty-badge {
	border-radius: 9999px;
	padding: 0.1rem 0.65rem;
	font-size: 0.7rem;
	font-weight: 600;
}

.user-card-overlay {
	border-radius: inherit;
}

.admin-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(1px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}

.admin-overlay[data-visible="true"] {
	opacity: 1;
	pointer-events: all;
}

.dark .admin-overlay {
	background: rgba(15, 23, 42, 0.55);
}

.user-card--loading .user-card-overlay {
	opacity: 1;
	pointer-events: all;
}

.admin-toast {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	min-width: 240px;
	border-radius: 0.85rem;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
	border: 1px solid transparent;
	opacity: 0;
	transform: translateY(-0.35rem);
	pointer-events: none;
	transition: opacity 120ms ease, transform 120ms ease;
}

.admin-toast[data-visible="true"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.admin-toast--success {
	background: var(--toast-success-bg);
	border-color: var(--toast-success-border);
	color: var(--toast-success-color);
}

.admin-toast--error {
	background: var(--toast-error-bg);
	border-color: var(--toast-error-border);
	color: var(--toast-error-color);
}

.admin-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-card--collapsing {
	overflow: hidden !important;
	transition: height 140ms ease, opacity 140ms ease, margin 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.user-card--collapsing {
		transition: none !important;
	}
}

@media (max-width: 640px) {
	.admin-toast {
		right: 0.75rem;
		left: 0.75rem;
		min-width: auto;
	}
}

/* Icon Preview Styles (moved from models.css) */
.media-preview,
.icon-preview-bg {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	background-image:
		linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
		linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
		linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
	background-color: #ffffff;
	transition: all 0.3s ease;
}

.media-preview:hover,
.icon-preview-bg:hover {
	background-image:
		linear-gradient(45deg, #374151 25%, transparent 25%),
		linear-gradient(-45deg, #374151 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #374151 75%),
		linear-gradient(-45deg, transparent 75%, #374151 75%);
	background-color: #111827;
}

.media-preview--sm,
.icon-preview-bg-small {
	background-image:
		linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
		linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
		linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
	background-size: 6px 6px;
	background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
	background-color: #ffffff;
	transition: all 0.3s ease;
}

.media-preview--sm:hover,
.icon-preview-bg-small:hover {
	background-image:
		linear-gradient(45deg, #374151 25%, transparent 25%),
		linear-gradient(-45deg, #374151 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #374151 75%),
		linear-gradient(-45deg, transparent 75%, #374151 75%);
	background-color: #111827;
}

.media-preview img,
.icon-preview-bg img,
.media-preview--sm img,
.icon-preview-bg-small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-color-scheme: dark) {
	.media-preview,
	.icon-preview-bg {
		background-image:
			linear-gradient(45deg, #4b5563 25%, transparent 25%),
			linear-gradient(-45deg, #4b5563 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #4b5563 75%),
			linear-gradient(-45deg, transparent 75%, #4b5563 75%);
		background-color: #1f2937;
	}

	.media-preview:hover,
	.icon-preview-bg:hover {
		background-image:
			linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
			linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
			linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
		background-color: #ffffff;
	}

	.media-preview--sm,
	.icon-preview-bg-small {
		background-image:
			linear-gradient(45deg, #4b5563 25%, transparent 25%),
			linear-gradient(-45deg, #4b5563 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #4b5563 75%),
			linear-gradient(-45deg, transparent 75%, #4b5563 75%);
		background-color: #1f2937;
	}

	.media-preview--sm:hover,
	.icon-preview-bg-small:hover {
		background-image:
			linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
			linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
			linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
		background-color: #ffffff;
	}
}

[data-field].admin-field-error input:not([type="checkbox"]),
[data-field].admin-field-error textarea,
[data-field].admin-field-error select {
	border-color: var(--field-error-border) !important;
	box-shadow: 0 0 0 3px var(--field-error-ring);
	background-color: var(--field-error-bg);
}

[data-field].admin-field-error input[type="checkbox"] {
	outline: 2px solid var(--field-error-border);
	outline-offset: 2px;
}

[data-field].admin-field-error label {
	color: var(--field-error-label);
}