{{-- Componente para aplicar colores del skin dinámicamente --}}
@php
    $activeDemo = get_active_demo();
    $primaryColor = get_skin_primary_color();
    $primaryColorHover = get_skin_primary_color_hover();
    $rgb = hex_to_rgb($primaryColor);
@endphp

@if($activeDemo === 'demo-law-firm-2')
<style>
    .btn-primary {
        background-color: {{ $primaryColor }} !important;
        border-color: {{ $primaryColor }} !important;
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
        background-color: {{ $primaryColorHover }} !important;
        border-color: {{ $primaryColorHover }} !important;
    }
    .btn-primary:focus-visible {
        box-shadow: 0 0 0 0.25rem rgba({{ $rgb['r'] }}, {{ $rgb['g'] }}, {{ $rgb['b'] }}, 0.25) !important;
    }
    .text-primary {
        color: {{ $primaryColor }} !important;
    }
    .link-primary {
        color: {{ $primaryColor }} !important;
    }
    .link-primary:hover {
        color: {{ $primaryColorHover }} !important;
    }
    .bg-primary {
        background-color: {{ $primaryColor }} !important;
    }
    .bg-light-primary {
        background-color: rgba({{ $rgb['r'] }}, {{ $rgb['g'] }}, {{ $rgb['b'] }}, 0.1) !important;
    }
    .border-primary {
        border-color: {{ $primaryColor }} !important;
    }
    .form-control:focus {
        border-color: {{ $primaryColor }} !important;
        box-shadow: 0 0 0 0.25rem rgba({{ $rgb['r'] }}, {{ $rgb['g'] }}, {{ $rgb['b'] }}, 0.15) !important;
    }
    .nav-link.active::after {
        background-color: {{ $primaryColor }} !important;
    }
    .btn:focus-visible {
        outline: 2px solid {{ $primaryColor }};
    }
</style>
@endif

@if($activeDemo === 'demo-bewpro')
<style>
    /* ==========================================
       BEWPRO DELUXE SKIN OVERRIDES
       Color palette: Dark blue #030628 & Turquesa #3DC2C2
       Responsive to Light & Dark Theme Switch
       ========================================== */

    /* Scrollbars (Shared Structure) */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* ==========================================
       1. LIGHT THEME OVERRIDES (Default / Light)
       ========================================== */
    html:not([data-theme="dark"]) {
        --bs-primary: #249b9b !important;
        --bs-primary-rgb: 36, 155, 155 !important;
        --bs-primary-active: #1a7a7a !important;
        --bs-body-bg: #f4f6fa !important;
        --bs-card-bg: #ffffff !important;
    }

    /* Global Body & Wrapper Backgrounds */
    html:not([data-theme="dark"]) body {
        background-color: #f4f6fa !important;
        color: #1f2937 !important;
    }
    html:not([data-theme="dark"]) #kt_wrapper {
        background-color: #f4f6fa !important;
    }
    html:not([data-theme="dark"]) #kt_content {
        background-color: #f4f6fa !important;
    }
    html:not([data-theme="dark"]) #kt_post {
        background-color: #f4f6fa !important;
    }

    /* Sidebar Navigation Overrides */
    html:not([data-theme="dark"]) .aside {
        background-color: #ffffff !important;
        border-right: 1px solid rgba(36, 155, 155, 0.15) !important;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.02) !important;
    }
    html:not([data-theme="dark"]) .aside-logo {
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(36, 155, 155, 0.15) !important;
    }
    html:not([data-theme="dark"]) .aside-footer {
        background-color: #ffffff !important;
        border-top: 1px solid rgba(36, 155, 155, 0.15) !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link {
        color: #4b5563 !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link.active,
    html:not([data-theme="dark"]) .menu-item .menu-link.menu-link-active {
        background-color: rgba(36, 155, 155, 0.08) !important;
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link.active::before,
    html:not([data-theme="dark"]) .menu-item .menu-link.menu-link-active::before {
        background-color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link.active .menu-title,
    html:not([data-theme="dark"]) .menu-item .menu-link.menu-link-active .menu-title,
    html:not([data-theme="dark"]) .menu-item .menu-link.active .menu-icon,
    html:not([data-theme="dark"]) .menu-item .menu-link.menu-link-active .menu-icon {
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link:hover:not(.active):not(.menu-link-active) {
        background-color: rgba(36, 155, 155, 0.04) !important;
    }
    html:not([data-theme="dark"]) .menu-item .menu-link:hover:not(.active):not(.menu-link-active) .menu-title,
    html:not([data-theme="dark"]) .menu-item .menu-link:hover:not(.active):not(.menu-link-active) .menu-icon {
        color: #249b9b !important;
    }

    /* Sub Navigation Arrow */
    html:not([data-theme="dark"]) .menu-item .menu-link[data-kt-menu-trigger][aria-expanded="true"]:after {
        color: #249b9b !important;
    }

    /* Header styling */
    html:not([data-theme="dark"]) .header {
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(36, 155, 155, 0.15) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    }
    html:not([data-theme="dark"]) .header .page-title h1 {
        color: #030628 !important;
    }
    
    /* Breadcrumbs */
    html:not([data-theme="dark"]) .breadcrumb-item, 
    html:not([data-theme="dark"]) .breadcrumb-item a {
        color: #6b7280 !important;
    }
    html:not([data-theme="dark"]) .breadcrumb-item a:hover {
        color: #249b9b !important;
    }

    /* Buttons Styling */
    html:not([data-theme="dark"]) .btn-primary {
        background-color: #249b9b !important;
        border-color: #249b9b !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(36, 155, 155, 0.18) !important;
    }
    html:not([data-theme="dark"]) .btn-primary:hover, 
    html:not([data-theme="dark"]) .btn-primary:focus, 
    html:not([data-theme="dark"]) .btn-primary:active, 
    html:not([data-theme="dark"]) .btn-primary.active {
        background-color: #1a7a7a !important;
        border-color: #1a7a7a !important;
        color: #ffffff !important;
        box-shadow: 0 6px 16px rgba(36, 155, 155, 0.3) !important;
    }
    html:not([data-theme="dark"]) .btn-primary i, 
    html:not([data-theme="dark"]) .btn-primary .svg-icon {
        color: #ffffff !important;
    }
    html:not([data-theme="dark"]) .btn-light-primary {
        background-color: rgba(36, 155, 155, 0.08) !important;
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .btn-light-primary:hover {
        background-color: rgba(36, 155, 155, 0.15) !important;
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .btn-light {
        background-color: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
    }
    html:not([data-theme="dark"]) .btn-light:hover {
        background-color: #e5e7eb !important;
        color: #111827 !important;
    }

    /* Text & Colors */
    html:not([data-theme="dark"]) .text-primary, 
    html:not([data-theme="dark"]) a.text-primary, 
    html:not([data-theme="dark"]) .link-primary {
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .link-primary:hover, 
    html:not([data-theme="dark"]) a.text-primary:hover {
        color: #1a7a7a !important;
    }
    html:not([data-theme="dark"]) .text-gray-900, 
    html:not([data-theme="dark"]) .text-dark, 
    html:not([data-theme="dark"]) .card-title, 
    html:not([data-theme="dark"]) h1, 
    html:not([data-theme="dark"]) h2, 
    html:not([data-theme="dark"]) h3, 
    html:not([data-theme="dark"]) h4, 
    html:not([data-theme="dark"]) h5, 
    html:not([data-theme="dark"]) h6 {
        color: #030628 !important;
    }
    html:not([data-theme="dark"]) .text-gray-800, 
    html:not([data-theme="dark"]) .text-gray-700, 
    html:not([data-theme="dark"]) .text-gray-600 {
        color: #374151 !important;
    }
    html:not([data-theme="dark"]) .text-gray-500, 
    html:not([data-theme="dark"]) .text-muted {
        color: #6b7280 !important;
    }

    /* Cards premium styling in Light Mode */
    html:not([data-theme="dark"]) .card {
        background-color: #ffffff !important;
        border: 1px solid rgba(36, 155, 155, 0.15) !important;
        box-shadow: 0 8px 30px rgba(3, 6, 40, 0.03) !important;
    }
    
    /* Welcome cards custom gradients */
    html:not([data-theme="dark"]) .card.border-primary {
        border-color: rgba(36, 155, 155, 0.35) !important;
        background: linear-gradient(135deg, rgba(36, 155, 155, 0.08), rgba(255, 255, 255, 0.2)) !important;
    }
    
    /* Inner boxes, sections & wrappers */
    html:not([data-theme="dark"]) .bg-white {
        background-color: #ffffff !important;
        color: #111827 !important;
    }
    html:not([data-theme="dark"]) .border {
        border-color: rgba(36, 155, 155, 0.15) !important;
    }
    html:not([data-theme="dark"]) .border-bottom {
        border-bottom-color: rgba(36, 155, 155, 0.15) !important;
    }
    html:not([data-theme="dark"]) .border-top {
        border-top-color: rgba(36, 155, 155, 0.15) !important;
    }

    /* Badges & Bullets */
    html:not([data-theme="dark"]) .badge.bg-primary {
        background-color: #249b9b !important;
        color: #ffffff !important;
    }
    html:not([data-theme="dark"]) .badge.bg-light-primary {
        background-color: rgba(36, 155, 155, 0.08) !important;
        color: #249b9b !important;
    }
    html:not([data-theme="dark"]) .bullet.bg-primary {
        background-color: #249b9b !important;
    }

    /* Alerts and Notices */
    html:not([data-theme="dark"]) .alert, 
    html:not([data-theme="dark"]) .notice {
        background-color: #f9fafb !important;
        border: 1px solid rgba(36, 155, 155, 0.15) !important;
        color: #1f2937 !important;
    }
    html:not([data-theme="dark"]) .alert-light, 
    html:not([data-theme="dark"]) .alert-secondary {
        background-color: #f3f4f6 !important;
        border-color: #e5e7eb !important;
    }
    html:not([data-theme="dark"]) .bg-light-warning {
        background-color: rgba(245, 158, 11, 0.06) !important;
        border: 1px solid rgba(245, 158, 11, 0.25) !important;
        color: #b45309 !important;
    }
    html:not([data-theme="dark"]) .bg-light-danger {
        background-color: rgba(239, 68, 68, 0.06) !important;
        border: 1px solid rgba(239, 68, 68, 0.25) !important;
        color: #b91c1c !important;
    }
    html:not([data-theme="dark"]) .bg-light-success {
        background-color: rgba(34, 197, 94, 0.06) !important;
        border: 1px solid rgba(34, 197, 94, 0.25) !important;
        color: #15803d !important;
    }
    html:not([data-theme="dark"]) .bg-light-info {
        background-color: rgba(36, 155, 155, 0.06) !important;
        border: 1px solid rgba(36, 155, 155, 0.25) !important;
        color: #249b9b !important;
    }

    /* Inputs, Selects & Focus states */
    html:not([data-theme="dark"]) .form-control, 
    html:not([data-theme="dark"]) .form-select, 
    html:not([data-theme="dark"]) .form-check-input {
        background-color: #ffffff !important;
        border-color: rgba(36, 155, 155, 0.25) !important;
        color: #111827 !important;
    }
    html:not([data-theme="dark"]) .form-control:focus, 
    html:not([data-theme="dark"]) .form-select:focus {
        background-color: #ffffff !important;
        border-color: #249b9b !important;
        box-shadow: 0 0 0 0.25rem rgba(36, 155, 155, 0.15) !important;
        color: #111827 !important;
    }
    html:not([data-theme="dark"]) .form-control::placeholder {
        color: #9ca3af !important;
    }
    html:not([data-theme="dark"]) .form-check-input:checked {
        background-color: #249b9b !important;
        border-color: #249b9b !important;
    }

    /* Table styling in Light theme */
    html:not([data-theme="dark"]) .table {
        color: #374151 !important;
    }
    html:not([data-theme="dark"]) .table th {
        color: #4b5563 !important;
        border-bottom-color: rgba(36, 155, 155, 0.2) !important;
    }
    html:not([data-theme="dark"]) .table td {
        border-bottom-color: rgba(36, 155, 155, 0.1) !important;
    }
    html:not([data-theme="dark"]) .table.table-row-dashed tr {
        border-bottom-style: dashed !important;
        border-bottom-color: rgba(36, 155, 155, 0.1) !important;
    }

    /* Accordions */
    html:not([data-theme="dark"]) .accordion-item {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(36, 155, 155, 0.15) !important;
    }
    html:not([data-theme="dark"]) .accordion-button {
        background-color: transparent !important;
        color: #111827 !important;
    }
    html:not([data-theme="dark"]) .accordion-button:not(.collapsed) {
        background-color: rgba(36, 155, 155, 0.04) !important;
        color: #249b9b !important;
        box-shadow: none !important;
    }
    html:not([data-theme="dark"]) .accordion-button::after {
        filter: none !important;
    }

    /* Progress bar */
    html:not([data-theme="dark"]) .progress {
        background-color: #e5e7eb !important;
    }
    html:not([data-theme="dark"]) .progress-bar.bg-primary {
        background-color: #249b9b !important;
    }

    /* Scrollbars */
    html:not([data-theme="dark"]) ::-webkit-scrollbar-track {
        background: #f3f4f6 !important;
    }
    html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
        background: rgba(36, 155, 155, 0.2) !important;
    }
    html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
        background: rgba(36, 155, 155, 0.4) !important;
    }
    
    /* Mobile cards and tickets */
    html:not([data-theme="dark"]) .invoice-card-mobile, 
    html:not([data-theme="dark"]) .ticket-card-mobile {
        background-color: #ffffff !important;
        border: 1px solid rgba(36, 155, 155, 0.15) !important;
        color: #1f2937 !important;
    }
    html:not([data-theme="dark"]) .invoice-card-mobile .icm-desc, 
    html:not([data-theme="dark"]) .invoice-card-mobile .icm-amount,
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-subject {
        color: #111827 !important;
    }
    html:not([data-theme="dark"]) .invoice-card-mobile .icm-date, 
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-id,
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-project, 
    html:not([data-theme="dark"]) .ticket-card-mobile .tcm-meta {
        color: #6b7280 !important;
    }
    html:not([data-theme="dark"]) .invoice-card-mobile .icm-foot {
        border-top-color: rgba(36, 155, 155, 0.1) !important;
    }
    html:not([data-theme="dark"]) .ticket-card-mobile:hover {
        border-color: rgba(36, 155, 155, 0.4) !important;
        box-shadow: 0 4px 14px rgba(36, 155, 155, 0.1) !important;
    }

    /* Ticket message bubbles overrides */
    html:not([data-theme="dark"]) .msg.client {
        background-color: rgba(36, 155, 155, 0.1) !important;
        border: 1px solid rgba(36, 155, 155, 0.3) !important;
        color: #0b4e4e !important;
    }
    html:not([data-theme="dark"]) .msg.staff {
        background-color: #f3f4f6 !important;
        border: 1px solid #e5e7eb !important;
        color: #1f2937 !important;
    }
    html:not([data-theme="dark"]) .msg-meta {
        color: #6b7280 !important;
    }
    
    /* Footer layout footer */
    html:not([data-theme="dark"]) .footer {
        background-color: #ffffff !important;
        border-top: 1px solid rgba(36, 155, 155, 0.15) !important;
    }


    /* ==========================================
       2. DARK THEME OVERRIDES (Dark Mode)
       ========================================== */
    html[data-theme="dark"] {
        --bs-primary: #3DC2C2 !important;
        --bs-primary-rgb: 61, 194, 194 !important;
        --bs-primary-active: #2da3a3 !important;
        --bs-body-bg: #030628 !important;
        --bs-card-bg: rgba(255, 255, 255, 0.02) !important;
    }

    /* Global Body & Wrapper Backgrounds */
    html[data-theme="dark"] body {
        background-color: #030628 !important;
        color: #f3f4f6 !important;
    }
    html[data-theme="dark"] #kt_wrapper {
        background-color: #030628 !important;
    }
    html[data-theme="dark"] #kt_content {
        background-color: #030628 !important;
    }
    html[data-theme="dark"] #kt_post {
        background-color: #030628 !important;
    }

    /* Sidebar Navigation Overrides */
    html[data-theme="dark"] .aside {
        background-color: #02041e !important;
        border-right: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .aside-logo {
        background-color: #02041e !important;
        border-bottom: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .aside-footer {
        background-color: #02041e !important;
        border-top: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .menu-item .menu-link {
        color: #9ca3af !important;
    }
    html[data-theme="dark"] .menu-item .menu-link.active,
    html[data-theme="dark"] .menu-item .menu-link.menu-link-active {
        background-color: rgba(61, 194, 194, 0.10) !important;
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .menu-item .menu-link.active::before,
    html[data-theme="dark"] .menu-item .menu-link.menu-link-active::before {
        background-color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .menu-item .menu-link.active .menu-title,
    html[data-theme="dark"] .menu-item .menu-link.menu-link-active .menu-title,
    html[data-theme="dark"] .menu-item .menu-link.active .menu-icon,
    html[data-theme="dark"] .menu-item .menu-link.menu-link-active .menu-icon {
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .menu-item .menu-link:hover:not(.active):not(.menu-link-active) {
        background-color: rgba(61, 194, 194, 0.05) !important;
    }
    html[data-theme="dark"] .menu-item .menu-link:hover:not(.active):not(.menu-link-active) .menu-title,
    html[data-theme="dark"] .menu-item .menu-link:hover:not(.active):not(.menu-link-active) .menu-icon {
        color: #3DC2C2 !important;
    }

    /* Sub Navigation Arrow */
    html[data-theme="dark"] .menu-item .menu-link[data-kt-menu-trigger][aria-expanded="true"]:after {
        color: #3DC2C2 !important;
    }

    /* Header styling */
    html[data-theme="dark"] .header {
        background-color: #02041e !important;
        border-bottom: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .header .page-title h1 {
        color: #ffffff !important;
    }
    
    /* Breadcrumbs */
    html[data-theme="dark"] .breadcrumb-item, 
    html[data-theme="dark"] .breadcrumb-item a {
        color: #9ca3af !important;
    }
    html[data-theme="dark"] .breadcrumb-item a:hover {
        color: #3DC2C2 !important;
    }

    /* Buttons Styling */
    html[data-theme="dark"] .btn-primary {
        background-color: #3DC2C2 !important;
        border-color: #3DC2C2 !important;
        color: #030628 !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 14px rgba(61, 194, 194, 0.25) !important;
    }
    html[data-theme="dark"] .btn-primary:hover, 
    html[data-theme="dark"] .btn-primary:focus, 
    html[data-theme="dark"] .btn-primary:active, 
    html[data-theme="dark"] .btn-primary.active {
        background-color: #2da3a3 !important;
        border-color: #2da3a3 !important;
        color: #030628 !important;
        box-shadow: 0 6px 20px rgba(61, 194, 194, 0.4) !important;
    }
    html[data-theme="dark"] .btn-primary i, 
    html[data-theme="dark"] .btn-primary .svg-icon {
        color: #030628 !important;
    }
    html[data-theme="dark"] .btn-light-primary {
        background-color: rgba(61, 194, 194, 0.08) !important;
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .btn-light-primary:hover {
        background-color: rgba(61, 194, 194, 0.15) !important;
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .btn-light {
        background-color: rgba(255, 255, 255, 0.03) !important;
        color: #d1d5db !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    html[data-theme="dark"] .btn-light:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    /* Text & Colors */
    html[data-theme="dark"] .text-primary, 
    html[data-theme="dark"] a.text-primary, 
    html[data-theme="dark"] .link-primary {
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .link-primary:hover, 
    html[data-theme="dark"] a.text-primary:hover {
        color: #2da3a3 !important;
    }
    html[data-theme="dark"] .text-gray-900, 
    html[data-theme="dark"] .text-dark, 
    html[data-theme="dark"] .card-title, 
    html[data-theme="dark"] h1, 
    html[data-theme="dark"] h2, 
    html[data-theme="dark"] h3, 
    html[data-theme="dark"] h4, 
    html[data-theme="dark"] h5, 
    html[data-theme="dark"] h6 {
        color: #ffffff !important;
    }
    html[data-theme="dark"] .text-gray-700, 
    html[data-theme="dark"] .text-gray-800, 
    html[data-theme="dark"] .text-gray-600 {
        color: #d1d5db !important;
    }
    html[data-theme="dark"] .text-gray-500, 
    html[data-theme="dark"] .text-muted {
        color: #9ca3af !important;
    }

    /* Cards Glassmorphism styling */
    html[data-theme="dark"] .card {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(61, 194, 194, 0.12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Welcome cards custom gradients */
    html[data-theme="dark"] .card.border-primary {
        border-color: rgba(61, 194, 194, 0.35) !important;
        background: linear-gradient(135deg, rgba(61, 194, 194, 0.06), rgba(61, 194, 194, 0.01)) !important;
    }
    
    /* Inner boxes, sections & wrappers */
    html[data-theme="dark"] .bg-white {
        background-color: rgba(255, 255, 255, 0.02) !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .border {
        border-color: rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .border-bottom {
        border-bottom-color: rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .border-top {
        border-top-color: rgba(61, 194, 194, 0.12) !important;
    }

    /* Badges & Bullets */
    html[data-theme="dark"] .badge.bg-primary {
        background-color: #3DC2C2 !important;
        color: #030628 !important;
    }
    html[data-theme="dark"] .badge.bg-light-primary {
        background-color: rgba(61, 194, 194, 0.08) !important;
        color: #3DC2C2 !important;
    }
    html[data-theme="dark"] .bullet.bg-primary {
        background-color: #3DC2C2 !important;
    }

    /* Alerts and Notices */
    html[data-theme="dark"] .alert, 
    html[data-theme="dark"] .notice {
        background-color: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(61, 194, 194, 0.12) !important;
        color: #f3f4f6 !important;
    }
    html[data-theme="dark"] .alert-light, 
    html[data-theme="dark"] .alert-secondary {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }
    html[data-theme="dark"] .bg-light-warning {
        background-color: rgba(245, 158, 11, 0.06) !important;
        border: 1px solid rgba(245, 158, 11, 0.2) !important;
        color: #fde68a !important;
    }
    html[data-theme="dark"] .bg-light-danger {
        background-color: rgba(239, 68, 68, 0.06) !important;
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
        color: #fecaca !important;
    }
    html[data-theme="dark"] .bg-light-success {
        background-color: rgba(34, 197, 94, 0.06) !important;
        border: 1px solid rgba(34, 197, 94, 0.2) !important;
        color: #bbf7d0 !important;
    }
    html[data-theme="dark"] .bg-light-info {
        background-color: rgba(61, 194, 194, 0.06) !important;
        border: 1px solid rgba(61, 194, 194, 0.2) !important;
        color: #3DC2C2 !important;
    }

    /* Inputs, Selects & Focus states */
    html[data-theme="dark"] .form-control, 
    html[data-theme="dark"] .form-select, 
    html[data-theme="dark"] .form-check-input {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border-color: rgba(61, 194, 194, 0.15) !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .form-control:focus, 
    html[data-theme="dark"] .form-select:focus {
        background-color: rgba(255, 255, 255, 0.04) !important;
        border-color: #3DC2C2 !important;
        box-shadow: 0 0 0 0.25rem rgba(61, 194, 194, 0.15) !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .form-control::placeholder {
        color: #6b7280 !important;
    }
    html[data-theme="dark"] .form-check-input:checked {
        background-color: #3DC2C2 !important;
        border-color: #3DC2C2 !important;
    }

    /* Table styling in Dark theme */
    html[data-theme="dark"] .table {
        color: #d1d5db !important;
    }
    html[data-theme="dark"] .table th {
        color: #9ca3af !important;
        border-bottom-color: rgba(61, 194, 194, 0.18) !important;
    }
    html[data-theme="dark"] .table td {
        border-bottom-color: rgba(61, 194, 194, 0.08) !important;
    }
    html[data-theme="dark"] .table.table-row-dashed tr {
        border-bottom-style: dashed !important;
        border-bottom-color: rgba(61, 194, 194, 0.08) !important;
    }

    /* Accordions */
    html[data-theme="dark"] .accordion-item {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
    html[data-theme="dark"] .accordion-button {
        background-color: transparent !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .accordion-button:not(.collapsed) {
        background-color: rgba(61, 194, 194, 0.04) !important;
        color: #3DC2C2 !important;
        box-shadow: none !important;
    }
    html[data-theme="dark"] .accordion-button::after {
        filter: invert(1) brightness(2) !important;
    }

    /* Progress bar */
    html[data-theme="dark"] .progress {
        background-color: rgba(255, 255, 255, 0.06) !important;
    }
    html[data-theme="dark"] .progress-bar.bg-primary {
        background-color: #3DC2C2 !important;
    }

    /* Scrollbars */
    html[data-theme="dark"] ::-webkit-scrollbar-track {
        background: #030628 !important;
    }
    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: rgba(61, 194, 194, 0.2) !important;
    }
    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: rgba(61, 194, 194, 0.4) !important;
    }
    
    /* Mobile cards and tickets */
    html[data-theme="dark"] .invoice-card-mobile, 
    html[data-theme="dark"] .ticket-card-mobile {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(61, 194, 194, 0.12) !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .invoice-card-mobile .icm-desc, 
    html[data-theme="dark"] .invoice-card-mobile .icm-amount,
    html[data-theme="dark"] .ticket-card-mobile .tcm-subject {
        color: #ffffff !important;
    }
    html[data-theme="dark"] .invoice-card-mobile .icm-date, 
    html[data-theme="dark"] .ticket-card-mobile .tcm-id,
    html[data-theme="dark"] .ticket-card-mobile .tcm-project, 
    html[data-theme="dark"] .ticket-card-mobile .tcm-meta {
        color: #9ca3af !important;
    }
    html[data-theme="dark"] .invoice-card-mobile .icm-foot {
        border-top-color: rgba(61, 194, 194, 0.1) !important;
    }
    html[data-theme="dark"] .ticket-card-mobile:hover {
        border-color: rgba(61, 194, 194, 0.4) !important;
        box-shadow: 0 4px 14px rgba(61, 194, 194, 0.15) !important;
    }

    /* Ticket message bubbles overrides */
    html[data-theme="dark"] .msg.client {
        background-color: rgba(61, 194, 194, 0.12) !important;
        border: 1px solid rgba(61, 194, 194, 0.35) !important;
        color: #e6fcfc !important;
    }
    html[data-theme="dark"] .msg.staff {
        background-color: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #e5e7eb !important;
    }
    html[data-theme="dark"] .msg-meta {
        color: #9ca3af !important;
    }
    
    /* Footer layout footer */
    html[data-theme="dark"] .footer {
        background-color: #02041e !important;
        border-top: 1px solid rgba(61, 194, 194, 0.12) !important;
    }
</style>
@endif