/*
 * MedConsole look: MedDesk's brand tokens (values from app/public/assets/css/tokens.css), navy top bar, light page,
 * system font, light type, the same chip / status / button styles as the approved mockup.
 */
:root {
	--navy: #16273f;
	--navy-2: #1f3252;
	--text: #1b2c46;
	--text-2: #4a5a73;
	--text-3: #6b7a90;
	--accent: #d8690f;
	--accent-2: #b6550a;
	--accent-soft: #fdf0e6;
	--canvas: #f6f8fc;
	--panel: #ffffff;
	--line: #e4e9f2;
	--line-2: #d3dbe8;
	--focus: #2f6fd6;
	--st-blue-bg: #e1effd;
	--st-blue-fg: #1f5f99;
	--st-green-bg: #e6f4ea;
	--st-green-fg: #2a6b43;
	--st-amber-bg: #fbf1d9;
	--st-amber-fg: #8a5a00;
	--st-red-bg: #fdebec;
	--st-red-fg: #a12f2d;
	--st-grey-bg: #eef1f5;
	--st-grey-fg: #56647a;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--r-sm: 6px;
	--r-md: 10px;
	--shadow-2: 0 8px 28px rgba(22, 39, 63, 0.14);
	color-scheme: light;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
}

body {
	background: var(--canvas);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
}

a {
	color: var(--focus);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

h1 {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--navy);
}

p {
	margin: 0;
}

.bar {
	background: var(--navy);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	padding: 10px 20px;
	font-size: 0.9rem;
}

.bar .brand {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.bar .brand span {
	color: #f0a35a;
}

.bar .nav {
	display: flex;
	gap: 14px;
}

.bar .nav a {
	color: rgba(255, 255, 255, 0.78);
	padding: 2px 0;
	border-bottom: 2px solid transparent;
}

.bar .nav a[aria-current="page"],
.bar .nav a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom-color: #f0a35a;
}

.bar .sp {
	flex: 1;
}

.bar .who {
	opacity: 0.85;
}

.bar .btn.ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 20px 64px;
	display: grid;
	gap: 16px;
}

.head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: baseline;
}

.head .back {
	flex-basis: 100%;
	font-size: 0.85rem;
}

.head .back::before {
	content: "‹ ";
}

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

.note {
	font-size: 0.88rem;
}

.mono {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.small {
	font-size: 0.8rem;
}

.pre {
	white-space: pre-wrap;
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.tile {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	display: grid;
	gap: 2px;
	color: var(--text);
}

a.tile:hover {
	text-decoration: none;
	border-color: var(--line-2);
}

.tile b {
	font-size: 1.35rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.tile span {
	color: var(--text-3);
	font-size: 0.85rem;
}

.tile.warn b {
	color: var(--st-amber-fg);
}

.tile.bad b {
	color: var(--st-red-fg);
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.search input {
	border: 1px solid var(--line-2);
	border-radius: 7px;
	padding: 5px 11px;
	font: inherit;
	font-size: 0.88rem;
	min-width: 360px;
	background: var(--panel);
	color: var(--text);
}

.seg {
	display: inline-flex;
	border: 1px solid var(--line-2);
	border-radius: 7px;
	overflow: hidden;
	font-size: 0.85rem;
	background: var(--panel);
}

.seg a,
.seg label {
	padding: 5px 11px;
	border-right: 1px solid var(--line-2);
	color: var(--text);
	cursor: pointer;
}

.seg a:last-child,
.seg label:last-child {
	border-right: 0;
}

.seg a:hover {
	text-decoration: none;
	background: var(--canvas);
}

.seg .on {
	background: var(--navy);
	color: #fff;
}

.seg a.on:hover {
	background: var(--navy);
}

.seg label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.seg label:focus-within {
	outline: 2px solid var(--focus);
	outline-offset: -2px;
}

.tbl {
	overflow-x: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
}

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

.tbl table {
	min-width: 860px;
}

th,
td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}

tbody tr:last-child td {
	border-bottom: 0;
}

th {
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-3);
	font-weight: 600;
}

td.num {
	font-variant-numeric: tabular-nums;
}

td small {
	display: block;
	color: var(--text-3);
}

td a.name {
	color: var(--text);
	font-weight: 500;
}

td.empty {
	color: var(--text-3);
	text-align: center;
	padding: 28px;
}

.chip,
.st {
	display: inline-block;
	border-radius: 999px;
	padding: 1px 9px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.chip {
	background: var(--st-blue-bg);
	color: var(--st-blue-fg);
}

.st.ok {
	background: var(--st-green-bg);
	color: var(--st-green-fg);
}

.st.warn {
	background: var(--st-amber-bg);
	color: var(--st-amber-fg);
}

.st.bad {
	background: var(--st-red-bg);
	color: var(--st-red-fg);
}

.st.grey {
	background: var(--st-grey-bg);
	color: var(--st-grey-fg);
}

.over {
	color: var(--st-red-fg);
	font-weight: 600;
}

.btn {
	display: inline-block;
	border: 1px solid var(--line-2);
	border-radius: 7px;
	padding: 4px 11px;
	font: inherit;
	font-size: 0.85rem;
	background: var(--panel);
	color: var(--text);
	white-space: nowrap;
	cursor: pointer;
	line-height: 1.4;
}

.btn:hover {
	text-decoration: none;
	border-color: var(--text-3);
}

.btn.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.btn.primary:hover {
	background: var(--accent-2);
	border-color: var(--accent-2);
}

.btn.danger {
	color: var(--st-red-fg);
	border-color: var(--st-red-fg);
}

form.inline {
	display: inline;
	margin: 0;
}

.cols {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.stack {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	display: grid;
	margin: 0;
}

.card.narrow {
	max-width: 420px;
	width: 100%;
	margin: 40px auto 0;
}

.card > .ch {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.card > .cb {
	padding: 12px 14px;
	display: grid;
	gap: 10px;
}

.kv {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 6px 12px;
	font-size: 0.9rem;
	margin: 0;
}

.kv dt {
	color: var(--text-3);
}

.kv dd {
	margin: 0;
	min-width: 0;
}

.feat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
	font-size: 0.88rem;
}

.feat label {
	display: flex;
	gap: 7px;
	align-items: center;
	cursor: pointer;
}

.feat label input {
	accent-color: var(--navy);
}

.feat .adj {
	color: var(--accent-2);
	font-weight: 600;
}

.feat .adj input {
	accent-color: var(--accent);
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.hist {
	font-size: 0.85rem;
	gap: 6px;
}

.hist div {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 10px;
}

.hist span:first-child {
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.sub {
	border-top: 1px solid var(--line);
	padding-top: 10px;
	display: grid;
	gap: 8px;
}

.sub-h {
	font-weight: 500;
	font-size: 0.9rem;
}

.copyline {
	display: flex;
	gap: 6px;
}

.copyline input {
	flex: 1;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	border: 1px solid var(--line-2);
	border-radius: 6px;
	padding: 3px 6px;
}

.flash {
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 0.92rem;
}

.flash.ok {
	background: var(--st-green-bg);
	color: var(--st-green-fg);
}

.flash.bad {
	background: var(--st-red-bg);
	color: var(--st-red-fg);
}

.field {
	display: grid;
	gap: 4px;
	font-size: 0.85rem;
	color: var(--text-2);
}

.field input,
.field textarea {
	font: inherit;
	font-size: 0.95rem;
	color: var(--text);
	border: 1px solid var(--line-2);
	border-radius: 7px;
	padding: 6px 10px;
	background: var(--panel);
	width: 100%;
}

textarea.code {
	width: 100%;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	border: 1px solid var(--line-2);
	border-radius: 7px;
	padding: 8px;
	word-break: break-all;
	resize: vertical;
}

dialog.pop {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-2);
	padding: 16px 18px;
	width: min(440px, calc(100vw - 32px));
	color: var(--text);
}

dialog.pop::backdrop {
	background: rgba(22, 39, 63, 0.35);
}

dialog.pop form,
dialog.pop {
	gap: 12px;
}

dialog.pop[open],
dialog.pop form {
	display: grid;
}

.pop-h {
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--navy);
}

table.plain th,
table.plain td {
	padding: 6px 4px;
}

@media (max-width: 860px) {
	.tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cols,
	.feat {
		grid-template-columns: 1fr;
	}

	.search input {
		min-width: 0;
		width: 100%;
	}

	.search {
		flex-basis: 100%;
	}

	.page {
		padding: 16px 16px 48px;
	}
}