/* 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 */

    /* ==============================================
       FARBSYSTEM - Funktionsgruppen & Branchen
       ============================================== */

    /* Funktionsgruppe: Kasse & Verkauf - Blau */
    --hero-kasse-start: #2563eb;
    --hero-kasse-end: #1d4ed8;

    /* Funktionsgruppe: Verwaltung - Violett */
    --hero-verwaltung-start: #7c3aed;
    --hero-verwaltung-end: #6d28d9;

    /* Funktionsgruppe: Berichte & Export - Orange */
    --hero-berichte-start: #f59e0b;
    --hero-berichte-end: #d97706;

    /* Funktionsgruppe: System & Cloud - Cyan */
    --hero-system-start: #06b6d4;
    --hero-system-end: #0891b2;

    /* Branche: Einzelhandel - Grün */
    --hero-einzelhandel-start: #10b981;
    --hero-einzelhandel-end: #059669;

    /* Branche: Massage & Wellness - Pink/Rose */
    --hero-massage-start: #ec4899;
    --hero-massage-end: #db2777;

    /* Preise - Warmes Gold */
    --hero-preise-start: #d4a017;
    --hero-preise-end: #b8860b;

    /* Support - Indigo */
    --hero-support-start: #4f46e5;
    --hero-support-end: #4338ca;
}

/* 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;
}

/* Active state for button groups - explicit background to prevent Bootstrap override */
.btn-bispicy-secondary.active,
.btn-bispicy-secondary:active,
.btn-group .btn-bispicy-secondary.active {
    background-color: #5a0022 !important;
    border-color: #5a0022 !important;
    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 */
/* Exclude navbar elements from focus styling */
*:focus:not(.navbar-bispicy *):not(.navbar *) {
    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 */
/* Exclude navbar links from underline styling */
a:not(.navbar-bispicy a):not(.navbar a):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not(.navbar-bispicy a):not(.navbar a):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover,
a:not(.navbar-bispicy a):not(.navbar a):not(.nav-link):not(.navbar-brand):not(.dropdown-item):focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Navbar links - no underline */
.navbar a,
.navbar-bispicy a,
.nav-link,
.navbar-brand,
.dropdown-item {
    text-decoration: none !important;
}

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

/* Navbar buttons - no focus outline */
.navbar .btn:focus,
.navbar-bispicy .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure minimum touch target size (44px) - exclude navbar */
.btn:not(.navbar-bispicy .btn) {
    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 - disabled for navbar */
/* .navbar:focus-within removed for clean design */
.dropdown:focus-within:not(.navbar .dropdown):not(.navbar-bispicy .dropdown) {
    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: none !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 - removed for clean design */
.navbar-nav .nav-item.dropdown.show .nav-link {
    border-bottom: none !important;
}

/* Override Bootstrap's blue focus ring - removed for clean navbar design */
.navbar .dropdown-toggle:focus-visible,
.navbar-bispicy .dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !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;
}

/* ===================================================
   MEGA DROPDOWN MENU - Navigation 4-Column Layout
   =================================================== */

.dropdown-menu-mega {
    min-width: 850px;
    padding: 1rem;
    left: 50% !important;
    transform: translateX(-50%);
}

.dropdown-menu-mega .mega-menu-row {
    display: flex;
    gap: 1.5rem;
}

.dropdown-menu-mega .mega-menu-col {
    flex: 1;
    min-width: 200px;
}

.dropdown-menu-mega .dropdown-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bispicy-btn-primary);
    padding: 0.25rem 0 0.5rem 0;
    border-bottom: 2px solid var(--bispicy-btn-primary);
    margin-bottom: 0.5rem;
}

.dropdown-menu-mega .dropdown-item {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 4px;
}

.dropdown-menu-mega .dropdown-item:hover {
    background: rgba(60, 133, 172, 0.1);
}

.dropdown-menu-mega .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--bispicy-btn-primary);
}

.dropdown-menu-mega .mega-menu-footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
    padding-top: 0.75rem;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .dropdown-menu-mega {
        min-width: 100%;
        left: 0 !important;
        transform: none;
    }

    .dropdown-menu-mega .mega-menu-row {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ===================================================
   MEGA MENU OVERRIDES - White Background (Desktop)
   Higher specificity to override generic dropdown rules
   =================================================== */

/* Override generic dropdown navy background for mega-menu */
.navbar-bispicy .dropdown-menu.dropdown-menu-mega,
.navbar.navbar-bispicy .dropdown-menu.dropdown-menu-mega,
nav.navbar .dropdown-menu.dropdown-menu-mega {
    background-color: white !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Mega menu items - dark text on white background (high specificity) */
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item,
.navbar.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item,
nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item {
    color: var(--bispicy-text-primary) !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* Mega menu hover - light blue instead of red (highest specificity) */
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:hover,
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:focus,
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:active,
.navbar.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:hover,
.navbar.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:focus,
nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item:hover,
nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item:focus {
    background-color: rgba(60, 133, 172, 0.1) !important;
    color: var(--bispicy-btn-primary) !important;
}

/* Mega menu icons - blue color */
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item i,
nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item i {
    color: var(--bispicy-btn-primary) !important;
}

/* Mega menu headers - blue text */
.navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-header,
nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-header {
    color: var(--bispicy-btn-primary) !important;
}

/* Mega menu footer border */
.dropdown-menu.dropdown-menu-mega .mega-menu-footer {
    border-top-color: #e2e8f0 !important;
}

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

    .navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item,
    nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item:hover,
    nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item:hover {
        background-color: rgba(148, 0, 57, 0.3) !important;
        color: white !important;
    }

    .navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-header,
    nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-header {
        color: rgba(255, 255, 255, 0.7) !important;
        border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    }

    .navbar-bispicy .dropdown-menu.dropdown-menu-mega .dropdown-item i,
    nav.navbar .dropdown-menu.dropdown-menu-mega .dropdown-item i {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .dropdown-menu.dropdown-menu-mega .mega-menu-footer {
        border-top-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* ===================================================
   NAVIGATION CLEANUP - Remove unwanted effects
   =================================================== */

/* Remove min-height from nav-links (was for accessibility but affects layout) */
.navbar-bispicy .nav-link,
.navbar-bispicy .dropdown-item {
    min-height: auto !important;
    min-width: auto !important;
}

/* Nav link hover - only color change, no background or underline */
.navbar-bispicy .navbar-nav .nav-link:hover,
.navbar-bispicy .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove red background and underline from dropdown toggles */
.navbar-bispicy .nav-link.dropdown-toggle:hover,
.navbar-bispicy .nav-link.dropdown-toggle:focus,
.navbar-bispicy .nav-link.dropdown-toggle.show,
.navbar-bispicy .navbar-nav .nav-item.dropdown.show .nav-link,
.navbar-bispicy .dropdown-toggle.show {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Remove border-bottom from regular dropdown items */
.navbar-bispicy .dropdown-menu .dropdown-item {
    border-bottom: none !important;
    padding: 0.4rem 1rem !important;
}

/* Remove focus outline from navbar elements - FINAL OVERRIDE */
.navbar-bispicy *:focus,
.navbar-bispicy *:focus-visible,
.navbar-bispicy *:focus-within,
.navbar *:focus,
.navbar *:focus-visible,
.navbar *:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Ensure navbar itself has no focus styles */
.navbar-bispicy:focus,
.navbar-bispicy:focus-within,
.navbar:focus,
.navbar:focus-within {
    outline: none !important;
    box-shadow: none !important;
}