/* Server-Dashboard — Oberfläche
 *
 * Farbrollen als Custom Properties, damit Hell/Dunkel an genau einer Stelle
 * umgeschaltet wird. Die Serienfarben (Blau = CPU, Orange = Speicher) sind
 * für beide Modi getrennt gewählt und gegen die jeweilige Fläche geprüft.
 */

:root {
	color-scheme: light;

	--surface:        #fcfcfb;
	--plane:          #f9f9f7;
	--raised:         #ffffff;

	--ink:            #0b0b0b;
	--ink-2:          #52514e;
	--ink-muted:      #898781;

	--grid:           #e1e0d9;
	--axis:           #c3c2b7;
	--border:         rgba(11, 11, 11, 0.10);
	--border-strong:  rgba(11, 11, 11, 0.18);

	/* Serienfarben: Blau = CPU, Orange = Speicher */
	--series-cpu:     #2a78d6;
	--series-mem:     #eb6834;

	/* Statusfarben. Fest, nie als Serienfarbe verwendet. */
	--good:           #0ca30c;
	--warning:        #fab219;
	--serious:        #ec835a;
	--critical:       #d03b3b;
	--neutral:        #898781;

	--radius:         10px;
	--radius-sm:      6px;
	--shadow:         0 1px 2px rgba(11, 11, 11, .05), 0 4px 12px rgba(11, 11, 11, .04);

	--sidebar-w:      264px;
	--font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--surface:       #1a1a19;
		--plane:         #0d0d0d;
		--raised:        #232322;

		--ink:           #ffffff;
		--ink-2:         #c3c2b7;
		--ink-muted:     #898781;

		--grid:          #2c2c2a;
		--axis:          #383835;
		--border:        rgba(255, 255, 255, 0.10);
		--border-strong: rgba(255, 255, 255, 0.18);

		--series-cpu:    #3987e5;
		--series-mem:    #d95926;

		--shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--surface:       #1a1a19;
	--plane:         #0d0d0d;
	--raised:        #232322;

	--ink:           #ffffff;
	--ink-2:         #c3c2b7;
	--ink-muted:     #898781;

	--grid:          #2c2c2a;
	--axis:          #383835;
	--border:        rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.18);

	--series-cpu:    #3987e5;
	--series-mem:    #d95926;

	--shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--plane);
	-webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--series-cpu); }

:focus-visible {
	outline: 2px solid var(--series-cpu);
	outline-offset: 2px;
	border-radius: 3px;
}

.hidden { display: none !important; }
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Anmeldung ---------- */

.gate {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: 24px;
}

.gate-card {
	width: 100%;
	max-width: 380px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px;
}

.gate-card h1 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 650;
}

.gate-card p.sub {
	margin: 0 0 20px;
	color: var(--ink-2);
	font-size: 13px;
}

.field { margin-bottom: 14px; }

.field label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 550;
	color: var(--ink-2);
}

.field input, .field select, .field textarea {
	width: 100%;
	padding: 9px 11px;
	background: var(--raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color .12s;
}

.field input:focus, .field select:focus {
	border-color: var(--series-cpu);
	outline: none;
}

/* Bewusst nicht auf .field beschränkt: Hinweise stehen auch frei in den
   Schubladen (Einstellungen, Diagnose, Container verwalten). */
.hint {
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink-muted);
}

.field .hint {
	margin-top: 5px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 15px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--raised);
	cursor: pointer;
	font-weight: 550;
	transition: background .12s, border-color .12s;
}

.btn:hover { border-color: var(--ink-muted); }

.btn-primary {
	background: var(--series-cpu);
	border-color: var(--series-cpu);
	color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); border-color: var(--series-cpu); }

.btn-danger { color: var(--critical); }
.btn-danger:hover { border-color: var(--critical); }

.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

.msg {
	padding: 9px 11px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 14px;
}
.msg-error {
	background: color-mix(in srgb, var(--critical) 12%, transparent);
	color: var(--critical);
	border: 1px solid color-mix(in srgb, var(--critical) 30%, transparent);
}
.msg-info {
	background: color-mix(in srgb, var(--series-cpu) 10%, transparent);
	color: var(--ink-2);
	border: 1px solid var(--border);
}

/* ---------- Grundgerüst ---------- */

.app {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	min-height: 100%;
}

.app[data-sidebar="closed"] { grid-template-columns: 0 1fr; }
.app[data-sidebar="closed"] .sidebar { display: none; }

/* ---------- Seitenleiste ---------- */

.sidebar {
	background: var(--surface);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.sidebar-head {
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.sidebar-title {
	font-weight: 650;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-links {
	flex: 1;
	overflow-y: auto;
	padding: 10px 8px;
}

.link-group-title {
	padding: 10px 8px 5px;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.link-row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
	transition: background .1s;
}

.link-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.link-icon {
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 4px;
	object-fit: contain;
	background: var(--plane);
}

.link-mono {
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 4px;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 650;
	color: #fff;
}

.link-body { flex: 1; min-width: 0; }

.link-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13.5px;
}

.link-meta {
	display: flex;
	gap: 5px;
	align-items: center;
	font-size: 11px;
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: hidden;
}

.link-edit {
	opacity: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--ink-muted);
	padding: 2px 4px;
	border-radius: 4px;
	flex: none;
}
.link-row:hover .link-edit { opacity: 1; }
.link-edit:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }

.sidebar-foot {
	padding: 10px;
	border-top: 1px solid var(--border);
	display: flex;
	gap: 6px;
}

.empty-hint {
	padding: 16px 10px;
	color: var(--ink-muted);
	font-size: 12.5px;
	text-align: center;
}

/* ---------- Hauptbereich ---------- */

.main { min-width: 0; padding: 18px 22px 40px; }

.topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.topbar h1 {
	margin: 0;
	font-size: 18px;
	font-weight: 650;
	flex: 1;
	min-width: 140px;
}

.status-line {
	font-size: 12px;
	color: var(--ink-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.live-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--good);
	flex: none;
}
.live-dot[data-state="stale"] { background: var(--warning); }
.live-dot[data-state="down"]  { background: var(--critical); }

/* ---------- Kacheln ---------- */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.tile {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 13px 15px;
}

.tile-label {
	font-size: 11.5px;
	font-weight: 550;
	color: var(--ink-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tile-value {
	font-size: 26px;
	font-weight: 620;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.tile-value .unit {
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-2);
	margin-left: 1px;
}

.tile-sub {
	margin-top: 4px;
	font-size: 12px;
	color: var(--ink-2);
}

.tile-bar {
	margin-top: 9px;
	height: 5px;
	border-radius: 3px;
	background: var(--grid);
	overflow: hidden;
}

.tile-bar span {
	display: block;
	height: 100%;
	border-radius: 3px;
	transition: width .3s ease;
}

/* Kleiner Farbchip, der eine Kachel ihrer Serie im Diagramm zuordnet. */
.chip {
	width: 9px; height: 9px;
	border-radius: 2px;
	flex: none;
}

/* ---------- Diagrammbereich ---------- */

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 18px;
	overflow: hidden;
}

.panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}

.panel-title { font-weight: 620; font-size: 14.5px; flex: 1; min-width: 120px; }

.panel-body { padding: 14px 16px 16px; }

/* Zeitraumwahl */
.segmented {
	display: inline-flex;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.segmented button {
	border: none;
	background: transparent;
	padding: 5px 11px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 550;
	color: var(--ink-2);
	border-right: 1px solid var(--border);
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.segmented button[aria-pressed="true"] {
	background: var(--series-cpu);
	color: #fff;
}

/* Legende: bei zwei Serien immer sichtbar, damit die Zuordnung nie
   allein über die Farbe läuft. */
.legend {
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 12.5px;
	color: var(--ink-2);
}

.legend-item { display: flex; align-items: center; gap: 6px; }

.chart-wrap { position: relative; width: 100%; }
.chart-empty {
	display: grid;
	place-items: center;
	min-height: 220px;
	color: var(--ink-muted);
	font-size: 13px;
	text-align: center;
	padding: 20px;
}

/* uPlot an die Farbrollen anpassen */
.uplot, .u-wrap { width: 100% !important; }
.u-legend { display: none; }

.u-tooltip {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	background: var(--raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 8px 10px;
	font-size: 12.5px;
	white-space: nowrap;
	transform: translate(-50%, -100%);
	margin-top: -10px;
	transition: opacity .08s;
}

.u-tooltip .tt-time {
	color: var(--ink-muted);
	font-size: 11.5px;
	margin-bottom: 5px;
}

.u-tooltip .tt-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 2px;
}

.u-tooltip .tt-val {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---------- Container ---------- */

.group { margin-bottom: 20px; }

.group-head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 9px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--border);
}

.group-name { font-weight: 620; font-size: 14px; }
.group-count { font-size: 12px; color: var(--ink-muted); }

.subgroup {
	margin: 12px 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	display: flex;
	align-items: center;
	gap: 6px;
}

.subgroup::before {
	content: "";
	width: 3px; height: 13px;
	border-radius: 2px;
	background: var(--axis);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 10px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px 13px;
	cursor: pointer;
	transition: border-color .12s, transform .12s;
	text-align: left;
	width: 100%;
	font: inherit;
	color: inherit;
	display: block;
}

.card:hover {
	border-color: var(--border-strong);
	transform: translateY(-1px);
}

.card[data-hidden="true"] { opacity: .45; }

.card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}

.health {
	width: 9px; height: 9px;
	border-radius: 50%;
	flex: none;
}
.health[data-h="healthy"]   { background: var(--good); }
.health[data-h="unhealthy"] { background: var(--critical); }
.health[data-h="starting"]  { background: var(--warning); }
.health[data-h="unknown"]   { background: var(--series-cpu); }
.health[data-h="down"]      { background: var(--neutral); }

.card-name {
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.card-open {
	flex: none;
	color: var(--ink-muted);
	padding: 2px;
	border-radius: 4px;
	display: inline-flex;
}
.card-open:hover { color: var(--series-cpu); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.card-sub {
	font-size: 11.5px;
	color: var(--ink-muted);
	margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.metric-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 12px;
}

.metric-label {
	width: 34px;
	flex: none;
	color: var(--ink-muted);
	font-size: 11px;
}

.metric-track {
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: var(--grid);
	overflow: hidden;
}

.metric-track span {
	display: block;
	height: 100%;
	border-radius: 3px;
	transition: width .3s ease;
}

.metric-value {
	width: 74px;
	text-align: right;
	flex: none;
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}

/* Ein <canvas> ohne CSS-Breite bezieht seine Layoutbreite aus dem
   width-Attribut. Da das Zeichnen dieses Attribut auf Breite x
   Pixeldichte setzt, muss die Anzeigebreite hier festgelegt werden —
   sonst wächst das Element über die Karte hinaus. */
.spark {
	display: block;
	width: 100%;
	margin-top: 10px;
	height: 30px;
}

/* ---------- Tabellenansicht ---------- */

.table-wrap { overflow-x: auto; }

table.grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

table.grid th, table.grid td {
	padding: 7px 10px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

table.grid th {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-muted);
	font-weight: 600;
}

table.grid td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

table.grid tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* ---------- Schublade ---------- */

.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	z-index: 40;
}

.drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(560px, 100%);
	background: var(--plane);
	border-left: 1px solid var(--border);
	z-index: 41;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
}

.drawer-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.drawer-title { font-weight: 650; font-size: 15px; flex: 1; min-width: 0; }

.drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 18px 32px;
}

.icon-btn {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--ink-2);
	padding: 5px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.section-title {
	font-size: 11.5px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ink-muted);
	margin: 20px 0 8px;
}
.section-title:first-child { margin-top: 0; }

.kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	font-size: 13px;
}
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; word-break: break-word; }

.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .label { font-size: 13.5px; }
.toggle-row .desc { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }

.related {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
	font-size: 13px;
}

.related .metric-value { width: auto; margin-left: auto; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.toast {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ink);
	color: var(--surface);
	padding: 9px 15px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	z-index: 60;
	box-shadow: var(--shadow);
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 860px) {
	.app, .app[data-sidebar="closed"] { grid-template-columns: 1fr; }

	.sidebar {
		position: fixed;
		z-index: 45;
		width: var(--sidebar-w);
		box-shadow: var(--shadow);
	}
	.app[data-sidebar="closed"] .sidebar { display: none; }

	.main { padding: 14px 14px 32px; }
	.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.cards { grid-template-columns: 1fr; }
	.tile-value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}