/* civis-tracking/css/style.css - Dark Mode Theme */

/* --------------------------------------------- */
/*                 Grundfarben                   */
/* --------------------------------------------- */
:root {
    --dark-bg: #1a1d20;           /* Sehr dunkler Hintergrund */
    --dark-surface: #2c3034;      /* Etwas hellere Oberfläche für Karten, Inputs etc. */
    --dark-border: #40454a;       /* Rahmenfarbe */
    --dark-text: #e8eaed;         /* Haupttextfarbe */
    --dark-text-secondary: #adb5bd; /* Sekundäre Textfarbe (gedämpfter) */
    --dark-link: #79c0ff;         /* Linkfarbe */
    --dark-link-hover: #a9d1ff;   /* Linkfarbe Hover */

    /* Farben für Alerts (Beispiel, anpassen nach Bedarf) */
    --dark-alert-success-bg: #0a3622;
    --dark-alert-success-text: #75b798;
    --dark-alert-danger-bg: #58151c;
    --dark-alert-danger-text: #f1aeb5;
    --dark-alert-warning-bg: #664d03;
    --dark-alert-warning-text: #ffda6a;
    --dark-alert-info-bg: #052c65;
    --dark-alert-info-text: #78c0f5;
}

/* --------------------------------------------- */
/*                 Allgemeine Stile              */
/* --------------------------------------------- */
body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
}

a {
    color: var(--dark-link);
}

a:hover {
    color: var(--dark-link-hover);
}

hr {
    border-top: 1px solid var(--dark-border);
}

/* --------------------------------------------- */
/*                 Navigation (Navbar)           */
/* --------------------------------------------- */
/* Bootstrap .navbar-dark.bg-dark ist schon ziemlich gut, aber wir können Akzente anpassen */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75); /* Etwas heller als Standard */
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 500;
}
.navbar-brand {
    color: #fff !important;
}
.dropdown-menu {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);
}
.dropdown-item {
    color: var(--dark-text);
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--dark-text);
    background-color: #3a3f44; /* Etwas dunklerer Hover für Dropdown Items */
}
.dropdown-divider {
    border-top: 1px solid var(--dark-border);
}

/* --------------------------------------------- */
/*                 Formulare                     */
/* --------------------------------------------- */
.form-label {
    color: var(--dark-text-secondary);
}

.form-control,
.form-select {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.form-control::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.7;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-link); /* Fokus-Farbe anpassen */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Bootstrap focus shadow, ggf. anpassen */
    /* box-shadow: 0 0 0 0.25rem rgba(121, 192, 255, 0.35); Alternativer Fokus-Schatten */
}

.form-control:disabled, .form-control[readonly],
.form-select:disabled {
    background-color: #383c40;
    opacity: 0.65;
}

.form-check-input {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}
.form-check-input:checked {
    background-color: var(--bs-primary); /* Bootstrap Primary Color */
    border-color: var(--bs-primary);
}
.form-check-label {
    color: var(--dark-text);
}
.form-text {
    color: var(--dark-text-secondary);
}


/* --------------------------------------------- */
/*                 Buttons                       */
/* --------------------------------------------- */
/* Bootstrap-Buttons sind oft schon kontrastreich. Hier nur minimale Anpassungen, falls nötig. */
/* .btn-primary, .btn-success, etc. können hier spezifischer angepasst werden */

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}
.btn-outline-danger:hover {
    color: #fff; /* Text auf Hover für Outline-Buttons */
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}
/* Spezifisch für kleine Löschen-Buttons mit Icons */
.btn-sm.btn-outline-danger.border-0 {
    color: var(--bs-danger);
}
.btn-sm.btn-outline-danger.border-0:hover {
    color: #fff;
    background-color: var(--bs-danger) !important; /* Wichtig, um andere Hover-Effekte zu überschreiben */
}

/* --------------------------------------------- */
/*                 Tabellen                      */
/* --------------------------------------------- */
.table {
    color: var(--dark-text) !important; /* Wichtig: Textfarbe für alle Zellen setzen */
    border-color: var(--dark-border);
    background-color: var(--dark-surface); /* Hintergrund für die gesamte Tabelle */
}

.table th,
.table td,
.table thead th {
    border-color: var(--dark-border);
    color: var(--dark-text); /* Sicherstellen, dass auch Header-Text dunkel ist */
    background-color: transparent; /* Damit der Tabellen-Hintergrund durchscheint oder spezifisch setzen */
}

.table thead th {
    color: var(--dark-text);
    background-color: #303438; /* Etwas anderer Header-Hintergrund, explizit */
    border-bottom-width: 2px; /* Stärkere Trennlinie für den Header */
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.1); /* Dunklere Streifen für Dark Mode */
    /* --bs-table-accent-bg: #262a2e; /* Alternative feste Farbe für Streifen */
    color: var(--dark-text) !important; /* Wichtig, um Bootstrap Standard zu überschreiben */
    background-color: var(--bs-table-accent-bg); /* Farbe explizit setzen */
}
.table-striped > tbody > tr:nth-of-type(even) > * {
    color: var(--dark-text) !important; /* Wichtig, um Bootstrap Standard zu überschreiben */
    background-color: var(--dark-surface); /* Standard-Oberflächenfarbe für gerade Zeilen */
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.08); /* Subtiler Hover, etwas heller */
    /* --bs-table-accent-bg: #3a3f44; /* Alternative feste Hover-Farbe */
    color: var(--dark-text) !important; /* Wichtig */
    background-color: var(--bs-table-accent-bg); /* Farbe explizit setzen */
}

/* Links innerhalb von Tabellenzellen (falls vorhanden) */
.table td a, .table th a {
    color: var(--dark-link);
}
.table td a:hover, .table th a:hover {
    color: var(--dark-link-hover);
}

/* Kleine Löschen-Buttons in der Tabelle */
.table .btn-sm.btn-outline-danger.border-0 {
    color: var(--bs-danger);
}
.table .btn-sm.btn-outline-danger.border-0:hover {
    color: #fff;
    background-color: var(--bs-danger) !important;
}

/* --------------------------------------------- */
/*                 Alerts (Flash-Nachrichten)    */
/* --------------------------------------------- */
.alert {
    border-width: 0; /* Flachere Alerts */
    border-left: 4px solid; /* Akzentstreifen links */
}

.alert-success {
    background-color: var(--dark-alert-success-bg);
    color: var(--dark-alert-success-text);
    border-left-color: var(--bs-success);
}

.alert-danger {
    background-color: var(--dark-alert-danger-bg);
    color: var(--dark-alert-danger-text);
    border-left-color: var(--bs-danger);
}

.alert-warning {
    background-color: var(--dark-alert-warning-bg);
    color: var(--dark-alert-warning-text);
    border-left-color: var(--bs-warning);
}

.alert-info {
    background-color: var(--dark-alert-info-bg);
    color: var(--dark-alert-info-text);
    border-left-color: var(--bs-info);
}

.alert-dismissible .btn-close {
    filter: invert(80%) sepia(10%) saturate(100%) hue-rotate(180deg) brightness(150%) contrast(80%); /* Besser sichtbares X */
}
.alert-dismissible .btn-close:hover {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}


/* --------------------------------------------- */
/*                 List Groups                   */
/* --------------------------------------------- */
.list-group-item {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.list-group-item-secondary { /* Für die Kategorie-Überschriften in tickets.php */
    background-color: #383c40; /* Etwas dunkler als normale Items */
    color: var(--dark-text);
    font-weight: bold;
}
/* Falls du klickbare List-Group-Items hättest */
/*
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #3a3f44;
    color: var(--dark-text);
}
*/

/* --------------------------------------------- */
/*                 Optgroup in Selects           */
/* --------------------------------------------- */
select optgroup {
    background-color: var(--dark-surface); /* Hilft nicht bei allen Browsern */
    color: var(--dark-text-secondary);
    font-weight: bold;
}
select option {
    background-color: var(--dark-surface); /* Hilft nicht bei allen Browsern */
    color: var(--dark-text);
}


/* --------------------------------------------- */
/*                 Footer                        */
/* --------------------------------------------- */
footer.text-muted {
    color: var(--dark-text-secondary) !important;
}