/* ====================
   Modern Blue Theme
   LEDTECH style header/footer + LED Master content
   Tech-inspired, sharp corners, professional
   ==================== */

/* ====================
   CSS Variables Override
   ==================== */

:root {
    --theme-bg-light: #f6f7f8;
    --theme-bg-dark: #101922;
    --theme-header-dark: #111418;
    --theme-surface-light: #f0f2f4;
    --theme-surface-dark: #1a2632;
    --theme-card-light: #ffffff;
    --theme-card-dark: #1a2632;
    --theme-border-light: #f0f2f4;
    --theme-border-dark: #374151;
    --theme-text-primary: #111418;
    --theme-text-secondary: #617589;
}

/* ====================
   Tech Grid Background Pattern
   ==================== */

body.theme-modern-blue {
    position: relative;
}

/* Pattern SVG supprimé — fond blanc uni */

/* ====================
   Typography - Space Grotesk
   ==================== */

body.theme-modern-blue {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.theme-modern-blue h1,
body.theme-modern-blue h2,
body.theme-modern-blue h3,
body.theme-modern-blue h4,
body.theme-modern-blue h5,
body.theme-modern-blue h6 {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.015em;
}

/* ====================
   Sharp Corners Override (0px)
   ==================== */

body.theme-modern-blue .rounded,
body.theme-modern-blue .rounded-sm,
body.theme-modern-blue .rounded-md,
body.theme-modern-blue .rounded-lg,
body.theme-modern-blue .rounded-xl,
body.theme-modern-blue .rounded-2xl,
body.theme-modern-blue .rounded-3xl {
    border-radius: 0px !important;
}

/* Keep full for specific small elements only */
body.theme-modern-blue .stock-indicator__dot,
body.theme-modern-blue .bottom-nav__badge {
    border-radius: 50% !important;
}

/* ====================
   Header - LEDTECH Style
   ==================== */

body.theme-modern-blue .main-header {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--theme-border-light);
}

html.dark body.theme-modern-blue .main-header {
    background-color: rgba(10, 10, 10, 0.98);
    border-bottom-color: #1f2937;
}

/* Logo Icon - Black box style */
body.theme-modern-blue .header-logo__icon {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

html.dark body.theme-modern-blue .header-logo__icon {
    background: #ffffff !important;
    color: #000000 !important;
}

body.theme-modern-blue .header-logo:hover .header-logo__icon {
    transform: scale(1.05);
    box-shadow: none !important;
}

/* Logo Text */
body.theme-modern-blue .header-logo__text span:first-child {
    color: #0f172a;
}

html.dark body.theme-modern-blue .header-logo__text span:first-child {
    color: #ffffff;
}

body.theme-modern-blue .header-logo__text .text-primary {
    color: var(--color-primary) !important;
    font-weight: 400 !important;
}

/* Nav Links - Uppercase tracking */
body.theme-modern-blue .nav-link {
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #475569;
}

body.theme-modern-blue .nav-link:hover {
    color: #000000;
}

html.dark body.theme-modern-blue .nav-link {
    color: #94a3b8;
}

html.dark body.theme-modern-blue .nav-link:hover {
    color: #ffffff;
}

body.theme-modern-blue .nav-link--active {
    color: var(--color-primary) !important;
}

/* Nav active indicator - bottom line */
body.theme-modern-blue .nav-link--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}

/* Header Search - Square with border */
body.theme-modern-blue .header-search__input,
body.theme-modern-blue .header-search-main__input {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0px !important;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.02em;
}

body.theme-modern-blue .header-search__input:hover,
body.theme-modern-blue .header-search-main__input:hover {
    border-color: var(--color-primary) !important;
}

body.theme-modern-blue .header-search__input:focus,
body.theme-modern-blue .header-search-main__input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}

html.dark body.theme-modern-blue .header-search__input,
html.dark body.theme-modern-blue .header-search-main__input {
    background-color: #111827 !important;
    border-color: #374151 !important;
}

/* Header Icon Buttons */
body.theme-modern-blue .header-icon-btn {
    border: 1px solid transparent;
    border-radius: 0px !important;
}

body.theme-modern-blue .header-icon-btn:hover {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
}

html.dark body.theme-modern-blue .header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #374151;
}

/* Contact Button - Black style */
body.theme-modern-blue .header-contact-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

body.theme-modern-blue .header-contact-btn:hover {
    background: var(--color-primary) !important;
}

html.dark body.theme-modern-blue .header-contact-btn {
    background: #ffffff !important;
    color: #000000 !important;
}

html.dark body.theme-modern-blue .header-contact-btn:hover {
    background: #e5e7eb !important;
}

/* ====================
   Promo Banner
   ==================== */

body.theme-modern-blue .promo-banner {
    background: var(--color-primary);
    color: #ffffff;
}

/* ====================
   Mega Menu - LEDTECH Style
   ==================== */

body.theme-modern-blue .mega-menu__panel {
    border-top: none;
    border-bottom: 1px solid var(--theme-border-light);
    background-color: #ffffff;
}

html.dark body.theme-modern-blue .mega-menu__panel {
    background-color: #0a0a0a;
    border-bottom-color: #1f2937;
}

body.theme-modern-blue .mega-menu__card {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 0px !important;
}

body.theme-modern-blue .mega-menu__card:hover {
    border-color: var(--color-primary);
    box-shadow: none;
    transform: none;
}

/* Bottom line animation on hover */
body.theme-modern-blue .mega-menu__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

body.theme-modern-blue .mega-menu__card:hover::after {
    width: 100%;
}

html.dark body.theme-modern-blue .mega-menu__card {
    background: #0a0a0a;
    border-color: #1f2937;
}

body.theme-modern-blue .mega-menu__card-icon {
    background-color: transparent;
    color: #9ca3af;
    border-radius: 0px !important;
}

body.theme-modern-blue .mega-menu__card:hover .mega-menu__card-icon {
    color: var(--color-primary);
    box-shadow: none;
}

/* ====================
   Main Content Area - LED Master Style
   ==================== */

/* Breadcrumbs */
body.theme-modern-blue nav a {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Cards & Containers */
body.theme-modern-blue .product-card,
body.theme-modern-blue [class*="bg-white"],
body.theme-modern-blue .bg-background-header-footer {
    border-radius: 0px !important;
}

body.theme-modern-blue .product-card {
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

body.theme-modern-blue .product-card:hover {
    border-color: #e5e7eb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

html.dark body.theme-modern-blue .product-card {
    background-color: #1a2632;
    border-color: #1f2937;
}

html.dark body.theme-modern-blue .product-card:hover {
    border-color: #374151;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* ====================
   Buttons - LED Master Style (bigger padding, blue primary)
   ==================== */

body.theme-modern-blue button,
body.theme-modern-blue .btn,
body.theme-modern-blue [class*="btn-"],
body.theme-modern-blue [type="submit"] {
    border-radius: 0px !important;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

/* Primary button - Blue with shadow (LED Master style) */
body.theme-modern-blue .btn-primary,
body.theme-modern-blue .bg-primary,
body.theme-modern-blue button[class*="bg-primary"],
body.theme-modern-blue a[class*="bg-primary"] {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
    box-shadow: 0 10px 15px -3px rgba(var(--color-primary-rgb), 0.2),
                0 4px 6px -4px rgba(var(--color-primary-rgb), 0.2) !important;
    transition: all 0.2s ease !important;
}

body.theme-modern-blue .btn-primary:hover,
body.theme-modern-blue .bg-primary:hover,
body.theme-modern-blue button[class*="bg-primary"]:hover,
body.theme-modern-blue a[class*="bg-primary"]:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 20px 25px -5px rgba(var(--color-primary-rgb), 0.25),
                0 8px 10px -6px rgba(var(--color-primary-rgb), 0.25) !important;
    transform: translateY(-1px);
}

html.dark body.theme-modern-blue .btn-primary,
html.dark body.theme-modern-blue .bg-primary,
html.dark body.theme-modern-blue button[class*="bg-primary"],
html.dark body.theme-modern-blue a[class*="bg-primary"] {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

html.dark body.theme-modern-blue .btn-primary:hover,
html.dark body.theme-modern-blue .bg-primary:hover,
html.dark body.theme-modern-blue button[class*="bg-primary"]:hover,
html.dark body.theme-modern-blue a[class*="bg-primary"]:hover {
    background: var(--color-primary-hover) !important;
}

/* Outline/Secondary buttons - LED Master style */
body.theme-modern-blue .btn-secondary,
body.theme-modern-blue button.border,
body.theme-modern-blue a.border {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600;
    transition: all 0.2s ease !important;
}

body.theme-modern-blue .btn-secondary:hover,
body.theme-modern-blue button.border:hover,
body.theme-modern-blue a.border:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.05) !important;
}

html.dark body.theme-modern-blue .btn-secondary,
html.dark body.theme-modern-blue button.border,
html.dark body.theme-modern-blue a.border {
    background: #1a2632 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html.dark body.theme-modern-blue .btn-secondary:hover,
html.dark body.theme-modern-blue button.border:hover,
html.dark body.theme-modern-blue a.border:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Outline buttons */
body.theme-modern-blue .border-gray-300,
body.theme-modern-blue .border-white\/20 {
    border-color: #e5e7eb !important;
}

body.theme-modern-blue .border-gray-300:hover {
    border-color: #9ca3af !important;
}

/* ====================
   Content Cards - LED Master Style (white on gray)
   ==================== */

body.theme-modern-blue .content-card,
body.theme-modern-blue .card,
body.theme-modern-blue main .bg-white,
body.theme-modern-blue section .bg-white {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 0px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html.dark body.theme-modern-blue .content-card,
html.dark body.theme-modern-blue .card,
html.dark body.theme-modern-blue main .bg-white,
html.dark body.theme-modern-blue section .bg-white {
    background: #1a2632 !important;
    border-color: #374151;
}

/* Main container background */
body.theme-modern-blue main,
body.theme-modern-blue .main-content {
    background-color: #f6f7f8;
}

html.dark body.theme-modern-blue main,
html.dark body.theme-modern-blue .main-content {
    background-color: #101922;
}

/* ====================
   Form Elements
   ==================== */

body.theme-modern-blue input,
body.theme-modern-blue select,
body.theme-modern-blue textarea {
    border-radius: 0px !important;
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-modern-blue input:focus,
body.theme-modern-blue select:focus,
body.theme-modern-blue textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ====================
   Product Badges - Sharp
   ==================== */

body.theme-modern-blue .product-badge {
    border-radius: 0px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

body.theme-modern-blue .product-badge--new {
    background-color: var(--color-primary);
    color: #ffffff;
}

body.theme-modern-blue .product-badge--bestseller {
    background-color: #000000;
    color: #ffffff;
}

body.theme-modern-blue .product-badge--promo {
    background-color: #ef4444;
    color: #ffffff;
}

/* ====================
   Filter Badges
   ==================== */

body.theme-modern-blue .filter-badge {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    border-radius: 0px !important;
}

body.theme-modern-blue .filter-badge__remove {
    border-radius: 0px !important;
}

body.theme-modern-blue .filter-badge__remove:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* ====================
   Sidebar Filters
   ==================== */

body.theme-modern-blue aside {
    border-radius: 0px !important;
}

body.theme-modern-blue aside > div {
    border-radius: 0px !important;
}

/* ====================
   Category Cards & Bubbles - LED Master Style
   ==================== */

body.theme-modern-blue .category-bubble,
body.theme-modern-blue .category-card,
body.theme-modern-blue [class*="bubble"] {
    border: 2px solid #e5e7eb;
    background: #ffffff;
    border-radius: 0px !important;
    position: relative;
    overflow: hidden;
    padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

/* Bubbles hover state */
body.theme-modern-blue .category-bubble:hover,
body.theme-modern-blue .category-card:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
    color: var(--color-primary);
}

/* Bubbles selected state - pronounced blue border, light blue bg, blue text */
body.theme-modern-blue .category-bubble.selected,
body.theme-modern-blue .category-bubble.active,
body.theme-modern-blue .category-bubble[aria-selected="true"],
body.theme-modern-blue .category-card.selected,
body.theme-modern-blue .category-card.active,
body.theme-modern-blue .peer:checked ~ div,
body.theme-modern-blue input:checked + div,
body.theme-modern-blue input:checked + label,
body.theme-modern-blue .peer-checked\:border-primary {
    border-color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.05) !important;
    color: var(--color-primary) !important;
}

/* Radio/Checkbox card selections */
body.theme-modern-blue input[type="radio"]:checked + div,
body.theme-modern-blue input[type="radio"]:checked + label > div,
body.theme-modern-blue input[type="checkbox"]:checked + div,
body.theme-modern-blue input[type="checkbox"]:checked + label > div {
    border: 2px solid var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.05) !important;
}

body.theme-modern-blue input[type="radio"]:checked + div *,
body.theme-modern-blue input[type="radio"]:checked + label > div .text-gray-900,
body.theme-modern-blue input[type="checkbox"]:checked + div *,
body.theme-modern-blue input[type="checkbox"]:checked + label > div .text-gray-900 {
    color: var(--color-primary);
}

/* Dark mode bubbles */
html.dark body.theme-modern-blue .category-bubble,
html.dark body.theme-modern-blue .category-card {
    background: #1a2632;
    border-color: #374151;
    color: #e5e7eb;
}

html.dark body.theme-modern-blue .category-bubble:hover,
html.dark body.theme-modern-blue .category-card:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

html.dark body.theme-modern-blue .category-bubble.selected,
html.dark body.theme-modern-blue .category-bubble.active,
html.dark body.theme-modern-blue .category-card.selected,
html.dark body.theme-modern-blue .category-card.active {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ====================
   Configurator Value Bubbles - Selected State
   Blue border, light blue bg, blue text (NOT full primary bg)
   ==================== */

/* Override the default bg-primary style for clickable value bubbles */
body.theme-modern-blue button.bg-primary.border-primary:not(.btn-primary):not([type="submit"]),
body.theme-modern-blue button.border-2.bg-primary {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

body.theme-modern-blue button.bg-primary.border-primary:not(.btn-primary):not([type="submit"]):hover,
body.theme-modern-blue button.border-2.bg-primary:hover {
    background: rgba(var(--color-primary-rgb), 0.12) !important;
}

/* Non-selected value bubbles */
body.theme-modern-blue button.border-2.border-gray-300,
body.theme-modern-blue button.border-2.bg-white {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
}

body.theme-modern-blue button.border-2.border-gray-300:hover,
body.theme-modern-blue button.border-2.bg-white:hover {
    border-color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.05) !important;
    color: var(--color-primary) !important;
}

html.dark body.theme-modern-blue button.border-2.border-gray-300,
html.dark body.theme-modern-blue button.border-2.bg-white {
    background: #1a2632 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html.dark body.theme-modern-blue button.border-2.border-gray-300:hover {
    border-color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.1) !important;
    color: var(--color-primary) !important;
}

/* ====================
   Configurator Cards - LEDTECH Style
   ==================== */

body.theme-modern-blue .mega-menu__card--configurateur {
    border-radius: 0px !important;
}

body.theme-modern-blue .mega-menu__card--configurateur:hover .mega-menu__card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
}

/* ====================
   Pagination
   ==================== */

body.theme-modern-blue .pagination {
    border-radius: 0px !important;
}

body.theme-modern-blue .pagination .page-item .page-link {
    border-radius: 0px !important;
}

body.theme-modern-blue .pagination .page-item.active .page-link {
    background: #000000;
    border-color: #000000;
}

body.theme-modern-blue .pagination .page-link:hover {
    background-color: #f1f5f9;
}

/* ====================
   Bottom Navigation
   ==================== */

body.theme-modern-blue .bottom-nav__bar {
    border-radius: 0px !important;
}

body.theme-modern-blue .bottom-nav__item--active {
    color: var(--color-primary);
}

/* ====================
   Footer - LEDTECH Style
   ==================== */

body.theme-modern-blue footer {
    background-color: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

html.dark body.theme-modern-blue footer {
    background-color: #020610;
    border-top-color: #1f2937;
}

body.theme-modern-blue footer h4 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
}

body.theme-modern-blue footer a:hover {
    color: var(--color-primary);
}

/* Footer social icons */
body.theme-modern-blue footer .social-icon,
body.theme-modern-blue footer a[class*="size-10"] {
    border-radius: 0px !important;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

body.theme-modern-blue footer .social-icon:hover,
body.theme-modern-blue footer a[class*="size-10"]:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

html.dark body.theme-modern-blue footer .social-icon,
html.dark body.theme-modern-blue footer a[class*="size-10"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: #374151;
}

/* ====================
   Toast Notifications
   ==================== */

body.theme-modern-blue .toast {
    border-radius: 0px !important;
}

body.theme-modern-blue .toast--info .toast__icon {
    color: var(--color-primary);
}

/* ====================
   Skeleton Loaders
   ==================== */

body.theme-modern-blue .skeleton {
    border-radius: 0px !important;
}

/* ====================
   Glow Effects - Subtle for Modern Blue
   ==================== */

body.theme-modern-blue .cta-glow {
    box-shadow: none;
}

body.theme-modern-blue .cta-glow:hover {
    box-shadow: none;
}

body.theme-modern-blue .group:hover .group-hover-glow {
    box-shadow: none;
}

/* Light trail effect - Primary color */
body.theme-modern-blue .light-trail::after {
    background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.4), transparent);
}

/* ====================
   Scrollbar
   ==================== */

body.theme-modern-blue::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.theme-modern-blue::-webkit-scrollbar-track {
    background: #f1f5f9;
}

body.theme-modern-blue::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

body.theme-modern-blue::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

html.dark body.theme-modern-blue::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark body.theme-modern-blue::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ====================
   Selection
   ==================== */

body.theme-modern-blue ::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* ====================
   Dark Mode Background
   ==================== */

html.dark body.theme-modern-blue {
    background-color: #0a0a0a;
}

html.dark body.theme-modern-blue .bg-background-light {
    background-color: #0a0a0a;
}

html.dark body.theme-modern-blue .bg-background-dark {
    background-color: #0a0a0a;
}

html.dark body.theme-modern-blue .bg-gray-50 {
    background-color: #111827;
}

html.dark body.theme-modern-blue .bg-white {
    background-color: #1a2632;
}

/* ====================
   Section Headers
   ==================== */

body.theme-modern-blue section h2 {
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Section indicator dot */
body.theme-modern-blue .section-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
}

/* ====================
   Links
   ==================== */

body.theme-modern-blue a:not([class]):hover {
    color: var(--color-primary);
}

/* ====================
   View Toggle Buttons
   ==================== */

body.theme-modern-blue .view-toggle-btn {
    border-radius: 0px !important;
}

body.theme-modern-blue .view-toggle-btn.active {
    background: #000000;
    color: #ffffff;
}

html.dark body.theme-modern-blue .view-toggle-btn.active {
    background: #ffffff;
    color: #000000;
}

/* ====================
   Empty States
   ==================== */

body.theme-modern-blue .rounded-full.p-4 {
    border-radius: 0px !important;
}

/* ====================
   Tabs
   ==================== */

body.theme-modern-blue [role="tablist"] button,
body.theme-modern-blue .tabs button {
    border-radius: 0px !important;
}

body.theme-modern-blue [role="tablist"] button[aria-selected="true"],
body.theme-modern-blue .tabs button.active {
    border-bottom: 2px solid var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}