/* server/public/assets/panel.css
   Die eine Stildatei des Panels. Handgeschrieben, selbsttragend: kein
   Framework, kein Import, keine Schrift- oder Bilddatei — der Server steht
   in einem Firmennetz, nichts wird nachgeladen (Zusicherung Optik-8).

   Vertrag mit den Seiten (Zusicherung Optik-7): jede Klasse, die eine Seite
   unter public/admin/ ausliefert, ist HIER definiert. Klassenselektoren
   stehen deshalb elementfrei (".block", nicht "form.block") — der Regel-Test
   erkennt eine Definition am Punkt direkt vor dem Namen.

   Farben ausschliesslich ueber die Token in Abschnitt 1 und 2. Der
   Dunkelmodus ist reine Neubelegung der Token (Zusicherung Optik-2):
   keine zweite Regelmenge, kein Skript, kein Cookie. */

/* 1. Token: hell */
:root {
  color-scheme: light dark;
  --flaeche: #f4f6f8;   --karte: #ffffff;  --linie: #dde3ea;
  --text: #1c2430;      --text-milde: #5b6b7c;
  --akzent: #2f6fae;    --akzent-text: #ffffff;
  --kopf: #22303f;      --kopf-text: #e8eef5;
  --gruen: #2e7d32; --gelb: #f9a825; --rot: #c62828; --grau: #9e9e9e;
  --gruen-flaeche: #e8f5e9; --gelb-flaeche: #fff8e1; --rot-flaeche: #ffebee;
  --schatten: 0 1px 3px rgba(16, 24, 32, .10);
  --rundung: 8px;
  /* Standardbreite der Eingabefelder. .feld-voll und .feld-schmal setzen
     die Variable am Element neu — das gewinnt immer gegen diesen geerbten
     Wert, unabhaengig von der Spezifitaet der Feldregeln unten. */
  --feldbreite: 24rem;
}

/* 2. Token: dunkel */
@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: #12161c;   --karte: #1a2027;  --linie: #2a3340;
    --text: #dfe6ee;      --text-milde: #93a1b1;
    --akzent: #6da8dd;    --akzent-text: #10161d;
    --kopf: #10161d;      --kopf-text: #dfe6ee;
    --gruen: #66bb6a; --gelb: #ffca58; --rot: #ef6e63; --grau: #8a939c;
    --gruen-flaeche: #17301b; --gelb-flaeche: #33290f; --rot-flaeche: #3a1717;
    --schatten: none;
  }
}

/* 3. Grundgeruest */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}
main { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.375rem; font-weight: 600; margin: 1rem 0 .75rem; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
a { color: var(--akzent); }
code, .code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9375em;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: .05rem .3rem;
  overflow-wrap: anywhere;
}
pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: .75rem 1rem;
  overflow-x: auto;
}
.hinweis { color: var(--text-milde); font-size: .9em; margin-top: .2em; }
/* 64 Hex-Zeichen in einer Tabellenzelle: klein und ueberall umbruchfaehig,
   sonst diktiert die Pruefsumme die Tabellenbreite (iso.php). */
.pruefsumme { font-size: .75rem; word-break: break-all; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* 4. Kopfleiste */
.kopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  padding: .5rem 1rem;
  background: var(--kopf);
  color: var(--kopf-text);
}
.marke { font-size: 1.0625rem; letter-spacing: .01em; }
.hauptnav { display: flex; flex-wrap: wrap; }
.hauptnav a {
  color: var(--kopf-text);
  opacity: .85;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 4px;
}
.hauptnav a:hover { opacity: 1; }
.hauptnav a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--akzent);
}
.rechts { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.inline { display: inline; }
.knopf-leise {
  background: transparent;
  color: var(--kopf-text);
  border: 1px solid var(--linie);
}

/* 5. Karten */
.karte, .block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 1rem;
  margin: 1rem 0;
}
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .75rem; }
.seitenkopf h1 { margin: 0; }

/* 6. Geraetekarten */
.geraete-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.geraet {
  background: var(--karte);
  border: 1px solid var(--linie);
  /* Zustandskante links: Farbe kommt aus den vier Zustandsklassen unten.
     Die Kante ist nie der einzige Traeger — das Zustandswort steht daneben
     (Zusicherung Optik-6). */
  border-left: 4px solid var(--grau);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 1rem;
}
.geraet-gruen { border-left-color: var(--gruen); }
.geraet-gelb  { border-left-color: var(--gelb); }
.geraet-rot   { border-left-color: var(--rot); }
.geraet-grau  { border-left-color: var(--grau); }
.geraet-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.geraet-name { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.geraet-name:hover { text-decoration: underline; }
.zustand { color: var(--text-milde); font-size: .875rem; }
.geraet-daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: .75rem 0 0;
}
.geraet-daten div { display: contents; }
.geraet-daten dt { color: var(--text-milde); font-size: .8125rem; }
.geraet-daten dd { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }

/* 7. Ampel und Warnungen */
.ampel { display: inline-block; flex: none; width: .8rem; height: .8rem; border-radius: 50%; }
.ampel-gruen { background: var(--gruen); }
.ampel-gelb  { background: var(--gelb); }
.ampel-rot   { background: var(--rot); }
.ampel-grau  { background: var(--grau); }
/* Klonwarnung in der Geraeteliste. Stand frueher als style-Attribut im
   Markup — style-src 'self' deckt Dateien, nicht Inline-Attribute, die
   Faerbung fiel also aus (Panel-D2). Seit dem Optik-Umbau gilt das als
   Regel fuer jede Seite (Optik-1). */
.klonwarnung { color: var(--rot); font-weight: 600; }
.meldung {
  background: var(--gruen-flaeche);
  border-left: 4px solid var(--gruen);
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--rundung) var(--rundung) 0;
}
.warnung {
  background: var(--gelb-flaeche);
  border-left: 4px solid var(--gelb);
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--rundung) var(--rundung) 0;
}
.fehler {
  background: var(--rot-flaeche);
  border-left: 4px solid var(--rot);
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--rundung) var(--rundung) 0;
}

/* 8. Tabellen */
.tabelle-rollbar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
th {
  color: var(--text-milde);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
tr:last-child td { border-bottom: none; }

/* 9. Formulare */
label { display: block; margin: .75rem 0 .25rem; }
input[type=text], input[type=url], input[type=number], input[type=password], select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: .35rem .5rem;
  width: var(--feldbreite);
  max-width: 100%;
}
select { width: auto; max-width: 100%; }
textarea {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .875rem;
}
/* Feldbreiten als Vertragsklassen (statt style-Attribut, Optik-1): die
   Klassen setzen nur die Variable, die die Feldregeln oben lesen. */
.feld-voll   { --feldbreite: 100%; }
.feld-schmal { --feldbreite: 6em; }
button {
  font: inherit;
  min-height: 2.25rem;
  padding: .3rem .9rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--akzent);
  color: var(--akzent-text);
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
fieldset {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  margin: 1rem 0;
  padding: .25rem 1rem .75rem;
}
legend { font-weight: 600; padding: 0 .3rem; }

/* 10. Telefon */
@media (max-width: 40rem) {
  :root { --feldbreite: 100%; }
  main { padding: 1rem; }
  .kopfleiste { padding: .4rem .75rem; }
  .geraete-liste { grid-template-columns: 1fr; }
}

/* 11. Anmeldebuehne (login.php hat einen eigenen Kopf ohne Navigation) */
.anmeldebuehne { max-width: 26rem; padding-top: 8vh; }
.anmeldebuehne h1 { text-align: center; }