/* Shared by /admin and /developer: type, tokens, the sidebar shell and common components. */

@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-400-normal.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: "Ubuntu";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-ext-400-normal.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: "Ubuntu";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-500-normal.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: "Ubuntu";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-ext-500-normal.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: "Ubuntu";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-700-normal.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: "Ubuntu";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/admin/static/ubuntu-latin-ext-700-normal.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;
}

:root {
	--primary: #16a34a;
	--primary-hover: #15803d;
	--primary-soft: #f0fdf4;
	--ink: #111827;
	--canvas: #fafaf7;
	--surface: #ffffff;
	--muted: #6b7280;
	--line: #e5e7eb;
	--danger: #dc2626;
	--radius: 0.5rem;
	--side: 15rem;
	--rail: 4rem;
	--top: 3.5rem;
	color: var(--ink);
	background: var(--canvas);
	font-family: "Ubuntu", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body { margin: 0; }

a { color: inherit; }

img { max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }

h2 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 0.6rem; }

h3 { font-size: 1rem; font-weight: 500; }

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

.error { color: var(--danger); }

.ri {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.skip {
	position: absolute;
	left: 0.5rem;
	top: -3rem;
	z-index: 50;
	padding: 0.5rem 0.75rem;
	background: var(--ink);
	color: var(--surface);
	border-radius: var(--radius);
}

.skip:focus { top: 0.5rem; }

/* Shell */

.brand { display: inline-flex; align-items: center; }

.brand img { display: block; height: 28px; width: auto; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.icon-btn:hover { background: var(--canvas); border-color: var(--line); }

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: var(--top);
	padding: 0 0.75rem;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.topbar .icon-btn { display: none; }

.sidebar {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-right: 1px solid var(--line);
}

.sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	height: var(--top);
	padding: 0 0.75rem 0 1rem;
	border-bottom: 1px solid var(--line);
}

.sidebar-head .icon-btn { display: none; }

.side-nav { flex: 1; padding: 0.5rem 0.5rem 1rem; }

.side-nav ul { list-style: none; margin: 0; padding: 0; }

.side-nav .group {
	margin: 1rem 0 0.25rem;
	padding: 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

.side-nav .group:first-child { margin-top: 0.5rem; }

.side-link, .sidebar-foot button {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.5rem;
	margin: 1px 0;
	padding: 0.45rem 0.75rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: #374151;
	font: inherit;
	font-size: 0.92rem;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.side-link:hover, .sidebar-foot button:hover { background: var(--canvas); color: var(--ink); }

.side-link[aria-current="page"] {
	background: var(--primary-soft);
	color: var(--primary-hover);
	font-weight: 500;
	box-shadow: inset 3px 0 0 var(--primary);
}

.side-link span, .sidebar-foot span { overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot {
	padding: 0.5rem;
	border-top: 1px solid var(--line);
}

.sidebar-foot .who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0.75rem;
	font-size: 0.85rem;
	color: var(--muted);
	white-space: nowrap;
}

.sidebar-foot form { margin: 0; }

.backdrop { display: none; }

.content {
	width: 100%;
	max-width: var(--content, 72rem);
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
	min-width: 0;
}

/* Without JavaScript the menu is a plain list above the content on small screens. */
@media (max-width: 63.99rem) {
	.sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
	.sidebar-head { display: none; }

	.js .topbar .icon-btn { display: inline-flex; }
	.js .sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 40;
		width: min(18rem, 85vw);
		border-right: 1px solid var(--line);
		border-bottom: 0;
		overflow-y: auto;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.js .sidebar-head { display: flex; }
	.js .sidebar-head .close { display: inline-flex; }
	.js.nav-open .sidebar {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease;
	}
	.js.nav-open .backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 30;
		background: rgb(17 24 39 / 0.4);
	}
	.js.nav-open body { overflow: hidden; }
}

@media (min-width: 64rem) {
	.app {
		display: grid;
		grid-template-columns: var(--side) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		min-height: 100vh;
	}
	.topbar { display: none; }
	.sidebar {
		grid-row: 1 / span 2;
		position: sticky;
		top: 0;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.js .sidebar-head .collapse { display: inline-flex; }
	.content { padding: 2rem 2rem 4rem; }

	.collapsed .app { grid-template-columns: var(--rail) minmax(0, 1fr); }
	.collapsed .sidebar-head { flex-direction: column; justify-content: center; height: auto; padding: 0.75rem 0; gap: 0.5rem; }
	.collapsed .sidebar-head .brand { display: none; }
	.collapsed .side-nav { padding: 0.5rem; }
	.collapsed .side-nav .group { height: 1px; margin: 0.6rem 0.5rem; padding: 0; overflow: hidden; color: transparent; background: var(--line); }
	.collapsed .side-nav .group:first-child { display: none; }
	.collapsed .side-link, .collapsed .sidebar-foot button { justify-content: center; padding: 0.45rem 0; }
	.collapsed .side-link span, .collapsed .sidebar-foot span, .collapsed .sidebar-foot .who {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

.collapse .unfold, .collapsed .collapse .fold { display: none; }

.collapsed .collapse .unfold { display: block; }

@media (prefers-reduced-motion: reduce) {
	.js .sidebar { transition: none !important; }
}

/* Signed-out pages */

.auth { display: flex; min-height: 100vh; padding: 1.5rem 1rem; }

.auth-main { width: 100%; max-width: 30rem; margin: auto; }

.auth-main > .brand { margin-bottom: 1.5rem; }

/* Components */

.card, .panel, .stat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem;
}

.card { margin: 0 0 1rem; }

.card h2 { margin-top: 0; }

.card > label:first-of-type, .card form > label:first-of-type { margin-top: 0; }

.alert {
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius);
	background: var(--surface);
}

.alert.error { border-left-color: var(--danger); color: var(--danger); }

label { display: block; font-size: 0.9rem; font-weight: 500; margin-top: 0.85rem; }

input, select, textarea {
	display: block;
	width: 100%;
	margin-top: 0.3rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
}

input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0; accent-color: var(--primary); }

textarea { min-height: 6rem; }

fieldset { margin: 1rem 0 0; }

legend { font-weight: 500; padding: 0 0.25rem; }

button, .button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--primary);
	border-radius: 0.375rem;
	background: var(--primary);
	color: var(--surface);
	font: inherit;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
}

button:hover, .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

button.secondary, .button.secondary, a.secondary, button.quiet {
	background: var(--surface);
	color: var(--ink);
	border-color: #d1d5db;
}

button.secondary:hover, .button.secondary:hover, a.secondary:hover, button.quiet:hover { background: var(--canvas); border-color: var(--muted); }

details { margin-top: 0.85rem; }

summary { cursor: pointer; font-weight: 500; }

code { font-size: 0.9em; overflow-wrap: anywhere; }

th { font-weight: 500; }