/* ============================================================
   MARKE: DIE EVENTMATRIX GMBH
   ============================================================

   Farben und Schrift der Eventmatrix-Website (Repo eventmatrix_Website,
   src/styles/global.css) für die Planungssoftware.

   WIE DAS FUNKTIONIERT: app.css ist vollständig token-basiert – jede Farbe
   der Oberfläche kommt aus einer Handvoll CSS-Variablen unter `:root,
   [data-theme="light"]` bzw. `[data-theme="dark"]`. Diese Datei definiert
   dieselben Variablen noch einmal mit den Eventmatrix-Werten. Weil sie NACH
   app.css eingebunden wird, gewinnt sie. Keine einzige Komponentenregel
   musste dafür angefasst werden.

   EINGEBUNDEN wird sie NUR in der Eventmatrix-Auslieferung – das erledigt
   deploy/brand-eventmatrix.sh, das die <link>-Zeile in die index.html
   schreibt. Bei M&M existiert die Datei zwar im Build, ist aber nicht
   verlinkt und damit wirkungslos.

   Beide Modi sind ausgestaltet: Der Auftritt der Website ist dunkel, aber
   eine Planungssoftware wird acht Stunden am Tag benutzt – der Hellmodus
   ist hier der Normalfall und bekommt dieselbe Sorgfalt.
   ============================================================ */

/* ─── Schrift: Poppins, lokal ausgeliefert ────────────────────────────────
   Lokal statt von Google – wie schon Bootstrap und die Icons, damit die App
   ohne Drittserver auskommt (DSGVO) und offline/als PWA funktioniert.
   Nur der Latin-Subset in vier Schnitten, zusammen rund 32 KB. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}

/* ─── Markenfarben ────────────────────────────────────────────────────────
   Werte aus eventmatrix_Website/src/styles/global.css. */
:root {
    --em-accent: #ff6a00;        /* CI-Orange */
    --em-accent-2: #ff8a33;      /* heller, für Hover */
    --em-accent-dark: #d95a00;   /* dunkler, für Ränder und aktive Zustände */
    --em-slate: #1a1e25;         /* Basis des dunklen Auftritts */
    --em-slate-2: #2c323d;       /* Karten/Oberflächen */
    --em-slate-3: #353c48;       /* Hover */
    --em-text-light: #eaedf1;
    --em-text-muted-dark: #b3b9c2;
    --em-border-dark: #3d4653;
}

/* ─── HELLMODUS ───────────────────────────────────────────────────────────
   Kein reines Grau: Die Neutraltöne sind leicht ins Schiefergrau der Marke
   gezogen, damit Weiß und Orange nicht beziehungslos nebeneinanderstehen.
   Sidebar und Kartenköpfe bleiben dunkel – wie der Header der Website. */
:root,
[data-theme="light"] {
    --bg-body: #f4f5f7;
    --bg-content: #ffffff;
    --bg-card: #ffffff;
    --bg-card-header: #1a1e25;
    --bg-input: #ffffff;
    --bg-table-header: #2c323d;
    --bg-table-row-alt: #f6f7f9;
    --bg-toolbar: #ffffff;
    --bg-sidebar: #1a1e25;
    --bg-mobile-topbar: #1a1e25;
    --text-primary: #1a1e25;
    --text-secondary: #5c6470;
    --text-muted: #8e949b;
    --text-on-dark: #ffffff;
    --border-color: #dde0e5;
    --border-color-light: #edeff2;
    --shadow-sm: 0 2px 4px rgba(26, 30, 37, 0.06);
    --shadow-md: 0 10px 25px rgba(26, 30, 37, 0.12);
    --table-bg: #ffffff;
    --table-hover-bg: #f6f7f9;
    --badge-bg-light: #f2f4f6;
    --sticky-col-bg: #fcfcfd;
    --login-bg: #f4f5f7;
    --input-border: #cfd4db;
    /* Der Verlauf der M&M-Sidebar (Blau nach Violett) ist deren Marke, nicht
       unsere. Die Eventmatrix-Website hat einen flachen dunklen Header; hier
       nur eine leichte Tiefe von Schiefer nach fast Schwarz. Wer es ganz flach
       will: "none" – dann greift --bg-sidebar. */
    --sidebar-gradient: linear-gradient(180deg, #232830 0%, #1a1e25 60%, #14171c 100%);
}

/* ─── DUNKELMODUS ─────────────────────────────────────────────────────────
   Hier gilt die Website eins zu eins: #1a1e25 als Grund, #2c323d als
   Oberfläche, #3d4653 als Kante. */
[data-theme="dark"] {
    --bg-body: #14171c;
    --bg-content: #1a1e25;
    --bg-card: #2c323d;
    --bg-card-header: #353c48;
    --bg-input: #232830;
    --bg-table-header: #2c323d;
    --bg-table-row-alt: #21262e;
    --bg-toolbar: #1a1e25;
    --bg-sidebar: #14171c;
    --bg-mobile-topbar: #14171c;
    --text-primary: #eaedf1;
    --text-secondary: #b3b9c2;
    --text-muted: #8e949b;
    --text-on-dark: #eaedf1;
    --border-color: #3d4653;
    --border-color-light: #2c323d;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.38);
    --table-bg: #1a1e25;
    --table-hover-bg: #2c323d;
    --badge-bg-light: #353c48;
    --sticky-col-bg: #21262e;
    --sidebar-gradient: linear-gradient(180deg, #1f242b 0%, #14171c 70%);
    --login-bg: #14171c;
    --input-border: #4a5462;
}

/* ─── Akzentfarbe: Bootstraps Blau wird Orange ────────────────────────────
   Die Oberfläche benutzt durchgehend die Bootstrap-Klassen (btn-primary,
   text-primary, border-primary …). Statt sie einzeln umzuschreiben, werden
   Bootstraps eigene Variablen umgebogen – das erfasst alles auf einmal.

   Der Text auf Orange ist WEISS, nicht Bootstraps Standard: #ff6a00 ist zu
   dunkel für schwarze Schrift und zu hell für ein sattes Weiß-auf-Blau, das
   Kontrastverhältnis liegt bei ~3,4:1 – ausreichend für Bedienelemente ab
   der Größe eines Knopfes, nicht für Fließtext. Deshalb wird Orange auch
   NICHT für Text auf hellem Grund verwendet; dort steht die dunklere
   Variante. */
:root {
    --bs-primary: #ff6a00;
    --bs-primary-rgb: 255, 106, 0;
    --bs-link-color: var(--em-accent-dark);
    --bs-link-color-rgb: 217, 90, 0;
    --bs-link-hover-color: #b34a00;
    --bs-focus-ring-color: rgba(255, 106, 0, 0.25);
}

[data-theme="dark"] {
    /* Auf dunklem Grund trägt das helle Orange – dort ist der Kontrast hoch
       genug, und die dunkle Variante würde absaufen. */
    --bs-link-color: var(--em-accent-2);
    --bs-link-color-rgb: 255, 138, 51;
    --bs-link-hover-color: #ffa563;
}

.btn-primary {
    --bs-btn-bg: var(--em-accent);
    --bs-btn-border-color: var(--em-accent);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--em-accent-2);
    --bs-btn-hover-border-color: var(--em-accent-2);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--em-accent-dark);
    --bs-btn-active-border-color: var(--em-accent-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--em-accent);
    --bs-btn-disabled-border-color: var(--em-accent);
    --bs-btn-disabled-color: #ffffff;
}

.btn-outline-primary {
    --bs-btn-color: var(--em-accent-dark);
    --bs-btn-border-color: var(--em-accent);
    --bs-btn-hover-bg: var(--em-accent);
    --bs-btn-hover-border-color: var(--em-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--em-accent-dark);
    --bs-btn-active-border-color: var(--em-accent-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: var(--em-accent-dark);
    --bs-btn-disabled-border-color: var(--em-accent);
}

[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--em-accent-2);
    --bs-btn-disabled-color: var(--em-accent-2);
}

/* WICHTIG: bg-primary NICHT mit einer festen Farbe überschreiben.
   Bootstrap rechnet
       .bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) }
   und die Hilfsklassen bg-opacity-10/25/50 setzen nur --bs-bg-opacity.
   Ein `background-color: var(--em-accent) !important` hebelt genau das aus:
   Aus der 10-%-Tönung, mit der die App Bearbeiten-Blöcke hinterlegt
   (Adressen, Maßnahmen, Personalplanung …), wird dann VOLLES Orange – ein
   leuchtender Kasten, in dem die Beschriftungen kaum noch lesbar sind.
   Es genügt --bs-primary-rgb oben; damit stimmen Farbe UND Deckkraft.
   Dasselbe gilt für .text-primary: Statt die Farbe flach zu setzen, wird
   nur der Farbwert lokal umgebogen – so bleibt text-opacity-* funktionsfähig
   und der Text bekommt trotzdem das dunklere, lesbare Orange. */
.text-primary {
    --bs-primary-rgb: 217, 90, 0;   /* --em-accent-dark */
}
[data-theme="dark"] .text-primary {
    --bs-primary-rgb: 255, 138, 51; /* --em-accent-2 */
}

/* border-primary hat in diesem Bootstrap-Build KEINE Opacity-Variable
   (fester Hex-Wert), hier ist das Überschreiben also richtig. */
.border-primary {
    border-color: var(--em-accent) !important;
}
/* KEIN `.badge.bg-primary { color: #fff !important }`: Bootstrap gibt jedem
   .badge ohnehin weisse Schrift, die Regel waere also im Normalfall
   ueberfluessig – und im Sonderfall schaedlich. In LiveDashboard steht
   `badge bg-primary bg-opacity-10 text-primary`: ein blasser Chip mit farbiger
   Schrift. Ein !important-Weiss mit hoeherer Spezifitaet gewaenne dort gegen
   text-primary, und die Zahl waere weiss auf fast weissem Grund. */

/* Formularfelder: der Fokusring folgt der Marke statt Bootstrap-Blau. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--em-accent-2);
    box-shadow: 0 0 0 .25rem rgba(255, 106, 0, .25);
}
.form-check-input:checked {
    background-color: var(--em-accent);
    border-color: var(--em-accent);
}

/* Aktiver Menüpunkt in der Sidebar. */
.nav-link.active {
    border-left-color: var(--em-accent);
}

/* ─── Schrift anwenden ────────────────────────────────────────────────────
   Fallback bleibt der System-Stack: Lädt Poppins nicht, sieht die App aus
   wie bisher statt wie Times New Roman. */
body,
.btn,
.form-control,
.form-select,
input,
textarea,
select {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
}

/* Poppins läuft optisch etwas größer und runder als der System-Stack.
   Überschriften vertragen daher etwas engere Laufweite. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.01em;
}

/* Zahlenkolonnen bleiben beim tabellarischen Schnitt – Poppins hat
   proportionale Ziffern, und in Mengen- und Betragsspalten springt das. */
td, th,
.num, .text-end {
    font-variant-numeric: tabular-nums;
}