/* 
  ==================== CSS GRUNDLAGEN ====================
  CSS (Cascading Style Sheets) definiert das Aussehen der HTML-Elemente
  
  Syntax: selektor { eigenschaft: wert; }
  Beispiel: h1 { color: red; }
  
  Kommentare in CSS werden mit /* und */ geschrieben
*/

/* ==================== CSS VARIABLEN ====================
   :root definiert globale CSS-Variablen
   Vorteil: Änderungen an einer Stelle wirken sich überall aus
   Verwendung: var(--variablenname)
*/
:root {
    /* Farbschema: Orange/Weiß wie gewünscht */
    --primary-color: #FF8C42;        /* Hauptfarbe Orange */
    --primary-dark: #E67A2E;         /* Dunkleres Orange für Hover-Effekte */
    --primary-light: #FFB380;        /* Helleres Orange für Hintergründe */
    --secondary-color: #2C3E50;      /* Dunkelgrau für Texte */
    --accent-color: #FF6B35;         /* Akzentfarbe (kräftiges Orange) */
    
    /* Neutrale Farben */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --medium-gray: #E9ECEF;
    --dark-gray: #495057;
    --text-dark: #212529;
    
    /* Status-Farben */
    --success-color: #28A745;        /* Grün für Erfolg */
    --danger-color: #DC3545;         /* Rot für Fehler/Löschen */
    --warning-color: #FFC107;        /* Gelb für Warnungen */
    --info-color: #17A2B8;           /* Blau für Info */
    
    /* Abstände (Spacing System) */
    /* Konsistentes Spacing verhindert chaotisches Design */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* Schatten für Tiefe */
    /* Schatten lassen Elemente "schweben" und geben der Seite Tiefe */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);
    
    /* Übergänge (Transitions) */
    /* Machen Animationen/Änderungen smooth */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Eckenradius (Border Radius) */
    /* Abgerundete Ecken wirken moderner und freundlicher */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;      /* Komplett rund */
}

/* ==================== GLOBALE RESET & BASIS-STYLES ====================
   * = Universal-Selektor: betrifft ALLE Elemente
*/
* {
    /* Box-Sizing: Border-Box 
       Macht Größenberechnungen einfacher
       Padding und Border werden IN die Breite eingerechnet, nicht zusätzlich
    */
    box-sizing: border-box;
    
    /* Entfernt Standard-Abstände aller Browser */
    margin: 0;
    padding: 0;
}

/* HTML und Body: Grundeinstellungen */
html, body {
    /* Volle Höhe für Flexbox-Layout später */
    height: 100%;
    
    /* Schriftfamilie: Fallback-Kette
       Erst versucht der Browser Segoe UI, dann Roboto, etc.
       sans-serif am Ende = irgendeine serifenlose Schrift
    */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Basis-Schriftgröße: 16px ist Standard und gut lesbar */
    font-size: 16px;
    
    /* Zeilenhöhe: 1.6 = 160% der Schriftgröße
       Wichtig für Lesbarkeit - zu eng ist anstrengend
    */
    line-height: 1.6;
    
    /* Textfarbe */
    color: var(--text-dark);
    
    /* Hintergrundfarbe */
    background-color: var(--light-gray);
    
    /* Smooth Scrolling für Anker-Links */
    scroll-behavior: smooth;
    
    /* Verhindert horizontales Scrollen */
    overflow-x: hidden;
}

/* Verbessert Darstellung von Bildern */
img {
    /* max-width: 100% verhindert Überlauf aus Container */
    max-width: 100%;
    
    /* height: auto behält Seitenverhältnis bei */
    height: auto;
    
    /* display: block entfernt unteren Whitespace bei Bildern */
    display: block;
}

/* Links ohne Unterstreichung */
a {
    text-decoration: none;
    color: inherit;  /* Erbt Farbe vom Elternelement */
    transition: color var(--transition-fast);
}

/* Hover-Effekt für Links */
a:hover {
    color: var(--primary-color);
}

/* ==================== LADEBILDSCHIRM ====================
   Wird angezeigt während Seite lädt
*/
.loading-screen {
    /* Position: fixed bleibt beim Scrollen fixiert */
    position: fixed;
    
    /* top, left, width, height: 100% = vollständige Abdeckung */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Hintergrundfarbe mit Transparenz (rgba)
       rgba(0,0,0,0.9) = fast schwarzer Hintergrund, 90% undurchsichtig
    */
    background: rgba(0, 0, 0, 0.9);
    
    /* Flexbox für Zentrierung */
    /* Flexbox ist das moderne Layout-System */
    display: flex;
    
    /* flex-direction: column = Elemente untereinander */
    flex-direction: column;
    
    /* justify-content: center = vertikal zentriert */
    justify-content: center;
    
    /* align-items: center = horizontal zentriert */
    align-items: center;
    
    /* z-index: Stapelreihenfolge
       Höhere Werte liegen "oben"
       9999 = sehr weit oben, überdeckt fast alles
    */
    z-index: 9999;
}

/* Lade-Spinner Animation */
.spinner {
    /* Größe des Spinners */
    width: 60px;
    height: 60px;
    
    /* Border erstellt einen Ring */
    border: 5px solid var(--medium-gray);
    
    /* border-top ist Orange - das dreht sich */
    border-top: 5px solid var(--primary-color);
    
    /* border-radius: 50% macht es rund */
    border-radius: var(--radius-full);
    
    /* Animation: spin (definiert unten) über 1s, endlos */
    animation: spin 1s linear infinite;
}

/* @keyframes definiert eine Animation
   0% = Start, 100% = Ende
*/
@keyframes spin {
    /* Am Anfang: keine Drehung */
    0% {
        transform: rotate(0deg);
    }
    /* Am Ende: 360° gedreht (volle Drehung) */
    100% {
        transform: rotate(360deg);
    }
}

/* Text unter dem Spinner */
.loading-screen p {
    color: var(--white);
    margin-top: var(--spacing-lg);
    font-size: 1.2rem;
}

/* ==================== LOGIN-BEREICH ====================
   Container für Login-Maske
*/
.login-container {
    /* Minimum-Höhe = volle Viewport-Höhe */
    min-height: 100vh;
    
    /* Flexbox-Zentrierung */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Gradient-Hintergrund für visuelles Interesse
       linear-gradient: Fließender Übergang zwischen Farben
       135deg = Winkel der Richtung (diagonal)
    */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    
    /* Padding für mobile Geräte (nicht am Rand kleben) */
    padding: var(--spacing-md);
}

/* Login-Box */
.login-box {
    /* Hintergrund weiß */
    background: var(--white);
    
    /* Padding: Innenabstand */
    padding: var(--spacing-2xl);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-xl);
    
    /* Schatten für Tiefe */
    box-shadow: var(--shadow-xl);
    
    /* Maximale Breite begrenzt auf 450px
       Verhindert zu breite Box auf großen Bildschirmen
    */
    max-width: 450px;
    
    /* width: 100% nutzt verfügbaren Platz (bis max-width) */
    width: 100%;
    
    /* Slide-in Animation beim Laden */
    animation: slideIn 0.6s ease-out;
}

/* Slide-In Animation für Login-Box */
@keyframes slideIn {
    /* Start: 30px nach unten verschoben, unsichtbar */
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    /* Ende: Normale Position, voll sichtbar */
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Login Header (Logo-Bereich) */
.login-header {
    /* text-align: center zentriert Text */
    text-align: center;
    
    /* margin-bottom: Abstand nach unten */
    margin-bottom: var(--spacing-xl);
}

/* Icon in Header */
.login-header i {
    /* font-size: 3rem = 48px (groß!) */
    font-size: 3rem;
    
    /* Farbe Orange */
    color: var(--primary-color);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-sm);
    
    /* display: block macht Icon zum Block-Element
       Dadurch nimmt es eine eigene Zeile ein
    */
    display: block;
}

/* Haupt-Überschrift */
.login-header h1 {
    color: var(--secondary-color);
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
    
    /* font-weight: 700 = fett */
    font-weight: 700;
}

/* Tagline/Untertitel */
.tagline {
    color: var(--dark-gray);
    font-size: 0.95rem;
}

/* ==================== FORMULARE ====================
   Globale Formular-Styles
*/
.login-form,
.entry-form,
.user-form,
.report-form {
    /* Abstand nach unten für Separation */
    margin-bottom: var(--spacing-lg);
}

/* Form-Group: Container für Label + Input */
.form-group {
    /* margin-bottom: Abstand zwischen Formular-Feldern */
    margin-bottom: var(--spacing-lg);
}

/* Form-Row: Mehrere Felder nebeneinander */
.form-row {
    /* display: grid = Grid-Layout
       Grid ist perfekt für gleichmäßige Spalten
    */
    display: grid;
    
    /* grid-template-columns: 2 Spalten, jeweils gleich breit (1fr)
       fr = fraction (Bruchteil des verfügbaren Platzes)
    */
    grid-template-columns: 1fr 1fr;
    
    /* gap: Abstand zwischen Grid-Elementen */
    gap: var(--spacing-md);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-lg);
}

/* Labels (Beschriftungen für Inputs) */
label {
    /* display: block = eigene Zeile */
    display: block;
    
    /* Abstand nach unten (zwischen Label und Input) */
    margin-bottom: var(--spacing-xs);
    
    /* font-weight: 600 = halbfett */
    font-weight: 600;
    
    /* Farbe */
    color: var(--secondary-color);
    
    /* Schriftgröße etwas kleiner */
    font-size: 0.95rem;
}

/* Icons in Labels */
label i {
    /* Farbe für Icons */
    color: var(--primary-color);
    
    /* margin-right: Abstand zum Text rechts */
    margin-right: var(--spacing-xs);
}

/* Input-Felder (Text, Email, Password, etc.) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="month"],
select,
textarea {
    /* width: 100% = volle Breite des Containers */
    width: 100%;
    
    /* Padding: Innenabstand für bessere Usability */
    padding: var(--spacing-md);
    
    /* Border: Rahmen um Input */
    border: 2px solid var(--medium-gray);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-md);
    
    /* Schriftgröße */
    font-size: 1rem;
    
    /* Schriftfamilie erben (gleiche wie Rest der Seite) */
    font-family: inherit;
    
    /* Smooth Transition für Hover/Focus-Effekte */
    transition: all var(--transition-normal);
    
    /* Hintergrund weiß */
    background-color: var(--white);
}

/* Focus-State: Wenn Input aktiv ist (angeklickt) */
input:focus,
select:focus,
textarea:focus {
    /* outline: 0 entfernt Standard-Browser-Outline */
    outline: 0;
    
    /* Border-Farbe ändert sich zu Orange */
    border-color: var(--primary-color);
    
    /* Box-Shadow erzeugt leuchtenden Effekt */
    /* 0 0 = kein Offset, 0 = kein Blur, 3px = Spread, Farbe mit Transparenz */
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

/* Placeholder-Text (Hilfstext in leerem Input) */
::placeholder {
    /* Farbe etwas heller/transparenter */
    color: var(--dark-gray);
    
    /* opacity für zusätzliche Transparenz */
    opacity: 0.6;
}

/* Textarea: Größenänderung nur vertikal erlauben */
textarea {
    /* resize: vertical = nur Höhe änderbar, nicht Breite */
    resize: vertical;
    
    /* min-height: Mindesthöhe */
    min-height: 100px;
}

/* ==================== PASSWORT TOGGLE ====================
   Container für Passwort-Feld mit Anzeige-Button
*/
.password-input-wrapper {
    /* position: relative ist Referenzpunkt für absolute Kinder */
    position: relative;
}

/* Toggle-Button (Auge-Icon) */
.toggle-password {
    /* position: absolute entfernt Element aus dem normalen Fluss
       Ermöglicht Positionierung über position-properties
    */
    position: absolute;
    
    /* right: 10px = 10px vom rechten Rand */
    right: 10px;
    
    /* top: 50% = mittig vertikal */
    top: 50%;
    
    /* transform: translateY(-50%) zentriert perfekt
       Ohne transform würde top: 50% den ANFANG in die Mitte setzen
       Mit translateY(-50%) wird das ZENTRUM in die Mitte gesetzt
    */
    transform: translateY(-50%);
    
    /* Kein Hintergrund */
    background: none;
    
    /* Kein Border */
    border: none;
    
    /* Cursor: pointer zeigt Hand-Symbol beim Hover */
    cursor: pointer;
    
    /* Farbe */
    color: var(--dark-gray);
    
    /* Padding für größeren Klick-Bereich */
    padding: var(--spacing-sm);
    
    /* Transition für Hover-Effekt */
    transition: color var(--transition-fast);
}

/* Hover-Effekt für Toggle-Button */
.toggle-password:hover {
    color: var(--primary-color);
}

/* ==================== BUTTONS ====================
   Basis-Button-Style
*/
.btn {
    /* display: inline-flex ermöglicht Flexbox für Icon+Text */
    display: inline-flex;
    
    /* align-items: center zentriert Icon und Text vertikal */
    align-items: center;
    
    /* justify-content: center zentriert horizontal */
    justify-content: center;
    
    /* gap: Abstand zwischen Icon und Text */
    gap: var(--spacing-sm);
    
    /* Padding */
    padding: var(--spacing-md) var(--spacing-xl);
    
    /* Kein Border (wird je nach Button-Typ hinzugefügt) */
    border: none;
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-md);
    
    /* Schriftgröße */
    font-size: 1rem;
    
    /* font-weight: 600 = halbfett */
    font-weight: 600;
    
    /* Cursor: pointer = Hand-Symbol */
    cursor: pointer;
    
    /* Transition für Hover-Effekte */
    transition: all var(--transition-normal);
    
    /* Schriftfamilie erben */
    font-family: inherit;
    
    /* user-select: none verhindert Text-Selektion beim Klicken */
    user-select: none;
}

/* Primary Button (Orange, Haupt-Aktionen) */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    
    /* box-shadow gibt Button Tiefe */
    box-shadow: var(--shadow-sm);
}

/* Hover-Effekt Primary Button */
.btn-primary:hover {
    /* Dunkleres Orange */
    background-color: var(--primary-dark);
    
    /* Größerer Schatten = hebt sich mehr ab */
    box-shadow: var(--shadow-md);
    
    /* transform: translateY(-2px) hebt Button leicht an */
    transform: translateY(-2px);
}

/* Active-State (beim Klicken) */
.btn-primary:active {
    /* transform: translateY(0) = normale Position */
    transform: translateY(0);
    
    /* Kleinerer Schatten = gedrückt-Effekt */
    box-shadow: var(--shadow-sm);
}

/* Secondary Button (Grau, Sekundär-Aktionen) */
.btn-secondary {
    background-color: var(--medium-gray);
    color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--dark-gray);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Danger Button (Rot, Löschen/Gefährliche Aktionen) */
.btn-danger {
    background-color: var(--danger-color);
    color: var(--white);
}

.btn-danger:hover {
    /* filter: brightness(0.9) macht Farbe 10% dunkler */
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Success Button (Grün, Erfolgs-Aktionen) */
.btn-success {
    background-color: var(--success-color);
    color: var(--white);
}

.btn-success:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Block Button (volle Breite) */
.btn-block {
    width: 100%;
    display: flex;
}

/* Kleiner Button */
.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
}

/* ==================== FEHLERMELDUNGEN ====================
   Fehler-Nachricht (rot)
*/
.error-message {
    /* Hintergrund: Helles Rot */
    background-color: #F8D7DA;
    
    /* Textfarbe: Dunkles Rot */
    color: #721C24;
    
    /* Padding */
    padding: var(--spacing-md);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-md);
    
    /* Border links: Dickere Linie zur Betonung */
    border-left: 4px solid var(--danger-color);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-lg);
}

/* Success-Nachricht (grün) */
.success-message {
    background-color: #D4EDDA;
    color: #155724;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--success-color);
    margin-bottom: var(--spacing-lg);
}

/* Info-Nachricht (blau) */
.info-message,
.info-text {
    background-color: #D1ECF1;
    color: #0C5460;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--info-color);
    margin-bottom: var(--spacing-lg);
}

/* ==================== HAUPT-ANWENDUNG ====================
   Layout für die Hauptseite (nach Login)
*/
.main-app {
    /* display: flex für Flexbox-Layout */
    display: flex;
    
    /* flex-direction: column = vertikal gestapelt
       Header oben, Main in der Mitte, Footer unten
    */
    flex-direction: column;
    
    /* min-height: 100vh = mindestens volle Bildschirmhöhe */
    min-height: 100vh;
}

/* ==================== APP HEADER ====================
   Oberer Balken der Anwendung
*/
.app-header {
    /* Hintergrund: Gradient */
    background: linear-gradient(135deg, var(--secondary-color) 0%, #34495E 100%);
    
    /* Textfarbe weiß */
    color: var(--white);
    
    /* Schatten für Tiefe */
    box-shadow: var(--shadow-md);
    
    /* Padding */
    padding: var(--spacing-lg) var(--spacing-xl);
    
    /* z-index: Liegt über anderem Content */
    z-index: 100;
}

/* Header-Inhalt Container */
.header-content {
    /* Flexbox für Layout */
    display: flex;
    
    /* justify-content: space-between
       Links-Content nach links, Rechts-Content nach rechts
       Platz dazwischen wird gleichmäßig verteilt
    */
    justify-content: space-between;
    
    /* align-items: center = vertikal zentriert */
    align-items: center;
    
    /* max-width: 1400px = begrenzt Breite auf großen Bildschirmen */
    max-width: 1400px;
    
    /* margin: 0 auto zentriert den Container horizontal */
    margin: 0 auto;
    
    /* width: 100% nutzt verfügbaren Platz */
    width: 100%;
}

/* Linke Seite des Headers (Logo + Titel) */
.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Icon in Header */
.header-left i {
    font-size: 2rem;
    color: var(--primary-color);
}

/* Titel in Header */
.header-left h1 {
    font-size: 1.5rem;
    margin: 0;
}

/* Rechte Seite des Headers (User + Logout) */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/* User-Begrüßung */
.user-greeting {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
}

/* ==================== HAUPTINHALT ====================
   Main-Bereich der Anwendung
*/
.app-main {
    /* flex: 1 lässt Main wachsen und füllt verfügbaren Platz
       Damit Footer immer unten bleibt, auch bei wenig Content
    */
    flex: 1;
    
    /* Padding */
    padding: var(--spacing-xl);
    
    /* max-width begrenzt Breite */
    max-width: 1400px;
    
    /* margin: 0 auto zentriert */
    margin: 0 auto;
    
    /* width: 100% */
    width: 100%;
}

/* ==================== TABS ====================
   Tab-Navigation für verschiedene Bereiche
*/
.tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    
    /* border-bottom: Trennlinie unter Tabs */
    border-bottom: 2px solid var(--medium-gray);
    
    /* flex-wrap: wrap erlaubt Umbruch auf kleinen Bildschirmen */
    flex-wrap: wrap;
}

/* Tab-Button */
.tab-button {
    /* Padding */
    padding: var(--spacing-md) var(--spacing-xl);
    
    /* Kein Hintergrund (wird bei active gesetzt) */
    background: none;
    
    /* Kein Border */
    border: none;
    
    /* Border-Bottom für aktiven Tab */
    border-bottom: 3px solid transparent;
    
    /* Cursor */
    cursor: pointer;
    
    /* Schrift */
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    
    /* Farbe */
    color: var(--dark-gray);
    
    /* Transition */
    transition: all var(--transition-normal);
    
    /* display: flex für Icon + Text */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Tab-Button Hover */
.tab-button:hover {
    color: var(--primary-color);
    
    /* background: rgba = leichter Hintergrund beim Hover */
    background: rgba(255, 140, 66, 0.05);
}

/* Aktiver Tab */
.tab-button.active {
    color: var(--primary-color);
    
    /* border-bottom orange = Unterstreichung */
    border-bottom-color: var(--primary-color);
}

/* ==================== TAB-INHALTE ====================
   Container für Tab-Panels
*/
.tab-content {
    /* Hintergrund weiß */
    background: var(--white);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-lg);
    
    /* Padding */
    padding: var(--spacing-xl);
    
    /* Schatten */
    box-shadow: var(--shadow-md);
}

/* Tab-Panel (einzelner Tab-Inhalt) */
.tab-pane {
    /* display: none = versteckt */
    display: none;
}

/* Aktives Tab-Panel */
.tab-pane.active {
    /* display: block = sichtbar */
    display: block;
    
    /* Fade-In Animation */
    animation: fadeIn 0.4s ease-in;
}

/* Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== CONTENT HEADER ====================
   Überschrift-Bereich in Tab-Panels
*/
.content-header {
    /* margin-bottom: Abstand zum Content */
    margin-bottom: var(--spacing-xl);
    
    /* padding-bottom: Innenabstand unten */
    padding-bottom: var(--spacing-md);
    
    /* border-bottom: Trennlinie */
    border-bottom: 2px solid var(--medium-gray);
}

.content-header h2 {
    /* Farbe */
    color: var(--secondary-color);
    
    /* Schriftgröße */
    font-size: 1.75rem;
    
    /* Kein Margin (wird vom Container geregelt) */
    margin: 0 0 var(--spacing-md) 0;
    
    /* display: flex für Icon */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Icon in Content-Header */
.content-header h2 i {
    color: var(--primary-color);
}

/* ==================== FILTER-CONTROLS ====================
   Such- und Filter-Elemente
*/
.filter-controls {
    /* display: flex für nebeneinander */
    display: flex;
    
    /* gap: Abstand zwischen Elementen */
    gap: var(--spacing-md);
    
    /* flex-wrap: wrap für Umbruch auf kleinen Bildschirmen */
    flex-wrap: wrap;
    
    /* Abstand nach unten */
    margin-top: var(--spacing-lg);
}

/* Suchfeld-Container */
.search-box {
    /* position: relative für Icon-Positionierung */
    position: relative;
    
    /* flex: 1 lässt Suchbox wachsen */
    flex: 1;
    
    /* min-width verhindert zu schmale Box */
    min-width: 250px;
}

/* Icon in Suchbox */
.search-box i {
    /* position: absolute für Positionierung im Input */
    position: absolute;
    
    /* left: 15px = Abstand von links */
    left: 15px;
    
    /* top: 50% + transform für vertikale Zentrierung */
    top: 50%;
    transform: translateY(-50%);
    
    /* Farbe */
    color: var(--dark-gray);
}

/* Input in Suchbox */
.search-box input {
    /* padding-left: Platz für Icon */
    padding-left: 40px;
}

/* Datumsfilter */
.date-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.date-filter label {
    /* margin: 0 überschreibt Standard-Label-Margin */
    margin: 0;
    
    /* white-space: nowrap verhindert Umbruch */
    white-space: nowrap;
}

/* ==================== STATISTIK-KARTEN ====================
   Dashboard-Karten mit Kennzahlen
*/
.stats-grid {
    /* display: grid für Grid-Layout */
    display: grid;
    
    /* 3 gleichbreite Spalten */
    grid-template-columns: repeat(3, 1fr);
    
    /* gap: Abstand zwischen Karten */
    gap: var(--spacing-lg);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-xl);
}

/* Einzelne Stat-Karte */
.stat-card {
    /* Hintergrund: Gradient */
    background: linear-gradient(135deg, var(--white) 0%, var(--light-gray) 100%);
    
    /* Padding */
    padding: var(--spacing-xl);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-lg);
    
    /* Border */
    border: 2px solid var(--medium-gray);
    
    /* display: flex für Layout */
    display: flex;
    
    /* align-items: center = vertikal zentriert */
    align-items: center;
    
    /* gap: Abstand zwischen Icon und Info */
    gap: var(--spacing-lg);
    
    /* Transition für Hover */
    transition: all var(--transition-normal);
}

/* Stat-Card Hover */
.stat-card:hover {
    /* transform: translateY(-5px) = hebt sich an */
    transform: translateY(-5px);
    
    /* Größerer Schatten */
    box-shadow: var(--shadow-lg);
    
    /* Border-Farbe orange */
    border-color: var(--primary-color);
}

/* Icon in Stat-Card */
.stat-icon {
    /* Größe */
    width: 60px;
    height: 60px;
    
    /* Flexbox für Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Hintergrund */
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    
    /* Farbe */
    color: var(--white);
    
    /* Border-Radius rund */
    border-radius: var(--radius-full);
    
    /* Schriftgröße */
    font-size: 1.75rem;
}

/* Stat-Info (Zahlen und Text) */
.stat-info h3 {
    /* Schriftgröße groß */
    font-size: 2rem;
    
    /* Farbe */
    color: var(--primary-color);
    
    /* Margin */
    margin: 0 0 var(--spacing-xs) 0;
    
    /* font-weight: 700 = fett */
    font-weight: 700;
}

.stat-info p {
    /* Margin */
    margin: 0;
    
    /* Farbe */
    color: var(--dark-gray);
    
    /* Schriftgröße */
    font-size: 0.9rem;
}

/* ==================== EINTRÄGE-LISTE ====================
   Liste aller Pflegeeinträge
*/
.entries-list {
    /* Abstand nach unten */
    margin-top: var(--spacing-lg);
}

/* Einzelner Eintrag */
.entry-card {
    /* Hintergrund */
    background: var(--white);
    
    /* Border */
    border: 2px solid var(--medium-gray);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-lg);
    
    /* Padding */
    padding: var(--spacing-lg);
    
    /* Abstand nach unten (zwischen Karten) */
    margin-bottom: var(--spacing-md);
    
    /* Transition */
    transition: all var(--transition-normal);
    
    /* Cursor: pointer = ganzer Bereich klickbar */
    cursor: pointer;
}

/* Entry-Card Hover */
.entry-card:hover {
    /* Border-Farbe orange */
    border-color: var(--primary-color);
    
    /* Schatten */
    box-shadow: var(--shadow-md);
    
    /* Leicht anheben */
    transform: translateY(-2px);
}

/* Entry-Header (oberer Teil der Karte) */
.entry-header {
    /* Flexbox */
    display: flex;
    
    /* space-between: Links und Rechts */
    justify-content: space-between;
    
    /* align-items: center */
    align-items: center;
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-md);
    
    /* padding-bottom + border-bottom = Trennlinie */
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--medium-gray);
}

/* Entry-Titel */
.entry-title {
    /* Flexbox */
    display: flex;
    
    /* flex-direction: column = untereinander */
    flex-direction: column;
    
    /* gap: Abstand */
    gap: var(--spacing-xs);
}

.entry-title h3 {
    /* Margin */
    margin: 0;
    
    /* Farbe */
    color: var(--secondary-color);
    
    /* Schriftgröße */
    font-size: 1.25rem;
}

/* Entry-Meta (Datum, Zeit, etc.) */
.entry-meta {
    /* Flexbox */
    display: flex;
    
    /* flex-wrap: wrap für Umbruch */
    flex-wrap: wrap;
    
    /* gap: Abstand */
    gap: var(--spacing-md);
    
    /* Schriftgröße */
    font-size: 0.9rem;
    
    /* Farbe */
    color: var(--dark-gray);
}

/* Meta-Item */
.meta-item {
    /* Flexbox */
    display: flex;
    
    /* align-items: center */
    align-items: center;
    
    /* gap: Abstand zwischen Icon und Text */
    gap: var(--spacing-xs);
}

/* Icon in Meta-Item */
.meta-item i {
    /* Farbe */
    color: var(--primary-color);
}

/* Entry-Actions (Buttons: Bearbeiten, Löschen) */
.entry-actions {
    /* Flexbox */
    display: flex;
    
    /* gap: Abstand zwischen Buttons */
    gap: var(--spacing-sm);
}

/* Action-Button (Icon-Button) */
.action-btn {
    /* Größe */
    width: 36px;
    height: 36px;
    
    /* Flexbox für Icon-Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Kein Border */
    border: none;
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-md);
    
    /* Cursor */
    cursor: pointer;
    
    /* Transition */
    transition: all var(--transition-fast);
    
    /* Schriftgröße */
    font-size: 1rem;
}

/* Edit-Button */
.action-btn.edit {
    /* Hintergrund */
    background: var(--info-color);
    
    /* Farbe */
    color: var(--white);
}

.action-btn.edit:hover {
    /* filter: brightness macht dunkler */
    filter: brightness(0.9);
    
    /* transform: scale vergrößert */
    transform: scale(1.1);
}

/* Delete-Button */
.action-btn.delete {
    background: var(--danger-color);
    color: var(--white);
}

.action-btn.delete:hover {
    filter: brightness(0.9);
    transform: scale(1.1);
}

/* Entry-Body (Inhalt der Karte) */
.entry-body {
    /* Abstand nach unten */
    margin-bottom: var(--spacing-md);
}

/* Entry-Content (Beschreibung) */
.entry-content {
    /* Margin */
    margin: var(--spacing-md) 0;
}

.entry-content p {
    /* Margin */
    margin: 0;
    
    /* Farbe */
    color: var(--text-dark);
    
    /* line-height */
    line-height: 1.6;
}

/* ==================== EMPTY STATE ====================
   Wird angezeigt wenn keine Daten vorhanden
*/
.empty-state {
    /* text-align: center */
    text-align: center;
    
    /* Padding */
    padding: var(--spacing-2xl);
    
    /* Farbe */
    color: var(--dark-gray);
}

/* Icon in Empty State */
.empty-state i {
    /* Schriftgröße riesig */
    font-size: 4rem;
    
    /* Farbe */
    color: var(--medium-gray);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-md);
    
    /* display: block */
    display: block;
}

.empty-state p {
    /* Schriftgröße */
    font-size: 1.1rem;
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-lg);
}

/* ==================== ADMIN-BEREICH ====================
   Admin-spezifische Styles
*/
.admin-tabs {
    /* display: flex */
    display: flex;
    
    /* gap: Abstand */
    gap: var(--spacing-sm);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-xl);
    
    /* border-bottom */
    border-bottom: 2px solid var(--medium-gray);
}

/* Admin Tab-Button */
.admin-tab-button {
    /* Ähnlich wie normale Tabs */
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--dark-gray);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.admin-tab-button:hover {
    color: var(--primary-color);
    background: rgba(255, 140, 66, 0.05);
}

.admin-tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Admin Tab-Content */
.admin-tab-content {
    /* Margin */
    margin-top: var(--spacing-lg);
}

/* Admin Tab-Pane */
.admin-tab-pane {
    display: none;
}

.admin-tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-in;
}

/* Admin-Section (Unterteilungen im Admin-Bereich) */
.admin-section {
    /* Hintergrund */
    background: var(--light-gray);
    
    /* Padding */
    padding: var(--spacing-xl);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-lg);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-xl);
}

.admin-section h3,
.admin-section h4 {
    /* Farbe */
    color: var(--secondary-color);
    
    /* Abstand nach unten */
    margin-bottom: var(--spacing-lg);
    
    /* display: flex für Icon */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Icon in Admin-Section Überschrift */
.admin-section h3 i,
.admin-section h4 i {
    color: var(--primary-color);
}

/* ==================== USER-LISTE ====================
   Liste der Benutzer im Admin-Bereich
*/
.users-list {
    /* display: grid für Grid-Layout */
    display: grid;
    
    /* gap: Abstand */
    gap: var(--spacing-md);
}

/* User-Card (einzelner Benutzer) */
.user-card {
    /* Hintergrund */
    background: var(--white);
    
    /* Padding */
    padding: var(--spacing-lg);
    
    /* Border */
    border: 2px solid var(--medium-gray);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-lg);
    
    /* Flexbox */
    display: flex;
    
    /* justify-content: space-between */
    justify-content: space-between;
    
    /* align-items: center */
    align-items: center;
    
    /* Transition */
    transition: all var(--transition-normal);
}

.user-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* User-Info */
.user-info {
    /* flex: 1 lässt Info wachsen */
    flex: 1;
}

.user-info h4 {
    /* Margin */
    margin: 0 0 var(--spacing-xs) 0;
    
    /* Farbe */
    color: var(--secondary-color);
    
    /* Schriftgröße */
    font-size: 1.1rem;
}

.user-info p {
    /* Margin */
    margin: 0;
    
    /* Farbe */
    color: var(--dark-gray);
    
    /* Schriftgröße */
    font-size: 0.9rem;
}

/* User-Actions */
.user-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==================== BADGE ====================
   Kleine Label-Tags (z.B. für Rollen)
*/
.badge {
    /* display: inline-flex */
    display: inline-flex;
    
    /* align-items: center */
    align-items: center;
    
    /* gap: Abstand */
    gap: var(--spacing-xs);
    
    /* Padding */
    padding: var(--spacing-xs) var(--spacing-sm);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-sm);
    
    /* Schriftgröße */
    font-size: 0.8rem;
    
    /* font-weight */
    font-weight: 600;
}

/* Badge-Varianten */
.badge-admin {
    background: var(--danger-color);
    color: var(--white);
}

.badge-user {
    background: var(--info-color);
    color: var(--white);
}

.badge-success {
    background: var(--success-color);
    color: var(--white);
}

/* ==================== MODAL ====================
   Overlay-Fenster
*/
.modal {
    /* display: none = initial versteckt */
    display: none;
    
    /* position: fixed = fixiert beim Scrollen */
    position: fixed;
    
    /* top, left, width, height: 100% = volle Abdeckung */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Hintergrund: Halbtransparent schwarz */
    background: rgba(0, 0, 0, 0.7);
    
    /* z-index: Sehr hoch = liegt über allem */
    z-index: 1000;
    
    /* Flexbox für Zentrierung */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Padding */
    padding: var(--spacing-lg);
}

/* Modal-Content (die Box im Modal) */
.modal-content {
    /* Hintergrund */
    background: var(--white);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-xl);
    
    /* max-width */
    max-width: 800px;
    
    /* width: 100% */
    width: 100%;
    
    /* max-height verhindert zu hohe Modals */
    max-height: 90vh;
    
    /* overflow-y: auto = Scrollbar wenn Inhalt zu hoch */
    overflow-y: auto;
    
    /* Schatten */
    box-shadow: var(--shadow-xl);
    
    /* Animation */
    animation: modalSlideIn 0.3s ease-out;
}

/* Modal Slide-In Animation */
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal-Header */
.modal-header {
    /* Padding */
    padding: var(--spacing-xl);
    
    /* border-bottom */
    border-bottom: 2px solid var(--medium-gray);
    
    /* Flexbox */
    display: flex;
    
    /* justify-content: space-between */
    justify-content: space-between;
    
    /* align-items: center */
    align-items: center;
}

.modal-header h2 {
    /* Margin */
    margin: 0;
    
    /* Farbe */
    color: var(--secondary-color);
    
    /* display: flex für Icon */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Close-Button im Modal */
.close-modal {
    /* Größe */
    width: 40px;
    height: 40px;
    
    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Kein Border */
    border: none;
    
    /* Hintergrund */
    background: var(--medium-gray);
    
    /* Farbe */
    color: var(--dark-gray);
    
    /* Abgerundete Ecken */
    border-radius: var(--radius-full);
    
    /* Cursor */
    cursor: pointer;
    
    /* Schriftgröße */
    font-size: 1.25rem;
    
    /* Transition */
    transition: all var(--transition-fast);
}

.close-modal:hover {
    background: var(--danger-color);
    color: var(--white);
    transform: rotate(90deg);
}

/* Modal-Body */
.modal-body {
    padding: var(--spacing-xl);
}

/* ==================== FOOTER ====================
   Fußzeile der Anwendung
*/
.app-footer {
    /* Hintergrund */
    background: var(--secondary-color);
    
    /* Farbe */
    color: var(--white);
    
    /* Padding */
    padding: var(--spacing-xl);
    
    /* text-align: center */
    text-align: center;
    
    /* Margin-top: auto drückt Footer nach unten */
    margin-top: auto;
}

.footer-content p {
    /* Margin */
    margin: var(--spacing-xs) 0;
    
    /* Schriftgröße */
    font-size: 0.9rem;
}

/* ==================== RESPONSIVE DESIGN ====================
   @media queries passen Design an Bildschirmgröße an
   
   Breakpoints:
   - 768px = Tablets
   - 480px = Mobile Phones
*/

/* Tablets und kleinere Bildschirme */
@media (max-width: 768px) {
    /* Form-Row: 1 Spalte statt 2 */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Stats-Grid: 1 Spalte statt 3 */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Header-Content: Untereinander statt nebeneinander */
    .header-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* Header-Right: Volle Breite */
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Tabs: Scrollen statt Umbruch */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    /* Admin-Tabs: Scrollen */
    .admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    /* Entry-Header: Untereinander */
    .entry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    /* Filter-Controls: Volle Breite */
    .filter-controls {
        flex-direction: column;
    }
    
    .filter-controls .form-group,
    .filter-controls .search-box {
        width: 100%;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    /* Kleinere Abstände */
    .app-main {
        padding: var(--spacing-md);
    }
    
    .tab-content {
        padding: var(--spacing-md);
    }
    
    /* Kleinere Schriften */
    .header-left h1 {
        font-size: 1.2rem;
    }
    
    .content-header h2 {
        font-size: 1.4rem;
    }
    
    /* Entry-Card: Weniger Padding */
    .entry-card {
        padding: var(--spacing-md);
    }
    
    /* Stat-Card: Kleineres Layout */
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    /* User-Card: Untereinander */
    .user-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .user-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    /* Login-Box: Kleineres Padding */
    .login-box {
        padding: var(--spacing-lg);
    }
}

/* ==================== UTILITY CLASSES ====================
   Hilfsklassen für häufige Aufgaben
*/

/* Text-Alignment */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Display */
.d-none {
    display: none !important;  /* !important überschreibt andere Regeln */
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

/* Margin */
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

/* Padding */
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

/* ==================== PRINT STYLES ====================
   Spezielle Styles für Druck (PDFs)
*/
@media print {
    /* Header und Footer verstecken */
    .app-header,
    .app-footer,
    .tabs,
    .filter-controls {
        display: none;
    }
    
    /* Keine Schatten beim Druck */
    * {
        box-shadow: none !important;
    }
    
    /* Keine Seitenumbrüche in Karten */
    .entry-card,
    .user-card {
        page-break-inside: avoid;
    }
}