/* ── Fonts ── */

@font-face {
	font-family: 'Carter One';
	src: url('font/CarterOne.woff2') format('woff2'),
	     url('font/CarterOne.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('font/Lato-Regular.woff2') format('woff2'),
	     url('font/Lato-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('font/Lato-Bold.woff2') format('woff2'),
	     url('font/Lato-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* ── Reset ── */

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

body, h1, h2, h3, h4, p, ul, ol, figure {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font: inherit;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

label, button, summary {
	cursor: pointer;
}

ul, ol {
	list-style: none;
}

/* ── Design tokens ── */

:root {
	/* Layer backgrounds */
	--layer-1-bg: #0f1117;
	--layer-2-bg: #1c1f2e;
	--layer-3-bg: #252840;
	--layer-4-bg: #2e3252;

	/* Foreground */
	--fg: #e8eaf6;
	--fg-muted: #8b8fa8;
	--border: rgba(255, 255, 255, 0.08);

	/* Accent */
	--accent: #c5f135;
	--accent-fg: #0f1117;

	/* Status */
	--danger: #ff4d4d;
	--success: #4ade80;
	--warning: #fbbf24;

	/* Spacing */
	--min: 0.0625rem;
	--xs: 0.25em;
	--s: 0.5em;
	--m: 1em;
	--l: 2em;
	--xl: 4em;
	--xxl: 8em;

	/* Radius */
	--r-s: 0.375em;
	--r-m: 0.625em;
	--r-l: 1em;

	/* Shadows */
	--shadow-near: 0 0.125em 0.5em rgba(0, 0, 0, 0.3);
	--shadow-mid: 0 0.25em 1em rgba(0, 0, 0, 0.4);
	--shadow-far: 0 0.5em 2em rgba(0, 0, 0, 0.5);

	/* Form */
	--input-size: 2.5em;

	/* Typography */
	--line-height: 1.5;

	/* Layout */
	--sidebar-width: 14rem;
}

/* ── Base ── */

body {
	background: var(--layer-1-bg);
	color: var(--fg);
	font-family: 'Lato', system-ui, sans-serif;
	line-height: var(--line-height);
}

/* ── Links ── */

a {
	color: var(--accent);
	text-underline-offset: 0.2em;
}

a:hover {
	filter: brightness(1.15);
}


/* ── Focus ── */

:focus-visible {
	outline: 0.15em solid var(--accent);
	outline-offset: 0.15em;
}

/* ── Layers ── */

.layer-1 {
	background: var(--layer-1-bg);
	color: var(--fg);
}

.layer-2 {
	background: var(--layer-2-bg);
	color: var(--fg);
}

.layer-3 {
	background: var(--layer-3-bg);
	color: var(--fg);
}

.layer-4 {
	background: var(--layer-4-bg);
	color: var(--fg);
}

/* ── Typography ── */

h1, h2 {
	font-family: 'Carter One', sans-serif;
	font-weight: normal;
	line-height: 1.2;
}

h3, h4 {
	font-family: 'Lato', system-ui, sans-serif;
	font-weight: bold;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }

.brand {
	font-family: 'Carter One', sans-serif;
	color: var(--accent);
	font-size: 1.25em;
}



/* ── App layout (sidebar + main) ── */

.app-layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	min-height: 100vh;
}

.app-layout > .sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

/* ── Sidebar ── */

.sidebar {
	background: var(--layer-2-bg);
	border-right: var(--min) solid var(--border);
	display: flex;
	flex-direction: column;
	padding: var(--m) 0;
}

.sidebar-brand {
	font-family: 'Carter One', sans-serif;
	color: var(--accent);
	font-size: 1.25em;
	padding: 0 var(--m) var(--m);
	border-bottom: var(--min) solid var(--border);
	margin-bottom: var(--s);
	text-decoration: none;
}

.sidebar-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	padding: 0 var(--s);
}

.sidebar-link {
	display: flex;
	align-items: center;
	gap: var(--s);
	padding: var(--s) var(--m);
	border-radius: var(--r-s);
	color: var(--fg-muted);
	text-decoration: none;
	font-weight: bold;
}

.sidebar-link:hover,
button.sidebar-link:hover:not(:disabled):not([data-state="loading"]) {
	background: var(--layer-3-bg);
	color: var(--fg);
	filter: none;
}

.sidebar-link[data-current="page"] {
	background: var(--layer-3-bg);
	color: var(--accent);
}

button.sidebar-link {
	width: 100%;
	min-height: 0;
	background: none;
	border: none;
	justify-content: flex-start;
}

.sidebar-footer {
	border-top: var(--min) solid var(--border);
	padding: var(--s);
	margin-top: var(--s);
}

/* ── Auth layout ── */

.auth-card {
	width: 22rem;
}

.auth-card > form {
	margin-top: var(--m);
}

.auth-subtitle {
	color: var(--fg-muted);
}

.auth-links {
	display: flex;
	flex-direction: column;
	gap: var(--s);
	text-align: center;
	color: var(--fg-muted);
}

.text-alt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

code, kbd {
	font-family: ui-monospace, 'Cascadia Code', monospace;
	font-size: 0.875em;
	background: var(--layer-3-bg);
	padding: 0.1em 0.4em;
	border-radius: var(--r-s);
}

kbd {
	border: var(--min) solid var(--border);
}

/* ── Sections & Cards ── */

.section:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: var(--m);
	background: var(--layer-2-bg);
	color: var(--fg);
	padding: var(--m);
	border-radius: var(--r-m);
	border: var(--min) solid var(--border);
	box-shadow: var(--shadow-mid);
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m);
	padding-bottom: var(--m);
	border-bottom: var(--min) solid var(--border);
}

/* Nested sections advance one layer automatically */

.section .section:not([hidden]) {
	background: var(--layer-3-bg);
}

.section .section .section:not([hidden]) {
	background: var(--layer-4-bg);
}

/* Controls inside nested sections use the next layer background */

.section .section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.section .section select,
.section .section textarea {
	background: var(--layer-4-bg);
}

/* ── Forms ── */

label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])),
form {
	display: flex;
	flex-direction: column;
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
	display: flex;
	align-items: center;
	gap: var(--s);
	min-height: var(--input-size);
}

label {
	gap: var(--s);
}

form {
	gap: var(--m);
}

.hint {
	font-size: 0.875em;
	color: var(--fg-muted);
}

form.form-inline {
	flex-direction: row;
	align-items: stretch;
	gap: var(--s);
}

form.form-inline input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form.form-inline select {
	flex: 1;
	min-width: 0;
	width: auto;
}

label[data-error] {
	color: var(--danger);
}

label[data-error] input:not([type="checkbox"]):not([type="radio"]),
label[data-error] textarea,
label[data-error] select,
input[data-error]:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea[data-error],
select[data-error] {
	border-color: var(--danger);
	color: var(--fg);
}

label[data-error] .hint {
	color: var(--danger);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
	width: 100%;
	min-height: var(--input-size);
	padding: var(--s) var(--m);
	background: var(--layer-3-bg);
	color: var(--fg);
	border: var(--min) solid var(--border);
	border-radius: var(--r-s);
}

textarea {
	width: 100%;
	padding: var(--s) var(--m);
	background: var(--layer-3-bg);
	color: var(--fg);
	border: var(--min) solid var(--border);
	border-radius: var(--r-s);
	resize: vertical;
	min-height: 6em;
}

input::placeholder,
textarea::placeholder {
	color: var(--fg-muted);
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8fa8' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--s) center;
	background-size: 1.25em;
	padding-right: var(--l);
	cursor: pointer;
}

select option {
	background: var(--layer-3-bg);
	color: var(--fg);
}

/* Checkboxes */

input[type="checkbox"] {
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	background: var(--layer-3-bg);
	border: calc(2 * var(--min)) solid var(--border);
	border-radius: 0.25em;
	cursor: pointer;
	flex-shrink: 0;
}

input[type="checkbox"]:checked {
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1117' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
	border-color: var(--accent);
}

/* Radio buttons */

input[type="radio"] {
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	background: var(--layer-3-bg);
	border: calc(2 * var(--min)) solid var(--border);
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
}

input[type="radio"]:checked {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 0.25em var(--accent);
}

/* File upload */

input[type="file"] {
	width: 100%;
	padding: var(--s) var(--m);
	background: var(--layer-3-bg);
	color: var(--fg);
	border: var(--min) solid var(--border);
	border-radius: var(--r-s);
	cursor: pointer;
}

input[type="file"]::file-selector-button {
	background: var(--layer-4-bg);
	color: var(--fg);
	border: none;
	padding: var(--xs) var(--s);
	border-radius: var(--r-s);
	cursor: pointer;
	margin-right: var(--s);
}

/* Disabled states */

input:disabled,
textarea:disabled,
select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

label:has(:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Buttons ── */

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s);
	min-height: var(--input-size);
	padding: var(--s) var(--l);
	border: var(--min) solid var(--border);
	border-radius: var(--r-s);
	font-weight: bold;
	cursor: pointer;
	background: var(--layer-3-bg);
	color: var(--fg);
}

button:hover:not(:disabled):not([data-state="loading"]) {
	filter: brightness(1.15);
}

.btn-primary,
.btn-secondary,
.btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s);
	min-height: var(--input-size);
	padding: var(--s) var(--l);
	border: var(--min) solid transparent;
	border-radius: var(--r-s);
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
}

.btn-primary {
	background: var(--accent);
	color: var(--accent-fg);
	border-color: transparent;
}

.btn-secondary {
	background: var(--layer-3-bg);
	color: var(--fg);
	border-color: var(--border);
}

.btn-danger {
	background: var(--danger);
	color: #fff;
	border-color: transparent;
}


.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s);
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

button[data-state="loading"] {
	opacity: 0.6;
	cursor: wait;
	pointer-events: none;
}

/* Square (icon-only) variant for btn-primary / btn-secondary / btn-danger */

.btn-square {
	padding: var(--s);
	min-width: var(--input-size);
}

/* ── Button group ── */

fieldset.btn-group {
	display: inline-flex;
	border: none;
	padding: 0;
	margin: 0;
}

.btn-group {
	display: inline-flex;
	gap: 0.1875em;
	padding: 0.1875em;
	background: var(--layer-1-bg);
	border-radius: calc(var(--r-s) + 0.1875em);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.btn-group legend {
	float: left;
	display: flex;
	align-items: center;
	margin: 0.1875em 0 0.1875em 0.1875em;
	padding: var(--s) var(--m);
	background: var(--layer-3-bg);
	color: var(--fg-muted);
	border-radius: var(--r-s) 0 0 var(--r-s);
}

.btn-group label {
	justify-content: center;
	padding: var(--s) var(--l);
	background: transparent;
	color: var(--fg-muted);
	border: none;
	border-radius: var(--r-s);
	font-weight: bold;
	user-select: none;
}

.btn-group label:has(:checked) {
	background: var(--accent);
	color: var(--accent-fg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.btn-group label:hover:not(:has(:checked)) {
	background: rgba(255, 255, 255, 0.06);
	color: var(--fg);
	filter: none;
}

.btn-group label:has(:focus-visible) {
	outline: 0.15em solid var(--accent);
	outline-offset: 0.15em;
}

.btn-group input[type="radio"] {
	appearance: none;
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* ── x-icon ── */

x-icon {
	display: inline-block;
	width: calc(1em * var(--icon-scale, 1));
	height: calc(1em * var(--icon-scale, 1));
	vertical-align: middle;
}

x-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: calc(1.5 / var(--icon-scale, 1));
}

/* ── Icon button ── */

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: var(--xs);
	background: none;
	border: none;
	color: var(--fg-muted);
	border-radius: var(--r-s);
}

.btn-icon:hover:not(:disabled):not([data-state="loading"]) {
	background: var(--layer-3-bg);
	color: var(--fg);
	filter: none;
}

/* ── Editable field ── */

form.form-editable {
	flex-direction: row;
	align-items: stretch;
	gap: var(--s);
}

form.form-editable label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) {
	flex: 1;
	min-width: 0;
	flex-direction: row;
	align-items: center;
}

form.form-editable input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
	flex: 1;
	min-width: 0;
	width: auto;
}

/* Edit icon — visible when idle, hidden when focused */

form.form-editable label x-icon {
	color: var(--fg-muted);
	flex-shrink: 0;
}

form.form-editable:focus-within label x-icon {
	display: none;
}

/* Idle state — no focused element */

form.form-editable:not(:focus-within) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
}

form.form-editable:not(:focus-within):hover input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
	border-color: var(--border);
}

form.form-editable:not(:focus-within) button {
	display: none;
}

/* ── Dialog / Modal ── */

dialog {
	background: var(--layer-2-bg);
	color: var(--fg);
	border: var(--min) solid var(--border);
	border-radius: var(--r-m);
	padding: 0;
	max-width: min(28rem, calc(100vw - 2 * var(--l)));
	width: 100%;
	box-shadow: var(--shadow-far);
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(0.125em);
}

.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m);
	padding: var(--m);
	border-bottom: var(--min) solid var(--border);
}

.dialog-body {
	display: flex;
	flex-direction: column;
	gap: var(--m);
	padding: var(--m);
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--s);
	padding: var(--m);
	border-top: var(--min) solid var(--border);
}

/* ── Toast ── */

#toast-list button {
	margin-left: auto;
	min-height: 0;
	padding: var(--xs);
	background: none;
	border: none;
}


#toast-list {
	position: fixed;
	bottom: var(--l);
	right: var(--l);
	display: flex;
	flex-direction: column;
	gap: var(--s);
	list-style: none;
	z-index: 1000;
	max-width: 24em;
}

#toast-list > li {
	display: flex;
	align-items: center;
	gap: var(--m);
	padding: var(--s) var(--m);
	background: var(--layer-3-bg);
	color: var(--fg);
	border-radius: var(--r-m);
	border: var(--min) solid var(--border);
	box-shadow: var(--shadow-far);
	animation: expire 5s ease forwards;
}

#toast-list > li[data-level="error"] {
	border-color: rgba(255, 77, 77, 0.4);
}

#toast-list > li[data-level="error"] [data-part="toast-message"] {
	color: var(--danger);
}

#toast-list > li[data-level="success"] [data-part="toast-message"] {
	color: var(--success);
}

#toast-list > li[data-level="info"] {
	border-color: rgba(100, 149, 237, 0.45);
}

#toast-list > li[data-level="info"] [data-part="toast-message"] {
	color: var(--fg-muted);
}

#toast-list > li[data-clear] {
	animation: toast-out 0.3s ease forwards;
}

@keyframes expire {
	0%, 85% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(0.5em); }
}

@keyframes toast-out {
	to { opacity: 0; transform: translateY(0.5em); }
}