/* BISpicy POS Brand Theme - Color Scheme & Typography */
:root {
    /* BISpicy Brand Colors */
    --bispicy-bg-primary: #ecf8fe;
    --bispicy-bg-secondary: #f9fcff;
    --bispicy-btn-primary: #3c85ac;
    --bispicy-btn-secondary: #940039;
    --bispicy-input-bg: #e9eff6;
    --bispicy-input-disabled: #d4d9e3;
    --bispicy-header-bg: #3c85ac;
    --bispicy-navbar-bg: #001220;

    /* BISpicy Typography */
    --bispicy-font-family: 'Outfit', sans-serif;

    /* BISpicy Hero Section */
    --bispicy-hero-bg: #132e42;

    /* BISpicy Text Colors - WCAG AA Compliant */
    --bispicy-text-primary: #1a365d;
    --bispicy-text-secondary: #2d3748;
    --bispicy-text-muted: #5a6c7d; /* Improved from #718096 for 4.5:1 contrast */
    --bispicy-text-light: #4a5568; /* Improved from #6b7680 for 6.96:1 contrast */
    --bispicy-text-disabled: #516070; /* New color for disabled states */

    /* Improved Colors for Bootstrap Classes */
    --bispicy-warning-text: #b45309; /* WCAG compliant warning color */
    --bispicy-success-text: #146c43; /* WCAG compliant success color */
}

/* Global Font Family Override */
* {
    font-family: var(--bispicy-font-family) !important;
}

/* Icon Font Exceptions - Icons should keep their original font families */
.fas, .far, .fal, .fat, .fad, .fab {
    font-family: "Font Awesome 6 Free" !important;
}

.bi {
    font-family: "Bootstrap Icons" !important;
}

.material-icons {
    font-family: "Material Icons" !important;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: inherit !important;
}

body {
    font-family: var(--bispicy-font-family) !important;
    color: var(--bispicy-text-primary) !important;
}

/* Global Text Color Overrides */
h1, h2, h3, h4, h5, h6 {
    color: var(--bispicy-text-primary) !important;
}

p, span, div {
    color: var(--bispicy-text-secondary);
}

.text-muted {
    color: var(--bispicy-text-muted) !important;
}

.text-light {
    color: var(--bispicy-text-light) !important;
}

/* BISpicy Text Color Classes */
.text-bispicy-primary {
    color: var(--bispicy-text-primary) !important;
}

.text-bispicy-secondary {
    color: var(--bispicy-text-secondary) !important;
}

.text-bispicy-muted {
    color: var(--bispicy-text-muted) !important;
}

.text-bispicy-light {
    color: var(--bispicy-text-light) !important;
}

/* Background Classes */
.bg-bispicy-primary {
    background-color: var(--bispicy-bg-primary) !important;
}

.bg-bispicy-secondary {
    background-color: var(--bispicy-bg-secondary) !important;
}

/* Action Button Classes */
.btn-bispicy-primary {
    background-color: var(--bispicy-btn-primary);
    border-color: var(--bispicy-btn-primary);
    color: white !important;
}

.btn-bispicy-primary:hover {
    background-color: #2e6888;
    border-color: #2e6888;
    color: white !important;
}

.btn-bispicy-secondary {
    background-color: var(--bispicy-btn-secondary);
    border-color: var(--bispicy-btn-secondary);
    color: white !important;
}

.btn-bispicy-secondary:hover {
    background-color: #7a002d;
    border-color: #7a002d;
    color: white !important;
}

/* Outline Button Classes */
.btn-outline-light.btn-bispicy-secondary {
    border-color: var(--bispicy-btn-secondary);
    color: white !important;
    background-color: transparent;
}

.btn-outline-light.btn-bispicy-secondary:hover {
    background-color: var(--bispicy-btn-secondary);
    border-color: var(--bispicy-btn-secondary);
    color: white !important;
}

.btn-outline-light.btn-bispicy-primary {
    border-color: var(--bispicy-btn-primary);
    color: white !important;
    background-color: transparent;
}

.btn-outline-light.btn-bispicy-primary:hover {
    background-color: var(--bispicy-btn-primary);
    border-color: var(--bispicy-btn-primary);
    color: white !important;
}

/* Comprehensive Button Text Color Rules */
.btn-bispicy-primary,
.btn-bispicy-primary:hover,
.btn-bispicy-primary:focus,
.btn-bispicy-primary:active,
.btn-bispicy-primary.active,
.btn-bispicy-primary:visited {
    color: white !important;
}

.btn-bispicy-secondary,
.btn-bispicy-secondary:hover,
.btn-bispicy-secondary:focus,
.btn-bispicy-secondary:active,
.btn-bispicy-secondary.active,
.btn-bispicy-secondary:visited {
    color: white !important;
}

/* Ensure all text inside buttons is white */
.btn-bispicy-primary *,
.btn-bispicy-secondary * {
    color: white !important;
}

/* Outline buttons comprehensive states */
.btn-outline-light.btn-bispicy-primary,
.btn-outline-light.btn-bispicy-primary:hover,
.btn-outline-light.btn-bispicy-primary:focus,
.btn-outline-light.btn-bispicy-primary:active,
.btn-outline-light.btn-bispicy-primary.active {
    color: white !important;
}

.btn-outline-light.btn-bispicy-secondary,
.btn-outline-light.btn-bispicy-secondary:hover,
.btn-outline-light.btn-bispicy-secondary:focus,
.btn-outline-light.btn-bispicy-secondary:active,
.btn-outline-light.btn-bispicy-secondary.active {
    color: white !important;
}

/* Small button variants */
.btn-sm.btn-bispicy-primary,
.btn-sm.btn-bispicy-secondary,
.btn-lg.btn-bispicy-primary,
.btn-lg.btn-bispicy-secondary {
    color: white !important;
}

/* Bootstrap standard buttons in Kundencenter context */
.container .btn-primary,
.container .btn-success,
.container .btn-info,
.container .btn-warning,
.container .btn-danger,
.container .btn-secondary {
    color: white !important;
}

.container .btn-primary:hover,
.container .btn-success:hover,
.container .btn-info:hover,
.container .btn-warning:hover,
.container .btn-danger:hover,
.container .btn-secondary:hover {
    color: white !important;
}

/* Dropdown buttons and toggles */
.dropdown-toggle,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    color: white !important;
}

/* Ensure button icons are white */
.btn-bispicy-primary i,
.btn-bispicy-secondary i,
.btn-primary i,
.btn-secondary i {
    color: white !important;
}

/* Input Field Classes */
.form-control-bispicy {
    background-color: var(--bispicy-input-bg);
    border-color: #c8d4e0;
}

.form-control-bispicy:focus {
    background-color: var(--bispicy-input-bg);
    border-color: var(--bispicy-btn-primary);
    box-shadow: 0 0 0 0.2rem rgba(60, 133, 172, 0.25);
}

.form-control-bispicy:disabled,
.form-control-bispicy[readonly] {
    background-color: var(--bispicy-input-disabled);
    opacity: 1;
}

/* Header and Table Header Classes */
.bg-bispicy-header {
    background-color: var(--bispicy-header-bg) !important;
    color: white;
}

.table-bispicy thead th {
    background-color: var(--bispicy-header-bg);
    color: white;
    border-color: var(--bispicy-header-bg);
}

/* Card Components */
.card-bispicy {
    background-color: var(--bispicy-bg-primary);
    border: 1px solid #d1e7f0;
}

.card-bispicy .card-header {
    background-color: var(--bispicy-header-bg);
    color: white;
    border-bottom-color: var(--bispicy-header-bg);
}

.card-bispicy-secondary {
    background-color: var(--bispicy-bg-secondary);
    border: 1px solid #e8f4f8;
}

/* Metric Cards */
.metric-card {
    background-color: var(--bispicy-bg-primary);
    border: 1px solid #d1e7f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.metric-card:hover {
    box-shadow: 0 4px 12px rgba(60, 133, 172, 0.15);
    transform: translateY(-2px);
}

/* Alert Components */
.alert-bispicy {
    background-color: var(--bispicy-bg-primary);
    border-color: #d1e7f0;
    color: #2c5282;
}

/* Badge Components */
.badge-bispicy-primary {
    background-color: var(--bispicy-btn-primary);
}

.badge-bispicy-secondary {
    background-color: var(--bispicy-btn-secondary);
}

/* Progress Bars */
.progress-bispicy {
    background-color: var(--bispicy-input-disabled);
}

.progress-bispicy .progress-bar {
    background-color: var(--bispicy-btn-primary);
}

/* Navigation Overrides */
.navbar-bispicy {
    background-color: var(--bispicy-navbar-bg) !important;
}

.navbar-bispicy .navbar-nav .nav-link {
    color: white !important;
}

.navbar-bispicy .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-bispicy .navbar-nav .nav-link.active {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

.navbar-bispicy .navbar-brand {
    color: white !important;
}

.navbar-bispicy .btn {
    color: white !important;
}

.navbar-bispicy .dropdown-toggle::after {
    border-top-color: white !important;
}

/* Navbar text elements */
.navbar-bispicy .navbar-text {
    color: white !important;
}

.navbar-bispicy .navbar-text span {
    color: white !important;
}

.navbar-bispicy span {
    color: white !important;
}

/* Icons in navbar */
.navbar-bispicy i {
    color: white !important;
}

.navbar-bispicy .bi {
    color: white !important;
}

/* Force all text elements in navbar to be white */
.navbar-bispicy * {
    color: white !important;
}

/* Override any inherited text colors in navbar */
.navbar-bispicy .navbar-nav,
.navbar-bispicy .navbar-nav *,
.navbar-bispicy .navbar-text,
.navbar-bispicy .navbar-text *,
.navbar-bispicy .navbar-brand,
.navbar-bispicy .navbar-brand * {
    color: white !important;
}

/* Ensure buttons in navbar have proper styling */
.navbar-bispicy .btn-outline-light {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-bispicy .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: white !important;
    color: white !important;
}

/* Mobile dropdown improvements */
@media (max-width: 991.98px) {
    .navbar-bispicy .dropdown-menu {
        background-color: rgba(0, 18, 32, 0.95) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-bispicy .dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .navbar-bispicy .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    .navbar-bispicy .dropdown-toggle::after {
        float: right !important;
        margin-top: 0.4rem !important;
    }
}

/* Form Group Styling */
.form-group-bispicy .form-label {
    font-weight: 600;
    color: #2c5282;
    margin-bottom: 0.5rem;
}

/* List Group Styling */
.list-group-item-bispicy {
    background-color: var(--bispicy-bg-primary);
    border-color: #d1e7f0;
}

.list-group-item-bispicy.active {
    background-color: var(--bispicy-btn-primary);
    border-color: var(--bispicy-btn-primary);
}

/* Modal Styling */
.modal-content-bispicy {
    background-color: var(--bispicy-bg-secondary);
}

.modal-header-bispicy {
    background-color: var(--bispicy-header-bg);
    color: white;
    border-bottom-color: var(--bispicy-header-bg);
}

/* Dropdown Styling */
.dropdown-menu-bispicy {
    background-color: var(--bispicy-navbar-bg);
    border-color: var(--bispicy-navbar-bg);
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-item-bispicy {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease;
}

.dropdown-item-bispicy:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
}

/* Text Colors */
.text-bispicy-primary {
    color: var(--bispicy-btn-primary) !important;
}

.text-bispicy-secondary {
    color: var(--bispicy-btn-secondary) !important;
}

/* Border Colors */
.border-bispicy-primary {
    border-color: var(--bispicy-btn-primary) !important;
}

.border-bispicy-secondary {
    border-color: var(--bispicy-btn-secondary) !important;
}

/* Pricing Card Styling */
.pricing-card-bispicy {
    background-color: var(--bispicy-bg-primary);
    border: 2px solid #d1e7f0;
    transition: all 0.3s ease;
}

.pricing-card-bispicy:hover {
    border-color: var(--bispicy-btn-primary);
    box-shadow: 0 8px 25px rgba(60, 133, 172, 0.15);
    transform: translateY(-5px);
}

.pricing-card-bispicy.featured {
    border-color: var(--bispicy-btn-primary);
    background-color: var(--bispicy-bg-secondary);
}

/* Dashboard Widget Styling */
.dashboard-widget {
    background-color: var(--bispicy-bg-primary);
    border: 1px solid #d1e7f0;
    border-radius: 0.75rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.dashboard-widget:hover {
    box-shadow: 0 6px 20px rgba(60, 133, 172, 0.12);
    transform: translateY(-3px);
}

/* Table Responsive Styling */
.table-responsive-bispicy {
    background-color: var(--bispicy-bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Footer Styling */
.footer-bispicy {
    background-color: var(--bispicy-navbar-bg) !important;
}

.footer {
    background-color: var(--bispicy-navbar-bg) !important;
}

.bg-dark {
    background-color: var(--bispicy-navbar-bg) !important;
}

/* Hero Section Styling */
.hero-section {
    background-color: var(--bispicy-bg-primary) !important;
    background: var(--bispicy-bg-primary) !important;
}

.bg-bispicy-hero {
    background-color: var(--bispicy-bg-primary) !important;
}

/* Hero Section Content Styling */
.hero-section {
    color: var(--bispicy-text-primary) !important;
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6 {
    color: var(--bispicy-text-primary) !important;
}

.hero-section p,
.hero-section .lead {
    color: var(--bispicy-text-secondary) !important;
}

.hero-section .text-warning {
    color: var(--bispicy-btn-secondary) !important;
}

.hero-section .btn-warning {
    background-color: var(--bispicy-btn-secondary);
    border-color: var(--bispicy-btn-secondary);
    color: white;
    font-weight: 600;
}

.hero-section .btn-warning:hover {
    background-color: #7a002d;
    border-color: #7a002d;
    color: white;
}

.hero-section .btn-outline-light {
    border-color: var(--bispicy-btn-primary);
    color: var(--bispicy-btn-primary);
}

.hero-section .btn-outline-light:hover {
    background-color: var(--bispicy-btn-primary);
    border-color: var(--bispicy-btn-primary);
    color: white;
}

/* ==============================================
   ACCESSIBILITY ENHANCEMENTS - WCAG 2.1 AA
   ============================================== */

/* High-contrast focus indicators for better keyboard navigation */
*:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff !important;
}

/* Skip navigation link for screen readers and keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-size: 14px;
    font-weight: bold;
}

.skip-link:focus {
    top: 6px;
    outline: 3px solid #005fcc;
}

/* Disabled form elements with proper contrast */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bispicy-input-disabled);
    color: var(--bispicy-text-disabled) !important;
    opacity: 1;
}

/* Improved link contrast and underlines for accessibility */
a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover, a:focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Better button focus states */
.btn:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #005fcc !important;
}

/* Ensure minimum touch target size (44px) */
.btn, .nav-link, .dropdown-item {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* High contrast for form validation states */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus within for better container highlighting */
.navbar:focus-within,
.dropdown:focus-within {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* ==============================================
   CRITICAL COLOR CONTRAST FIXES - WCAG 2.1 AA
   ============================================== */

/* Override Bootstrap warning color for WCAG compliance */
.text-warning {
    color: var(--bispicy-warning-text) !important;
}

/* Override Bootstrap success color for WCAG compliance */
.text-success {
    color: var(--bispicy-success-text) !important;
}

/* Improve primary button contrast */
.btn-bispicy-primary {
    background-color: #2f6e91 !important; /* Improved from #3c85ac for 5.58:1 contrast */
    border-color: #2f6e91 !important;
}

.btn-bispicy-primary:hover {
    background-color: #265a7a !important;
    border-color: #265a7a !important;
}

/* Ensure alert text has sufficient contrast */
.alert-warning {
    color: var(--bispicy-warning-text) !important;
}

.alert-success {
    color: var(--bispicy-success-text) !important;
}

/* Form validation colors with better contrast */
.is-valid {
    border-color: var(--bispicy-success-text) !important;
    color: var(--bispicy-success-text) !important;
}

.valid-feedback {
    color: var(--bispicy-success-text) !important;
}

.is-invalid {
    border-color: #dc2626 !important; /* Better contrast for error states */
    color: #dc2626 !important;
}

.invalid-feedback {
    color: #dc2626 !important;
}

/* Badge colors with better contrast */
.badge.bg-warning {
    background-color: var(--bispicy-warning-text) !important;
    color: white !important;
}

.badge.bg-success {
    background-color: var(--bispicy-success-text) !important;
    color: white !important;
}
/* ===================================================
   DROPDOWN COLOR OVERRIDES - CI-Konform (Rot/Gelb)
   =================================================== */

/* Override ALL Bootstrap dropdown hover colors */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Navbar specific dropdown overrides */
.navbar-bispicy .dropdown-menu .dropdown-item:hover,
.navbar-bispicy .dropdown-menu .dropdown-item:focus,
.navbar-bispicy .dropdown-menu .dropdown-item:active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Remove blue accent completely from dropdowns */
.dropdown-item-bispicy:hover,
.dropdown-item-bispicy:focus,
.dropdown-item-bispicy:active,
.dropdown-item-bispicy.active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Ensure dropdown items in all states use CI colors */
.navbar .dropdown-menu .dropdown-item:not(.active):hover {
    background-color: var(--bispicy-btn-secondary) !important;
}

.navbar .dropdown-menu .dropdown-item.active {
    background-color: var(--bispicy-btn-primary) !important;
    color: white !important;
}

/* ===================================================
   DROPDOWN BORDERS & SEPARATORS - CI-Konform
   =================================================== */

/* Remove blue borders from dropdown menu */
.dropdown-menu {
    border-color: var(--bispicy-navbar-bg) !important;
}

/* Change dropdown dividers to CI colors */
.dropdown-divider {
    border-top-color: rgba(148, 0, 57, 0.3) !important;
}

/* Dropdown menu borders */
.navbar-bispicy .dropdown-menu {
    border: 2px solid var(--bispicy-btn-secondary) !important;
    border-top: 3px solid var(--bispicy-btn-secondary) !important;
}

.dropdown-menu-bispicy {
    border: 2px solid var(--bispicy-btn-secondary) !important;
    border-top: 3px solid var(--bispicy-btn-secondary) !important;
}

/* Remove blue outline/focus from dropdown toggle */
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle.show {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--bispicy-btn-secondary) !important;
}

/* Dropdown item borders/separators */
.dropdown-menu .dropdown-item {
    border-bottom: 1px solid rgba(148, 0, 57, 0.1) !important;
}

.dropdown-menu .dropdown-item:last-child {
    border-bottom: none !important;
}

/* Active/open dropdown indicator */
.navbar-nav .nav-item.dropdown.show .nav-link {
    border-bottom: 2px solid var(--bispicy-btn-secondary) !important;
}

/* Override Bootstrap's blue focus ring */
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--bispicy-btn-secondary) !important;
    outline-offset: -2px !important;
}

/* ===================================================
   COMPLETE BLUE COLOR REMOVAL - ALL DROPDOWNS
   =================================================== */

/* Force all dropdown menus to use CI colors - nuclear option */
.dropdown-menu,
.navbar .dropdown-menu,
.nav .dropdown-menu,
.navbar-dark .dropdown-menu,
.navbar-light .dropdown-menu {
    border: 2px solid var(--bispicy-btn-secondary) !important;
    border-top: 3px solid var(--bispicy-btn-secondary) !important;
    background-color: var(--bispicy-navbar-bg) !important;
}

/* All dropdown items - remove any blue states */
.dropdown-item,
.dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
}

/* All hover/focus/active states for dropdown items */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Remove Bootstrap's default blue color variable completely */
.dropdown-item:focus,
.dropdown-item:active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Dropdown toggle states */
.nav-link.dropdown-toggle:hover,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle.show {
    color: white !important;
    background-color: rgba(148, 0, 57, 0.2) !important;
}

/* Remove any blue box shadows */
.dropdown-toggle:focus,
.dropdown-item:focus,
.dropdown-menu:focus {
    box-shadow: none !important;
}

/* Override Bootstrap's primary color for all dropdowns */
.dropdown-menu .dropdown-item:not(:disabled):not(.disabled):active,
.dropdown-menu .dropdown-item:not(:disabled):not(.disabled).active {
    background-color: var(--bispicy-btn-secondary) !important;
    color: white !important;
}

/* Ensure no blue background on dropdown show */
.show > .dropdown-toggle.nav-link,
.dropdown.show .dropdown-toggle.nav-link {
    background-color: transparent !important;
    color: white !important;
}

/* Remove blue from dropdown separators */
.dropdown-menu .dropdown-divider {
    border-top: 1px solid rgba(148, 0, 57, 0.3) !important;
}

/* ===================================================
   REMOVE BLUE FROM NAV-LINK CLICK/ACTIVE STATE
   =================================================== */

/* Remove blue background when clicking on Produkt/Support dropdown toggles */
.navbar-bispicy .nav-link:active,
.navbar-bispicy .nav-link.active,
.navbar-bispicy .nav-link:focus,
.navbar-bispicy .nav-link.show,
.navbar-bispicy .dropdown-toggle:active,
.navbar-bispicy .dropdown-toggle.active,
.navbar-bispicy .dropdown-toggle:focus,
.navbar-bispicy .dropdown-toggle.show {
    background-color: rgba(148, 0, 57, 0.2) !important;
    color: white !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Bootstrap's default blue active state */
.nav-link:active,
.nav-link.active {
    background-color: transparent !important;
}

/* Navbar nav-link active/focus states */
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    background-color: rgba(148, 0, 57, 0.2) !important;
    color: white !important;
}

/* Dropdown toggle when opened */
.navbar-nav .dropdown.show .nav-link,
.navbar-nav .dropdown.show .dropdown-toggle {
    background-color: rgba(148, 0, 57, 0.2) !important;
    color: white !important;
}

/* Remove blue ripple/click effect */
.navbar .nav-link:active::before,
.navbar .nav-link:active::after {
    display: none !important;
}

/* Override Bootstrap's btn-link active state */
.btn-link:active,
.btn-link.active {
    color: white !important;
    background-color: transparent !important;
}