/* EISGuard Monitoring — app-specific styles built on top of style.css's design tokens
   (--panel, --ink, --accent, --ice, --radius, --shadow-sm, ...). Kept separate from style.css
   itself so that file can stay an unmodified copy of the shared Portal-Grundstil (Redesign 2026)
   asset from KNX.Admin.Tray/webassets/css/style.css. */

/* style.css's #content caps at 1080px, which is comfortable for narrow forms (login, settings)
   but leaves a large dead grey margin either side on wider screens once a table has 7-8 columns
   (e.g. the device table below) -- widened here instead of touching style.css, which is kept as
   an unmodified copy of the shared Portal-Grundstil asset (see comment above). */
#content { max-width: 1440px; }

/* Neue Radius-Tokens für Buttons, hier statt in style.css definiert (siehe Kommentar oben --
   style.css bleibt unangetastete Kopie des Shared-Assets). Moderat rund (nicht die volle
   999px-Pille von vorher, nicht eckig) -- an die vom Nutzer als Referenz gezeigte "Modeye"-
   Oberfläche angelehnt, 2026-08-04. */
:root {
	--radius-btn: 10px;
	--radius-btn-sm: 8px;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	padding: clamp(18px, 3vw, 28px);
	margin-bottom: 24px;
}
.panel h2 { margin-top: 0; }
.panel h3 { margin-top: 1.6rem; }
.panel h3:first-child { margin-top: 0; }

table.data {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
	background: var(--field);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
table.data th, table.data td {
	padding: 0.55rem 0.9rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--panel-border);
	font-size: 0.92rem;
}
table.data th {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--head-ink);
	background: var(--panel-2);
}
table.data tr:last-child td { border-bottom: none; }

table.data th.sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 1.5rem;
}
table.data th.sortable:hover { color: var(--accent); }
table.data th.sortable:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
table.data th.sortable::after {
	content: "\2195"; /* ↕ */
	position: absolute; right: 0.6rem; opacity: 0.35; font-weight: 400;
}
table.data th.sort-asc::after { content: "\2191"; opacity: 1; color: var(--accent); } /* ↑ */
table.data th.sort-desc::after { content: "\2193"; opacity: 1; color: var(--accent); } /* ↓ */

.table-search { margin-bottom: 0.6rem; }
.table-search input {
	width: 100%; max-width: 320px; padding: 0.5rem 0.8rem;
	background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
	color: var(--ink); font: inherit; box-sizing: border-box;
}
.table-search input:focus {
	outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px var(--field-focus);
}

/* Radius an .btn angeglichen statt eigener voller Pillenform (Nutzer-Feedback 2026-08-04: Status-
   anzeigen sollen dieselbe Rundung wie die Tasten bekommen, nicht mehr davon abweichen). */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-btn-sm); font-size: 0.82rem; font-weight: 600; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-danger { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-border); }
.badge-muted { background: var(--field); color: var(--muted); border: 1px solid var(--field-border); }
.badge-info { background: color-mix(in srgb, var(--ice) 16%, transparent); color: var(--ice); border: 1px solid color-mix(in srgb, var(--ice) 35%, transparent); }
/* Was referenced (Topologieüberwachung) but never actually defined -- fixed alongside adding
   badge-info 2026-08-03 while touching this block for the Linienscan Soll/Ist "acknowledged, no
   descriptor" status, see ARCHITEKTUR.md Abschnitt 0ad. */
.badge-warning { background: rgba(217, 119, 6, .14); color: #b45309; border: 1px solid rgba(217, 119, 6, .35); }

.offline-list { margin: 0; padding-left: 1.1rem; font-size: 0.86em; color: var(--ink-2); }

.field-label { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--ink-2); }
.field-label input, .field-label select {
	display: block; width: 100%; margin-top: 0.35rem; padding: 0.55rem 0.7rem;
	background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
	color: var(--ink); font: inherit; box-sizing: border-box;
}
.field-label input:focus, .field-label select:focus {
	outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px var(--field-focus);
}

/* Button-Form/-Farben an die vom Nutzer als Referenz gezeigte "Modeye"-Oberfläche angelehnt
   (2026-08-04): moderat runde Ecken statt der früheren vollen Pillenform, klare Statusfarben
   (Grün=verbunden/aktiv-Anmutung nicht per Button nötig, Rot=trennen/deaktivieren/löschen,
   Grau-Feld=neutral). Ein gemeinsamer Radius-Token, damit Buttons/Felder/Panels zueinander passen
   statt (wie vorher) Pille + fast-eckige Tabellenbuttons + große Panel-Radien nebeneinander. */
.btn {
	display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
	padding: 0.55rem 1.1rem; border-radius: var(--radius-btn); font: inherit; font-weight: 700; font-size: 0.9rem;
	background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
	box-shadow: 0 10px 24px -12px var(--accent-soft);
	transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-secondary { background: var(--field); color: var(--ink); border: 1px solid var(--field-border); box-shadow: none; }
.btn-secondary:hover { border-color: var(--ice); }

/* Löschen -- rein destruktive Aktionen, unabhängig von jedem Ein/Aus-Zustand, bleiben rot. */
.btn-danger { background: linear-gradient(135deg, var(--danger), var(--err-ink)); color: #fff; box-shadow: 0 10px 24px -14px rgba(214,69,69,.45); }
.btn-danger:hover { transform: translateY(-1px); }

/* Ein/aktiv -- Nutzer-Korrektur 2026-08-04: "Ein" ist Grün (wie der "Verbunden"-Status in der
   Modeye-Referenz), nicht Rot. Reserviert für Buttons, deren Beschriftung den aktuell AKTIVEN
   Zustand zeigt (z. B. "aktiv — deaktivieren"), nicht für reine Löschen-Aktionen (siehe .btn-danger). */
.btn-success { background: linear-gradient(135deg, var(--ok), #178036); color: #fff; box-shadow: 0 10px 24px -14px var(--ok-soft); }
.btn-success:hover { transform: translateY(-1px); }

/* Buttons embedded in a dense data-table cell (e.g. die Gerätemonitor-Zeilen) -- kleiner Radius/
   Padding fürs kompakte Zellenformat, aber derselbe "Modeye"-Rundungsgrad wie überall sonst statt
   der vorherigen fast-eckigen 6px-Sonderrolle. */
table.data .btn {
	border-radius: var(--radius-btn-sm);
	padding: 0.35rem 0.75rem;
	font-size: 0.85rem;
	box-shadow: none;
}

.msg-error { color: var(--err-ink); background: var(--err-bg); border: 1px solid var(--err-border); border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin-bottom: 1rem; }
.msg-success { color: var(--ok); background: var(--ok-soft); border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin-bottom: 1rem; }
.muted { color: var(--muted); }

/* Auth pages (login.php) -- centered single card, no topbar */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; z-index: 1; }
.auth-wrap .panel { width: 100%; max-width: 360px; margin-bottom: 0; }

/* Admin grid-table (used where a per-row <form> makes a real <table> invalid, since <form> is
   not a permitted child of <tr> and browsers foster-parent it out during HTML parsing) */
.grid-table { display: flex; flex-direction: column; border: 1px solid var(--field-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
.grid-row { display: grid; grid-template-columns: var(--cols); gap: 0.6rem; align-items: center; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--panel-border); background: var(--field); margin: 0; }
.grid-row:last-child { border-bottom: none; }
.grid-head { background: var(--panel-2); font-family: var(--font-head); font-weight: 700; }

#content h1 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* Gerätebaum (Bereich > Linie > Segment > Gerät), nachgebildet nach dem ETS-Topologiebaum --
   native <details>/<summary>, kein JS nötig fürs reine Auf-/Zuklappen (device-tree.js kümmert
   sich nur noch um "alle auf/zu" und die Suche mit Auto-Expand). */
.device-tree { margin-bottom: 1rem; }
.tree-node {
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
	background: var(--field);
	margin-bottom: 0.5rem;
}
.tree-node > summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	padding: 0.6rem 0.9rem;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--head-ink);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.tree-node > summary::-webkit-details-marker { display: none; }
.tree-node > summary::before {
	content: "\25B8"; /* ▸ */
	display: inline-block;
	transition: transform .15s;
	color: var(--muted);
	width: 1em;
}
.tree-node[open] > summary::before { transform: rotate(90deg); }
.tree-node > summary:hover { color: var(--accent); }
.tree-node > summary:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }

.tree-count { font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-left: auto; }

.tree-children { padding: 0 0.9rem 0.7rem 1.6rem; }

.tree-line { background: var(--panel-2); }
.tree-line > summary { font-size: 0.95rem; }
.tree-segment { background: var(--panel); }
.tree-segment > summary { font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; }
.tree-segment .tree-children { padding: 0 0.7rem 0.7rem; }
.tree-segment table.data { margin-bottom: 0; }