/* ================================================================
   ACDOSA design tokens
   One ramp for surfaces, one for text, two teals with distinct jobs:
   --brand is identity (wordmark, headings), --accent is interaction
   (focus, hover, active). Never use a raw hex below this block.
================================================================ */
:root {
	/* Surfaces - slate ramp, matches the inline card colours in the pages */
	--bg: #0b1220;
	--surface-1: #0f172a;
	--surface-2: #1e293b;
	--surface-3: #293546;
	--surface-raised: rgba(30, 41, 59, 0.72);

	/* Lines */
	--border: rgba(148, 163, 184, 0.16);
	--border-strong: rgba(148, 163, 184, 0.28);

	/* Text */
	--text: #e2e8f0;
	--text-dim: #cbd5e1;
	--text-muted: #94a3b8;
	--text-faint: #64748b;

	/* Teals */
	--brand: #20b2aa;
	--accent: #2dd4bf;
	--accent-strong: #14b8a6;
	--accent-press: #0f9488;
	--accent-wash: rgba(45, 212, 191, 0.12);
	--accent-wash-strong: rgba(45, 212, 191, 0.22);
	--accent-ring: rgba(45, 212, 191, 0.35);

	/* Status */
	--danger: #f87171;
	--success: #34d399;
	--warn: #fbbf24;

	/* Shape */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-pill: 999px;

	/* Depth - tuned for a dark UI: tight, low-opacity, never muddy */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fast: 140ms;
	--slow: 260ms;

	/* Type */
	--font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
	--font-display: 'Poppins', var(--font-ui);

	/* Shell - shared by MainLayout and NavMenu, keep them in sync */
	--sidebar-w: 264px;
	--sidebar-breakpoint: 700px;

	color-scheme: dark;
}

/* ================================
   Base
================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html, body {
	background-color: var(--bg);
	color: var(--text);
	min-height: 100dvh;
	overflow-x: auto;
	font-family: var(--font-ui);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* A single soft teal bloom behind the page keeps the flat #121212 slab
   from reading as "default dark template". Fixed so it never scrolls. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(900px 500px at 78% -8%, rgba(45, 212, 191, 0.10), transparent 60%),
		radial-gradient(700px 420px at 8% 4%, rgba(56, 189, 248, 0.06), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.011em;
	color: #f1f5f9;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.35rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.3rem; }

h1:focus {
	outline: none;
}

p {
	color: var(--text-dim);
}

a, .btn-link {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--fast) var(--ease);
}

	a:hover, .btn-link:hover {
		color: #7ee7db;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

/* One consistent keyboard ring for everything focusable */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
	opacity: 1;
}

::selection {
	background: var(--accent-wash-strong);
	color: #fff;
}

/* Page-level scrollbar, matched to the ramp */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--surface-3) transparent;
}

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

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

::-webkit-scrollbar-thumb {
	background-color: var(--surface-3);
	border-radius: var(--r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}

	::-webkit-scrollbar-thumb:hover {
		background-color: #3d4c61;
		background-clip: content-box;
	}

/* Hide number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

/* ================================
   Layout
================================ */
.content {
	padding-top: 1.75rem;
	padding-bottom: 3rem;
	max-width: 1180px;
	margin-inline: auto;
}

/* ================================
   Buttons
================================ */
.btn {
	font-weight: 500;
	letter-spacing: 0.005em;
	border-radius: var(--r-sm);
	transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
				box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease), color var(--fast) var(--ease);
	-webkit-tap-highlight-color: transparent;
}

.btn-primary {
	color: #04201d;
	background-color: var(--accent);
	border: 1px solid var(--accent);
	font-weight: 600;
	box-shadow: var(--shadow-1);
	-webkit-user-select: none;
	user-select: none;
	background-clip: padding-box;
}

	.btn-primary:hover {
		background-color: #5ee0d0;
		border-color: #5ee0d0;
		color: #04201d;
		box-shadow: var(--shadow-2), 0 0 0 1px rgba(45, 212, 191, 0.2);
		transform: translateY(-1px);
	}

	.btn-primary:focus,
	.btn-primary:active:focus {
		box-shadow: 0 0 0 3px var(--accent-ring);
		outline: none;
	}

	.btn-primary:active {
		background-color: var(--accent-press) !important;
		border-color: var(--accent-press) !important;
		color: #d7fdf7 !important;
		transform: translateY(0);
		box-shadow: 0 0 0 3px var(--accent-ring) !important;
		-webkit-appearance: none !important;
	}

.btn-outline-info,
.btn-outline-primary {
	color: var(--accent);
	border-color: var(--border-strong);
	background: transparent;
}

	.btn-outline-info:hover,
	.btn-outline-primary:hover {
		color: #04201d;
		background-color: var(--accent);
		border-color: var(--accent);
	}

button::-moz-focus-inner {
	border: 0;
}

/* Secondary accent button used across the resource pages */
.teal-btn {
	background-color: var(--surface-2);
	color: var(--accent);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	padding: 0.45rem 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

	.teal-btn:hover:not(:disabled) {
		background-color: var(--accent-wash);
		border-color: var(--accent);
		color: #7ee7db;
	}

	.teal-btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}

/* ================================
   Form controls
================================ */
input.form-control,
select.form-select,
textarea.form-control,
button.form-control {
	background-color: var(--surface-1);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	padding: 0.5rem 0.85rem;
	transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

	input.form-control:hover:not(:disabled),
	select.form-select:hover:not(:disabled),
	textarea.form-control:hover:not(:disabled),
	button.form-control:hover:not(:disabled) {
		border-color: rgba(148, 163, 184, 0.42);
	}

	input.form-control::placeholder,
	textarea.form-control::placeholder,
	select.form-select option[disabled][selected] {
		color: var(--text-faint);
		opacity: 1;
	}

	input.form-control:focus,
	textarea.form-control:focus,
	select.form-select:focus,
	button.form-control:focus {
		background-color: var(--surface-1);
		color: var(--text);
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-ring);
		outline: none;
	}

select.form-select {
	appearance: none;
}

button.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
}

/* Disabled - one rule for every control type */
input.form-control:disabled,
select.form-select:disabled,
textarea.form-control:disabled,
button.form-control:disabled,
.dropdown-toggle:disabled,
.list-group-item:disabled {
	background-color: rgba(15, 23, 42, 0.6);
	color: var(--text-faint);
	border-color: var(--border);
	cursor: not-allowed;
	opacity: 1;
}

	input.form-control:disabled::placeholder,
	textarea.form-control:disabled::placeholder {
		color: var(--text-faint) !important;
		opacity: 1 !important;
	}

/* ================================
   Validation
================================ */
.valid.modified:not([type=checkbox]) {
	outline: 1px solid var(--success);
}

.invalid {
	outline: 1px solid var(--danger);
}

.validation-message {
	color: var(--danger);
	font-size: 0.9rem;
}

/* ================================
   Dropdowns & list groups
================================ */
.list-group {
	background-color: var(--surface-1);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-3);
}

.list-group-item {
	background-color: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 0.6rem 0.95rem;
}

	.list-group-item:last-child {
		border-bottom: none;
	}

	.list-group-item:hover {
		background-color: var(--accent-wash);
		color: #fff;
		padding-left: 1.2rem;
	}

	.list-group-item:active {
		background-color: var(--accent-wash-strong);
	}

.dropdown-toggle {
	position: relative;
	padding-right: 2.2rem;
}

	.dropdown-toggle::after {
		content: "";
		position: absolute;
		right: 0.9rem;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		border: 2px solid var(--text-muted);
		border-left: 0;
		border-top: 0;
		transform: translateY(-70%) rotate(45deg);
		transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
		pointer-events: none;
	}

	.dropdown-toggle:hover::after {
		border-color: var(--accent);
	}

.dropdown-input-wrapper input {
	padding-right: 2.2rem;
}

.dropdown-input-wrapper::after {
	content: "";
	position: absolute;
	right: 0.9rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border: 2px solid var(--text-muted);
	border-left: 0;
	border-top: 0;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* ================================
   Tables
================================ */
.table-dark {
	--bs-table-bg: transparent;
	--bs-table-color: var(--text-dim);
	--bs-table-striped-bg: rgba(148, 163, 184, 0.04);
	--bs-table-striped-color: var(--text-dim);
	--bs-table-hover-bg: var(--accent-wash);
	--bs-table-hover-color: #ffffff;
	--bs-table-border-color: var(--border);
	margin-bottom: 0;
}

	.table-dark thead th {
		background-color: rgba(148, 163, 184, 0.06);
		color: var(--accent);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 0.82rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 0.9rem 1rem;
		border-bottom: 1px solid var(--border-strong);
		position: sticky;
		top: 0;
		z-index: 2;
		backdrop-filter: blur(8px);
	}

	.table-dark td {
		padding: 0.8rem 1rem;
		vertical-align: middle;
	}

	.table-dark strong {
		color: var(--accent);
		font-weight: 600;
	}

.table-responsive {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: auto;
	box-shadow: var(--shadow-3);
	margin-top: 2rem;
	background-color: var(--surface-1);
}

/* ================================
   Cards & utilities
================================ */
.title-link {
	color: var(--brand);
	font-family: var(--font-display);
	text-decoration: none;
	font-weight: 600;
	transition: color var(--fast) var(--ease);
}

	.title-link:hover {
		color: var(--accent) !important;
		text-decoration: none !important;
		background: transparent;
	}

.hover-shadow {
	transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}

	.hover-shadow:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-3);
		border-color: var(--accent) !important;
	}

/* ================================
   Blazor error boundary
================================ */
.blazor-error-boundary {
	background: #b32121;
	padding: 1rem 1.25rem;
	border-radius: var(--r-md);
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred.";
	}

/* ================================
   Motion preference
================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.btn-primary:hover,
	.hover-shadow:hover {
		transform: none;
	}
}