/* Designsprache des Admin-Bereichs. Einzige Quelle für die Palette — Seite,
   Karte, Akzente, Text, Schatten, Radien, Abstände. Weiß als Schrift auf
   einer Akzentfläche und weiße Überlagerungen stehen bewusst im JSX: sie
   gehören zur Fläche, nicht zur Palette.

   Warum als echte Datei und nicht als Style-Objekt: der Admin rendert rohes
   DOM, und der Export liefert fertiges Markup. Als <link> im Kopf gilt jede
   Regel ab dem ersten Bild; als Laufzeit-Style erst, wenn das Bundle geparst
   ist — dazwischen stehen ungestylte Kästen.

   Muss nach bh-global.css stehen: dort ist der dunkle Grundton der App
   gesetzt, hier gilt der helle des Admin. */

:root {
  --adm-seite:        #F1F2F4;
  --adm-karte:        #FFFFFF;
  --adm-schatten:     0 2px 12px rgba(0, 0, 0, 0.04);
  --adm-schatten-hoch:0 8px 24px rgba(0, 0, 0, 0.08);
  --adm-schwarz:      #111214;
  --adm-orange:       #F4571F;
  --adm-orange-hell:  #FF7A3C;
  --adm-limette:      #D4F44E;
  --adm-pfirsich:     #FBDCCF;
  --adm-rosa:         #FCE7E7;
  --adm-text:         #111214;
  --adm-text-sub:     #8A8F98;
  --adm-linie:        rgba(17, 18, 20, 0.07);

  /* Statusfarben der Chips. Getönte Fläche, farbiger Text — die Werte sind
     gegen 4,5 zu 1 gerechnet, nicht nach Augenmaß gewählt. */
  --adm-chip-gruen-flaeche:   rgba(22, 101, 52, 0.14);
  --adm-chip-gruen-schrift:   #166534;
  --adm-chip-gelb-flaeche:    rgba(133, 77, 14, 0.14);
  --adm-chip-gelb-schrift:    #854D0E;
  --adm-chip-blau-flaeche:    rgba(30, 64, 175, 0.14);
  --adm-chip-blau-schrift:    #1E40AF;
  --adm-chip-violett-flaeche: rgba(91, 33, 182, 0.14);
  --adm-chip-violett-schrift: #5B21B6;
  --adm-chip-grau-flaeche:    rgba(55, 65, 81, 0.14);
  --adm-chip-grau-schrift:    #374151;

  /* Fehler: Schrift gegen 4,5 zu 1 gerechnet, auf Karte 6,6 zu 1. */
  --adm-fehler:          #B42318;
  --adm-fehler-flaeche:  rgba(180, 35, 24, 0.08);
  /* Abdunklung hinter einem schwebenden Fenster (Strg+K). */
  --adm-schleier:        rgba(17, 18, 20, 0.45);
  /* Gefüllte Fläche eines gewählten Knopfes und ihre Schrift. In der dunklen
     Fassung kehrt sich das um, sonst verschwindet Schwarz auf Schwarz. */
  --adm-aktiv-flaeche:   #111214;
  --adm-aktiv-schrift:   #FFFFFF;

  --adm-radius:        22px;
  --adm-radius-s:      12px;
  --adm-radius-saeule: 28px;
  --adm-polster:       24px;
  --adm-luecke:        18px;
  --adm-saeule:        72px;
}

/* Die dunkle Fassung folgt dem System. Kein Schalter in der Oberfläche —
   ein zweiter Weg zur selben Einstellung ist ein Weg zu viel. */
@media (prefers-color-scheme: dark) {
  :root {
    --adm-seite:        #0E0F11;
    --adm-karte:        #17181B;
    --adm-schatten:     0 2px 12px rgba(0, 0, 0, 0.35);
    --adm-schatten-hoch:0 8px 24px rgba(0, 0, 0, 0.5);
    --adm-schwarz:      #000000;
    --adm-orange:       #DC4E1C;
    --adm-orange-hell:  #E56E36;
    --adm-limette:      #BFDC46;
    --adm-pfirsich:     #E2C6BA;
    --adm-rosa:         #E3D0D0;
    --adm-text:         #F3F4F6;
    --adm-text-sub:     #8A8F98;
    --adm-linie:        rgba(255, 255, 255, 0.08);

    --adm-chip-gruen-flaeche:   rgba(74, 222, 128, 0.16);
    --adm-chip-gruen-schrift:   #4ADE80;
    --adm-chip-gelb-flaeche:    rgba(250, 204, 21, 0.16);
    --adm-chip-gelb-schrift:    #FACC15;
    --adm-chip-blau-flaeche:    rgba(96, 165, 250, 0.16);
    --adm-chip-blau-schrift:    #60A5FA;
    --adm-chip-violett-flaeche: rgba(196, 181, 253, 0.16);
    --adm-chip-violett-schrift: #C4B5FD;
    --adm-chip-grau-flaeche:    rgba(209, 213, 219, 0.16);
    --adm-chip-grau-schrift:    #D1D5DB;

    --adm-fehler:          #F97066;
    --adm-fehler-flaeche:  rgba(249, 112, 102, 0.12);
    --adm-schleier:        rgba(0, 0, 0, 0.6);
    --adm-aktiv-flaeche:   #F3F4F6;
    --adm-aktiv-schrift:   #111214;
  }
}

/* Die Seite ist ihr eigener Scrollbereich. React Native Web setzt auf die
   Wurzel overflow: hidden; ohne das hier ließe sich keine lange Admin-Seite
   bewegen. Die Säule klebt innerhalb dieses Bereichs. */
.adm-seite {
  background: var(--adm-seite);
  color: var(--adm-text);
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: Inter, system-ui, sans-serif;
}

.adm-karte {
  height: 100%;
  box-sizing: border-box;
  background: var(--adm-karte);
  border-radius: var(--adm-radius);
  padding: var(--adm-polster);
  box-shadow: var(--adm-schatten);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Anheben nur im Bento-Raster der Übersicht. Auf Listen, Tabellen und
   Formularen springt eine Karte unter der Maus, das stört beim Arbeiten. */
.adm-raster .adm-karte:hover {
  transform: translateY(-5px);
  box-shadow: var(--adm-schatten-hoch);
}

.adm-raster {
  display: grid;
  gap: var(--adm-luecke);
  grid-template-columns: repeat(12, 1fr);
}

/* Zahlen sitzen in Kacheln und Tabellen untereinander. Ohne feste
   Ziffernbreite springt die Spalte bei jeder Aktualisierung. */
.adm-zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Text, der aus der Datenbank kommt und von Menschen geschrieben wurde:
   Nachrichten, Öffnungszeiten, Notizen. Zeilenumbrüche bleiben stehen, und
   lange Wörter oder Adressen brechen um, statt die Karte zu sprengen. Ein
   <Text> aus React Native tat das von selbst, ein <div> nicht. */
.adm-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Eingabefelder, Auswahllisten und Textfelder im Admin. Der Rand steht in der
   Sekundärfarbe, weil ein Feld seine Grenze mit 3 zu 1 zeigen muss — die
   haarfeine Linie der Tabellen käme darauf nicht. */
.adm-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--adm-text-sub);
  border-radius: var(--adm-radius-s);
  background: var(--adm-karte);
  color: var(--adm-text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.adm-feld::placeholder {
  color: var(--adm-text-sub);
}

.adm-feld:focus {
  border-color: var(--adm-text);
}

/* Der Strich zeichnet sich einmal von links. Die Länge setzt die Komponente
   per style, weil nur sie den Pfad kennt. */
@keyframes adm-strich {
  from { stroke-dashoffset: var(--adm-strichlaenge); }
  to   { stroke-dashoffset: 0; }
}

.adm-strich {
  animation: adm-strich 900ms ease-out forwards;
}

@keyframes adm-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.adm-ein {
  animation: adm-ein 220ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .adm-karte,
  .adm-raster .adm-karte:hover,
  .adm-strich,
  .adm-ein {
    animation: none;
    transition: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}