{{-- User Layout Styles - Phoenix v1.22.0 Compatible --}}



<!-- Core theme CSS -->
<link href="{{ asset('vendors/simplebar/simplebar.min.css') }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<link href="{{ asset('assets/css/theme-rtl.min.css') }}" type="text/css" rel="stylesheet" id="style-rtl">
<link href="{{ asset('assets/css/theme.min.css') }}" type="text/css" rel="stylesheet" id="style-default">
<link href="{{ asset('assets/css/user-rtl.min.css') }}" type="text/css" rel="stylesheet" id="user-style-rtl">
<link href="{{ asset('assets/css/user.min.css') }}" type="text/css" rel="stylesheet" id="user-style-default">

<link href="{{ asset('vendors/leaflet/leaflet.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/leaflet.markercluster/MarkerCluster.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/leaflet.markercluster/MarkerCluster.Default.css') }}" rel="stylesheet">
<!-- Phoenix v1.22.0 Exact Navigation Styling -->
<!-- <link href="{{ asset('assets/css/phoenix-navbar-exact.css') }}" rel="stylesheet"> -->
<!-- Enhanced Active Navigation States -->
<!-- <link href="{{ asset('assets/css/phoenix-nav-active-enhanced.css') }}" rel="stylesheet"> -->
<!-- Minimal Header Spacing Fix -->
<link href="{{ asset('assets/css/user-header-spacing-minimal.css') }}" rel="stylesheet">
<!-- Theme Toggle Phoenix v1.22.0 Fix -->
<link href="{{ asset('assets/css/theme-toggle-phoenix-fix.css') }}" rel="stylesheet">
<!-- Choices (Single Select) -->
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet">

<script src="{{ asset('vendors/simplebar/simplebar.min.js') }}"></script>
<script src="{{ asset('assets/js/config.js') }}"></script>

<script>
    var phoenixIsRTL = window.config.config.phoenixIsRTL;
    if (phoenixIsRTL) {
        var linkDefault = document.getElementById('style-default');
        var userLinkDefault = document.getElementById('user-style-default');
        linkDefault.setAttribute('disabled', true);
        userLinkDefault.setAttribute('disabled', true);
        document.querySelector('html').setAttribute('dir', 'rtl');
    } else {
        var linkRTL = document.getElementById('style-rtl');
        var userLinkRTL = document.getElementById('user-style-rtl');
        linkRTL.setAttribute('disabled', true);
        userLinkRTL.setAttribute('disabled', true);
    }
</script>

@stack('styles')

<!-- Choices alignment tweaks to match form-select-sm and ensure dropdown layering -->
<style>
    /* Match Bootstrap small select height */
    .choices[data-type*="select-one"] .choices__inner { min-height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; }
    .choices__inner { padding: .25rem .5rem; }
    /* Keep inline input hidden when search is disabled */
    .choices[data-type*="select-one"].choices__disabled .choices__input { display: none !important; }
    .choices__list--dropdown { z-index: 1055; }
    /* Respect w-auto from parent */
    .choices { width: auto; min-width: 140px; }
</style>

<!-- Role Switcher Styles -->
<!-- <style>
    .role-switch-item {
        transition: all 0.2s ease-in-out;
        border-bottom: 1px solid var(--phoenix-gray-200);
        min-height: 60px;
    }
    
    .role-switch-item:last-child {
        border-bottom: none;
    }
    
    .role-switch-item:hover:not(.bg-primary-subtle) {
        background-color: var(--phoenix-gray-100);
        transform: translateX(2px);
    }
    
    .role-switch-item.bg-primary-subtle {
        background-color: var(--phoenix-primary-bg-subtle) !important;
        border-left: 3px solid var(--phoenix-primary);
    }
    
    .navbar-nav-icons .dropdown-toggle.hide-arrow::after {
        display: none;
    }
    
    .navbar-nav-icons .nav-link:hover {
        background-color: var(--phoenix-gray-100);
        border-radius: 0.375rem;
    }
    
    /* Role dropdown specific styles */
    .role-dropdown-menu {
        min-width: 320px;
        max-width: 90vw;
        border: 1px solid var(--phoenix-border-color);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .role-avatar-container {
        position: relative;
        display: inline-block;
    }
    
    .role-avatar-container::after {
        content: "";
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 12px;
        height: 12px;
        background: var(--phoenix-success);
        border: 2px solid white;
        border-radius: 50%;
    }
    
    .role-switch-header {
        background: linear-gradient(135deg, var(--phoenix-primary) 0%, var(--phoenix-info) 100%);
        color: white;
    }
    
    .role-counter-badge {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    /* Mobile responsive adjustments */
    @media (max-width: 576px) {
        .role-dropdown-menu {
            min-width: 280px;
            margin-right: 0.5rem;
        }
        
        .role-switch-item {
            min-height: 55px;
        }
        
        .role-avatar-xl {
            width: 3rem;
            height: 3rem;
        }
        
        .role-text-mobile {
            display: none;
        }
        
        .navbar-nav-icons .nav-link {
            padding: 0.25rem 0.5rem;
        }
    }
    
    @media (max-width: 480px) {
        .role-dropdown-menu {
            min-width: 260px;
            position: fixed !important;
            top: 70px !important;
            right: 10px !important;
            left: 10px !important;
            transform: none !important;
            margin: 0 !important;
        }
    }
    
    /* Enhanced loading state */
    .role-switch-loading {
        opacity: 0.7;
        pointer-events: none;
    }
    
    .role-switch-loading .role-switch-item {
        cursor: wait;
    }
    
    /* Toast positioning fix */
    .toast-container {
        z-index: 9999 !important;
    }
    
    /* Improved animation for role switching */
    .role-switch-transition {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .role-switch-success {
        animation: roleSwitch 0.5s ease-in-out;
    }
    
    @keyframes roleSwitch {
        0% { transform: scale(1); }
        50% { transform: scale(1.02); background-color: var(--phoenix-success-bg-subtle); }
        100% { transform: scale(1); }
    }

    /* Main layout styles - Phoenix v1.22.0 Compatible */
    .main {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .content {
        flex: 1;
        padding-bottom: 2rem;
    }

    .footer {
        margin-top: auto;
        background: var(--phoenix-gray-100);
        border-top: 1px solid var(--phoenix-gray-200);
        padding: 1rem 1.5rem;
        position: relative;
        transition: margin-left 0.3s ease;
    }

    /* Footer responsive to sidebar state - matches Phoenix behavior */
    @media (min-width: 992px) {
        .footer {
            margin-left: var(--phoenix-navbar-vertical-width, 240px);
        }
        
        /* When sidebar is collapsed */
        .navbar-vertical-collapsed .footer {
            margin-left: var(--phoenix-navbar-vertical-collapsed-width, 56px);
        }
    }

    @media (max-width: 991.98px) {
        .footer {
            margin-left: 0;
        }
    }

    /* Phoenix v1.22.0 sidebar state variables */
    :root {
        --phoenix-navbar-vertical-width: 240px;
        --phoenix-navbar-vertical-collapsed-width: 56px;
    }
</style> -->