{{--
    Vendor Dashboard Theme Partial
    
    This partial injects CSS variables for the current site's color palette
    and overrides the default dashboard sidebar/UI colors.
    
    The vendor dashboard uses a different CSS structure than the user frontend,
    so we need specific overrides for the admin-style components.
--}}
@php
    $primaryColor = $siteConfig['colors']['primary'] ?? [];
    $secondaryColor = $siteConfig['colors']['secondary'] ?? [];
    
    // Get main colors with fallbacks
    $primary400 = $primaryColor['400'] ?? '#6366f1';
    $primary500 = $primaryColor['500'] ?? '#4f46e5';
    $primary600 = $primaryColor['600'] ?? '#4338ca';
    $primary700 = $primaryColor['700'] ?? '#3730a3';
    $primary800 = $primaryColor['800'] ?? '#312e81';
    $primary900 = $primaryColor['900'] ?? '#1e1b4b';
    $primary300 = $primaryColor['300'] ?? '#a5b4fc';
@endphp

@if(!empty($primaryColor))
<style>
    :root {
        /* Primary colors from site config */
        @foreach($primaryColor as $shade => $color)
        --color-primary-{{ $shade }}: {{ $color }};
        --color-primary-{{ $shade }}-rgb: {{ hexToRgb($color) }};
        @endforeach

        /* Secondary colors */
        @if(!empty($secondaryColor))
        @foreach($secondaryColor as $shade => $color)
        --color-secondary-{{ $shade }}: {{ $color }};
        --color-secondary-{{ $shade }}-rgb: {{ hexToRgb($color) }};
        @endforeach
        @endif

        /* Override default blue primary with site colors */
        --primary: {{ $primary400 }};
        --primary-bg-color: {{ $primary500 }};
        --primary-bg-hover: {{ $primary600 }};
        --primary-bg-border: {{ $primary600 }};
        --primary-transparentcolor: rgba({{ hexToRgb($primary500) }}, 0.2);
        
        /* Custom CSS variables */
        @if(isset($siteConfig['css_variables']['light']))
        @foreach($siteConfig['css_variables']['light'] as $varName => $varValue)
        --{{ $varName }}: {{ $varValue }};
        @endforeach
        @endif
    }

    /* Dark mode overrides */
    html.dark,
    body.dark-mode,
    .dark-theme {
        --primary: {{ $primary400 }};
        --primary-bg-color: {{ $primary500 }};
        --primary-bg-hover: {{ $primary600 }};
        --primary-bg-border: {{ $primary600 }};
        
        @if(isset($siteConfig['css_variables']['dark']))
        @foreach($siteConfig['css_variables']['dark'] as $varName => $varValue)
        --{{ $varName }}: {{ $varValue }};
        @endforeach
        @endif
    }

    /* ====== Sidebar Background Override ====== */
    /* Override all possible sidebar background styles */
    .app-sidebar,
    .leftmenu-color .app-sidebar,
    .leftmenu-dark .app-sidebar,
    .leftmenu-gradient .app-sidebar,
    body .app-sidebar,
    .main-body .app-sidebar {
        background: linear-gradient(to bottom, {{ $primary700 }} 0%, {{ $primary900 }} 100%) !important;
        border-right-color: {{ $primary700 }} !important;
        border-left-color: {{ $primary700 }} !important;
    }

    /* Sidebar header background */
    .main-sidebar-header,
    .app-sidebar .main-sidebar-header,
    .leftmenu-color .main-sidebar-header,
    body .main-sidebar-header {
        background: {{ $primary800 }} !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
        border-right-color: {{ $primary800 }} !important;
        border-left-color: {{ $primary800 }} !important;
    }

    /* Side menu background */
    .main-sidemenu,
    .app-sidebar .main-sidemenu {
        background: transparent !important;
    }

    /* Active menu item */
    .app-sidebar .slide.active .side-menu__item,
    .app-sidebar .side-menu__item:hover,
    .app-sidebar .side-menu__item.active,
    .leftmenu-color .app-sidebar .slide.active .side-menu__item,
    .leftmenu-color .app-sidebar .side-menu__item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    /* Active indicator bar */
    .app-sidebar .slide.active .side-menu__item::before,
    .app-sidebar .slide .side-menu__item.active::before,
    .leftmenu-color .app-sidebar .slide .side-menu__item.active::before {
        background-color: {{ $primary300 }} !important;
    }

    /* Sidebar links color */
    .app-sidebar .side-menu__item,
    .app-sidebar .side-menu__label,
    .app-sidebar .side-menu__icon,
    .app-sidebar ul li a,
    .leftmenu-color .app-sidebar ul li a,
    .leftmenu-color .side-menu__label,
    .leftmenu-color .app-sidebar__user .user-info h4 {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .app-sidebar .side-menu__item:hover .side-menu__label,
    .app-sidebar .side-menu__item:hover .side-menu__icon,
    .leftmenu-color .app-sidebar .side-menu__item:hover .side-menu__label,
    .leftmenu-color .app-sidebar .side-menu__item:hover .side-menu__icon {
        color: #fff !important;
    }

    /* Sidebar icons */
    .app-sidebar .side-menu__icon,
    .leftmenu-color .side-menu__item.active .side-menu__icon,
    .leftmenu-color .side-menu__item:hover .side-menu__icon,
    .leftmenu-color .side-menu__item:focus .side-menu__icon {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Submenu items */
    .app-sidebar .slide-menu a,
    .app-sidebar .slide-menu .slide-item,
    .leftmenu-color .toggle-menu.side-menu li ul li a,
    .leftmenu-color .app-sidebar .slide-menu a {
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
    }

    .app-sidebar .slide-menu a:hover,
    .app-sidebar .slide-menu a.active,
    .app-sidebar .slide-menu .slide-item:hover,
    .leftmenu-color .app-sidebar .slide-menu .slide-item:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* Submenu bullets/dots */
    .app-sidebar .slide-menu a:before,
    .leftmenu-color .app-sidebar .slide-menu a:before {
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

    .app-sidebar .slide-menu a:hover:before,
    .leftmenu-color .slide-item:hover:before {
        border-color: #fff !important;
        color: #fff !important;
    }

    /* Expanded slide background */
    .app-sidebar .slide.is-expanded,
    .leftmenu-color .slide.is-expanded {
        background: rgba(0, 0, 0, 0.1) !important;
    }

    /* Submenu background */
    .app-sidebar .side-menu li ul,
    .leftmenu-color .side-menu li ul {
        background: transparent !important;
    }

    /* Category headers */
    .app-sidebar .side-item-category,
    .side-item-category {
        color: {{ $primary300 }} !important;
        font-weight: 600;
    }

    /* User profile section in sidebar */
    .app-sidebar__user .user-pro-body img,
    .leftmenu-color .app-sidebar__user .user-pro-body img {
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Angle icon for expandable items */
    .app-sidebar .angle,
    .app-sidebar .side-menu .angle {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /* ====== Header Override ====== */
    .app-header,
    .main-header {
        background: {{ $primary500 }} !important;
        border-bottom-color: {{ $primary600 }} !important;
    }

    .app-header .nav-link,
    .main-header .nav-link,
    .app-header .header-brand-img,
    .main-header .header-brand-img {
        color: #fff !important;
    }

    /* ====== Button Overrides ====== */
    .btn-primary {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary600 }} !important;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: {{ $primary600 }} !important;
        border-color: {{ $primary700 }} !important;
    }

    .btn-outline-primary {
        color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
    }

    .btn-outline-primary:hover {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
        color: #fff !important;
    }

    /* ====== Badge Overrides ====== */
    .badge-primary,
    .bg-primary {
        background-color: {{ $primary500 }} !important;
    }

    /* ====== Text Color Overrides ====== */
    .text-primary {
        color: {{ $primary500 }} !important;
    }

    /* ====== Link Overrides ====== */
    a:not(.btn):not(.side-menu__item):not(.slide-item):not(.nav-link) {
        color: {{ $primary500 }};
    }

    a:not(.btn):not(.side-menu__item):not(.slide-item):not(.nav-link):hover {
        color: {{ $primary600 }};
    }

    /* ====== Card Header Overrides ====== */
    .card-header.bg-primary,
    .panel-heading.bg-primary {
        background-color: {{ $primary500 }} !important;
    }

    /* ====== Pagination Overrides ====== */
    .page-item.active .page-link {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
    }

    .page-link {
        color: {{ $primary500 }} !important;
    }

    /* ====== Form Elements ====== */
    .form-control:focus {
        border-color: {{ $primary500 }} !important;
        box-shadow: 0 0 0 0.2rem rgba({{ hexToRgb($primary500) }}, 0.2) !important;
    }

    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
    }

    /* ====== Progress Bars ====== */
    .progress-bar {
        background-color: {{ $primary500 }} !important;
    }

    /* ====== Tabs ====== */
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
        color: #fff !important;
    }

    /* ====== Table Styling ====== */
    .table thead th {
        border-bottom-color: {{ $primary500 }} !important;
    }

    .table-primary,
    .table-primary > th,
    .table-primary > td {
        background-color: rgba({{ hexToRgb($primary500) }}, 0.15) !important;
    }

    /* ====== Breadcrumb ====== */
    .breadcrumb-item.active {
        color: {{ $primary500 }} !important;
    }

    /* ====== Dropdown active ====== */
    .dropdown-item.active,
    .dropdown-item:active {
        background-color: {{ $primary500 }} !important;
    }

    /* ====== Switch/Toggle ====== */
    .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
        background-color: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
    }

    /* ====== Select2 ====== */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: {{ $primary500 }} !important;
    }

    /* ====== DataTables ====== */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: {{ $primary500 }} !important;
        border-color: {{ $primary500 }} !important;
        color: #fff !important;
    }
</style>
@endif