/* ══════════════════════════════════════════════════════════════════════════════════════════
   Gemeinsame Gestaltung der eigenständigen Seiten
   (Profil, Meine Freigaben, Upload-Links, Reviews, CI-Grafiken, Papierkorb)

   Warum es diese Datei gibt: bis zum 2026-08-30 trug jede dieser Seiten ihren eigenen
   <style>-Block, und daraus wurden VIER Inhaltsbreiten (680 / 860 / 900 / volle Breite), VIER
   Hauptknopf-Farben (weiss / blau / indigo / rot gefüllt), DREI Stile für den aktiven Filter und
   zwei verschiedene Suchfelder auf zwei Schwesterseiten. Bei 1900 px Fensterbreite wirkten
   Reviews und Papierkorb wie eine andere Anwendung als Profil und Freigaben.

   ⬛ Die Werte hier sind NICHT neu erfunden — sie sind die der Mediathek (`library.css`,
   Größensystem aus S144). Ein siebtes System hätte das Problem nur vergrössert.

   Eingebunden VOR dem eigenen <style> der Seite: was eine Seite wirklich für sich braucht,
   darf weiterhin gewinnen. Was nur zufällig anders war, verschwindet.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #1c1c1e;
  --surface: #2c2c2e;
  --surface2: #3a3a3c;
  /* Akzent = Videolution-Orange (21.09.2026, vorher Apple-Blau #0a84ff). Der Ton ist das Orange des
     ReviewGo-Logos; Schrift AUF Orange ist dunkel (--accent-text), weiß wäre kaum lesbar. */
  --accent: #f29400;
  --accent-bg: rgba(242,148,0, .18);
  --accent-text: #1c1c1e;
  --text: #f2f2f7;
  --text2: #8e8e93;
  --text3: #636366;
  --divider: rgba(255, 255, 255, .10);
  --surface3: #48484a;
  --green: #30d158;
  --orange: #ffd60a;   /* Warnfarbe — seit dem orangen Akzent GELB, sonst sähe jede Warnung aus wie ein Knopf */
  --red: #ff453a;
  --accent-hover: #d68300;
  /* Altnamen, die in den Seiten noch stehen — hier gleichgesetzt statt dort gesucht und
     ersetzt: ein Suchen-und-Ersetzen über sechs Dateien ist die Sorte Änderung, bei der genau
     eine Stelle übersehen wird. */
  --radius: var(--r-md);
  --text-secondary: var(--text2);
  --text-tertiary: var(--text3);
  --border: var(--divider);

  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px;
  --fs-md: 13px;  --fs-lg: 15px; --fs-xl: 18px;
  --control-h: 30px; --control-h-lg: 34px;
  --icon-sm: 14px; --icon-md: 18px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;

  /* EINE Inhaltsbreite. Es gab vier, und keine davon aus einem Grund. */
  --seite-breit: 900px;
}

/* ── Hell ──────────────────────────────────────────────────────────────────────────────────
   Dieselbe Palette wie die helle Mediathek (appearance.js: colorBg #ececec, Text #1d1d1f,
   Akzent seit 21.09. Orange #c77700; Flächen aus dem Hintergrund abgeleitet). Geschaltet von static/erscheinung.js
   über die Klasse `hell` am <html> — dieselbe Einstellung wie in der Mediathek. */
html.hell {
  --bg: #ececec;
  --surface: #ffffff;
  --surface2: #d8d8d8;
  --surface3: #c4c4c6;
  --accent: #c77700;   /* dunkleres Orange: auf Weiß muss Text lesbar bleiben */
  --accent-bg: rgba(199, 119, 0, .14);
  --accent-hover: #a86400;
  --accent-text: #fff;
  --text: #1d1d1f;
  --text2: #6e6e73;
  --text3: #8e8e93;
  --divider: rgba(0, 0, 0, .10);
  --green: #248a3d;
  --orange: #8a6d00;
  --red: #d70015;
}
html.hell .status-open     { background: var(--accent-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
html.hell .status-approved { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .3); }
html.hell .status-changes  { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
html.hell .rl-stand        { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
html.hell .filter-btn.active { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }

/* ── Platzhalter (23.09.2026, Nutzerwunsch): ein Beispieltext im Feld sah aus wie echter Inhalt —
   der Browser malt ihn grau, auf dunklem Grund kaum anders als eingetragene Schrift. Jetzt blass
   und kursiv, und beim Hineinklicken ist er weg (nicht erst beim ersten Tippen). Steht für ALLE
   Felder hier, damit keine Seite ihren eigenen Ton braucht. Dieselbe Regel steht in library.css
   (Mediathek/Editor) und in review.html (Prüferseite, eigene Farben). */
input::placeholder, textarea::placeholder { color: var(--text3); font-style: italic; opacity: 1; }
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }
html.hell .tb-nutzer-rolle { background: var(--accent-bg); color: var(--accent); }

/* Der Schalter Automatisch · Hell · Dunkel (Markup aus erscheinung.js) */
.erscheinung-schalter { display: flex; gap: 4px; padding: 8px 14px; border-top: 1px solid var(--divider); }
.erscheinung-schalter button { flex: 1; font-size: 11px; padding: 5px 0; border-radius: 6px; border: 1px solid var(--divider); background: var(--surface2); color: var(--text2); cursor: pointer; }
.erscheinung-schalter button:hover { color: var(--text); border-color: var(--accent); }
.erscheinung-schalter button.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  /* --schrift: die Schrift der Firma (backend/erscheinung.py), sonst die des Systems */
  font-family: var(--schrift, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif);
  font-size: var(--fs-md);
  min-height: 100vh;
}

/* ── Der Inhaltsbereich ──────────────────────────────────────────────────────────────────── */
.sk-seite { max-width: var(--seite-breit); margin: 0 auto; padding: 24px 20px 40px; width: 100%; }

/* ── Bedienelemente: EINE Höhe, EIN Radius, EINE Akzentfarbe ─────────────────────────────── */
.sk-btn, .sk-chip {
  height: var(--control-h);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: var(--r-md);
  font-size: var(--fs-md); font-family: inherit; line-height: 1;
  border: 1px solid var(--divider); background: var(--surface); color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.sk-btn:hover, .sk-chip:hover { background: var(--surface2); }
.sk-btn:disabled { opacity: .45; cursor: default; }

/* ⬛ Genau EIN Knopf je Ansicht trägt die Akzentfarbe (Hausregel seit S145) — der, den man
   meint. Wo zwei gefüllte Knöpfe nebeneinanderstehen, sagt die Farbe nichts mehr. */
.sk-btn-primaer { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sk-btn-primaer:hover { background: var(--accent-hover); }
/* Gefahr wird UMRANDET, nicht gefüllt: sie soll erkennbar sein, nicht werben. */
.sk-btn-gefahr { color: var(--red); border-color: rgba(255, 69, 58, .45); background: transparent; }
.sk-btn-gefahr:hover { background: rgba(255, 69, 58, .12); border-color: var(--red); }

.sk-chip.aktiv { background: var(--accent-bg); border-color: transparent; color: var(--accent); }

/* Symbolknöpfe in Listenzeilen — quadratisch, damit eine Reihe davon eine Reihe bleibt. */
.sk-icon-btn {
  width: var(--control-h); height: var(--control-h); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--divider);
  background: transparent; color: var(--text2); cursor: pointer;
  transition: background .15s, color .15s;
}
.sk-icon-btn:hover { background: var(--surface2); color: var(--text); }
.sk-icon-btn.gefahr:hover { color: var(--red); }

/* ── Suchfeld: mit Lupe, überall gleich ──────────────────────────────────────────────────── */
.sk-suche { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 180px; }
.sk-suche svg { position: absolute; left: 9px; width: var(--icon-sm); height: var(--icon-sm);
                color: var(--text3); pointer-events: none; }
.sk-suche input {
  width: 100%; height: var(--control-h); padding: 0 10px 0 30px;
  border-radius: var(--r-md); border: 1px solid var(--divider);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-md); font-family: inherit; outline: none;
}
.sk-suche input:focus { border-color: var(--accent); }
.sk-suche input::placeholder { color: var(--text3); }

/* ── Werkzeugleiste über einer Liste ─────────────────────────────────────────────────────── */
.sk-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sk-zaehler { color: var(--text3); font-size: var(--fs-sm); margin-left: 4px; }

/* ── Überschriften ───────────────────────────────────────────────────────────────────────── */
.sk-titel { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sk-untertitel { color: var(--text2); font-size: var(--fs-md); margin-top: 4px; }
/* Abschnittsüberschrift. Bewusst OHNE Farbwechsel je Abschnitt: im Profil stand „SESSION" rot
   und „KONTO-INFORMATIONEN" grau — Rot sagte dort Gefahr für einen Abschnitt, in dem man sich
   nur abmeldet. Gefahr steckt im KNOPF, nicht in der Überschrift. */
.sk-abschnitt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
                text-transform: uppercase; color: var(--text3); }

/* ── ⬛ Symbolgrössen ─────────────────────────────────────────────────────────────────────────
   Ein Symbol trägt seine Grösse als ATTRIBUT im `<svg>` — und `icons.json` verdoppelt sie
   (`_scale: 2.0`). Wer `icon('trash', 14)` schreibt, bekommt 28 px geliefert.

   Die Mediathek fängt das ab, indem sie in ihrer Leiste eine CSS-Grösse setzt („Die Icons in der
   Leiste haben eine Größe — sonst zieht jedes Aufrufmaß sein eigenes", library.css). Diese Seiten
   taten das nicht: gemessen standen 28 px neben 15 px Schrift im Papierkorb und 26 px neben 12 px
   in den CI-Grafiken. Vom Nutzer gesehen, bevor es jemand nachgerechnet hat — und derselbe Fehler
   wie auf der Prozessseite, der dort schon einmal behoben wurde.

   18 px neben 13 px ist das Verhältnis der Mediathek (1,38): großzügig, aber ruhig. Eine Seite,
   die es wirklich anders braucht, überschreibt es — ihr eigener <style> steht nach diesem hier. */
svg.ic { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

/* Beiläufige Zeichen bleiben kleiner: ein Chevron ist ein Hinweis, kein Symbol — und eine Lupe
   IM Feld ist eine Beschriftung, kein Bedienelement. */
svg.ic-chevron,
.search-wrap svg.ic,
.sk-suche svg.ic { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Leere Zustände ──────────────────────────────────────────────────────────────────────── */
.sk-leer { text-align: center; color: var(--text3); padding: 48px 20px; font-size: var(--fs-md); }

/* ── ⬛ Ausgefüllte Felder ───────────────────────────────────────────────────────────────────
   Chrome malt automatisch ausgefüllte Felder WEISS — im Profil stand „Aktuelles Passwort" hell
   zwischen zwei dunklen Feldern (Nutzerbericht mit Bild, 2026-08-30). `background` allein hilft
   nicht, die Regel gewinnt; der einzige Weg ist ein Innenschatten in Feldfarbe. Gilt für jedes
   Feld der App, nicht nur für das eine, an dem es auffiel. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}