:root {
	color-scheme: light;
	--page:        #f7f7f5;
	--surface:     #ffffff;
	--surface-2:   #f1f1ee;
	--text:        #16161a;
	--text-muted:  #63636b;
	--border:      rgba(20, 20, 25, 0.14);
	--accent:      #2f5d9e;
	--ok:          #1f7a4d;
	--warn:        #9a6b12;
	--error:       #a52f2f;
	--rx:          #2f5d9e;
	--tx:          #1f7a4d;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--page:       #16161a;
		--surface:    #1e1e24;
		--surface-2:  #26262e;
		--text:       #ececf0;
		--text-muted: #9a9aa6;
		--border:     rgba(236, 236, 240, 0.16);
		--accent:     #7ba6e6;
		--ok:         #5fc48c;
		--warn:       #d8a63f;
		--error:      #e77b7b;
		--rx:         #7ba6e6;
		--tx:         #5fc48c;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.bare { display: grid; place-items: center; min-height: 100vh; }

a { color: var(--accent); }

/* Sidebar beside the content, so the sections stay visible wherever a page goes
   and Settings can list its panels without a second row of navigation. */
.shell { display: flex; align-items: flex-start; }

.sidebar {
	flex: 0 0 13rem;
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-height: 100vh;
	padding: 1.1rem .9rem;
	background: var(--surface);
	border-right: 1px solid var(--border);
}
.brand { display: block; font-weight: 600; text-decoration: none; color: var(--text); }
.sidebar nav { display: flex; flex-direction: column; gap: .1rem; }
.nav-item {
	display: block; padding: .35rem .55rem; border-radius: 6px;
	text-decoration: none; color: var(--text-muted); font-size: 14px;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.current {
	background: var(--surface-2); color: var(--text); font-weight: 600;
	box-shadow: inset 2px 0 0 var(--accent);
}
/* The panels of the section being looked at, indented under it. */
.nav-sub { display: flex; flex-direction: column; gap: .1rem; margin: .15rem 0 .4rem .7rem; }
.nav-sub .nav-item { font-size: 13px; padding: .3rem .5rem; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.who { color: var(--text-muted); font-size: 13px; }
.linkish {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--accent); font: inherit; font-size: 13px;
}

main { flex: 1 1 auto; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
main.centered { max-width: 380px; }

/* Narrow: the sidebar becomes a wrapping strip above the content. */
@media (max-width: 760px) {
	.shell { display: block; }
	.sidebar {
		position: static; min-height: 0; flex-direction: row; flex-wrap: wrap;
		align-items: center; gap: .5rem .9rem;
		border-right: 0; border-bottom: 1px solid var(--border);
	}
	.sidebar nav { flex-direction: row; flex-wrap: wrap; }
	.nav-sub { flex-direction: row; flex-wrap: wrap; margin: 0 0 0 .3rem; }
	.nav-item.current { box-shadow: inset 0 -2px 0 var(--accent); }
	.sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: .75rem; }
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; }
.muted { color: var(--text-muted); }
.version { color: var(--text-muted); font-size: .75rem; font-weight: normal; margin-left: .5rem; }
.mono { font-family: var(--mono); font-size: 13px; }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.1rem;
}
.login { width: 100%; }
.login h1 { text-align: center; }

.flash { padding: .6rem .8rem; border-radius: 6px; margin-bottom: .8rem; border: 1px solid var(--border); }
.flash-ok    { border-color: var(--ok);    color: var(--ok); }
.flash-error { border-color: var(--error); color: var(--error); }
.flash-info  { color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.badge {
	display: inline-block; padding: .1rem .45rem; border-radius: 999px;
	font-size: 12px; border: 1px solid var(--border);
}
.badge-online   { color: var(--ok);        border-color: var(--ok); }
.badge-offline  { color: var(--text-muted); }
.badge-disabled { color: var(--warn);      border-color: var(--warn); }
.badge-allow    { color: var(--ok);        border-color: var(--ok); }
.badge-deny     { color: var(--error);     border-color: var(--error); }

label { display: block; margin: .7rem 0; font-size: 13px; color: var(--text-muted); }
input[type=text], input[type=password], input[type=number], select, textarea {
	display: block; width: 100%; margin-top: .25rem; padding: .45rem .55rem;
	background: var(--page); color: var(--text);
	border: 1px solid var(--border); border-radius: 6px;
	font: inherit;
}
textarea { font-family: var(--mono); font-size: 13px; min-height: 5rem; }
input[type=checkbox] { margin-right: .4rem; }
.inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.inline label { flex: 1 1 8rem; margin: 0; }
.hint { display: block; margin-top: .2rem; font-size: 12px; color: var(--text-muted); }
/* The row whose rule the form below is editing. */
tr.editing > td { background: var(--surface-2); }
tr.editing > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Checkbox list: a peer's groups, one label per group, wrapping. */
.checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem; }
.checks label.check { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }

button, .btn {
	padding: .45rem .9rem; border-radius: 6px; cursor: pointer;
	border: 1px solid var(--border); background: var(--surface-2);
	color: var(--text); font: inherit; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger  { color: var(--error); border-color: var(--error); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
form.inline-form { display: inline; }

pre {
	background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
	padding: .8rem; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
	margin: 0 0 .8rem;
}

/* The config text and its QR code side by side, stacking when there is no room
   for both. The code keeps its own white ground whatever the theme is: a
   scanner reading an inverted QR is a coin toss. */
.conf-split { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.conf-split pre { flex: 1 1 22rem; margin: 0; }
.qr { flex: 0 0 auto; margin: 0; max-width: 100%; }
.qr svg { display: block; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.qr figcaption { max-width: 15rem; margin-top: .4rem; }

.stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.stat { flex: 1 1 8rem; }
.stat .n { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.chart { width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--text-muted); font-size: 10px; font-family: var(--mono); }
.chart-rx { fill: none; stroke: var(--rx); stroke-width: 1.5; }
.chart-tx { fill: none; stroke: var(--tx); stroke-width: 1.5; }
.chart-empty { color: var(--text-muted); padding: 1.5rem 0; }
.chart-legend { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }
.chart-legend span { display: inline-block; width: 10px; height: 2px; margin-left: .8rem; }
.key-rx { background: var(--rx); }
.key-tx { background: var(--tx); }
.spark { width: 90px; height: 20px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.2; }

.key-reveal { border-color: var(--warn); }
.key-reveal code { display: block; margin-top: .4rem; word-break: break-all; }