/* shared_ui.css - gemeinsame, wiederverwendbare UI-Komponenten (Phase 8,
   erweitert um Icon-Set/Schatten/Uebergaenge/Toasts). Bewusst mit
   "ui-"-Praefix bei eigenen Klassen, damit nichts mit bestehenden
   Seiten-eigenen Klassen (z. B. .status-badge, .primary, .empty)
   kollidiert - so kann jede Seite schrittweise und risikofrei umgestellt
   werden, statt alles auf einmal anfassen zu muessen. */

/* @import MUSS laut CSS-Spezifikation ganz am Dateianfang stehen (nur
   Kommentare duerfen davor stehen) - sonst wird die Regel vom Browser
   stillschweigend ignoriert. Version bewusst festgepinnt (nicht "latest"),
   damit ein Upstream-Update nicht unbemerkt etwas veraendert. Ersetzt
   schrittweise die bisherigen Emoji-Symbole (✓ ⚠ ✕ ← → usw.) - Aufruf im
   HTML: <i class="ti ti-trash"></i>. */
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.46.0/dist/tabler-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ---- Typografie: jede Seite setzt body{font-family:...} noch selbst
   inline (aeltere Struktur, vor shared_ui.css entstanden) - deshalb hier
   mit !important ueberschrieben statt 49 Einzeldateien anzufassen. */
body{font-family:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;}
h1,h2,h3{font-family:"Playfair Display",serif;}

/* ---- Grundfarbe fuer Links ohne eigene Klasse: im gesamten System gab es
   bisher KEINE globale a{color}-Regel - ein einfacher, unstilisierter Link
   (z. B. ein Dateiname zum Herunterladen) fiel dadurch auf die blaue
   Browser-Standardfarbe zurueck, die weder zum hellen noch zum dunklen
   Farbschema passt und im Dark Mode besonders schlecht lesbar ist.
   Niedrige Spezifitaet (Element-Selektor) - ueberschreibt daher nichts,
   das bereits eine eigene Klasse/Farbe hat (z. B. .new-btn, .edit-btn,
   Navigationslinks, .file-link). */
a{color:var(--ink);}
a:hover{color:var(--amber-dark);}

.ui-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px;white-space:nowrap;}
.ui-badge-neutral{background:#eceae4;color:#48484c;}
.ui-badge-good{background:#e2f2e8;color:#2e7d4f;}
.ui-badge-warn{background:#fff2dd;color:#b7791f;}
.ui-badge-danger{background:#fbe4e1;color:#b8402f;}

.ui-btn-primary{background:#1c1c1e;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;}
.ui-btn-primary:hover{background:#000;}
.ui-btn-secondary{background:none;border:1px solid #dceee4;color:#48484c;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;}
.ui-btn-secondary:hover{border-color:#c7c5bd;}
/* Riskante/seltene Aktionen (Loeschen etc.) bewusst zurueckhaltender als die
   Hauptaktion: nur Umriss statt Flaeche, damit sie nicht gleichwertig wirken. */
.ui-btn-danger{background:none;border:1px solid #b8402f;color:#b8402f;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;}
.ui-btn-danger:hover{background:#fbe4e1;}

.ui-empty{color:#8a8a8e;font-size:13.5px;padding:20px;text-align:center;}

.ui-msg{font-size:13px;border-radius:7px;padding:10px 12px;margin-bottom:16px;}
.ui-msg-ok{background:#eaf4ee;color:#2e7d4f;}
.ui-msg-err{background:#fbeae7;color:#b8402f;}

/* ---- Dark Mode: zentrale Variablen-Umdefinition. Jede Seite definiert
   dieselben 9 Variablennamen (--ink, --paper, --card usw.) in ihrem eigenen
   :root-Block - da diese Definition NACH shared_ui.css geladen wird, reicht
   eine hoehere Selektor-Spezifitaet (html[data-theme] statt :root) aus, um
   trotzdem zu gewinnen, ganz ohne !important. Deckt automatisch alles ab,
   was bereits ueber var(--...) arbeitet (Grossteil jeder Seite: Body-
   Hintergrund, Fliesstext, Rahmen, Status-Farben, Akzentfarbe).
   Bekannte Luecke: einzelne Seiten haben .card/th/footer teilweise fest auf
   #fff/#fafaf8/#9c9ca0 codiert statt die Variable zu nutzen - dafuer gibt es
   unten gezielte !important-Ausnahmen fuer die haeufigsten Faelle. Seltene
   Einzelfaelle (z. B. .stat-box, .warnung auf einzelnen Seiten) koennen in
   einer spaeteren Rollout-Runde ergaenzt werden. */
html[data-theme="dark"]{
  --ink:#f4f9f6; --ink-soft:#b8b6ae; --amber:#3fae72; --amber-dark:#5fcf94;
  --steel:#8a97a1; --paper:#1c1c1e; --card:#26262a; --line:#3a3a3d;
  --good:#4caf7d; --danger:#e2695a;
  --highlight:#3d2f1a; --highlight-strong:#4a3313; --recessed:#202023;
  --danger-bg:#4a241d; --danger-bg-strong:#5a2a20; --danger-bg-soft:#332220;
  --neutral-bg:#303033; --purple-bg:#352a4a;
  --success-bg:#1e3d2c; --success-bg-strong:#234a34; --info-bg:#1c3049;
}
html[data-theme="dark"] .card{background:var(--card) !important;border-color:var(--line) !important;}
html[data-theme="dark"] footer{color:var(--ink-soft) !important;}
html[data-theme="dark"] table.ui-table-responsive tr{background:var(--card) !important;}
html[data-theme="dark"] table.ui-table-responsive tr.warn-row{background:var(--highlight) !important;}

/* ---- Umschalter: Symbol-Button, wird von nav.php eingebunden. Beachtet
   eine gespeicherte Wahl (localStorage), sonst die Systemeinstellung. */
.ui-theme-toggle{background:none;border:1px solid var(--line, #dceee4);color:inherit;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;}
.ui-theme-toggle:hover{background:rgba(128,128,128,.12);}

.ui-required{color:#b8402f;margin-left:2px;}

/* ---- Statusfarben-Ueberarbeitung: Punkt-Indikator statt vollflaechigem
   Badge-Hintergrund. Rein CSS-basiert - ::before mit background:currentColor
   uebernimmt automatisch die Farbe, die jede einzelne .status-badge.XYZ /
   .badge.XYZ / .ui-badge-XYZ Modifikator-Klasse bereits per "color:" setzt.
   Keine einzelne Seite muss dafuer angefasst werden. Bewusst NICHT auf
   .checklist-status (Icon-Kreise mit Haken/Warndreieck), .einsatz-pill
   (kompakte Kalender-Chips, wo der volle Hintergrund im knappen Platz noch
   gebraucht wird) und .phase-badge (einfarbige Opportunity-Phase ohne
   Statuscodierung) angewendet, da diese keine vergleichbare
   Farbcodierungs-Funktion haben. */
.status-badge,
.badge{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  font-weight:600 !important;
}
.status-badge::before,
.badge::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.ui-badge{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  font-weight:600 !important;
}
.ui-badge::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.ui-badge-neutral{color:#48484c;}
.ui-badge-good{color:#2e7d4f;}
.ui-badge-warn{color:#b7791f;}
.ui-badge-danger{color:#b8402f;}
html[data-theme="dark"] .ui-badge-neutral{color:#c7c5bd;}
html[data-theme="dark"] .ui-badge-good{color:#7fd4a5;}
html[data-theme="dark"] .ui-badge-warn{color:#f0b86e;}
html[data-theme="dark"] .ui-badge-danger{color:#f0958a;}

/* ---- Dark-Mode-Fix: button.primary und .aufgabe-aktion (Dashboard-
   Karten-Buttons "Prüfen"/"Öffnen") nutzen auf vielen Seiten
   background:var(--ink) mit fest weisser Schrift. --ink kippt im Dark
   Mode bewusst auf hell (dient dort auch als normale Textfarbe) - der
   Button wurde dadurch hell mit kaum lesbarer weisser Schrift. Fix: im
   Dark Mode auf denselben Gold-Akzent wie .new-btn umstellen. */
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .aufgabe-aktion{
  background:var(--amber) !important;
  color:#1c1c1e !important;
}
html[data-theme="dark"] button.primary:hover{
  background:#2f8a5c !important;
}

/* ---- Dark-Mode-Fix: KEINE einzige Eingabefeld-Definition im System setzt
   eine explizite Textfarbe (mehrere setzen nicht mal einen Hintergrund) -
   Formularfelder nutzten dadurch die Browser-Standardschrift (praktisch
   schwarz) auf teils dunklem Grund: kaum lesbar. Zentral fuer alle
   Eingabefeld-Typen gesetzt, damit keine einzelne Seite angefasst werden
   muss. */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--card) !important;
  color:var(--ink) !important;
}

/* ---- Weiche Schatten statt reiner 1px-Rahmen, dezente Uebergaenge bei
   Hover/Fokus. !important gezielt nur fuer diese rein additiven,
   kosmetischen Eigenschaften - so greifen sie trotz der seiteneigenen
   .card-Definition, die textlich NACH shared_ui.css eingebunden wird, ohne
   dass jede Seite einzeln angefasst werden muss. */
.card{box-shadow:0 1px 3px rgba(28,28,30,.06), 0 1px 2px rgba(28,28,30,.04) !important;transition:box-shadow .15s ease, transform .15s ease !important;}
a,button,input,select,textarea,.ui-btn-primary,.ui-btn-secondary,.ui-btn-danger,.navgrp-btn,.status-badge,.ui-badge{transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;}

/* ---- Toast-Meldungen statt fester Banner: eine bestehende .msg/.ui-msg
   Meldung wird per JS (shared_ui.js) zu einer unten rechts einblendenden,
   automatisch verschwindenden Karte umgewandelt - die PHP-Seiten selbst
   aendern sich nicht, nur die Praesentation. */
.ui-toast{position:fixed;bottom:20px;right:20px;max-width:360px;z-index:1000;box-shadow:0 4px 16px rgba(28,28,30,.14), 0 1px 3px rgba(28,28,30,.08);opacity:0;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease;}
.ui-toast.ui-toast-in{opacity:1;transform:translateY(0);}
.ui-toast.ui-toast-out{opacity:0;transform:translateY(12px);}
@media (max-width:480px){.ui-toast{left:16px;right:16px;max-width:none;bottom:16px;}}

/* Eigene Komponenten (Badges, Meldungen) nutzen fest codierte Hex-Werte statt
   Variablen (bewusst, damit sie unabhaengig vom :root jeder einzelnen Seite
   funktionieren) - brauchen daher eigene Dark-Mode-Gegenstuecke. */
html[data-theme="dark"] .ui-badge-neutral{background:#3a3a3d;color:#c7c5bd;}
html[data-theme="dark"] .ui-badge-good{background:#1e3d2c;color:#7fd4a5;}
html[data-theme="dark"] .ui-badge-warn{background:#4a3313;color:#f0b86e;}
html[data-theme="dark"] .ui-badge-danger{background:#4a241d;color:#f0958a;}
html[data-theme="dark"] .ui-msg-ok{background:#1e3d2c;color:#7fd4a5;}
html[data-theme="dark"] .ui-msg-err{background:#4a241d;color:#f0958a;}
html[data-theme="dark"] .ui-btn-secondary{border-color:#3a3a3d;color:#c7c5bd;}
html[data-theme="dark"] .ui-empty{color:#8a8a8e;}

.ui-search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.ui-search-row input[type="search"],.ui-search-row input[type="text"]{flex:1;min-width:180px;padding:9px 12px;border:1px solid #dceee4;border-radius:8px;font-size:13.5px;}
.ui-result-count{font-size:12.5px;color:#8a8a8e;margin-bottom:10px;}

/* Mobile Tabellendarstellung: ab 700px auf ein Karten-Layout wechseln, statt
   horizontal zu scrollen - jede Zelle zeigt ihre Spaltenbezeichnung als
   Label (aus data-label), die Kopfzeile wird ausgeblendet. */
@media (max-width:700px){
  table.ui-table-responsive thead{display:none;}
  table.ui-table-responsive, table.ui-table-responsive tbody, table.ui-table-responsive tr, table.ui-table-responsive td{display:block;width:100%;}
  table.ui-table-responsive tr{border:1px solid #dceee4;border-radius:10px;padding:10px 14px;margin-bottom:10px;background:#fff;}
  table.ui-table-responsive td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border:none;text-align:right;}
  table.ui-table-responsive td::before{content:attr(data-label);font-weight:600;color:#8a8a8e;font-size:11.5px;text-align:left;}
}