/*
 * The layout system: page shell, header, toolbar, card grid and section cards.
 * Screens compose these; they do not write their own geometry.
 */

.shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* --- top bar --------------------------------------------------------------------------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	height: var(--topbar-h);
	padding: 0 var(--page-pad);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.brand { font-size: var(--t-title); font-weight: 640; letter-spacing: -.01em; }

.top-side { display: flex; align-items: center; gap: var(--s4); min-width: 0; }

/* Connection health: a dot plus a word, quiet until something is wrong. */
.conn { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t-caption); }
.conn-dot {
	width: 7px; height: 7px;
	border-radius: var(--r-pill);
	background: var(--good);
	box-shadow: 0 0 0 3px var(--good-weak);
}
.conn.is-warn .conn-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-weak); }
.conn.is-down .conn-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-weak); }
.conn.is-warn, .conn.is-down { color: var(--text-2); }

/* --- page ------------------------------------------------------------------------------ */

.main {
	flex: 1;
	min-height: 0;
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: var(--s6) var(--page-pad) var(--s8);
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s5);
	flex-wrap: wrap;
}

.page-head-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.page-head h1 { font-size: var(--t-display); font-weight: 640; letter-spacing: -.01em; }
.page-head .page-sub { color: var(--muted); font-size: var(--t-body); }
.page-head-actions { display: flex; align-items: center; gap: var(--s2); }

/* --- grid ------------------------------------------------------------------------------ */

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s4);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 1400px) {
	.col-3 { grid-column: span 4; }
}
@media (max-width: 1100px) {
	.col-3, .col-4 { grid-column: span 6; }
	.col-8 { grid-column: span 12; }
}
@media (max-width: 760px) {
	.col-3, .col-4, .col-6, .col-8 { grid-column: span 12; }
}

/* --- section card ---------------------------------------------------------------------- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r3);
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: var(--s4) var(--s5);
	border-bottom: 1px solid var(--line);
	min-height: 48px;
}

.card-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-head h2, .card-head h3 { font-size: var(--t-section); font-weight: 620; }
.card-head .card-sub { color: var(--muted); font-size: var(--t-caption); }
.card-head-actions { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

.card-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.card-body.is-flush { padding: 0; }
.card-body.is-tight { padding: var(--s4); gap: var(--s3); }

/* a card that is only a head (collapsed section) keeps no dangling border */
.card-head:last-child { border-bottom: 0; }

/* --- stat cards ------------------------------------------------------------------------ */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--s3);
}

.stat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r3);
	padding: var(--s4) var(--s4) var(--s4);
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	min-width: 0;
}

.stat-label {
	font-size: var(--t-label);
	font-weight: 560;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.stat-value {
	font-size: var(--t-metric);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}
.stat-value.is-sm { font-size: var(--t-metric-sm); }
.stat-sub { font-size: var(--t-caption); color: var(--muted); }
.stat-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); }

.stat.is-clickable { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.stat.is-clickable:hover { border-color: var(--line-strong); background: var(--surface-2); }
.stat.is-active { border-color: var(--accent); background: var(--accent-weak); }

.stat-value.is-good { color: var(--good); }
.stat-value.is-warn { color: var(--warn); }
.stat-value.is-bad { color: var(--bad); }

/* --- key/value rows -------------------------------------------------------------------- */

.kvs { display: flex; flex-direction: column; gap: var(--s3); }
.kv {
	display: grid;
	grid-template-columns: minmax(96px, 38%) 1fr;
	gap: var(--s4);
	align-items: baseline;
}
.kv > dt, .kv > .kv-k { color: var(--muted); font-size: var(--t-caption); }
.kv > dd, .kv > .kv-v { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- toolbar / filters ----------------------------------------------------------------- */

.toolbar { display: flex; flex-direction: column; gap: var(--s3); }
.toolbar-row { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.toolbar-chips { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.toolbar-spacer { flex: 1; min-width: var(--s4); }

/* --- misc ------------------------------------------------------------------------------ */

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s2); }