/*
 * Das Osiris-Admin-Panel — im Aufbau der Anwendung.
 *
 * Seitenleiste links, Hauptbereich rechts mit Kopfzeile, dieselben Tokens wie
 * App und Website: Korall als Akzent, Serife für Überschriften, flache Flächen
 * mit Rändern, dunkel als Vorgabe. Das Panel läuft auf dem Server und kann
 * nicht in den App-Ordner greifen, darum stehen die Werte hier noch einmal.
 */

:root {
  --accent: #d97757;
  --accent-strong: #c2603f;
  --accent-08: color-mix(in oklab, var(--accent) 8%, transparent);
  --accent-16: color-mix(in oklab, var(--accent) 16%, transparent);

  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px;

  --font-ui: 'Styrene B', ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  --font-serif: Copernicus, 'Tiempos Headline', ui-serif, 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #151515; --bg-sunken: #111111;
  --surface: #1f1f1f; --surface-2: #2d2d2d; --surface-3: #363636;
  --fg: #f0efec; --fg-2: #c4c4c0; --fg-3: #8a8a88; --fg-4: #4a4a48;
  --line: #232323; --line-mid: #363636; --line-strong: #4b4b4b;
  --ok: #9bb377; --warn: #d9a441; --err: #d96a5a; --blau: #6ea8d8;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #faf9f5; --bg-sunken: #f5f4ed;
  --surface: #ffffff; --surface-2: #f0eee6; --surface-3: #e8e5da;
  --fg: #141413; --fg-2: #5c5a54; --fg-3: #85827a; --fg-4: #b0ada3;
  --line: #e8e5da; --line-mid: #ddd9cc; --line-strong: #d6d2c4;
  --ok: #788c5d; --warn: #b8842a; --err: #bc4a3c; --blau: #2a79d6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0; }
a { color: var(--accent); text-decoration: none; }
code, .mono { font-family: var(--font-mono); }
.mark { fill: none; stroke: var(--accent); stroke-linecap: round; }
/* stroke-linejoin ebenfalls vererbbar, damit die <use>-Klone sauber sind. */
.mark { stroke-linejoin: round; }

/* ================================================================ Knopf */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-mid); background: var(--surface-2); color: var(--fg);
  font: 500 0.9rem/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), transform 0.1s var(--ease);
}
.knopf:hover { background: var(--surface-3); border-color: var(--line-strong); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.knopf.haupt { background: var(--accent); border-color: var(--accent); color: #1a1008; }
.knopf.haupt:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.knopf.still { background: transparent; }
.knopf.gefahr { color: var(--err); border-color: color-mix(in oklab, var(--err) 40%, var(--line-mid)); }
.knopf.gefahr:hover { background: color-mix(in oklab, var(--err) 14%, transparent); }
.knopf.klein { padding: 6px 11px; font-size: 0.82rem; }

/* ================================================================ Felder */
label { display: block; font-size: 0.82rem; color: var(--fg-3); margin-bottom: 6px; }
input, select {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-mid); background: var(--bg); color: var(--fg);
  font: inherit; font-size: 0.92rem;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
.feld { margin-bottom: var(--s-4); }
.fehler { color: var(--err); font-size: 0.85rem; min-height: 1.2em; margin-top: var(--s-2); }

/* ================================================================ Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.anmelde-karte {
  width: min(380px, 100%); padding: var(--s-8);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center;
}
.anmelde-karte .zeichen {
  width: 72px; height: 72px; margin: 0 auto var(--s-5); display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-08);
}
.anmelde-karte h1 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.anmelde-karte p { color: var(--fg-3); font-size: 0.9rem; margin: 0 0 var(--s-6); }
.anmelde-karte form { text-align: left; }

/* ================================================================ Aufbau */
.app { display: grid; grid-template-columns: 244px 1fr; height: 100%; }

.sidebar {
  display: flex; flex-direction: column; gap: 0;
  padding: var(--s-4) var(--s-3);
  background: var(--bg-sunken); border-right: 1px solid var(--line);
}
.sidebar .marke { display: flex; align-items: center; gap: 10px; padding: var(--s-2) var(--s-2) var(--s-6); }
.sidebar .marke b { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; }
.sidebar .marke i { color: var(--fg-3); font-style: normal; font-size: 0.9rem; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-punkt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-2); cursor: pointer;
  font: 500 0.92rem/1 var(--font-ui); text-align: left;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.sb-punkt:hover { background: var(--surface-2); color: var(--fg); }
.sb-punkt.an { background: var(--accent-16); color: var(--fg); }
.sb-punkt .ico { width: 18px; height: 18px; flex: none; color: var(--fg-3); }
.sb-punkt.an .ico { color: var(--accent); }
.sb-punkt .ico svg { width: 100%; height: 100%; display: block; }

.sb-fuss { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-4); }
.sb-fuss .knopf { justify-content: flex-start; }

/* ================================================================ Fläche */
.flaeche { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kopf {
  display: flex; align-items: center; gap: var(--s-4);
  height: 62px; padding: 0 var(--s-8); border-bottom: 1px solid var(--line); flex: none;
}
.kopf h1 { font-size: 1.3rem; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.blatt { flex: 1; overflow-y: auto; padding: var(--s-8); }
.mitte { max-width: 1000px; margin: 0 auto; }

/* ================================================================ Kacheln (Überblick) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
.kachel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); }
.kachel .zahl { font-family: var(--font-serif); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kachel .wort { color: var(--fg-3); font-size: 0.85rem; margin-top: 6px; }
.kachel .neben { color: var(--fg-4); font-size: 0.78rem; margin-top: 3px; }

.ueber { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s-3); }

/* ================================================================ Karte + Tabelle */
.karte { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-6); margin-bottom: var(--s-6); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); align-items: end; }

.werkzeugzeile { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); flex-wrap: wrap; }
.werkzeugzeile input { max-width: 320px; }
.anzahl { color: var(--fg-3); font-size: 0.85rem; }

.tabelle-halter { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.tabelle { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabelle th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-4); font-weight: 500; padding: 12px; background: var(--bg-sunken);
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
.tabelle td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 0.88rem; vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle tbody tr.klickbar:hover { background: var(--surface-2); }
.tabelle .mono { font-family: var(--font-mono); font-size: 0.8rem; }
.tabelle .schwach { color: var(--fg-3); }

/* ================================================================ Plaketten */
.plakette {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 500; border: 1px solid var(--line-mid);
}
.plakette .punkt { width: 6px; height: 6px; border-radius: 50%; }
.plakette.aktiv, .plakette.ok { color: var(--ok); } .plakette.aktiv .punkt, .plakette.ok .punkt { background: var(--ok); }
.plakette.gesperrt { color: var(--err); } .plakette.gesperrt .punkt { background: var(--err); }
.plakette.abgelaufen { color: var(--warn); } .plakette.abgelaufen .punkt { background: var(--warn); }

/* Ereignis-Arten als kleine, ruhige Marken. */
.art { font-size: 0.76rem; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-mid); color: var(--fg-2); white-space: nowrap; }
.art--konto-neu { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, var(--line-mid)); }
.art--anmeldung { color: var(--blau); border-color: color-mix(in oklab, var(--blau) 40%, var(--line-mid)); }
.art--aktivierung { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--line-mid)); }

.landkennung { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--line-mid); border-radius: var(--r-sm); padding: 1px 6px; }
.leer { color: var(--fg-3); font-size: 0.9rem; padding: var(--s-8); text-align: center; }

/* ================================================================ Overlay/Detail */
.schleier { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: grid; place-items: center; padding: 24px; z-index: 50; }
.detail {
  width: min(680px, 100%); max-height: 88vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-8);
}
.detail-kopf { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-6); }
.detail-kopf h2 { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; word-break: break-all; }
.detail-kopf .zu { margin-left: auto; }
.knopf.symbol { padding: 8px; background: transparent; border-color: transparent; color: var(--fg-3); }
.knopf.symbol:hover { background: var(--surface-2); color: var(--fg); }
.paar { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 0.9rem; margin-bottom: var(--s-6); }
.paar dt { color: var(--fg-3); } .paar dd { margin: 0; }
.token-feld { display: flex; gap: 8px; margin-bottom: var(--s-6); }
.token-feld code { flex: 1; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line-mid); border-radius: var(--r-sm); font-size: 0.72rem; word-break: break-all; }
.geraet { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.geraet .info { flex: 1; min-width: 0; }
.geraet .info b { font-weight: 500; }
.geraet .info span { display: block; color: var(--fg-3); font-size: 0.8rem; }
.frisch { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--ok) 40%, var(--line)); background: color-mix(in oklab, var(--ok) 10%, transparent); }
.frisch b { font-family: var(--font-mono); }

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-2) var(--s-3); gap: var(--s-2); overflow-x: auto; }
  .sidebar .marke { padding: var(--s-2); }
  .sb-nav { flex-direction: row; }
  .sb-punkt span:not(.ico) { display: none; }
  .sb-fuss { margin: 0 0 0 auto; flex-direction: row; padding: 0; }
  .paar { grid-template-columns: 1fr; }
}