/*
 * Project-level stylesheet.
 *
 * Keeping this file in core/static/css/ makes it available as
 * {% static 'css/style.css' %} and via `manage.py findstatic css/style.css`.
 */

/* Thin scrollbar for document and variable display */
.thin-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 #f1f5f9;
}

/* For Webkit browsers */
.thin-scrollbar::-webkit-scrollbar {
	width: 6px;
	background: #f1f5f9;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

/* Tailwind-compatible theme (custom properties + small component/utilities layers) */
:root {
	--accent: #f3f2f6;
	--app-shell: #32404a;
	--panel-bg: #efedf2;
	--teal: #7dbabb;
	--lake: #3c6879;
	--danger: #c34e4e;
	--background: #ffffff;
	--foreground: #18132b;
	--card-foreground: #040917;
	--muted: #736f85;
	--input: #edecf3;
	--border: #edecf3;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 32px;
	--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@layer base {
	html {
		font-family: var(--font-sans);
		color: var(--foreground);
		background: var(--accent);
	}

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

	body {
		margin: 0;
		min-width: 320px;
		min-height: 100vh;
		background: var(--background);
	}

	button,
	input,
	textarea {
		font: inherit;
	}

	button {
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, opacity 140ms ease;
	}

	button:not(:disabled):hover {
		transform: translateY(-1px);
	}

	button:not(:disabled):active {
		transform: translateY(0);
	}

	button:disabled {
		cursor: not-allowed;
	}

	@media (prefers-reduced-motion: reduce) {
		button {
			transition: none;
		}

		button:not(:disabled):hover,
		button:not(:disabled):active {
			transform: none;
		}
	}

	.screen {
		position: relative;
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 44px;
		background: var(--accent);
	}
}

@layer components {
	.card {
		background: var(--panel-bg);
		color: var(--card-foreground);
		border-radius: var(--radius-md);
		padding: 1rem;
		box-shadow: 0 1px 2px rgba(2,6,23,0.04);
	}

	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		border-radius: var(--radius-md);
		background: var(--lake);
		color: var(--background);
	}

	.btn-muted {
		background: var(--teal);
		color: var(--background);
	}

	.input {
		background: var(--input);
		border: 1px solid var(--border);
		padding: 0.5rem;
		border-radius: var(--radius-md);
		color: var(--foreground);
	}
}

@layer utilities {
	.bg-app-shell { background: var(--app-shell) !important; }
	.bg-teal { background: var(--teal) !important; }
	.bg-lake { background: var(--lake) !important; }
	.text-teal { color: var(--teal) !important; }
	.text-lake { color: var(--lake) !important; }
	.border-lake { border-color: var(--lake) !important; }
	.bg-danger { background: var(--danger) !important; }
	.text-danger { color: var(--danger) !important; }
	.border-danger { border-color: var(--danger) !important; }

	/* Support checked/peer-checked variants for custom lake utility */
	.checked\:bg-lake:checked { background: var(--lake) !important; }
	.peer:checked ~ .peer-checked\:border-lake { border-color: var(--lake) !important; }

	.text-muted { color: var(--muted) !important; }
	.rounded-md { border-radius: var(--radius-md) !important; }
	.rounded-lg { border-radius: var(--radius-lg) !important; }
	.rounded-xl { border-radius: var(--radius-xl) !important; }

	/* Navbar control utilities for contrast on app-shell background */
	.border-app-shell { border-color: rgba(255,255,255,0.14) !important; }
	.hover-app-shell-dark:hover { background: rgba(255,255,255,0.06) !important; }
	.text-on-app-shell { color: #ffffff !important; }
}