/* Goald admin panel — hand-rolled design tokens matching the Goald
   mobile app's design language: magenta/pink brand colour, dark-violet
   chrome, neon-green accent, Bai Jamjuree throughout. The admin stays
   a desktop information-dense tool (light-surface tables and
   dashboard cards, dark-violet sidebar chrome) — this is a re-palette
   and typography pass, not a mobile-pattern rebuild. No CSS framework
   dependency — keeps the wasm bundle and build graph small. Palette
   reference: docs/superpowers/plans/2026-07-10-web-app-reskin.md. */

/* Bai Jamjuree, self-hosted (SIL OFL 1.1 — /OFL.txt). The font files
   sit at the dist root: see index.html for why they must not live
   under a subdirectory. Weights 400/500/600/700 — the family tops out
   at 700; the mobile app's heavier strokes are synthesised. */

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/bai-jamjuree-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/bai-jamjuree-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-500.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/bai-jamjuree-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/bai-jamjuree-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The palette — every value is a mobile `AppColors` constant (the
   mobile token is named in the trailing comment). Light-first, like
   the web app: the sidebar chrome is dark violet regardless of colour
   scheme (it is brand chrome, not themed surface), the main content
   area follows the scheme. */

:root {
	--color-bg:             #f8f8f8; /* profileHeaderColor, used as the page canvas */
	--color-bg-raised:      #ffffff; /* scaffold white — card / table surfaces */
	--color-bg-sunken:      #f3f0f5; /* violet-tinted abeilGrey, for fills and idle badges */
	--color-border:         #e7e2ea; /* dividerGrey, violet-tinted */
	--color-text:           #171717; /* black17 */
	--color-text-muted:     #6b6470; /* informationTextColor, violet-tinted */
	--color-brand:          #cb04a5; /* primaryBrand */
	--color-cta:            #d21eb1; /* pinkButtonColor */
	--color-violet:         #380f43; /* darkViolet — sidebar chrome */
	--color-violet-soft:    #341744; /* secondaryDetailColor */
	--color-nav-idle:       #6a3d87; /* bottomUnselectItemColor */
	--color-btn2-text:      #5d0c8a; /* secondaryButtonTextColor */
	--color-green:          #00f587; /* guppieGreen — success / verified only */
	--color-yellow:         #d5b404; /* mustardYellow */
	--color-danger:         #ed4c5c; /* errorRed */
	--color-danger-text:    #ffffff;
	--color-shadow:         rgb(112 112 112 / 20%); /* dropShadowColor @ 20% */
	--gradient-auth:        linear-gradient(160deg, #4f0b75, #cc08bc); /* loadingGradientPurple → loadingGradientPink */

	/* Aliases kept for the shared class vocabulary. */
	--color-accent:         var(--color-brand);
	--color-accent-text:    #ffffff;
	--color-success:        var(--color-green);
	--color-warning:        var(--color-yellow);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;

	/* The mobile shape grammar: 5px chips, 10px buttons / inputs /
	   cards. */
	--radius-sm: 5px;
	--radius-md: 10px;

	--shadow-card: 0 2px 3px var(--color-shadow);

	--font-sans:
		"Bai Jamjuree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The dark override is secondary — the brand reference (and therefore
   the default look) is light. Violet-tinted darks keep the brand
   feel; the sidebar stays dark violet in both schemes since it is
   fixed chrome, not a themed surface. */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg:         #170b1d;
		--color-bg-raised:  #21112b;
		--color-bg-sunken:  #100716;
		--color-border:     #3a2547;
		--color-text:       #f3f3f3;
		--color-text-muted: #b6a9bf;
		--color-shadow:     rgb(0 0 0 / 40%);
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.5;
}

a {
	color: var(--color-brand);
	font-weight: 600;
}

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

/* App shell: dark-violet sidebar chrome + light content column. */

.app-shell {
	display: grid;
	grid-template-columns: 220px 1fr;
	min-height: 100vh;
}

.app-sidebar {
	background: var(--color-violet);
	border-right: none;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.app-sidebar__brand {
	font-weight: 700;
	font-size: 1.2rem;
	color: #ffffff;
	margin-bottom: var(--space-4);
}

.app-sidebar a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	color: rgb(255 255 255 / 70%);
	font-weight: 600;
	text-decoration: none;
}

.app-sidebar a:hover,
.app-sidebar a.active,
.app-sidebar a[aria-current] {
	background: rgb(255 255 255 / 10%);
	color: var(--color-cta);
}

.app-sidebar button {
	margin-top: var(--space-4);
}

.app-sidebar .btn {
	background: rgb(255 255 255 / 10%);
	color: #ffffff;
}

.app-sidebar .btn:hover {
	background: rgb(255 255 255 / 18%);
}

.app-main {
	padding: var(--space-6);
	overflow-x: auto;
}

.page-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-violet-soft);
	margin: 0 0 var(--space-4);
}

@media (prefers-color-scheme: dark) {
	.page-title {
		color: var(--color-text);
	}
}

.card {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
}

.card + .card {
	margin-top: var(--space-4);
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.stat-tile {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
}

.stat-tile__label {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.stat-tile__value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-brand);
	margin-top: var(--space-1);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

th,
td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

th {
	color: var(--color-text-muted);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.table-scroll {
	overflow-x: auto;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

/* Buttons, inputs — the mobile shapes: 10px radius, filled, borderless. */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-bg-sunken);
	border: none;
	border-radius: var(--radius-md);
	color: var(--color-btn2-text);
	font-weight: 700;
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	.btn {
		color: var(--color-text);
	}
}

.btn:hover {
	filter: brightness(0.96);
}

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

.btn-primary {
	background: var(--color-cta);
	color: #ffffff;
}

.btn-primary:hover {
	filter: brightness(1.05);
}

.btn-danger {
	background: var(--color-danger);
	color: var(--color-danger-text);
}

.input {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	padding: var(--space-2) var(--space-3);
}

.input:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: -1px;
}

/* Badges — the mobile grammar: guppieGreen fill with darkViolet
   content for success, brand-consistent fills for the other tones. */

.badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--color-bg-sunken);
	color: var(--color-violet-soft);
}

@media (prefers-color-scheme: dark) {
	.badge {
		color: var(--color-text);
	}
}

.badge-success {
	background: var(--color-green);
	color: var(--color-violet);
}

.badge-warning {
	background: var(--color-yellow);
	color: #ffffff;
}

.badge-danger {
	background: var(--color-danger);
	color: var(--color-danger-text);
}

.error-banner {
	background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-raised));
	border: 1px solid var(--color-danger);
	color: var(--color-text);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
}

/* Login shell — the one full-bleed screen that gets the mobile app's
   auth look in full: purple→pink gradient, white heading, floating
   white inputs, uppercase pink CTA. The `.card` the login form also
   carries is neutralised here rather than restructuring the markup. */

.login-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--gradient-auth);
}

.login-shell .card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.login-card {
	width: 320px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.login-card .page-title {
	color: #ffffff;
	text-align: center;
	font-size: 1.8rem;
	margin-bottom: var(--space-4);
}

.login-card .field label {
	color: rgb(255 255 255 / 85%);
}

.login-card .input {
	background: #ffffff;
	color: #171717;
	border: none;
	box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.login-card .input::placeholder {
	color: #808080;
}

.login-card .btn-primary {
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	justify-content: center;
	margin-top: var(--space-2);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.field label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.toolbar {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-bottom: var(--space-4);
	flex-wrap: wrap;
}

.pagination {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-top: var(--space-4);
}

.muted {
	color: var(--color-text-muted);
}