/* === Theme tokens === */
:root {
	/** Theme primary colors */
	--cffy-theme-primary-a0: #fa5102;
	--cffy-theme-primary-a10: #ff6b1f;
	--cffy-theme-primary-a20: #ff843b;
	--cffy-theme-primary-a30: #ff9c58;
	--cffy-theme-primary-a40: #ffb573;
	--cffy-theme-primary-a50: #ffcb90;

	/** Theme surface colors */
	--cffy-theme-surface-a0: #121212;
	--cffy-theme-surface-a10: #252525;
	--cffy-theme-surface-a20: #393939;
	--cffy-theme-surface-a30: #4f4f4f;
	--cffy-theme-surface-a40: #666666;
	--cffy-theme-surface-a50: #7d7d7d;

	/** Theme tonal surface colors */
	--cffy-theme-surface-tonal-a0: #251d17;
	--cffy-theme-surface-tonal-a10: #37302a;
	--cffy-theme-surface-tonal-a20: #4b443e;
	--cffy-theme-surface-tonal-a30: #5f5854;
	--cffy-theme-surface-tonal-a40: #746e6a;
	--cffy-theme-surface-tonal-a50: #8a8581;

	/** Success colors */
	--cffy-theme-success-a0: #7dff95;
	--cffy-theme-success-a10: #9dffac;
	--cffy-theme-success-a20: #b8ffc1;

	/** Warning colors */
	--cffy-theme-warning-a0: #ffbc5e;
	--cffy-theme-warning-a10: #ffca83;
	--cffy-theme-warning-a20: #ffd8a4;

	/** Danger colors */
	--cffy-theme-danger-a0: #ff8080;
	--cffy-theme-danger-a10: #ff9b99;
	--cffy-theme-danger-a20: #ffb5b2;

	/** Info colors */
	--cffy-theme-info-a0: #87d1ff;
	--cffy-theme-info-a10: #a1dbff;
	--cffy-theme-info-a20: #b9e4ff;

	/* Bulma runtime theme mapping */
	--bulma-primary-h: 19deg;
	--bulma-primary-s: 98%;
	--bulma-primary-l: 49%;
	--bulma-button-h: 19deg;
	--bulma-button-s: 98%;
	--bulma-button-background-l: 49%;
	--bulma-primary: var(--cffy-theme-primary-a0);
	--bulma-primary-invert: #ffffff;
	--bulma-primary-light: var(--cffy-theme-primary-a50);
	--bulma-primary-light-invert: var(--cffy-theme-surface-a0);
	--bulma-link: var(--cffy-theme-primary-a10);
	--bulma-link-invert: var(--cffy-theme-surface-a0);
	--bulma-link-light: var(--cffy-theme-primary-a50);
	--bulma-link-light-invert: var(--cffy-theme-surface-a0);
	--bulma-info: var(--cffy-theme-info-a0);
	--bulma-info-invert: var(--cffy-theme-surface-a0);
	--bulma-info-light: var(--cffy-theme-info-a20);
	--bulma-info-light-invert: var(--cffy-theme-surface-a0);
	--bulma-success: var(--cffy-theme-success-a0);
	--bulma-success-invert: var(--cffy-theme-surface-a0);
	--bulma-success-light: var(--cffy-theme-success-a20);
	--bulma-success-light-invert: var(--cffy-theme-surface-a0);
	--bulma-warning: var(--cffy-theme-warning-a0);
	--bulma-warning-invert: var(--cffy-theme-surface-a0);
	--bulma-warning-light: var(--cffy-theme-warning-a20);
	--bulma-warning-light-invert: var(--cffy-theme-surface-a0);
	--bulma-danger: var(--cffy-theme-danger-a0);
	--bulma-danger-invert: var(--cffy-theme-surface-a0);
	--bulma-danger-light: var(--cffy-theme-danger-a20);
	--bulma-danger-light-invert: var(--cffy-theme-surface-a0);
	--bulma-scheme-main: var(--cffy-theme-surface-a0);
	--bulma-scheme-main-bis: var(--cffy-theme-surface-a10);
	--bulma-scheme-main-ter: var(--cffy-theme-surface-a20);
	--bulma-background: var(--cffy-theme-surface-a10);
	--bulma-border: var(--cffy-theme-surface-a30);
	--bulma-border-weak: var(--cffy-theme-surface-a20);
	--bulma-text: #e8e3dc;
	--bulma-text-weak: var(--cffy-theme-surface-a40);
	--bulma-text-strong: #ffffff;
	--bulma-scheme-invert: #ffffff;
}

html {
	color-scheme: dark;
	background: var(--cffy-theme-surface-a0);
}

body {
	min-height: 100vh;
	color: var(--bulma-text);
	background:
		radial-gradient(
			circle at top left,
			rgba(252, 143, 0, 0.14),
			transparent 32%
		),
		radial-gradient(
			circle at top right,
			rgba(135, 209, 255, 0.08),
			transparent 28%
		),
		linear-gradient(
			180deg,
			var(--cffy-theme-surface-a0) 0%,
			var(--cffy-theme-surface-a10) 42%,
			var(--cffy-theme-surface-tonal-a0) 100%
		);
}

/* === Navbar === */
.navbar.is-primary {
	background: linear-gradient(
		135deg,
		var(--cffy-theme-primary-a0) 0%,
		var(--cffy-theme-primary-a10) 100%
	);
}

.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link,
.navbar.is-primary .navbar-brand > .navbar-item,
.navbar.is-primary .navbar-brand > a.navbar-item,
.navbar.is-primary .navbar-burger {
	color: #ffffff;
}

.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-item:focus,
.navbar.is-primary .navbar-link:hover,
.navbar.is-primary .navbar-link:focus,
.navbar.is-primary .navbar-brand > .navbar-item:hover,
.navbar.is-primary .navbar-brand > .navbar-item:focus,
.navbar.is-primary .navbar-brand > a.navbar-item:hover,
.navbar.is-primary .navbar-brand > a.navbar-item:focus {
	background-color: #fa5102 !important;
	color: #ffffff !important;
}

/* === Hero === */
.hero.is-primary {
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 255, 255, 0.12),
			transparent 26%
		),
		linear-gradient(
			135deg,
			var(--cffy-theme-primary-a0) 0%,
			var(--cffy-theme-primary-a20) 52%,
			var(--cffy-theme-primary-a10) 100%
		);
}

.hero.is-primary .title,
.hero.is-primary .subtitle,
.navbar.is-primary .title,
.navbar.is-primary .subtitle {
	color: #ffffff;
}

/* === Buttons === */
.button.is-primary,
.button.is-primary:hover,
.button.is-primary.is-hovered,
.button.is-primary:focus,
.button.is-primary.is-focused,
.button.is-primary:active,
.button.is-primary.is-active {
	background-color: #fa5102 !important;
	border-color: #fa5102 !important;
	color: #ffffff !important;
}

.button.is-primary.is-outlined,
.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined.is-hovered,
.button.is-primary.is-outlined:focus,
.button.is-primary.is-outlined.is-focused,
.button.is-primary.is-outlined:active,
.button.is-primary.is-outlined.is-active {
	background-color: transparent !important;
	border-color: #fa5102 !important;
	color: #fa5102 !important;
}

.button.is-primary.is-light,
.button.is-primary.is-light:hover,
.button.is-primary.is-light.is-hovered,
.button.is-primary.is-light:focus,
.button.is-primary.is-light.is-focused,
.button.is-primary.is-light:active,
.button.is-primary.is-light.is-active {
	background-color: var(--cffy-theme-primary-a50) !important;
	border-color: transparent !important;
	color: var(--cffy-theme-surface-a0) !important;
}

/* === Tags === */
.tag.is-primary,
.tag.is-primary:hover,
.tag.is-primary.is-hovered,
.tag.is-primary:focus,
.tag.is-primary.is-focused,
.tag.is-primary:active,
.tag.is-primary.is-active {
	background-color: #fa5102 !important;
	color: #ffffff !important;
}

.tag.is-primary.is-light {
	background-color: var(--cffy-theme-primary-a50) !important;
	color: var(--cffy-theme-surface-a0) !important;
}

/* === Cards === */
.app-card,
.login-card {
	background-color: var(--cffy-theme-surface-a10);
	border: 1px solid var(--cffy-theme-surface-a20);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
	color: var(--bulma-text);
}

.app-card .title,
.login-card .title,
.app-card .subtitle,
.login-card .subtitle {
	color: var(--bulma-text);
}

.login-shell {
	min-height: calc(100vh - 3.25rem);
}

/* === Brand mark === */
.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--cffy-theme-surface-tonal-a10);
	color: var(--cffy-theme-primary-a20);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.brand-mark--image {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.brand-mark--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 999px;
}

/* === Footer === */
.footer {
	background-color: transparent;
	color: var(--cffy-theme-surface-a40);
	padding-top: 2rem;
	padding-bottom: 3rem;
}

/* === Table === */
.table {
	background-color: var(--cffy-theme-surface-a10);
	color: var(--bulma-text);
}

.table thead th {
	background-color: var(--cffy-theme-surface-a20);
	color: var(--bulma-text-strong);
	border-color: var(--cffy-theme-surface-a20);
}

.table td,
.table th {
	border-color: var(--cffy-theme-surface-a20);
}

.table.is-striped tbody tr:nth-child(even) {
	background-color: var(--cffy-theme-surface-tonal-a0);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
	background-color: var(--cffy-theme-surface-a20);
}

/* === Homework entries page === */
.homework-entries-page {
	--homework-entries-text-scale: 1.25;
}

.homework-entries-page .subtitle {
	font-size: calc(1rem * var(--homework-entries-text-scale));
}

.homework-entries-page .tabs {
	font-size: calc(0.875rem * var(--homework-entries-text-scale));
}

.homework-entries-page .table {
	font-size: calc(0.95rem * var(--homework-entries-text-scale));
}

.homework-entries-page .table thead th,
.homework-entries-page .table tbody td {
	vertical-align: top;
}

.homework-entries-page .tag {
	font-size: calc(0.75rem * var(--homework-entries-text-scale));
}

.homework-entries-page .button {
	font-size: calc(0.875rem * var(--homework-entries-text-scale));
}

.homework-entries-page .homework-text-cell {
	white-space: normal;
	word-break: break-word;
}

.homework-entries-page .homework-action-buttons {
	flex-wrap: wrap;
	gap: 0.5rem;
}

.homework-entries-page .homework-action-buttons .button {
	margin-bottom: 0;
}

/* === Homework row === */
.homework-row[data-href] {
	cursor: pointer;
}

.homework-row[data-href]:focus-visible {
	outline: 2px solid var(--cffy-theme-primary-a10);
	outline-offset: -2px;
}

.homework-row[data-href] .homework-detail-link {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.homework-row[data-href]:hover .homework-detail-link,
.homework-row[data-href]:focus-visible .homework-detail-link {
	text-decoration: underline;
}

/* === Homework detail page === */
.homework-detail-page {
	--homework-detail-text-scale: 1;
}

.homework-detail-card {
	max-width: 42rem;
	margin-inline: auto;
}

.homework-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.homework-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem 1.25rem;
}

.homework-detail-label {
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cffy-theme-surface-a40);
}

.homework-detail-value {
	color: var(--bulma-text);
}

.homework-detail-text {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: calc(1rem * var(--homework-detail-text-scale));
	line-height: 1.7;
}

.homework-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* === Confirm modal === */
.homework-confirm-modal .modal-card {
	width: min(92vw, 32rem);
}

.homework-confirm-modal .modal-card-body {
	word-break: break-word;
}

.homework-confirm-modal .homework-confirm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.homework-confirm-modal .homework-confirm-actions .button {
	flex: 1 1 10rem;
}

/* === Homework form page === */
.homework-form-page {
	--homework-form-text-scale: 1.25;
}

.homework-form-page .label {
	font-size: calc(1rem * var(--homework-form-text-scale));
}

.homework-form-page .input,
.homework-form-page .textarea,
.homework-form-page .select select {
	font-size: calc(1rem * var(--homework-form-text-scale));
}

.homework-form-page .checkbox,
.homework-form-page .help,
.homework-form-page .button {
	font-size: calc(0.875rem * var(--homework-form-text-scale));
}

.homework-form-page .field {
	margin-bottom: 1.25rem;
}

.homework-form-page .help.is-danger:empty {
	display: none;
}

.homework-form-page .field.is-grouped.is-grouped-multiline {
	gap: 0.85rem 1.15rem;
}

.homework-form-page .checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	line-height: 1.4;
}

.homework-form-page .checkbox input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin-inline-end: 0;
	flex: 0 0 auto;
}

@media (max-width: 768px) {
	.homework-detail-actions .button,
	.homework-form-page .button[type="submit"] {
		width: 100%;
	}
}

/* === Form controls === */
.input,
.textarea,
.select select {
	background-color: var(--cffy-theme-surface-a10);
	border-color: var(--cffy-theme-surface-a30);
	color: var(--bulma-text);
}

.input::placeholder,
.textarea::placeholder {
	color: var(--cffy-theme-surface-a40);
}

.input:hover,
.textarea:hover,
.select select:hover {
	border-color: var(--cffy-theme-primary-a20);
}

.input:focus,
.textarea:focus,
.select select:focus {
	border-color: var(--cffy-theme-primary-a10);
	box-shadow: 0 0 0 0.125em rgba(254, 155, 59, 0.22);
}

/* === Utility === */
.has-text-primary,
.title.has-text-primary,
.subtitle.has-text-primary,
.navbar.is-primary .has-text-primary,
.hero.is-primary .has-text-primary {
	color: #fa5102 !important;
}

.has-background-primary {
	background-color: #fa5102 !important;
}

/* === HTMX indicators === */
.htmx-indicator {
	opacity: 0;
	transition: opacity 200ms;
}

.htmx-request .htmx-indicator {
	opacity: 1;
}

.htmx-request.htmx-indicator {
	opacity: 1;
}