/* Dark Mode Anpassungen */

/* ============================================
   GLASSMORPHISM DARK MODE ENHANCEMENTS
   ============================================ */

/* Enhanced glow effects in dark mode */
.dark-mode .glass-panel {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 1px rgba(255, 255, 255, 0.1);
}

.dark-mode .glass-panel-glow {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 60px var(--glow-primary),
        inset 0 0 30px rgba(140, 82, 255, 0.08);
}

/* Enhanced feature cards in dark mode */
.dark-mode .feature-card {
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark-mode .feature-card:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 0 60px var(--glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Enhanced chat preview in dark mode */
.dark-mode .chat-preview {
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.4),
        0 0 80px var(--glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark-mode .chat-preview:hover {
    box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.5),
        0 0 100px var(--glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Enhanced buttons in dark mode */
.dark-mode .btn-primary {
    box-shadow:
        0 4px 20px rgba(140, 82, 255, 0.4),
        0 0 40px rgba(140, 82, 255, 0.1);
}

.dark-mode .btn-primary:hover {
    box-shadow:
        0 8px 30px rgba(140, 82, 255, 0.5),
        0 0 50px rgba(140, 82, 255, 0.2);
}

/* Logo im Dark Mode - leichter Helligkeits-Boost für bessere Sichtbarkeit */
.dark-mode .brand-logo {
    filter: brightness(1.1);
}

/* Formular-Labels im Dark Mode */
.dark-mode .form-label,
.dark-mode .form-check-label {
    color: #ffffff !important;
}

/* Formular-Hilfstexte im Dark Mode */
.dark-mode .form-text {
    color: #adb5bd !important;
}

/* Formular-Eingabefelder im Dark Mode */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #2c3034;
    color: #ffffff;
    border-color: #495057;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #2c3034;
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(138, 82, 255, 0.25);
}

/* Checkbox und Radio im Dark Mode */
.dark-mode .form-check-input {
    background-color: #2c3034;
    border-color: #495057;
}

.dark-mode .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Range-Slider im Dark Mode */
.dark-mode .form-range::-webkit-slider-thumb {
    background-color: var(--primary-color);
}

.dark-mode .form-range::-moz-range-thumb {
    background-color: var(--primary-color);
}

.dark-mode .form-range::-ms-thumb {
    background-color: var(--primary-color);
}

/* Tabs im Dark Mode */
.dark-mode .nav-tabs {
    border-bottom-color: #495057;
}

.dark-mode .nav-tabs .nav-link {
    color: #adb5bd;
}

.dark-mode .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #212529;
    border-color: #495057 #495057 #212529;
}

.dark-mode .nav-tabs .nav-link:hover:not(.active) {
    border-color: #343a40 #343a40 #495057;
    color: #ffffff;
}

/* ================================================
   Dashboard Dark Mode Fixes
   ================================================ */

/* Bootstrap text-muted im Dark Mode */
.dark-mode .text-muted {
    color: #9ca3af !important;
}

/* Tabellen im Dark Mode */
.dark-mode .table {
    color: #f8f9fa !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: #f8f9fa !important;
    --bs-table-border-color: var(--border-color, #2a3142) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-striped-color: #f8f9fa !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08) !important;
    --bs-table-hover-color: #ffffff !important;
    background-color: transparent !important;
}

.dark-mode .table thead {
    background-color: var(--bg-secondary, #111319) !important;
}

.dark-mode .table th {
    color: #ffffff !important;
    background-color: var(--bg-secondary, #111319) !important;
    border-color: var(--border-color, #2a3142) !important;
}

.dark-mode .table tbody {
    background-color: transparent !important;
}

.dark-mode .table tbody tr {
    background-color: transparent !important;
    color: #f8f9fa !important;
}

.dark-mode .table td {
    color: #f8f9fa !important;
    background-color: transparent !important;
    border-color: var(--border-color, #2a3142) !important;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark-mode .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Table-responsive Container im Dark Mode */
.dark-mode .table-responsive {
    background-color: transparent !important;
}

/* Card-Titel im Dark Mode */
.dark-mode .card-title {
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .card-body {
    color: var(--text-color, #f8f9fa);
}

/* Kleine Texte und Labels im Dark Mode */
.dark-mode small {
    color: #9ca3af;
}

.dark-mode .card small.text-muted {
    color: #b0b8c4 !important;
}

/* Statistik-Werte im Dark Mode */
.dark-mode .stat-value,
.dark-mode .card h3,
.dark-mode .card h6 {
    color: var(--primary-color, #8c52ff) !important;
}

/* Absätze in Cards im Dark Mode */
.dark-mode .card p {
    color: #e5e7eb !important;
}

.dark-mode .card .mb-0 {
    /* color: #e5e7eb !important; */
}

/* Border-End für Statistik-Trennlinien */
.dark-mode .border-end {
    border-color: var(--border-color, #2a3142) !important;
}

/* Alert-Heading im Dark Mode */
.dark-mode .alert-heading {
    color: var(--text-color, #f8f9fa) !important;
}

/* Dropdown-Menu im Dark Mode */
.dark-mode .dropdown-menu {
    background-color: var(--card-bg, #1e2432) !important;
    border-color: var(--border-color, #2a3142) !important;
}

.dark-mode .dropdown-item {
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--bg-secondary, #111319) !important;
    color: #ffffff !important;
}

.dark-mode .dropdown-divider {
    border-color: var(--border-color, #2a3142) !important;
}

/* ================================================
   List-Group Dark Mode Fixes (Chat-Sessions, etc.)
   ================================================ */

/* List-Group Container */
.dark-mode .list-group {
    background-color: transparent !important;
}

/* List-Group-Items im Dark Mode */
.dark-mode .list-group-item {
    background-color: var(--card-bg, #1e2432) !important;
    border-color: var(--border-color, #2a3142) !important;
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .list-group-item-action {
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .list-group-item-action:hover,
.dark-mode .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark-mode .list-group-item-action:active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Aktive List-Group-Items */
.dark-mode .list-group-item.active {
    background-color: var(--primary-color, #8c52ff) !important;
    border-color: var(--primary-color, #8c52ff) !important;
    color: #ffffff !important;
}

/* Texte innerhalb von List-Group-Items */
.dark-mode .list-group-item h5,
.dark-mode .list-group-item h6 {
    color: #ffffff !important;
}

.dark-mode .list-group-item p {
    color: #e5e7eb !important;
}

.dark-mode .list-group-item small {
    color: #9ca3af !important;
}

.dark-mode .list-group-item .text-muted {
    color: #9ca3af !important;
}

/* Links innerhalb von List-Group-Items */
.dark-mode .list-group-item a {
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .list-group-item a:hover {
    color: #ffffff !important;
}

/* Button-Group innerhalb von List-Group-Items */
.dark-mode .list-group-item .btn-outline-primary {
    color: var(--primary-color, #8c52ff) !important;
    border-color: var(--primary-color, #8c52ff) !important;
}

.dark-mode .list-group-item .btn-outline-primary:hover {
    background-color: var(--primary-color, #8c52ff) !important;
    color: #ffffff !important;
}

.dark-mode .list-group-item .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.dark-mode .list-group-item .btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* ================================================
   Card Dark Mode Fixes (API-Connections, etc.)
   ================================================ */

/* Allgemeine Card-Styles im Dark Mode */
.dark-mode .card {
    background-color: var(--card-bg, #1e2432) !important;
    border-color: var(--border-color, #2a3142) !important;
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .card-body {
    background-color: transparent !important;
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .card-header {
    background-color: var(--bg-secondary, #111319) !important;
    border-bottom-color: var(--border-color, #2a3142) !important;
    color: var(--text-color, #f8f9fa) !important;
}

.dark-mode .card-footer {
    background-color: var(--bg-secondary, #111319) !important;
    border-top-color: var(--border-color, #2a3142) !important;
    color: var(--text-color, #f8f9fa) !important;
}

/* Card-Footer mit bg-transparent im Dark Mode */
.dark-mode .card-footer.bg-transparent {
    background-color: transparent !important;
    border-top-color: var(--border-color, #2a3142) !important;
}

/* Card-Texte im Dark Mode */
.dark-mode .card-title {
    color: #ffffff !important;
}

.dark-mode .card-text {
    color: #e5e7eb !important;
}

.dark-mode .card-text.text-muted,
.dark-mode .card .text-muted {
    color: #9ca3af !important;
}

.dark-mode .card small {
    color: #9ca3af !important;
}

.dark-mode .card p {
    color: #e5e7eb !important;
}

/* Outline-Buttons in Cards im Dark Mode */
.dark-mode .card .btn-outline-primary {
    color: var(--primary-color, #8c52ff) !important;
    border-color: var(--primary-color, #8c52ff) !important;
}

.dark-mode .card .btn-outline-primary:hover {
    background-color: var(--primary-color, #8c52ff) !important;
    color: #ffffff !important;
}

.dark-mode .card .btn-outline-secondary {
    color: #9ca3af !important;
    border-color: #9ca3af !important;
}

.dark-mode .card .btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.dark-mode .card .btn-outline-info {
    color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

.dark-mode .card .btn-outline-info:hover {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
}

.dark-mode .card .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.dark-mode .card .btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.dark-mode .card .btn-outline-success {
    color: #28a745 !important;
    border-color: #28a745 !important;
}

.dark-mode .card .btn-outline-success:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* Alert-Info im Dark Mode */
.dark-mode .alert-info {
    background-color: rgba(23, 162, 184, 0.15) !important;
    border-color: rgba(23, 162, 184, 0.3) !important;
    color: #9ecfda !important;
}

.dark-mode .alert-info i {
    color: #17a2b8 !important;
}

/* Progress Bar Container im Dark Mode */
.dark-mode .progress {
    background-color: var(--bg-secondary, #111319) !important;
}

/* ================================================
   Navbar Toggler (Hamburger-Menü) Dark Mode Fixes
   ================================================ */

/* Navbar-Toggler Button im Dark Mode */
.dark-mode .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 0.5rem 0.75rem;
}

.dark-mode .navbar-toggler:hover,
.dark-mode .navbar-toggler:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 82, 255, 0.25);
}

/* Navbar-Toggler Icon im Dark Mode - Weißes Hamburger-Icon */
.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Sichtbarere Variante bei Hover */
.dark-mode .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}