/* ======================================================================
 * zoldyck-look.css — das Aussehen von netero fuer alle eigenen Werkzeuge
 *
 * Quelle der Werte ist netero/ui/static/netero.css (:root). Diese Datei
 * wandert UNVERAENDERT in jede eigene App (vault, menchi, mc-status,
 * ip-watch, alluka-wol, wohnung ...); alles Appspezifische gehoert in eine
 * zweite Datei daneben, die NUR diese Variablen benutzt — keine eigenen
 * Hexwerte. Aendert sich ein Wert in netero.css, hier nachziehen und die
 * Datei neu in die Apps kopieren. Liegt im netero-Repo, damit beide
 * Fassungen im selben Diff auffallen.
 *
 * Einbinden (vor der App-eigenen CSS):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
 *   <link rel="stylesheet" href="zoldyck-look.css">
 *
 * Kurzregeln:
 *   - Messing (--accent) ist der EINE Akzent: aktiv, ausgewaehlt, Fokus,
 *     Spaltenkoepfe. Nicht als grosse Flaeche.
 *   - Gruen nur fuer "laeuft/ok", Rot nur fuer Fehler, Gelb fuer Warnung.
 *     Zustand nie nur ueber Farbe — immer ein Wort daneben.
 *   - Mono (Plex Mono) fuer Ueberschriften, Zahlen, Hostnamen, Beschriftung;
 *     Plex Sans fuer Fliesstext.
 *   - Flach: Haarlinien statt Schatten, kein Glas, keine Verlaeufe.
 * ==================================================================== */

:root {
  color-scheme: dark;   /* sonst malt der Browser Auswahllisten, Checkboxen
                           und Kalender in Weiss — die "weissen Boxen" */

  /* Flaechen, von tief nach hoch */
  --bg-deep:    #0d1117;   /* Seitenleiste, Kopfleiste, Konsole */
  --bg:         #12171e;   /* Seitenhintergrund */
  --surface:    #171e26;   /* Karte */
  --surface-2:  #1e2731;   /* verschachtelt, Eingabefelder, Knoepfe */
  --chip:       #1c242e;   /* Chips, flache Flaechen */
  --line:       #2c3742;   /* Rahmen, Trenner */
  --line-soft:  rgba(139, 148, 158, 0.20);
  --row-tint:   rgba(255, 255, 255, 0.030);
  --hover:      rgba(255, 255, 255, 0.060);

  /* Text */
  --text:   #e6edf3;
  --text-2: #8b949e;
  --text-3: #6b7683;

  /* Akzent: Messing wie im netero-Favicon */
  --accent:      #e0b25e;
  --accent-hi:   #f0c883;
  --accent-bg:   rgba(224, 178, 94, 0.13);
  --on-accent:   #14181f;

  /* Zustand — gedaempft, nichts Neonfarbenes */
  --ok:   #5cbe90;  --ok-bg:   rgba(92, 190, 144, 0.14);
  --warn: #d8b14a;  --warn-bg: rgba(216, 177, 74, 0.14);
  --bad:  #e0806e;  --bad-bg:  rgba(224, 128, 110, 0.14);
  --info: #8b949e;  --info-bg: rgba(139, 148, 158, 0.12);

  --radius:    8px;
  --radius-sm: 6px;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; text-decoration: none; }
a.link, p a { color: var(--text); border-bottom: 1px solid var(--line); }
a.link:hover, p a:hover { border-bottom-color: var(--accent); }

h1, h2, h3 { font-family: var(--mono); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.12; margin: 0 0 6px; }
h2 { font-size: clamp(14px, 1.5vw, 17px); margin: 28px 0 12px; }
h3 { font-size: 14px; margin: 18px 0 8px; }

code, kbd, pre, .mono { font-family: var(--mono); }
code {
  font-size: 0.86em;
  background: var(--chip);
  padding: 0.08em 0.4em;
  border-radius: 3px;
}
pre {
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; overflow: auto;
  font-size: 12.5px; line-height: 1.55;
}

.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

/* Kleine Messing-Beschriftung in eckigen Klammern — netero-Seitenkopf */
.bracket {
  font-family: var(--mono); color: var(--accent);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.bracket::before { content: "["; opacity: 0.6; margin-right: 3px; }
.bracket::after  { content: "]"; opacity: 0.6; margin-left: 3px; }

/* ---------------------------------------------------------------- Karte */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* -------------------------------------------------------------- Tabelle
 * In :where(): Hilfsklassen einer App (Bootstrap .align-middle u. ae.)
 * muessen gewinnen. */
:where(table) { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(thead th) {
  text-align: left;
  font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
:where(tbody td) { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
:where(tbody tr:last-child td) { border-bottom: none; }
:where(tbody tr:nth-child(even)) { background: var(--row-tint); }

/* ------------------------------------------------------------ Formulare
 * Bewusst auf dem Element, nicht auf einer Klasse: jede Eingabe, die eine
 * App per JS nachbaut, sieht damit von selbst richtig aus. Alles in :where(),
 * also mit Spezifitaet 0 — jede Klassenregel der App gewinnt dagegen, die
 * Grundregel faengt nur auf, was sonst Browser-Weiss waere. */
:where(input, select, textarea, button) { font: inherit; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
              [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
:where(input, select, textarea):focus { outline: none; border-color: var(--accent); }
:where(input, textarea)::placeholder { color: var(--text-2); opacity: 0.55; }
:where(option, optgroup) { background: var(--surface-2); color: var(--text); }
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--accent); }
/* Kein invert(): color-scheme: dark malt das Kalendersymbol schon hell,
   ein Invertieren drehte es zurueck ins Dunkle. */
:where(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* ---------------------------------------------------------------- Knopf
 * Nackte <button> bekommen dieselbe Grundform wie .btn (Spezifitaet 0). */
:where(button, input[type="submit"], input[type="button"]), .btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
:where(button, input[type="submit"], input[type="button"]):hover, .btn:hover {
  background: var(--bg); border-color: var(--accent);
}
:where(button, input[type="submit"], input[type="button"]):disabled, .btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.btn.primary, button.primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600;
}
.btn.primary:hover, button.primary:hover { background: var(--accent-hi); }

/* ----------------------------------------------------------------- Pill */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 2px 9px; border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.pill.ok   { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.pill.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.pill.bad  { color: var(--bad);  border-color: var(--bad);  background: var(--bad-bg); }

/* --------------------------------------------------------- Rollbalken */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }