/**
 * UI Fixes für verschiedene Probleme
 * Erstellt: 2025-01-14
 */

/* Problem 1 & 4: Bootstrap Icons und Text-Farben Fix */
/* Stelle sicher dass Bootstrap Icons korrekt geladen werden */
.bi {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bi::before {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
}

/* Fix für bg-primary text-white Kombinationen */
.bg-primary.text-white,
.card-header.bg-primary.text-white {
    color: #ffffff !important;
}

.bg-primary.text-white * {
    color: inherit !important;
}

/* Problem 2 & 3: Pagination SVG Size Fix - Tailwind zu Bootstrap Konversion */
/* Ersetze Tailwind Pagination Classes mit Bootstrap-kompatiblen Styles */
.pagination svg {
    width: 1rem !important;
    height: 1rem !important;
    display: inline-block;
    vertical-align: middle;
}

/* Pagination Link Fixes */
.relative.inline-flex {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.relative.inline-flex:hover {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.relative.inline-flex:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.relative.inline-flex.rounded-l-md {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.relative.inline-flex.rounded-r-md {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Dark mode fixes für Pagination */
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        background-color: #343a40 !important;
    }
    
    .dark\:border-gray-600 {
        border-color: #495057 !important;
    }
}

/* Dark Mode Fixes - Comprehensive */
[data-theme="dark"] .relative.inline-flex {
    color: #b6afa8;
    background-color: #0a0804;
    border-color: #1c190f;
}

[data-theme="dark"] .relative.inline-flex:hover {
    color: #efefee;
    background-color: #1c190f;
    border-color: #2c2722;
}

[data-theme="dark"] .relative.inline-flex:focus {
    box-shadow: 0 0 0 0.2rem rgba(226, 34, 120, 0.25);
}

[data-theme="dark"] .dark\:bg-gray-800 {
    background-color: #0a0804 !important;
}

[data-theme="dark"] .dark\:border-gray-600 {
    border-color: #1c190f !important;
}

/* Allgemeine SVG Icon Fixes */
.btn svg,
.nav-link svg,
.dropdown-item svg {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

/* Bootstrap Icons Fallback */
[class^="bi-"],
[class*=" bi-"] {
    display: inline-block;
    font-size: 1em;
    overflow: visible;
    vertical-align: -.125em;
}