/* TCG Keeper — gemeinsames Stylesheet, Teil 1 von 8: Grundlagen: Farbvariablen, Hell/Dunkel, Grundelemente.
   Bis 09.10.2026 eine einzige Datei app.css; aufgeteilt ohne inhaltliche Änderung.
   Alle Teile werden in includes/layout_top.php in dieser Reihenfolge eingebunden —
   die Reihenfolge bestimmt die Kaskade, Regeln nicht zwischen Teilen verschieben. */
/* PokeCollector (PHP/MySQL edition) — shared styles.
   Palette and component names deliberately mirror pokecollector-offline.html
   so all versions look and feel like the same app. */
:root{
  --paper:#F5F1E6; --paper-raised:#FFFFFF; --paper-sunken:#EEE7D6;
  --ink:#1C2233; --ink-soft:#656F82; --ink-faint:#98A0B0;
  --line:#E0D8C4; --accent:#5B3E96; --accent-ink:#FFFFFF; --accent-soft:#EDE6FA;
  --gold:#8E6B12; --gold-soft:#F3EAD2; --danger:#AE4433; --danger-soft:#F6E4DF;
  --good:#3E7A4C; --good-soft:#E4EFE6;
  /* Status-"Lämpchen" auf jeder Kartenkachel (Mario, 19.09.2026, "Umbau der
     Kartenansichten" nach KI-Referenz-Screenshots), seit der Nachbesserung
     vom selben Tag ("Lämpchenfarben in Hell zu dunkel, bitte aufhellen +
     eigene Regler in der Seitenanpassung") NICHT mehr an --good/--danger
     gekoppelt (die auch Erfolgsmeldungen/Warnmeldungen/--tile-price
     einfärben und dafür bewusst dunkler/gedeckter bleiben sollen), sondern
     drei eigene, nur vom Lämpchen genutzte Variablen: grün (--lamp-local) =
     Lokal gespeichert, orange (--lamp-remote, vorher --status-remote) = Auf
     Remote-Server verfügbar, rot (--lamp-unavailable) = Nicht verfügbar —
     siehe .tile-status-dot weiter unten. Helle Werte bewusst deutlich
     heller/kräftiger als die "Erfolgsfarbe"/"Warnfarbe" der übrigen Seite;
     dunkle Werte unverändert von den bisherigen --good/--status-remote/
     --danger-Dunkelwerten übernommen (dort nicht als zu dunkel gemeldet). */
  --lamp-local:#3FAE55; --lamp-remote:#E0932E; --lamp-unavailable:#DD5C48;
  /* TCG-Pocket-Kennzeichnung in der Kartensuche (siehe .card-tile.tile-pocket
     weiter unten) — Farbwert 1:1 von Mario per Screenshot vorgegeben
     (19.09.2026, Bugreport Punkt 3), nicht aus der übrigen Palette
     abgeleitet. */
  --pocket-tile-bg:#D8E890;
  /* Varianten-Kästchen ("N ×1"/"RH ×1" auf jeder Kartenkachel, Mario,
     19.09.2026 Folgerunde: "in dem lila Ton der Seite, Schrift in weiß") —
     Standardwert bewusst identisch zur aktuellen Akzentfarbe/Akzent-Textfarbe
     als konkreter, für sich stehender Farbwert (keine var(--accent)-
     Referenz), damit beides unabhängig voneinander in der Seitenanpassung
     verstellt werden kann, ohne dass eine Änderung der Akzentfarbe an
     anderer Stelle versehentlich auch die Kästchen mitfärbt. */
  --vchip-bg:#5B3E96; --vchip-ink:#FFFFFF;
  --shadow: 0 1px 2px rgba(28,34,51,.06), 0 8px 24px -12px rgba(28,34,51,.18);

  /* ---------- Seitenanpassung / Kontrollzentrum ---------- */
  /* Alles unterhalb dieser Zeile sind reine Vorgabewerte (Defaults). Das
     Kontrollzentrum überschreibt sie nicht hier, sondern per zusätzlichem
     <style>-Block, den includes/design_settings.php aus
     includes/data/design_settings.json erzeugt und layout_top.php nach
     dieser Datei einbindet — ein dort nicht gesetzter Wert fällt also
     automatisch auf den hier stehenden Default zurück. "Zurücksetzen" im
     Kontrollzentrum bedeutet deshalb einfach: den Eintrag aus der
     JSON-Datei löschen, nicht einen Wert irgendwo neu hinschreiben. Farben
     (oben, --paper/--accent/usw.) gehören technisch genauso dazu, waren
     aber schon vorher Variablen. Diese Liste wächst mit jedem neuen Regler,
     den das Kontrollzentrum bekommt — muss nicht auf einen Schlag jeden
     Pixelwert der Datei abdecken. */
  --font-base:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --font-size-base:16px;
  /* 2. Rückmelderunde: Fett/Kursiv-Umschalter für Fließtext und
     Zahlen/Mono, plus eine eigene Mono-Schriftgröße. Wirken bewusst nur
     auf body bzw. die generischen Mono-Hilfsklassen (.mono/code/.meta.mono)
     — genau wie --font-size-base schon vorher NICHT jede der vielen
     bewusst unterschiedlich großen Kachel-Textstellen überschreibt,
     bleiben auch diese neuen Regler auf die allgemeine Textebene
     beschränkt, nicht auf jede einzelne, absichtlich eigenständig
     dimensionierte Stelle. */
  --font-weight-base:normal;
  --font-style-base:normal;
  --font-size-mono:12.5px;
  --font-weight-mono:normal;
  --font-style-mono:normal;

  /* Randdarstellung (2. Rückmelderunde): Knopf neben der Hell/Dunkel-
     Umschaltung schaltet breite Seiten (.page-wide, z. B. Sammlung/Sets/
     Kartensuche) zwischen "volle Bildschirmbreite" (Standard) und "mit
     Rand links/rechts" um — siehe [data-layout="boxed"] weiter unten. Pro
     Gerät gemerkt (localStorage), genau wie die Hell/Dunkel-Wahl. */
  --page-maxwidth-boxed:1400px;

  --logo-size-topbar:32px;
  --logo-size-auth:64px;
  --logo-size-settile:56px;
  --logo-size-settile-compact:38px;
  --logo-size-settile-list:40px;
  --symbol-size-settile:15px; --symbol-maxwidth-settile:56px;
  --symbol-size-settile-compact:10px;
  --symbol-size-settile-list:24px;
  /* Set-Kachelbreite (Standard/Kompakt) — Mario, 13.09.2026 dritte
     Rückmelderunde: bisher zwei an zwei/drei Stellen fest verdrahtete
     Literale (220px/150px). Jetzt als eigene Variablen, damit sie zum einen
     in der Seitenanpassung einstellbar sind und zum anderen von der
     flachen UND der "Serien"-gruppierten Ansicht gemeinsam gelesen werden —
     beide können dadurch gar nicht mehr auseinanderlaufen. */
  --settile-basis-standard:220px;
  --settile-grid-min-compact:150px;
  --logo-size-section:42px;
  --symbol-size-section:15px; --symbol-maxwidth-section:52px;
  --logo-size-setdetail:52px; --logo-maxwidth-setdetail:220px;
  --symbol-size-setdetail:22px; --symbol-maxwidth-setdetail:80px;
  --logo-size-print:28px; --logo-maxwidth-print:120px;
  --symbol-size-print:12px; --symbol-maxwidth-print:40px;

  /* Anmeldeseite: siehe .auth-wrap/body.auth-page weiter unten. Vier feste
     Namen (hell/dunkel × normal/wide) statt eines generischen "Bild"-Reglers,
     weil welches der vier gerade zum Zug kommt schon von Theme + Media-Query
     entschieden wird (siehe dort) — das Kontrollzentrum tauscht später nur
     die vier hinterlegten Dateipfade aus. */
  --bg-auth-light:url("../images/back/light_pokeback_firstpage.jpg");
  --bg-auth-light-wide:url("../images/back/light_pokeback_firstpage_wide.jpg");
  --bg-auth-dark:url("../images/back/dark_pokeback_firstpage.jpg");
  --bg-auth-dark-wide:url("../images/back/dark_pokeback_firstpage_wide.jpg");
  /* Website-Hintergrundbild (Mario, 13.09.2026 zweite Rückmelderunde) —
     "none" per Default: ohne Override bleibt es bei der normalen
     Hintergrundfarbe (--paper), siehe body{} unten. Ein einziges Bild für
     hell und dunkel zusammen, anders als die Anmeldeseite oben. */
  --bg-page-image:none;
}
/* :not([data-theme="light"]) lets the manual light/dark toggle (see
   layout_top.php) override the OS preference when the visitor picked
   "hell" explicitly while their system itself is set to dark. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141420; --paper-raised:#1D1C2C; --paper-sunken:#0F0F18;
    --ink:#ECE8F6; --ink-soft:#9F98B4; --ink-faint:#6B6483; --line:#302C42;
    --accent:#AB8EEF; --accent-ink:#1C1430; --accent-soft:#2A2440;
    --gold:#D8B968; --gold-soft:#2E2818; --danger:#E28C7B; --danger-soft:#3A2320;
    --good:#7CC28E; --good-soft:#1E2E22;
    --lamp-local:#7CC28E; --lamp-remote:#E0AC5C; --lamp-unavailable:#E28C7B;
    --pocket-tile-bg:#292B1C;
    --vchip-bg:#AB8EEF; --vchip-ink:#1C1430;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
  }
}
/* Same dark palette, forced on regardless of OS preference — the "dunkel"
   choice from the manual toggle. Kept as its own block (not just relying on
   the media query above) so picking "dunkel" also works when the system
   itself is set to light. */
:root[data-theme="dark"]{
  --paper:#141420; --paper-raised:#1D1C2C; --paper-sunken:#0F0F18;
  --ink:#ECE8F6; --ink-soft:#9F98B4; --ink-faint:#6B6483; --line:#302C42;
  --accent:#AB8EEF; --accent-ink:#1C1430; --accent-soft:#2A2440;
  --gold:#D8B968; --gold-soft:#2E2818; --danger:#E28C7B; --danger-soft:#3A2320;
  --good:#7CC28E; --good-soft:#1E2E22;
  --lamp-local:#7CC28E; --lamp-remote:#E0AC5C; --lamp-unavailable:#E28C7B;
  --pocket-tile-bg:#292B1C;
  --vchip-bg:#AB8EEF; --vchip-ink:#1C1430;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ position:var(--bg-html-pos, static); }
body::before, body::after{ content:""; position:var(--bg-layer-pos, fixed); inset:0; pointer-events:none; }
body::before{ z-index:-2; background-image:var(--bg-page-image); background-size:var(--bg-page-size, cover);
  background-repeat:var(--bg-page-repeat, no-repeat); background-position:var(--bg-page-position, center top);
  filter:var(--bg-page-filter, none); transform:scale(var(--bg-page-scale, 1)); }
body::after{ z-index:-1; background:var(--paper); opacity:var(--bg-page-veil-op, 0); }
body.auth-page::before, body.auth-page::after{ display:none; }
@media print{ body::before, body::after{ display:none; } }
body{
  background-color:var(--paper); color:var(--ink);
  /* Website-Hintergrundbild (Mario, 13.09.2026 zweite Rückmelderunde):
     liegt einfach über --paper — ohne Override ist --bg-page-image "none"
     (siehe :root oben) und die normale Farbe bleibt wie bisher sichtbar,
     kein Sonderfall nötig, um beim Löschen "die vorher genutzte Farbe"
     wiederherzustellen. body.auth-page (weiter unten) hat höhere
     Spezifität und überschreibt background-image ohnehin komplett, also
     nie für die Anmeldeseite wirksam, genau wie von Mario gewünscht. */
  /* Website-Hintergrundbild seit 23.10.2026 (Kontrollzentrum, Logbuch-Eintrag
     157) nicht mehr direkt am body, sondern als eigene Ebene darunter
     (body::before = Bild, body::after = Schleier in der Papierfarbe), damit
     Schleier, Unschärfe, „fest stehend“ (auch auf iPad/iPhone) und ein eigenes
     Bild für die dunkle Ansicht möglich sind. Ohne Bild sind beide Ebenen
     unsichtbar (none / Deckkraft 0) — optisch ändert sich dann nichts. */
  isolation:isolate;
  font-family:var(--font-base);
  font-size:var(--font-size-base); line-height:1.5;
  font-weight:var(--font-weight-base); font-style:var(--font-style-base);
}