/* Professional Badge Styling - Modern & Light */
:root {
    /* Light Professional Badge Color Palette */
    --badge-primary: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 50%, #bbdefb 100%);
    --badge-primary-text: #1565c0;
    --badge-primary-border: #90caf9;
    
    --badge-secondary: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #eeeeee 100%);
    --badge-secondary-text: #424242;
    --badge-secondary-border: #e0e0e0;
    
    --badge-success: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c8e6c9 100%);
    --badge-success-text: #2e7d32;
    --badge-success-border: #a5d6a7;
    
    --badge-warning: linear-gradient(135deg, #fffde7 0%, #fff9c4 50%, #fff176 100%);
    --badge-warning-text: #f57f17;
    --badge-warning-border: #fff176;
    
    --badge-danger: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ef9a9a 100%);
    --badge-danger-text: #c62828;
    --badge-danger-border: #ef9a9a;
    
    --badge-info: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%);
    --badge-info-text: #00695c;
    --badge-info-border: #80cbc4;
    
    --badge-light: linear-gradient(135deg, #ffffff 0%, #fafafa 50%, #f5f5f5 100%);
    --badge-light-text: #424242;
    --badge-light-border: #e0e0e0;
    
    --badge-dark: linear-gradient(135deg, #eceff1 0%, #cfd8dc 50%, #b0bec5 100%);
    --badge-dark-text: #37474f;
    --badge-dark-border: #b0bec5;
    
    /* Professional Badge Shadows */
    --badge-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --badge-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.12);
    
    /* Badge Border Radius */
    --badge-border-radius: 6px;
    --badge-border-radius-sm: 4px;
    --badge-border-radius-lg: 8px;
    
    /* Badge Transitions */
    --badge-transition: all 0.2s ease-in-out;
}

/* Base Badge Styling - Override Bootstrap with maximum specificity */
.badge,
.container-fluid .badge,
.card .badge,
.table .badge,
.modal .badge,
.dropdown .badge,
.navbar .badge,
.sidebar .badge,
.content .badge,
.main-content .badge,
.timesheet .badge,
.dashboard .badge,
.projects .badge,
.resources .badge,
.payments .badge,
.approvals .badge,
.settings .badge,
span.badge,
div.badge,
.list-group .badge,
.alert .badge,
.jumbotron .badge,
.well .badge,
.panel .badge,
.tab-content .badge,
.tab-pane .badge,
.collapse .badge,
.accordion .badge,
.carousel .badge,
.modal-body .badge,
.modal-footer .badge,
.modal-header .badge,
.offcanvas .badge,
.toast .badge,
.popover .badge,
.tooltip .badge,
.progress .badge,
.breadcrumb .badge,
.pagination .badge,
.nav .badge,
.navbar-nav .badge,
.dropdown-menu .badge {
    font-weight: 500 !important;
    border-radius: var(--badge-border-radius) !important;
    box-shadow: var(--badge-shadow) !important;
    transition: var(--badge-transition) !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    position: relative !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    padding: 0.35em 0.65em !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

.badge:hover,
.container-fluid .badge:hover,
.card .badge:hover,
.table .badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--badge-shadow-hover) !important;
    text-decoration: none !important;
}

/* Primary Badge - Maximum Specificity */
.badge.bg-primary,
.container-fluid .badge.bg-primary,
.card .badge.bg-primary,
.table .badge.bg-primary,
.modal .badge.bg-primary,
.dropdown .badge.bg-primary,
.navbar .badge.bg-primary,
.sidebar .badge.bg-primary,
.content .badge.bg-primary,
.main-content .badge.bg-primary,
.timesheet .badge.bg-primary,
.dashboard .badge.bg-primary,
.projects .badge.bg-primary,
.resources .badge.bg-primary,
.payments .badge.bg-primary,
.approvals .badge.bg-primary,
.settings .badge.bg-primary,
span.badge.bg-primary,
div.badge.bg-primary,
.list-group .badge.bg-primary,
.alert .badge.bg-primary,
.jumbotron .badge.bg-primary,
.well .badge.bg-primary,
.panel .badge.bg-primary,
.tab-content .badge.bg-primary,
.tab-pane .badge.bg-primary,
.collapse .badge.bg-primary,
.accordion .badge.bg-primary,
.carousel .badge.bg-primary,
.modal-body .badge.bg-primary,
.modal-footer .badge.bg-primary,
.modal-header .badge.bg-primary,
.offcanvas .badge.bg-primary,
.toast .badge.bg-primary,
.popover .badge.bg-primary,
.tooltip .badge.bg-primary,
.progress .badge.bg-primary,
.breadcrumb .badge.bg-primary,
.pagination .badge.bg-primary,
.nav .badge.bg-primary,
.navbar-nav .badge.bg-primary,
.dropdown-menu .badge.bg-primary {
    background: var(--badge-primary) !important;
    border-color: var(--badge-primary-border) !important;
    color: var(--badge-primary-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-primary:hover,
.container-fluid .badge.bg-primary:hover,
.card .badge.bg-primary:hover,
.table .badge.bg-primary:hover {
    background: var(--badge-primary) !important;
    border-color: var(--badge-primary-border) !important;
    color: var(--badge-primary-text) !important;
    opacity: 0.9 !important;
}

/* Secondary Badge - Maximum Specificity */
.badge.bg-secondary,
.container-fluid .badge.bg-secondary,
.card .badge.bg-secondary,
.table .badge.bg-secondary,
.modal .badge.bg-secondary,
.dropdown .badge.bg-secondary,
.navbar .badge.bg-secondary,
.sidebar .badge.bg-secondary,
.content .badge.bg-secondary,
.main-content .badge.bg-secondary,
.timesheet .badge.bg-secondary,
.dashboard .badge.bg-secondary,
.projects .badge.bg-secondary,
.resources .badge.bg-secondary,
.payments .badge.bg-secondary,
.approvals .badge.bg-secondary,
.settings .badge.bg-secondary,
span.badge.bg-secondary,
div.badge.bg-secondary,
.list-group .badge.bg-secondary,
.alert .badge.bg-secondary,
.jumbotron .badge.bg-secondary,
.well .badge.bg-secondary,
.panel .badge.bg-secondary,
.tab-content .badge.bg-secondary,
.tab-pane .badge.bg-secondary,
.collapse .badge.bg-secondary,
.accordion .badge.bg-secondary,
.carousel .badge.bg-secondary,
.modal-body .badge.bg-secondary,
.modal-footer .badge.bg-secondary,
.modal-header .badge.bg-secondary,
.offcanvas .badge.bg-secondary,
.toast .badge.bg-secondary,
.popover .badge.bg-secondary,
.tooltip .badge.bg-secondary,
.progress .badge.bg-secondary,
.breadcrumb .badge.bg-secondary,
.pagination .badge.bg-secondary,
.nav .badge.bg-secondary,
.navbar-nav .badge.bg-secondary,
.dropdown-menu .badge.bg-secondary {
    background: var(--badge-secondary) !important;
    border-color: var(--badge-secondary-border) !important;
    color: var(--badge-secondary-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-secondary:hover,
.container-fluid .badge.bg-secondary:hover,
.card .badge.bg-secondary:hover,
.table .badge.bg-secondary:hover {
    background: var(--badge-secondary) !important;
    border-color: var(--badge-secondary-border) !important;
    color: var(--badge-secondary-text) !important;
    opacity: 0.9 !important;
}

/* Success Badge - Maximum Specificity */
.badge.bg-success,
.container-fluid .badge.bg-success,
.card .badge.bg-success,
.table .badge.bg-success,
.modal .badge.bg-success,
.dropdown .badge.bg-success,
.navbar .badge.bg-success,
.sidebar .badge.bg-success,
.content .badge.bg-success,
.main-content .badge.bg-success,
.timesheet .badge.bg-success,
.dashboard .badge.bg-success,
.projects .badge.bg-success,
.resources .badge.bg-success,
.payments .badge.bg-success,
.approvals .badge.bg-success,
.settings .badge.bg-success,
span.badge.bg-success,
div.badge.bg-success,
.list-group .badge.bg-success,
.alert .badge.bg-success,
.jumbotron .badge.bg-success,
.well .badge.bg-success,
.panel .badge.bg-success,
.tab-content .badge.bg-success,
.tab-pane .badge.bg-success,
.collapse .badge.bg-success,
.accordion .badge.bg-success,
.carousel .badge.bg-success,
.modal-body .badge.bg-success,
.modal-footer .badge.bg-success,
.modal-header .badge.bg-success,
.offcanvas .badge.bg-success,
.toast .badge.bg-success,
.popover .badge.bg-success,
.tooltip .badge.bg-success,
.progress .badge.bg-success,
.breadcrumb .badge.bg-success,
.pagination .badge.bg-success,
.nav .badge.bg-success,
.navbar-nav .badge.bg-success,
.dropdown-menu .badge.bg-success {
    background: var(--badge-success) !important;
    border-color: var(--badge-success-border) !important;
    color: var(--badge-success-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-success:hover,
.container-fluid .badge.bg-success:hover,
.card .badge.bg-success:hover,
.table .badge.bg-success:hover {
    background: var(--badge-success) !important;
    border-color: var(--badge-success-border) !important;
    color: var(--badge-success-text) !important;
    opacity: 0.9 !important;
}

/* Warning Badge - Maximum Specificity */
.badge.bg-warning,
.container-fluid .badge.bg-warning,
.card .badge.bg-warning,
.table .badge.bg-warning,
.modal .badge.bg-warning,
.dropdown .badge.bg-warning,
.navbar .badge.bg-warning,
.sidebar .badge.bg-warning,
.content .badge.bg-warning,
.main-content .badge.bg-warning,
.timesheet .badge.bg-warning,
.dashboard .badge.bg-warning,
.projects .badge.bg-warning,
.resources .badge.bg-warning,
.payments .badge.bg-warning,
.approvals .badge.bg-warning,
.settings .badge.bg-warning,
span.badge.bg-warning,
div.badge.bg-warning,
.list-group .badge.bg-warning,
.alert .badge.bg-warning,
.jumbotron .badge.bg-warning,
.well .badge.bg-warning,
.panel .badge.bg-warning,
.tab-content .badge.bg-warning,
.tab-pane .badge.bg-warning,
.collapse .badge.bg-warning,
.accordion .badge.bg-warning,
.carousel .badge.bg-warning,
.modal-body .badge.bg-warning,
.modal-footer .badge.bg-warning,
.modal-header .badge.bg-warning,
.offcanvas .badge.bg-warning,
.toast .badge.bg-warning,
.popover .badge.bg-warning,
.tooltip .badge.bg-warning,
.progress .badge.bg-warning,
.breadcrumb .badge.bg-warning,
.pagination .badge.bg-warning,
.nav .badge.bg-warning,
.navbar-nav .badge.bg-warning,
.dropdown-menu .badge.bg-warning {
    background: var(--badge-warning) !important;
    border-color: var(--badge-warning-border) !important;
    color: var(--badge-warning-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-warning:hover,
.container-fluid .badge.bg-warning:hover,
.card .badge.bg-warning:hover,
.table .badge.bg-warning:hover {
    background: var(--badge-warning) !important;
    border-color: var(--badge-warning-border) !important;
    color: var(--badge-warning-text) !important;
    opacity: 0.9 !important;
}

/* Danger Badge - Maximum Specificity */
.badge.bg-danger,
.container-fluid .badge.bg-danger,
.card .badge.bg-danger,
.table .badge.bg-danger,
.modal .badge.bg-danger,
.dropdown .badge.bg-danger,
.navbar .badge.bg-danger,
.sidebar .badge.bg-danger,
.content .badge.bg-danger,
.main-content .badge.bg-danger,
.timesheet .badge.bg-danger,
.dashboard .badge.bg-danger,
.projects .badge.bg-danger,
.resources .badge.bg-danger,
.payments .badge.bg-danger,
.approvals .badge.bg-danger,
.settings .badge.bg-danger,
span.badge.bg-danger,
div.badge.bg-danger,
.list-group .badge.bg-danger,
.alert .badge.bg-danger,
.jumbotron .badge.bg-danger,
.well .badge.bg-danger,
.panel .badge.bg-danger,
.tab-content .badge.bg-danger,
.tab-pane .badge.bg-danger,
.collapse .badge.bg-danger,
.accordion .badge.bg-danger,
.carousel .badge.bg-danger,
.modal-body .badge.bg-danger,
.modal-footer .badge.bg-danger,
.modal-header .badge.bg-danger,
.offcanvas .badge.bg-danger,
.toast .badge.bg-danger,
.popover .badge.bg-danger,
.tooltip .badge.bg-danger,
.progress .badge.bg-danger,
.breadcrumb .badge.bg-danger,
.pagination .badge.bg-danger,
.nav .badge.bg-danger,
.navbar-nav .badge.bg-danger,
.dropdown-menu .badge.bg-danger {
    background: var(--badge-danger) !important;
    border-color: var(--badge-danger-border) !important;
    color: var(--badge-danger-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-danger:hover,
.container-fluid .badge.bg-danger:hover,
.card .badge.bg-danger:hover,
.table .badge.bg-danger:hover {
    background: var(--badge-danger) !important;
    border-color: var(--badge-danger-border) !important;
    color: var(--badge-danger-text) !important;
    opacity: 0.9 !important;
}

/* Info Badge - Maximum Specificity */
.badge.bg-info,
.container-fluid .badge.bg-info,
.card .badge.bg-info,
.table .badge.bg-info,
.modal .badge.bg-info,
.dropdown .badge.bg-info,
.navbar .badge.bg-info,
.sidebar .badge.bg-info,
.content .badge.bg-info,
.main-content .badge.bg-info,
.timesheet .badge.bg-info,
.dashboard .badge.bg-info,
.projects .badge.bg-info,
.resources .badge.bg-info,
.payments .badge.bg-info,
.approvals .badge.bg-info,
.settings .badge.bg-info,
span.badge.bg-info,
div.badge.bg-info,
.list-group .badge.bg-info,
.alert .badge.bg-info,
.jumbotron .badge.bg-info,
.well .badge.bg-info,
.panel .badge.bg-info,
.tab-content .badge.bg-info,
.tab-pane .badge.bg-info,
.collapse .badge.bg-info,
.accordion .badge.bg-info,
.carousel .badge.bg-info,
.modal-body .badge.bg-info,
.modal-footer .badge.bg-info,
.modal-header .badge.bg-info,
.offcanvas .badge.bg-info,
.toast .badge.bg-info,
.popover .badge.bg-info,
.tooltip .badge.bg-info,
.progress .badge.bg-info,
.breadcrumb .badge.bg-info,
.pagination .badge.bg-info,
.nav .badge.bg-info,
.navbar-nav .badge.bg-info,
.dropdown-menu .badge.bg-info {
    background: var(--badge-info) !important;
    border-color: var(--badge-info-border) !important;
    color: var(--badge-info-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-info:hover,
.container-fluid .badge.bg-info:hover,
.card .badge.bg-info:hover,
.table .badge.bg-info:hover {
    background: var(--badge-info) !important;
    border-color: var(--badge-info-border) !important;
    color: var(--badge-info-text) !important;
    opacity: 0.9 !important;
}

/* Light Badge - Maximum Specificity */
.badge.bg-light,
.container-fluid .badge.bg-light,
.card .badge.bg-light,
.table .badge.bg-light,
.modal .badge.bg-light,
.dropdown .badge.bg-light,
.navbar .badge.bg-light,
.sidebar .badge.bg-light,
.content .badge.bg-light,
.main-content .badge.bg-light,
.timesheet .badge.bg-light,
.dashboard .badge.bg-light,
.projects .badge.bg-light,
.resources .badge.bg-light,
.payments .badge.bg-light,
.approvals .badge.bg-light,
.settings .badge.bg-light,
span.badge.bg-light,
div.badge.bg-light,
.list-group .badge.bg-light,
.alert .badge.bg-light,
.jumbotron .badge.bg-light,
.well .badge.bg-light,
.panel .badge.bg-light,
.tab-content .badge.bg-light,
.tab-pane .badge.bg-light,
.collapse .badge.bg-light,
.accordion .badge.bg-light,
.carousel .badge.bg-light,
.modal-body .badge.bg-light,
.modal-footer .badge.bg-light,
.modal-header .badge.bg-light,
.offcanvas .badge.bg-light,
.toast .badge.bg-light,
.popover .badge.bg-light,
.tooltip .badge.bg-light,
.progress .badge.bg-light,
.breadcrumb .badge.bg-light,
.pagination .badge.bg-light,
.nav .badge.bg-light,
.navbar-nav .badge.bg-light,
.dropdown-menu .badge.bg-light {
    background: var(--badge-light) !important;
    border-color: var(--badge-light-border) !important;
    color: var(--badge-light-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-light:hover,
.container-fluid .badge.bg-light:hover,
.card .badge.bg-light:hover,
.table .badge.bg-light:hover {
    background: var(--badge-light) !important;
    border-color: var(--badge-light-border) !important;
    color: var(--badge-light-text) !important;
    opacity: 0.9 !important;
}

/* Dark Badge - Maximum Specificity */
.badge.bg-dark,
.container-fluid .badge.bg-dark,
.card .badge.bg-dark,
.table .badge.bg-dark,
.modal .badge.bg-dark,
.dropdown .badge.bg-dark,
.navbar .badge.bg-dark,
.sidebar .badge.bg-dark,
.content .badge.bg-dark,
.main-content .badge.bg-dark,
.timesheet .badge.bg-dark,
.dashboard .badge.bg-dark,
.projects .badge.bg-dark,
.resources .badge.bg-dark,
.payments .badge.bg-dark,
.approvals .badge.bg-dark,
.settings .badge.bg-dark,
span.badge.bg-dark,
div.badge.bg-dark,
.list-group .badge.bg-dark,
.alert .badge.bg-dark,
.jumbotron .badge.bg-dark,
.well .badge.bg-dark,
.panel .badge.bg-dark,
.tab-content .badge.bg-dark,
.tab-pane .badge.bg-dark,
.collapse .badge.bg-dark,
.accordion .badge.bg-dark,
.carousel .badge.bg-dark,
.modal-body .badge.bg-dark,
.modal-footer .badge.bg-dark,
.modal-header .badge.bg-dark,
.offcanvas .badge.bg-dark,
.toast .badge.bg-dark,
.popover .badge.bg-dark,
.tooltip .badge.bg-dark,
.progress .badge.bg-dark,
.breadcrumb .badge.bg-dark,
.pagination .badge.bg-dark,
.nav .badge.bg-dark,
.navbar-nav .badge.bg-dark,
.dropdown-menu .badge.bg-dark {
    background: var(--badge-dark) !important;
    border-color: var(--badge-dark-border) !important;
    color: var(--badge-dark-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge.bg-dark:hover,
.container-fluid .badge.bg-dark:hover,
.card .badge.bg-dark:hover,
.table .badge.bg-dark:hover {
    background: var(--badge-dark) !important;
    border-color: var(--badge-dark-border) !important;
    color: var(--badge-dark-text) !important;
    opacity: 0.9 !important;
}

/* Badge Sizes */
.badge-sm,
.container-fluid .badge-sm,
.card .badge-sm,
.table .badge-sm {
    padding: 0.25em 0.5em !important;
    font-size: 0.65rem !important;
    border-radius: var(--badge-border-radius-sm) !important;
}

.badge-lg,
.container-fluid .badge-lg,
.card .badge-lg,
.table .badge-lg {
    padding: 0.5em 0.8em !important;
    font-size: 0.875rem !important;
    border-radius: var(--badge-border-radius-lg) !important;
}

/* Professional Badge Variants */
.badge-professional,
.container-fluid .badge-professional {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: white !important;
    border-color: #34495e !important;
}

.badge-modern,
.container-fluid .badge-modern {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    color: white !important;
    border-color: #2980b9 !important;
}

/* Status Badge Variants - Custom Classes */
.status-badge {
    padding: 0.35em 0.65em !important;
    border-radius: var(--badge-border-radius) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    box-shadow: var(--badge-shadow) !important;
    transition: var(--badge-transition) !important;
    border: 1px solid transparent !important;
}

.status-draft {
    background: var(--badge-secondary) !important;
    color: var(--badge-secondary-text) !important;
    border-color: var(--badge-secondary-border) !important;
}

.status-submitted,
.status-pending {
    background: var(--badge-warning) !important;
    color: var(--badge-warning-text) !important;
    border-color: var(--badge-warning-border) !important;
}

.status-approved,
.status-active {
    background: var(--badge-success) !important;
    color: var(--badge-success-text) !important;
    border-color: var(--badge-success-border) !important;
}

.status-rejected,
.status-inactive {
    background: var(--badge-danger) !important;
    color: var(--badge-danger-text) !important;
    border-color: var(--badge-danger-border) !important;
}

.status-info {
    background: var(--badge-info) !important;
    color: var(--badge-info-text) !important;
    border-color: var(--badge-info-border) !important;
}

/* Badge with Icons */
.badge i,
.badge .fas,
.badge .far,
.badge .fab {
    font-size: 0.8em !important;
    margin-right: 0.25em !important;
}

.badge i:last-child,
.badge .fas:last-child,
.badge .far:last-child,
.badge .fab:last-child {
    margin-right: 0 !important;
    margin-left: 0.25em !important;
}

/* Responsive Badge Design */
@media (max-width: 768px) {
    .badge,
    .container-fluid .badge {
        padding: 0.3em 0.55em !important;
        font-size: 0.7rem !important;
    }
    
    .badge-sm,
    .container-fluid .badge-sm {
        padding: 0.2em 0.4em !important;
        font-size: 0.6rem !important;
    }
    
    .badge-lg,
    .container-fluid .badge-lg {
        padding: 0.4em 0.7em !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 576px) {
    .badge,
    .container-fluid .badge {
        padding: 0.25em 0.5em !important;
        font-size: 0.65rem !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .badge,
    .container-fluid .badge {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .badge,
    .container-fluid .badge {
        transition: none !important;
    }
    
    .badge:hover,
    .container-fluid .badge:hover {
        transform: none !important;
    }
}

/* Print Styles */
@media print {
    .badge,
    .container-fluid .badge {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
        box-shadow: none !important;
    }
}

/* COMPREHENSIVE BADGE VISIBILITY FIXES - MAXIMUM PRIORITY */
/* This section ensures ALL badges are visible regardless of context */

/* Force visibility for all badge elements */
.badge,
span.badge,
div.badge {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Emergency fallback for completely invisible badges */
.badge[style*="display: none"],
.badge[style*="visibility: hidden"],
.badge[style*="opacity: 0"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--badge-primary) !important;
    color: var(--badge-primary-text) !important;
    border: 1px solid var(--badge-primary-border) !important;
    padding: 0.35em 0.65em !important;
    border-radius: var(--badge-border-radius) !important;
}