/*!
 * ui-theme – gemeinsames Stylesheet für die Heimlabor-Applikationen
 * Ursprung: Web-UI von nntpproxy (internal/webui/templates.go)
 *
 * Schrift: Inter über Bunny Fonts (fonts.bunny.net, EU, ohne IP-Logging) –
 * bewusst NICHT über Google Fonts (LG München I, 3 O 17493/20).
 * Ist Bunny nicht erreichbar, greift der System-Font-Stack in --ui-font-sans.
 */
@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --ui-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ui-bg:            #f0f2f5;
  --ui-fg:            #1a1a2e;
  --ui-surface:       #ffffff;
  --ui-surface-alt:   #f8fafc;
  --ui-row-hover:     #fafbff;
  --ui-border:        #e2e8f0;
  --ui-border-light:  #f1f5f9;
  --ui-muted:         #64748b;
  --ui-subtle:        #9ca3af;
  --ui-label:         #374151;

  --ui-header-bg:     #16213e;
  --ui-header-fg:     #dde;
  --ui-header-muted:  rgba(221, 221, 238, .6);
  --ui-header-rule:   rgba(255, 255, 255, .2);

  --ui-primary:       #3b82f6;
  --ui-primary-ring:  rgba(59, 130, 246, .15);
  --ui-warning:       #f59e0b;
  --ui-danger:        #ef4444;
  --ui-neutral:       #6b7280;
  --ui-on-color:      #ffffff;

  --ui-ok-bg:         #d1fae5;
  --ui-ok-fg:         #065f46;
  --ui-ok-border:     #6ee7b7;
  --ui-err-bg:        #fee2e2;
  --ui-err-fg:        #991b1b;
  --ui-err-border:    #fca5a5;

  --ui-input-bg:      #fafafa;
  --ui-input-fg:      #111111;
  --ui-input-border:  #d1d5db;
  --ui-input-ro-bg:   #f3f4f6;

  --ui-radius-sm:     5px;
  --ui-radius:        6px;
  --ui-radius-lg:     10px;
  --ui-shadow:        0 1px 6px rgba(0, 0, 0, .09);
  --ui-content-width: 980px;
}

/* ── Dark ───────────────────────────────────────────────────────────────── */
/* Folgt prefers-color-scheme; <html data-theme="light|dark"> legt es fest.
 * Beide Token-Blöcke müssen synchron bleiben. Die Doppelung ist gewollt:
 * light-dark() würde in älteren Browsern (Safari < 17.5) alle Farben kippen,
 * so bleibt es dort einfach hell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ui-bg:            #0f1422;
    --ui-fg:            #e2e8f0;
    --ui-surface:       #1a2033;
    --ui-surface-alt:   #1f2639;
    --ui-row-hover:     #232b40;
    --ui-border:        #2e3850;
    --ui-border-light:  #252d42;
    --ui-muted:         #94a3b8;
    --ui-subtle:        #6b7280;
    --ui-label:         #cbd5e1;

    --ui-header-bg:     #0b1020;

    --ui-primary-ring:  rgba(59, 130, 246, .35);
    --ui-neutral:       #4b5563;

    --ui-ok-bg:         #052e1f;
    --ui-ok-fg:         #6ee7b7;
    --ui-ok-border:     #34d399;
    --ui-err-bg:        #3b1219;
    --ui-err-fg:        #fca5a5;
    --ui-err-border:    #f87171;

    --ui-input-bg:      #111827;
    --ui-input-fg:      #e5e7eb;
    --ui-input-border:  #374151;
    --ui-input-ro-bg:   #1f2937;

    --ui-shadow:        0 1px 6px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg:            #0f1422;
  --ui-fg:            #e2e8f0;
  --ui-surface:       #1a2033;
  --ui-surface-alt:   #1f2639;
  --ui-row-hover:     #232b40;
  --ui-border:        #2e3850;
  --ui-border-light:  #252d42;
  --ui-muted:         #94a3b8;
  --ui-subtle:        #6b7280;
  --ui-label:         #cbd5e1;

  --ui-header-bg:     #0b1020;

  --ui-primary-ring:  rgba(59, 130, 246, .35);
  --ui-neutral:       #4b5563;

  --ui-ok-bg:         #052e1f;
  --ui-ok-fg:         #6ee7b7;
  --ui-ok-border:     #34d399;
  --ui-err-bg:        #3b1219;
  --ui-err-fg:        #fca5a5;
  --ui-err-border:    #f87171;

  --ui-input-bg:      #111827;
  --ui-input-fg:      #e5e7eb;
  --ui-input-border:  #374151;
  --ui-input-ro-bg:   #1f2937;

  --ui-shadow:        0 1px 6px rgba(0, 0, 0, .4);
}
:root[data-theme="light"] { color-scheme: light }

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
body { font-family: var(--ui-font-sans); background: var(--ui-bg); color: var(--ui-fg); min-height: 100vh }
main { max-width: var(--ui-content-width); margin: 2rem auto; padding: 0 1rem }

/* ── Header ─────────────────────────────────────────────────────────────── */
header { background: var(--ui-header-bg); color: var(--ui-header-fg); padding: .9rem 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem }
header h1 { font-size: 1.2rem; font-weight: 600 }
.header-spacer { flex: 1 }
.header-user { font-size: .82rem; opacity: .7; margin-right: .75rem }

/* Server-Infoblock im Header */
.srv-info { margin-left: 1.5rem; padding-left: 1.5rem; border-left: 1px solid var(--ui-header-rule) }
.srv-info table { border-collapse: collapse; width: auto }
/* border/hover: die globalen tbody-Regeln sollen im dunklen Header nicht greifen */
.srv-info td { padding: .08rem 0; font-size: .72rem; white-space: nowrap; border: none }
.srv-info tr:hover td { background: none }
/* .srv-info-Präfix nötig: sonst setzt .srv-info td das padding-right auf 0 */
.srv-info .si-label { color: var(--ui-header-muted); padding-right: .6rem; font-weight: 500 }
.si-val      { color: var(--ui-header-fg); font-weight: 600 }
.si-ssl-ja   { color: var(--ui-ok-border); font-weight: 700 }
.si-ssl-nein { color: var(--ui-err-border); font-weight: 700 }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: var(--ui-radius); margin-bottom: 1.25rem; font-size: .9rem }
.alert-ok  { background: var(--ui-ok-bg);  color: var(--ui-ok-fg);  border: 1px solid var(--ui-ok-border) }
.alert-err { background: var(--ui-err-bg); color: var(--ui-err-fg); border: 1px solid var(--ui-err-border) }

/* ── Card ───────────────────────────────────────────────────────────────── */
/* overflow-x: breite Tabellen scrollen innerhalb der Karte statt die Seite zu verbreitern */
.card { background: var(--ui-surface); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow); padding: 1.5rem; overflow-x: auto }
.card-narrow { max-width: 400px; margin: 0 auto }
.card-medium { max-width: 480px; margin: 0 auto }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem }
.top-bar h2 { font-size: .85rem; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .07em }
.empty { text-align: center; padding: 2.5rem 0; color: var(--ui-subtle); font-size: .95rem }

/* ── Table ──────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse }
thead th { background: var(--ui-surface-alt); padding: .65rem 1rem; text-align: left;
           font-size: .78rem; font-weight: 700; color: var(--ui-muted);
           text-transform: uppercase; letter-spacing: .07em;
           border-bottom: 2px solid var(--ui-border) }
tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--ui-border-light); font-size: .92rem }
tbody tr:last-child td { border-bottom: none }
tbody tr:hover td { background: var(--ui-row-hover) }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; padding: .38rem .9rem;
       border-radius: var(--ui-radius-sm); font-family: inherit; font-size: .82rem; font-weight: 600;
       cursor: pointer; border: none; text-decoration: none; transition: opacity .15s }
.btn:hover { opacity: .82 }
.btn-blue,  .btn-primary   { background: var(--ui-primary); color: var(--ui-on-color) }
.btn-amber, .btn-warning   { background: var(--ui-warning); color: var(--ui-on-color) }
.btn-red,   .btn-danger    { background: var(--ui-danger);  color: var(--ui-on-color) }
.btn-gray,  .btn-secondary { background: var(--ui-neutral); color: var(--ui-on-color) }
.btn-sm    { padding: .2rem .55rem; font-size: .75rem }
.btn-block { width: 100%; justify-content: center }

/* ── Forms ──────────────────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 600; color: var(--ui-label); margin-bottom: .3rem }
input[type=text], input[type=password], input[type=number] {
  width: 100%; padding: .5rem .75rem; border: 1.5px solid var(--ui-input-border);
  border-radius: var(--ui-radius-sm); font-family: inherit; font-size: .95rem;
  color: var(--ui-input-fg); background: var(--ui-input-bg); outline: none }
input:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-ring) }
input[readonly] { background: var(--ui-input-ro-bg); color: var(--ui-muted); cursor: not-allowed }
.field { margin-bottom: 1.1rem }
.hint  { font-size: .78rem; color: var(--ui-muted); margin-top: .25rem }
.form-actions { display: flex; gap: .75rem; margin-top: 1.5rem }
.inline-form  { display: inline }

/* ── Utilities (ersetzen Inline-style-Attribute, CSP ohne 'unsafe-inline') ─ */
.text-center    { text-align: center }
.justify-center { justify-content: center }
.ml-1 { margin-left: .4rem }
.mr-1 { margin-right: .5rem }
.mt-1 { margin-top: .4rem }
.mb-2 { margin-bottom: 1.25rem }

/* Hinweisbox, die nur sichtbar ist, solange dieses Stylesheet NICHT geladen wurde */
.ui-theme-missing { display: none !important }

/* ── Schmale Bildschirme ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  header { padding: .75rem 1rem }
  .srv-info { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: none }
  main { margin: 1rem auto }
  .card { padding: 1rem }
}