/* ══ SmileReply – gemeinsame Design-Grundlage ═══════════════════════════════
   Farben, Schriften, Radien und Schatten fuer ALLE Seiten. Jede Seite bindet
   diese Datei VOR ihrer eigenen ein; die Seiten-CSS nutzt nur noch die
   Variablen hier und definiert keine eigenen Farbwerte mehr fuer Dinge, die
   ueberall gleich aussehen sollen.

   Quelle der Werte: Design-Vorlage "SmileReply Neuentwurf" (v18).

   Zwei Namensfamilien, bewusst:
   - Die Palette der Vorlage (--navy, --blue, --tx ...) - neue Regeln
     benutzen diese.
   - Die bisherigen Namen (--text-primary, --accent, --card-bg ...) zeigen auf
     dieselbe Palette. Sie bleiben, weil hunderte bestehende Regeln sie
     verwenden; ein Umbenennen waere reine Bewegung ohne Nutzen.

   Dark Mode: ueber das Attribut data-theme am <html>-Element (gesetzt von
   dem kleinen Skript ganz oben im <head> von Postfach und Dashboard). Seiten
   ohne dieses Skript bleiben immer hell. */

/* Schriften liegen lokal unter static/fonts/ - keine Anfrage an einen
   fremden Server (DSGVO). Manrope und JetBrains Mono: SIL Open Font License
   1.1, siehe static/fonts/README.md. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/JetBrainsMono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/JetBrainsMono-500.woff2') format('woff2'); }

:root {
    /* ── Palette der Vorlage ── */
    --navy: #0C2055; --navy-2: #152D6B; --navy-3: #1B356F;
    --blue: #0047DB; --blue-2: #1A5FF0; --blue-soft: #EAF1FF; --sky: #7EA0FF;
    --surface: #FFFFFF; --soft: #F1F5FB; --border-2: #B9C9E2;
    --tx: #122252; --tx-2: #3D4E75; --tx-3: #6B7CA0;
    --ok: #12915B; --ok-soft: #E4F5EC;
    --warn: #B25E00; --warn-soft: #FFF4E0; --warn-bd: #F3D9A4;
    --danger-soft: #FDF0F0;
    --r-s: 8px; --r-m: 10px; --r-l: 16px;
    /* Hoehe der Kopfleiste - das Seitenraster jeder Seite zieht sie ab. */
    --topbar-h: 60px;
    --f-ui: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-d: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-m: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
    --sh-1: 0 1px 2px rgba(4,18,59,.05); --sh-2: 0 6px 18px rgba(4,18,59,.10); --sh-3: 0 16px 40px rgba(4,18,59,.16);

    /* ── Bisherige Namen, auf die Palette gelegt ── */
    --bg: #F6F9FD; --panel-bg: var(--surface); --soft-bg: var(--soft);
    --sidebar-bg: var(--navy); --sidebar-text: rgba(255,255,255,.62);
    --border: #DCE5F2; --border-strong: var(--border-2);
    --text-primary: var(--tx); --text-secondary: var(--tx-2); --text-muted: var(--tx-3);
    /* --accent ist fast ueberall Rahmen bei Hover/Fokus - in der Vorlage
       --sky. Kraeftiges Blau fuer Text und aktive Zustaende ist
       --accent-strong. */
    --accent: var(--sky); --accent-strong: var(--blue); --accent-hover: var(--navy-2);
    --unread-bar: var(--blue); --selected-bg: var(--blue-soft);
    --success: var(--ok); --success-hover: #0F7C4E;
    --danger: #D93838; --danger-hover: #B52B2B;
    --warning-bg: var(--warn-soft); --warning-border: var(--warn-bd); --warning-text: var(--warn);
    --purple: #7B5BD6; --purple-hover: #6646C4;
    --card-bg: var(--surface); --input-bg: var(--surface); --menu-bg: var(--surface);
    --hover-bg: var(--soft); --avatar-bg: var(--blue-soft); --tool-bg: var(--soft);
    --shadow-strong: rgba(4,18,59,.16);
    /* Der Bereich, in dem FREMDES Mail-HTML gerendert wird. Bleibt
       auch im Dark Mode hell - siehe Kommentar beim Dark-Block. */
    --mail-body-bg: #ffffff; --mail-body-text: #1f2937;
    /* Flaechige Buttons/Chips: eigenes Paar, das pro Theme unabhaengig
       gewaehlt werden kann (--text-primary ist im Dark Mode fast weiss). */
    --btn-primary-bg: var(--navy); --btn-primary-text: #ffffff; --btn-primary-hover: var(--navy-2);
    --btn-accent-text: #ffffff;
    --tooltip-bg: #0A1A45; --tooltip-text: #E8EEFB;
    /* KI-Knopf (Generieren): kraeftiges Blau, Weiss darauf ~6:1 */
    --btn-ai-bg: var(--blue); --btn-ai-hover: #0038AE;
    /* Zweitrangiger Knopf: weiss mit leichtem Verlauf nach unten */
    --btn-sec-top: #FFFFFF; --btn-sec-bottom: #E9F0FC;
    /* Ungelesene Zeile in Listen: ganz leicht blau hinterlegt */
    --row-unread-bg: #F7FAFF; --row-unread-hover: #EFF5FF;
    /* Assistenten-Spalte: oben leicht blau, nach unten in den Grund */
    --assist-top: #F2F6FF;
}

:root[data-theme="dark"] {
    --navy: #0A1330; --navy-2: #1B2C5C; --navy-3: #22376E;
    --blue: #5C93FF; --blue-2: #79A7FF; --blue-soft: #172A57; --sky: #9BB8FF;
    --surface: #111C3E; --soft: #1A2750; --border-2: #3A4A79;
    --tx: #EDF2FD; --tx-2: #C2CEE8; --tx-3: #8D9CC0;
    --ok: #4BD8A2; --ok-soft: #0E3326;
    --warn: #F0B450; --warn-soft: #33270D; --warn-bd: #5C4718;
    --danger-soft: #3B1A1A;
    --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 6px 18px rgba(0,0,0,.55); --sh-3: 0 16px 40px rgba(0,0,0,.65);

    --bg: #0A1330; --border: #26345C;
    --sidebar-text: rgba(226,236,250,.66);
    --success-hover: #34C08C; --danger: #FF8080; --danger-hover: #FF9A9A;
    --purple: #B7A6F5; --purple-hover: #A28EF0;
    --shadow-strong: rgba(0,0,0,.65);
    /* ABSICHTLICH hell: Der Sanitizer entfernt aus eingehenden Mails
       alle style-Attribute (Sicherheit, html_sanitizer.py). Fremdes
       Mail-HTML rechnet aber mit hellem Grund - dunkel eingefaerbt
       waere z.B. dunkelblaue Schrift auf dunklem Grund unlesbar.
       Der Mail-Inhalt bleibt deshalb eine helle Karte im dunklen
       Fenster; ihn zu invertieren waere schlechter als der Bruch. */
    --mail-body-bg: #f7f9fc; --mail-body-text: #1f2937;
    /* Kraeftiges Blau statt der fast weissen --text-primary. Weiss auf
       #2450B5 erreicht ~7.3:1 und damit WCAG AA. */
    --btn-primary-bg: #2450B5; --btn-primary-text: #ffffff; --btn-primary-hover: #2E5BC4;
    /* --accent-strong ist im Dark Mode ein HELLES Blau. Weisse Schrift
       darauf waere blass; dunkle Schrift ist hier die lesbare Wahl. */
    --btn-accent-text: #0A1330;
    --tooltip-bg: #E8EEFB; --tooltip-text: #0A1A45;
    --btn-ai-bg: #2F66DC; --btn-ai-hover: #3F7BF5;
    --btn-sec-top: #1E2C57; --btn-sec-bottom: #162246;
    --row-unread-bg: #15224A; --row-unread-hover: #1C2C5B;
    --assist-top: #152244;
    color-scheme: dark;
}

/* Formularfelder folgen dem Theme (Browser-Default waere sonst weiss). */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { background: var(--input-bg); color: var(--text-primary); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }

body { font-family: var(--f-ui); }
button, input, textarea, select { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══ Knoepfe ══════════════════════════════════════════════════════════════════
   Knopfsystem der Vorlage. Die Grundfarbe kommt aus einer Variablen, der
   Verlauf ist eine halbtransparente Ueberlagerung - so zieht der Dark Mode
   ueber die Variablen mit, ohne jeden Knopf doppelt zu definieren.
   Seiten-CSS darf deshalb nur background-COLOR setzen, nicht die
   Kurzschreibweise "background" (die wuerde den Verlauf loeschen). */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--r-m); font-family: var(--f-d); font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
/* Glanzstreifen, der beim Ueberfahren einmal durchlaeuft (reines CSS). */
.btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); opacity: 0; }
.btn:hover::after { animation: btn-sheen .55s ease-out; }
@keyframes btn-sheen { 0% { left: -60%; opacity: 1; } 100% { left: 115%; opacity: 0; } }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn--sm { height: 29px; padding: 0 10px; font-size: 12px; border-radius: var(--r-s); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--primary { color: var(--btn-primary-text); background-color: var(--btn-primary-bg); background-image: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.14) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(4,18,59,.22); }
.btn--primary:hover { background-color: var(--btn-primary-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(4,18,59,.22); }
.btn--primary:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }
.btn--ai { color: #fff; background-color: var(--btn-ai-bg); background-image: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.14) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,71,219,.24); }
.btn--ai:hover { background-color: var(--btn-ai-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,71,219,.24); }
.btn--ai:active { box-shadow: inset 0 2px 5px rgba(0,20,80,.38); }
/* Gruen der Vorlage (.btn--ok) - feste Werte, weil --ok im Dunkelmodus hell ist. */
.btn--ok { color: #fff; background-color: #16A368; background-image: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.14) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(15,124,78,.22); }
.btn--ok:hover { background-color: #0F7C4E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(15,124,78,.22); }
.btn--ok:active { box-shadow: inset 0 2px 5px rgba(0,40,20,.36); }
.btn--sec { color: var(--tx-2); background-color: var(--btn-sec-top); background-image: linear-gradient(180deg, var(--btn-sec-top) 0%, var(--btn-sec-top) 50%, var(--btn-sec-bottom) 100%); border-color: var(--border-2); box-shadow: var(--sh-1); }
.btn--sec:hover { border-color: var(--sky); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(126,160,255,.35), var(--sh-1); }
:root[data-theme="dark"] .btn--sec { color: var(--tx); }
:root[data-theme="dark"] .btn--sec:hover { color: #fff; }
.btn--sec:active { box-shadow: inset 0 2px 4px rgba(4,18,59,.12); }
.btn--ghost { background: transparent; color: var(--tx-2); }
.btn--ghost:hover { background: var(--soft); color: var(--navy); box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="dark"] .btn--ghost:hover { color: #fff; }
.btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn[disabled]::after, .btn:disabled::after { display: none; }

/* ══ Grundgeruest: Kopfleiste + Navigationsspalte (alle Seiten) ══════════════
   Ersetzt die dunkle Seitenleiste, die bisher auf fuenf Seiten Zeile fuer
   Zeile kopiert war. Seiten-CSS legt nur noch das Raster (.app-layout) fest. */

/* Kopfleiste ueber die volle Breite: Suche (nur Postfach), Design-Umschalter,
   Aktualisieren, angemeldete Praxis. Keine Aktionen - die stehen am Inhalt. */
.topbar { height: var(--topbar-h); background: var(--navy); display: flex; align-items: center; gap: 14px; padding: 0 18px; flex-shrink: 0; position: relative; z-index: 12; }
:root[data-theme="dark"] .topbar { background: #0D1938; border-bottom: 1px solid var(--border); }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Knoepfe auf dunklem Grund (Design, Aktualisieren). Die IDs/Klassen der
   Seiten bleiben; hier kommt nur die Optik dazu. */
.topbar-btn { width: 34px; height: 34px; border: none; background: transparent; border-radius: var(--r-s); cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.62); transition: background .14s, color .14s; }
.topbar-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.topbar-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.topbar-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Angemeldet als ... (ohne Menue - das gibt es in der Software nicht) */
.acct { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border-radius: 999px; min-width: 0; }
.acct .user-avatar { width: 29px; height: 29px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--blue)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--f-d); font-weight: 800; font-size: 11px; flex-shrink: 0; }
.acct .user-name { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.acct .user-role { font-family: var(--f-m); font-size: 9.5px; color: rgba(255,255,255,.55); line-height: 1.25; }

/* Navigationsspalte. min-width: 0 ist Pflicht, sobald die Spalte schmal
   gezogen werden kann (Postfach) - sonst erzwingt der laengste Ordnername
   eine Mindestbreite und der Zieh-Griff bliebe stehen. */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-width: 0; color: var(--tx-2); }
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9px; border: 3px solid var(--surface); }
.sidebar-logo { display: flex; align-items: center; justify-content: center; padding: 4px 4px 14px; flex-shrink: 0; }
.sidebar-logo-img { display: block; height: 40px; width: auto; max-width: 100%; }
/* Farbiges Logo auf heller Spalte, weisses im Dark Mode. */
.sidebar-logo .logo-dark { display: none; }
:root[data-theme="dark"] .sidebar-logo .logo-light { display: none; }
:root[data-theme="dark"] .sidebar-logo .logo-dark { display: block; }
.nav-sec { font-family: var(--f-d); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); padding: 12px 8px 6px; margin-top: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.sidebar-nav { list-style: none; flex-shrink: 0; }
.sidebar-nav li a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 8px 10px; border-radius: var(--r-s); font-size: 13.5px; font-weight: 500; color: var(--tx-2); text-decoration: none; position: relative; transition: background .14s, color .14s; }
.sidebar-nav li a svg { width: 16px; height: 16px; stroke: var(--tx-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sidebar-nav li a:hover { background: var(--soft); color: var(--tx); }
.sidebar-nav li a.active { background: var(--blue-soft); color: var(--navy); font-weight: 600; box-shadow: inset 2.5px 0 0 var(--blue); }
.sidebar-nav li a.active svg { stroke: var(--blue); }
:root[data-theme="dark"] .sidebar-nav li a.active { color: #fff; box-shadow: inset 2.5px 0 0 var(--sky); }
:root[data-theme="dark"] .sidebar-nav li a.active svg { stroke: var(--sky); }
:root[data-theme="dark"] .sidebar-nav li a:hover { color: #fff; }
/* Hinweispunkt an "Neuigkeiten" - wie die Warnmarke der Vorlage */
.nav-badge { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--warn-soft); border: 1px solid var(--warn-bd); color: var(--warn); font-family: var(--f-d); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Abmelden am Fuss der Spalte */
.logout-wrap { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.logout-wrap button { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 8px 10px; border: none; background: none; border-radius: var(--r-s); font-size: 13px; font-weight: 600; color: var(--tx-3); cursor: pointer; text-align: left; transition: background .14s, color .14s; }
.logout-wrap button:hover { background: var(--danger-soft); color: var(--danger); }

/* Knopf "Neue E-Mail" oben in der Navigation (Postfach) */
.sidebar .compose-btn { width: 100%; justify-content: center; height: 40px; margin-bottom: 4px; flex-shrink: 0; }

/* Schmale Fenster: Kopfleiste kompakter, der Kontoname weicht zuerst
   (das Kuerzel bleibt sichtbar). */
@media (max-width: 640px) {
    .topbar { padding: 0 10px; gap: 8px; }
    .acct > div:last-child { display: none; }
}