/* === styles-01.css — Teil 1/4 (urspr. Zeilen 1-931) — in Reihenfolge laden === */
/* ===== Block 1/5 (urspr. inline) ===== */
:root {
  /* Eigenes Theme-Management — verhindert, dass Android/Samsung Internet "Dunkles
     Layout" die helle App zwangsweise dunkel rendert (Toggle wechselte sonst nur das
     Icon, nicht die Farben). "only light" ist das stärkste Signal gegen Force-Dark.
     v17: Es gibt keinen Dunkelmodus mehr. Der Satz, der hier stand, verwies auf
     html[data-theme="dark"] — diese Regeln sind am 10.09.2026 entfernt worden
     (ROADMAP Punkt 14). Die App laeuft ausschliesslich hell, siehe app-03.js. */
  color-scheme: only light;
  /* === Modern Teal/Slate-Palette === */
  --primary: #194482;        /* AZE-Blau  — Hausfarbe */
  --primary-light: #2E6BB8;  /* AZE-Blau hell */
  --primary-dark: #0E2A52;   /* AZE-Blau dunkel */
  --primary-bg: #EFF4FC;     /* AZE-Blau 50 — heller Grund */
  --primary-bg-strong: #DCE8F8; /* AZE-Blau 100 — Hero-Untertitel */
  --primary-border: #BCD2EF; /* AZE-Blau 200 — Rahmen */

  --accent: #DC2626;         /* Red 600 - bestätigen-Balken etc. */
  --accent-dark: #991B1B;    /* Red 900 */
  --accent-bg: #FEF2F2;      /* Red 50 */
  --accent-text: #7F1D1D;    /* Red 950 */

  --warn: #F59E0B;           /* Amber 500 */
  --warn-dark: #D97706;      /* Amber 600 */
  --warn-bg: #FFFBEB;        /* Amber 50 */
  --warn-bg-strong: #FEF3C7; /* Amber 100 */
  --warn-border: #FDE68A;    /* Amber 200 */
  --warn-text: #854F0B;      /* Amber 800 */
  --warn-text-dark: #451A03; /* Amber 950 */

  --info: #2563EB;           /* Blue 600 */
  --info-bg: #EFF6FF;        /* Blue 50 */
  --info-bg-strong: #DBEAFE; /* Blue 100 */
  --info-border: #BFDBFE;    /* Blue 200 */
  --info-text: #1E40AF;      /* Blue 800 */
  --info-text-dark: #1E3A8A; /* Blue 900 */

  --success: #16A34A;        /* Green 600 */
  --success-bg: #F0FDF4;     /* Green 50 */
  --success-bg-strong: #DCFCE7; /* Green 100 */
  --success-text: #15803D;   /* Green 700 */

  /* Slate-Scale (neutrals) */
  --bg: #F8FAFC;             /* Slate 50 */
  --panel: #FFFFFF;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);
  --muted: var(--slate-500);
  --band: var(--slate-100);

  /* Legacy-Aliase (vorhanden, weiter genutzt) */
  --green: #D1FAE5;
  --yellow: #FEF3C7;
  --red: #FFC7CE;
  --red-text: #9C0006;
  --blue: #BDD7EE;
  --dark-blue: #8EA9DB;

  /* === Type-Scale === */
  --fs-tiny: 10px;
  --fs-small: 11px;
  --fs-body: 13px;
  --fs-md: 14px;
  --fs-h3: 16px;
  --fs-h2: 18px;
  --fs-h1: 20px;
  --fs-display: 24px;

  /* === Spacing-Scale (4/8 grid) === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* === Border-Radius === */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* === Animation === */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Layout === */
  --sidebar-width: 220px;
}







/* Slate-50 / Slate-100 (#F8FAFC, #F1F5F9, #FAFAF9) Hintergründe → dunkler Slate-Ton */
/* Gelbe Sicherungsaufsicht-Boxen (#FFFBEB, #FEF3C7, #FFF8E1) — Text dunkler beibehalten, aber Bg etwas anpassen */
/* Grüne Erfolgs-Boxen (Urlaub/verschickt) → tieferes Grün */
/* Rosa/rote Krank-Boxen */
/* Helle Blau-Boxen (Frei, Info-Card, Adresse) */


/* Slate-Borders → dunkle Border */
/* Standard-Texte mit hellem Slate (#0F172A, #1F2937, #334155) → invertiert */
/* Muted text */
/* Inputs — Hintergrund und Border */
/* Hero-Selectoren bleiben transparenter Glas-Look */
/* Dropdown-Optionen im Hero — weiß bleiben für Lesbarkeit */













/* Inputs in der Lohn-Tabelle (Quell- + Calc-Felder) */


/* Lohnarten-Tabelle (zweite Tabelle unter der Tag-Tabelle) — heller Header umstellen */

/* Bemerkung-Textbox (contenteditable) */
/* Urlaubskonto-Inputs */
/* Document-Sheet-Container (Hauptcontainer der Leistungsnachweis-Seite) */
/* Gesamt-Lohn-Footer — dicke schwarze Linie auf hellen Slate umstellen */

/* === Spezifische Schrift- und Hintergrund-Konflikte in den Lohn-Tabellen === */
/* Override-gelbes Background bei Lohnart-Inputs (#FFE082) → tiefes Bernstein mit hellem Gelb-Text */
/* Gold-Gesamt-Row (#FFD75A) → tiefes Gold mit hellem Gelb-Text */
/* Lohnarten-Tabelle Header (#EEE) → dunkler Slate */
/* Korrektur-Rows (#FFF8E1) sind schon abgedeckt durch früheren Override für #FEF3C7 etc. — sicherheitshalber ergänzen */
/* === Inline-Color-Werte für farbige Lohn-Spalten und Status-Labels === */





/* Bernstein-Border in Override-Inputs (#BA7517) → hellbernstein */
/* Dashed Borders in Lohnarten-Inputs (#BBB) → mittlerer Slate */

/* === Klassen-basierte Status-Farben für Dark Mode (Zertifikate, Chips, MA-Entries, Row-Status) === */
/* Zertifikate: Grün (gültig) / Gelb (läuft ab) / Rot (abgelaufen) — komplett invertieren */

/* Code-Chips */

/* Mitarbeiter-Entry Status (in der Sidebar-Liste) */
/* Side-Legend (gleiches Color-Schema) */

/* Zeilen-Status (verschickt / unbenannt / kombiniert) in den Tabellen */
/* Monatsmatrix-Zellen (Wochenende / Feiertag / Name-Spalte) */
/* Drop-Target Highlight (für Drag&Drop Mitarbeiter auf Schicht) */
/* Baustellen-Hover (.baustellen-liste a:hover bg=primary, color=#fff — bleibt OK in Dark Mode) */


/* Login-Brand-Logo bleibt sichtbar (AZE-Logo) — wird im .auth-brand bereits dunkler */
/* Datums-Zelle der Tag-Tabelle (border-left mit hartem Grün/Rot/Bernstein) bleibt — der Text in der Zelle hat color:#0F172A bereits abgedeckt */
/* Verkettungs-Symbol bei Schichten-Tabelle in Gruppen-Folgezeile — color: gFarbe — nicht überschreiben damit Gruppen-Farbe sichtbar bleibt */




/* Block-Karten im Cockpit-Grid */

/* MA-Tabelle im Block */



/* MA-Status-Sidebar (Tabs + Suche) */

/* Tab-Wechsel (Schichten/Einweisungen + Cockpit/Einweisungen) */

/* Lohnart-Cards (Verwaltungs-Tab) */
.lohnart-card { background: var(--card, #fff); border: 1px solid var(--border, #E2E8F0); border-radius: 8px; overflow: hidden; }
.lohnart-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; }
.lohnart-head:hover { background: var(--slate-100, #F8FAFC); }
.lohnart-head code { background: var(--slate-100, #F1F5F9); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--text-muted, #64748B); }
.lohnart-btn { padding: 5px 10px; border: 1px solid var(--border, #CBD5E1); border-radius: 4px; background: var(--card, #fff); color: var(--text); font-size: 11px; cursor: pointer; white-space: nowrap; }
.lohnart-btn:hover { background: var(--slate-100, #F1F5F9); }
.lohnart-btn.primary { background: var(--primary, #194482); color: #fff; border-color: var(--primary, #194482); font-weight: 600; }
.lohnart-btn.primary:hover { opacity: 0.9; }
.lohnart-hist { background: var(--slate-100, #F8FAFC); border-top: 1px solid var(--border, #E2E8F0); padding: 8px 16px; }
.lohnart-hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lohnart-hist-table th { text-align: left; padding: 6px 10px; color: var(--muted, #64748B); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.lohnart-hist-table td { padding: 6px 10px; border-top: 1px solid var(--border, #F1F5F9); vertical-align: top; }
.lohnart-btn-del { background: #FEE2E2; border: 1px solid #FCA5A5; color: #B91C1C; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.lohnart-btn-del:hover { background: #FECACA; }


/* Einweisungs-Toolbar + Tabelle */

/* Cockpit Block-Aktionen (Buttons oben im Block) */

/* Edit-Mode: Speichern/Abbrechen-Bar (war hartcodiertes Hellgelb #FEF3C7) */

/* Edit-Mode: Inputs / Selects / Textareas im Block (waren mit hartcodierten Light-Mode-Farben) */
/* Datalist + Picker-Popover in Edit-Mode */

* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
/* App Shell — vertikale Sidebar links, Topbar oben rechts, Main darunter */
body { margin: 0; }
.app-shell { display: flex; min-height: 100vh; }