/**
 * OVERLAB - Einheitliches elegantes Design für Cards und Buttons
 * Minimalistisches Design mit dezentem blauen Akzent
 */

/* ========================================
   GLOBALE AKTIONS-BUTTONS - KLEINERE ICONS
   ======================================== */

/* Alle Aktions-Buttons in Tabellen kleiner machen */
table .btn-group-sm .btn,
table .btn-sm,
table td .btn-group .btn,
table td .btn {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icons in Aktions-Buttons kleiner und zentriert */
table .btn-group-sm .btn i,
table .btn-sm i,
table td .btn-group .btn i,
table td .btn i {
    font-size: 0.875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Spezifisch für btn-group-sm */
.btn-group-sm .btn {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-group-sm .btn i {
    font-size: 0.875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   STATISTIK-CARDS - Hintergrundfarben beibehalten
   ======================================== */
/* Diese Regeln werden nach der .card Regel definiert, damit sie überschreiben */

/* ========================================
   CSS VARIABLEN
   ======================================== */
:root {
    --overlab-card-bg: #ffffff;
    --overlab-card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --overlab-card-border: #e9ecef;
    --overlab-card-radius: 8px;
    
    --overlab-header-bg: #f0f4f8;
    --overlab-header-text: #495057;
    --overlab-header-border: #e9ecef;
    
    --overlab-btn-primary: #4a90e2;
    --overlab-btn-primary-hover: #3a7bc8;
    --overlab-btn-text: #ffffff;
    --overlab-btn-radius: 6px;
}

/* ========================================
   CARDS - Minimalistisches Design
   ======================================== */
.card {
    background-color: var(--overlab-card-bg) !important;
    border: 1px solid var(--overlab-card-border) !important;
    border-radius: var(--overlab-card-radius) !important;
    box-shadow: var(--overlab-card-shadow) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ========================================
   STATISTIK-CARDS - Hintergrundfarben direkt nach .card Regel
   ======================================== */
/* Sehr spezifische Selektoren, damit sie die .card Regel überschreiben */
/* Bootstrap bg-* Klassen haben höhere Priorität */
/* MAXIMALE SPEZIFITÄT für alle möglichen Kombinationen */
div.card.bg-primary,
a .card.bg-primary,
div.card.bg-primary.card-hover,
a .card.bg-primary.card-hover,
.card.bg-primary,
.bg-primary.card,
a.text-decoration-none .card.bg-primary,
div.row .card.bg-primary,
div.col-md-3 .card.bg-primary {
    background-color: #0d6efd !important;
    background: #0d6efd !important;
    background-image: none !important;
}

div.card.bg-success,
a .card.bg-success,
div.card.bg-success.card-hover,
a .card.bg-success.card-hover,
.card.bg-success,
.bg-success.card,
a.text-decoration-none .card.bg-success,
div.row .card.bg-success,
div.col-md-3 .card.bg-success {
    background-color: #198754 !important;
    background: #198754 !important;
    background-image: none !important;
}

div.card.bg-info,
a .card.bg-info,
div.card.bg-info.card-hover,
a .card.bg-info.card-hover,
.card.bg-info,
.bg-info.card,
a.text-decoration-none .card.bg-info,
div.row .card.bg-info,
div.col-md-3 .card.bg-info {
    background-color: #0dcaf0 !important;
    background: #0dcaf0 !important;
    background-image: none !important;
}

div.card.bg-warning,
a .card.bg-warning,
div.card.bg-warning.card-hover,
a .card.bg-warning.card-hover,
.card.bg-warning,
.bg-warning.card,
a.text-decoration-none .card.bg-warning,
div.row .card.bg-warning,
div.col-md-3 .card.bg-warning {
    background-color: #ffc107 !important;
    background: #ffc107 !important;
    background-image: none !important;
}

div.card.bg-danger,
a .card.bg-danger,
div.card.bg-danger.card-hover,
a .card.bg-danger.card-hover,
.card.bg-danger,
.bg-danger.card,
a.text-decoration-none .card.bg-danger,
div.row .card.bg-danger,
div.col-md-3 .card.bg-danger {
    background-color: #dc3545 !important;
    background: #dc3545 !important;
    background-image: none !important;
}

div.card.bg-dark,
a .card.bg-dark,
div.card.bg-dark.card-hover,
a .card.bg-dark.card-hover,
.card.bg-dark,
.bg-dark.card,
a.text-decoration-none .card.bg-dark,
div.row .card.bg-dark,
div.col-md-3 .card.bg-dark {
    background-color: #212529 !important;
    background: #212529 !important;
    background-image: none !important;
}

div.card.bg-secondary,
a .card.bg-secondary,
div.card.bg-secondary.card-hover,
a .card.bg-secondary.card-hover,
.card.bg-secondary,
.bg-secondary.card,
a.text-decoration-none .card.bg-secondary,
div.row .card.bg-secondary,
div.col-md-3 .card.bg-secondary {
    background-color: #6c757d !important;
    background: #6c757d !important;
    background-image: none !important;
}

/* Text-Farben für Statistik-Cards */
div.card.bg-primary.text-white,
a .card.bg-primary.text-white,
div.card.bg-success.text-white,
a .card.bg-success.text-white,
div.card.bg-info.text-white,
a .card.bg-info.text-white,
div.card.bg-danger.text-white,
a .card.bg-danger.text-white,
div.card.bg-dark.text-white,
a .card.bg-dark.text-white,
div.card.bg-secondary.text-white,
a .card.bg-secondary.text-white {
    color: #ffffff !important;
}

div.card.bg-primary.text-white *,
a .card.bg-primary.text-white *,
div.card.bg-success.text-white *,
a .card.bg-success.text-white *,
div.card.bg-info.text-white *,
a .card.bg-info.text-white *,
div.card.bg-danger.text-white *,
a .card.bg-danger.text-white *,
div.card.bg-dark.text-white *,
a .card.bg-dark.text-white *,
div.card.bg-secondary.text-white *,
a .card.bg-secondary.text-white * {
    color: #ffffff !important;
}

/* Warning Card mit schwarzem Text */
div.card.bg-warning.text-white,
a .card.bg-warning.text-white {
    color: #000000 !important;
}

div.card.bg-warning.text-white *,
a .card.bg-warning.text-white * {
    color: #000000 !important;
}

.card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px);
}

/* Statistik-Cards behalten Hintergrundfarben beim Hover */
/* Sehr spezifische Selektoren für Hover-Zustand */
div.card.bg-primary:hover,
a .card.bg-primary:hover,
div.card.bg-primary.card-hover:hover,
a .card.bg-primary.card-hover:hover,
a:hover .card.bg-primary,
a:hover .card.bg-primary.card-hover {
    background-color: #0d6efd !important;
}

div.card.bg-success:hover,
a .card.bg-success:hover,
div.card.bg-success.card-hover:hover,
a .card.bg-success.card-hover:hover,
a:hover .card.bg-success,
a:hover .card.bg-success.card-hover {
    background-color: #198754 !important;
}

div.card.bg-info:hover,
a .card.bg-info:hover,
div.card.bg-info.card-hover:hover,
a .card.bg-info.card-hover:hover,
a:hover .card.bg-info,
a:hover .card.bg-info.card-hover {
    background-color: #0dcaf0 !important;
}

div.card.bg-warning:hover,
a .card.bg-warning:hover,
div.card.bg-warning.card-hover:hover,
a .card.bg-warning.card-hover:hover,
a:hover .card.bg-warning,
a:hover .card.bg-warning.card-hover {
    background-color: #ffc107 !important;
}

div.card.bg-danger:hover,
a .card.bg-danger:hover,
div.card.bg-danger.card-hover:hover,
a .card.bg-danger.card-hover:hover,
a:hover .card.bg-danger,
a:hover .card.bg-danger.card-hover {
    background-color: #dc3545 !important;
}

div.card.bg-dark:hover,
a .card.bg-dark:hover,
div.card.bg-dark.card-hover:hover,
a .card.bg-dark.card-hover:hover,
a:hover .card.bg-dark,
a:hover .card.bg-dark.card-hover {
    background-color: #212529 !important;
}

div.card.bg-secondary:hover,
a .card.bg-secondary:hover,
div.card.bg-secondary.card-hover:hover,
a .card.bg-secondary.card-hover:hover,
a:hover .card.bg-secondary,
a:hover .card.bg-secondary.card-hover {
    background-color: #6c757d !important;
}

/* Text-Farben beim Hover beibehalten */
div.card.bg-primary.text-white:hover,
a .card.bg-primary.text-white:hover,
div.card.bg-success.text-white:hover,
a .card.bg-success.text-white:hover,
div.card.bg-info.text-white:hover,
a .card.bg-info.text-white:hover,
div.card.bg-danger.text-white:hover,
a .card.bg-danger.text-white:hover,
div.card.bg-dark.text-white:hover,
a .card.bg-dark.text-white:hover,
div.card.bg-secondary.text-white:hover,
a .card.bg-secondary.text-white:hover,
a:hover .card.bg-primary.text-white,
a:hover .card.bg-success.text-white,
a:hover .card.bg-info.text-white,
a:hover .card.bg-danger.text-white,
a:hover .card.bg-dark.text-white,
a:hover .card.bg-secondary.text-white {
    color: #ffffff !important;
}

div.card.bg-primary.text-white:hover *,
a .card.bg-primary.text-white:hover *,
div.card.bg-success.text-white:hover *,
a .card.bg-success.text-white:hover *,
div.card.bg-info.text-white:hover *,
a .card.bg-info.text-white:hover *,
div.card.bg-danger.text-white:hover *,
a .card.bg-danger.text-white:hover *,
div.card.bg-dark.text-white:hover *,
a .card.bg-dark.text-white:hover *,
div.card.bg-secondary.text-white:hover *,
a .card.bg-secondary.text-white:hover *,
a:hover .card.bg-primary.text-white *,
a:hover .card.bg-success.text-white *,
a:hover .card.bg-info.text-white *,
a:hover .card.bg-danger.text-white *,
a:hover .card.bg-dark.text-white *,
a:hover .card.bg-secondary.text-white * {
    color: #ffffff !important;
}

/* Warning Card mit schwarzem Text beim Hover */
div.card.bg-warning.text-white:hover,
a .card.bg-warning.text-white:hover,
a:hover .card.bg-warning.text-white {
    color: #000000 !important;
}

div.card.bg-warning.text-white:hover *,
a .card.bg-warning.text-white:hover *,
a:hover .card.bg-warning.text-white * {
    color: #000000 !important;
}

/* Entferne farbige Borders von Cards */
.card.border-primary,
.card.border-success,
.card.border-info,
.card.border-warning,
.card.border-danger,
.card.border-secondary,
.card.border-dark {
    border-color: var(--overlab-card-border) !important;
}

/* ========================================
   CARD HEADER - Dezenter blauer Akzent
   ======================================== */
.card-header {
    background-color: var(--overlab-header-bg) !important;
    border-bottom: 1px solid var(--overlab-header-border) !important;
    color: var(--overlab-header-text) !important;
    font-weight: 600;
    padding: 0.75rem 1rem !important;
}

.card-header h5,
.card-header h6,
.card-header .h5,
.card-header .h6 {
    color: var(--overlab-header-text) !important;
    margin-bottom: 0;
    font-weight: 600;
}

.card-header i,
.card-header .bi {
    color: var(--overlab-header-text) !important;
    opacity: 0.8;
}

/* Überschreibe alle bunten Card-Header Hintergründe */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-dark,
.card-header.bg-light {
    background-color: var(--overlab-header-bg) !important;
    color: var(--overlab-header-text) !important;
}

.card-header.bg-primary.text-white,
.card-header.bg-success.text-white,
.card-header.bg-info.text-white,
.card-header.bg-warning.text-dark,
.card-header.bg-danger.text-white,
.card-header.bg-secondary.text-white,
.card-header.bg-dark.text-white,
.card-header.bg-light.text-white {
    color: var(--overlab-header-text) !important;
}

/* ========================================
   BUTTONS - Filled Buttons
   ======================================== */
/* Primäre Buttons */
.btn-primary,
.btn {
    background-color: var(--overlab-btn-primary) !important;
    border-color: var(--overlab-btn-primary) !important;
    color: var(--overlab-btn-text) !important;
    border-radius: var(--overlab-btn-radius) !important;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem !important;
}

/* Button-Small mit besserem Padding */
.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Icons in Buttons - immer weiß */
.btn-primary i,
.btn-primary .bi,
.btn i,
.btn .bi,
.btn-success i,
.btn-success .bi,
.btn-danger i,
.btn-danger .bi,
.btn-info i,
.btn-info .bi,
.btn-secondary i,
.btn-secondary .bi {
    color: #ffffff !important;
}

/* Icon-Abstände in Buttons - nur wenn kein expliziter Margin gesetzt */
.btn i:not([class*="me-"]):not([class*="ms-"]),
.btn .bi:not([class*="me-"]):not([class*="ms-"]) {
    margin-right: 0.375rem;
}

/* Icons mit me-1 oder me-2 behalten ihre Abstände */
.btn i.me-1,
.btn .bi.me-1 {
    margin-right: 0.25rem !important;
}

.btn i.me-2,
.btn .bi.me-2 {
    margin-right: 0.5rem !important;
}

/* Button-Gruppen mit besserem Abstand */
.btn-group {
    gap: 0.25rem !important;
}

.btn-group .btn {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Spezielle Behandlung für w-100 Button-Gruppen */
.btn-group.w-100 .btn {
    flex: 1;
    margin: 0 !important;
}

.btn-primary:hover,
.btn:hover {
    background-color: var(--overlab-btn-primary-hover) !important;
    border-color: var(--overlab-btn-primary-hover) !important;
    color: var(--overlab-btn-text) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.btn-primary:focus,
.btn:focus {
    background-color: var(--overlab-btn-primary-hover) !important;
    border-color: var(--overlab-btn-primary-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

.btn-primary:active,
.btn:active {
    background-color: var(--overlab-btn-primary-hover) !important;
    border-color: var(--overlab-btn-primary-hover) !important;
    transform: translateY(0);
}

/* Outline Buttons zu Filled Buttons konvertieren */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    background-color: var(--overlab-btn-primary) !important;
    border-color: var(--overlab-btn-primary) !important;
    color: var(--overlab-btn-text) !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    background-color: var(--overlab-btn-primary-hover) !important;
    border-color: var(--overlab-btn-primary-hover) !important;
    color: var(--overlab-btn-text) !important;
}

/* Icons in Outline-Buttons auch weiß */
.btn-outline-primary i,
.btn-outline-primary .bi,
.btn-outline-success i,
.btn-outline-success .bi,
.btn-outline-info i,
.btn-outline-info .bi,
.btn-outline-warning i,
.btn-outline-warning .bi,
.btn-outline-danger i,
.btn-outline-danger .bi {
    color: #ffffff !important;
}

/* Outline Secondary/Dark Buttons zu Secondary Buttons */
.btn-outline-secondary,
.btn-outline-dark {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

/* Icons in Secondary/Dark Buttons auch weiß */
.btn-outline-secondary i,
.btn-outline-secondary .bi,
.btn-outline-dark i,
.btn-outline-dark .bi {
    color: #ffffff !important;
}

/* Sekundäre Buttons (für weniger wichtige Aktionen) */
.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

.btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

/* Danger Buttons (für Löschen etc.) */
.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

.btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
}

/* Success Buttons */
.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

.btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: #ffffff !important;
}

/* Info Buttons */
.btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
}

.btn-info:hover {
    background-color: #0aa2c0 !important;
    border-color: #098a9f !important;
    color: #ffffff !important;
}

/* Warning Buttons */
.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
    padding: 0.5rem 1rem !important;
}

.btn-warning:hover {
    background-color: #ffb300 !important;
    border-color: #ffa000 !important;
    color: #000000 !important;
}

/* Icons in Warning-Buttons schwarz (wegen gelbem Hintergrund) */
.btn-warning i,
.btn-warning .bi {
    color: #000000 !important;
}

/* ========================================
   STATUS BADGES - Bleiben farbig
   ======================================== */
/* Badges bleiben unverändert für schnelle Erkennung */
.badge {
    /* Bestehende Farben beibehalten */
}

/* ========================================
   RESPONSIVE ANPASSUNGEN
   ======================================== */
@media (max-width: 768px) {
    .card {
        border-radius: 6px;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   SPEZIELLE ÜBERSCHREIBUNGEN
   ======================================== */
/* Sicherstellen, dass wichtige Buttons sichtbar bleiben */
.btn-link {
    color: var(--overlab-btn-primary) !important;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--overlab-btn-primary-hover) !important;
    text-decoration: underline;
}

/* Disabled Buttons */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}