/*
 * Tables. One look for every table on the site: a sticky header, generous rows, a quiet hover,
 * numbers aligned on their digits, and horizontal scroll confined to the table that needs it
 * instead of the page.
 */

.table-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
}

.table-scroll {
	max-height: 520px;
	overflow: auto;
}

table.data {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

table.data th,
table.data td {
	padding: var(--s3) var(--s4);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
}

table.data thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line-strong);
	font-size: var(--t-label);
	font-weight: 560;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	padding-top: var(--s2);
	padding-bottom: var(--s2);
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .1s ease; }
table.data tbody tr:hover { background: var(--surface-2); }

table.data td.num, table.data th.num { text-align: right; }
table.data .cell-sub { display: block; color: var(--muted); font-size: var(--t-caption); margin-top: 2px; }

/* compact variant for dense inner tables */
table.data.is-compact th, table.data.is-compact td { padding: var(--s2) var(--s3); }

/* sortable headers */
.th-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	height: auto;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.th-btn:hover { color: var(--text); }
.th-btn .sort-caret { color: var(--accent); font-size: 9px; }

/* --- the Home network table ------------------------------------------------------------ */

.net-table tbody tr { cursor: pointer; }
.net-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.net-table tbody tr.is-busy { opacity: .6; }
.net-table tbody tr.is-attention td.c-name { box-shadow: inset 2px 0 0 var(--warn); }

.net-table .c-name { min-width: 180px; }
.net-table .c-name .name { font-weight: 580; }
.net-table .c-name .meta { color: var(--faint); font-size: var(--t-caption); margin-top: 2px; }

.net-table .c-projects, .net-table .c-cameras { color: var(--text-2); max-width: 190px; }
.net-table .c-projects span, .net-table .c-cameras span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.net-table .c-round { min-width: 112px; }
.net-table .round-text { font-weight: 560; }
.net-table .round-auto { margin-top: 3px; }
.net-table .c-round .bar { margin-top: 5px; }

.net-table .c-progress { min-width: 136px; }
.net-table .prog-line { display: flex; align-items: baseline; gap: var(--s2); }
.net-table .prog-pct { color: var(--muted); font-size: var(--t-caption); }
.net-table .c-progress .bar { margin-top: 5px; }

.net-table .c-result { white-space: nowrap; font-weight: 560; }
.net-table .c-last { color: var(--text-2); white-space: nowrap; }

/* Narrower screens drop the least operational columns first; the row never loses its shape. */
@media (max-width: 1440px) {
	.net-table .c-cameras { display: none; }
}
@media (max-width: 1200px) {
	.net-table .c-last { display: none; }
}
@media (max-width: 1000px) {
	.net-table .c-projects { display: none; }
}