/**
 * Haupt-CSS-Datei für die Autovermietung
 * 
 * Diese Datei enthält alle benutzerdefinierten CSS-Styles für die Anwendung.
 * Sie definiert Schriftarten, Farben, Komponenten und Utility-Klassen.
 * 
 * @author Gruppe 3
 * @version 1.0
 */

/* Globale Schriftart für die gesamte Anwendung */
* {
    font-family: "Geist", Arial, Helvetica, sans-serif;
}

/* Hintergrundfarben basierend auf CSS-Variablen */

/* Akzent-Hintergrundfarbe */
.bg-accent {
    background-color: var(--color-accent);
}

/* Karten-Hintergrundfarbe */
.bg-card {
    background-color: var(--card);
}

/* Karten-Vordergrundfarbe */
.bg-card-foreground {
    background-color: var(--card-foreground);
}

/* Ungültige Eingabe Hintergrundfarbe */
.bg-invalid {
    background-color: var(--color-destructive);
}

/* Ungültige Eingabe Textfarbe */
.invalid {
    color: var(--color-destructive);
}

/* Abgeschwächte Textfarbe für sekundäre Informationen */
.text-muted-foreground {
    color: var(--muted-foreground);
}

/* Cursor-Pointer für interaktive Menüelemente */
[role="menuitem"],
[role="option"] {
    cursor: pointer;
}

/* Nachfrage-Balken für Visualisierung der Auslastung */
.demand-bar {
    height: 0.5rem;                                                    /* Höhe des Balkens */
    border-radius: 9999px;                                             /* Abgerundete Ecken */
    width: 0%;                                                         /* Startbreite */
    --color-percent: 0;                                                /* CSS-Variable für Prozentsatz */
    --start-color: var(--card-foreground);                            /* Startfarbe (niedrige Nachfrage) */
    --end-color: var(--color-destructive);                            /* Endfarbe (hohe Nachfrage) */
    /* Dynamische Farbmischung basierend auf Nachfrage-Prozentsatz */
    background-color: color-mix(in srgb, var(--start-color) calc(100% - var(--color-percent) * 1%), var(--end-color) calc(var(--color-percent) * 1%));
}

/* Aktiver Button-Zustand */
.btn-active {
    background-color: var(--color-accent);
}