/* resources/css/filament/vendor/theme.css */

@font-face {
    font-family: VazirmantnBold;
    src: url(../../fonts/vazirmatn/Vazirmatn-Bold.woff2) format("truetype");
}

@font-face {
    font-family: VazirmantnRegular;
    src: url(../../fonts/vazirmatn/Vazirmatn-Regular.woff2) format("truetype");
}

/* ✅ Apply Vazirmatn font globally */
@layer base {
    * {
        font-family: 'VazirmantnRegular', sans-serif;
    }

    /* Persian number support */
    body {
        font-feature-settings: 'ss01' on;
    }
}

/* ✅ Vendor Panel Color Scheme - Modern Blue/Purple */
@layer components {
    /* Primary brand color - Elegant Blue/Purple gradient */
    .fi-primary {
        --primary-50: 240 249 255;
        --primary-100: 224 242 254;
        --primary-200: 186 230 253;
        --primary-300: 125 211 252;
        --primary-400: 56 189 248;
        --primary-500: 14 165 233;
        --primary-600: 2 132 199;
        --primary-700: 3 105 161;
        --primary-800: 7 89 133;
        --primary-900: 12 74 110;
    }

    /* Better RTL spacing for Persian text */
    [dir="rtl"] .fi-sidebar-nav-item {
        padding-right: 1rem;
        padding-left: 0.5rem;
    }

    /* Improve readability for Persian */
    [dir="rtl"] {
        letter-spacing: 0.01em;
        line-height: 1.8;
    }

    /* Custom scrollbar for RTL */
    [dir="rtl"] ::-webkit-scrollbar {
        width: 8px;
    }

    [dir="rtl"] ::-webkit-scrollbar-track {
        background: rgb(var(--gray-100));
    }

    [dir="rtl"] ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgb(56 189 248), rgb(14 165 233));
        border-radius: 4px;
    }

    [dir="rtl"] ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgb(14 165 233), rgb(2 132 199));
    }
}

/* ====================================================== */
/* ✅ MODERN VENDOR SIDEBAR STYLING - LIGHT MODE */
/* ====================================================== */
@layer components {
    /* Sidebar container - Light elegant gradient */
    .fi-sidebar {
        background: linear-gradient(180deg,
            rgb(255 255 255) 0%,
            rgb(248 250 252) 100%
        );
        border-left: 1px solid rgb(226 232 240);
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.03);
    }

    /* Sidebar header branding - Blue/Purple theme */
    .fi-sidebar-header {
        background: linear-gradient(135deg,
            rgb(59 130 246) 0%,
            rgb(99 102 241) 50%,
            rgb(139 92 246) 100%
        );
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
        border-radius: 0 0 1.25rem 1.25rem;
        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
        position: relative;
        overflow: hidden;
    }

    /* Animated background pattern */
    .fi-sidebar-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 40%);
        animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .fi-sidebar-header .fi-logo {
        filter: brightness(0) invert(1);
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .fi-sidebar-header .fi-logo:hover {
        transform: scale(1.08) rotate(-2deg);
        filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(255,255,255,0.3));
    }

    /* Navigation items - Modern floating cards */
    .fi-sidebar-nav {
        padding: 0.75rem;
    }

    .fi-sidebar-nav-item {
        margin-bottom: 0.375rem;
        border-radius: 0.875rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        background: transparent;
    }

    /* Hover effect - Elegant glow */
    .fi-sidebar-nav-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.08) 0%,
            rgba(139, 92, 246, 0.08) 100%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 0.875rem;
    }

    .fi-sidebar-nav-item:hover::after {
        opacity: 1;
    }

    .fi-sidebar-nav-item:hover {
        transform: translateX(-4px);
        box-shadow: 
            0 4px 12px rgba(59, 130, 246, 0.15),
            inset 0 0 0 1px rgba(59, 130, 246, 0.1);
    }

    /* Active state - Stunning gradient with shine effect */
    .fi-sidebar-nav-item.active,
    .fi-sidebar-nav-item[aria-current="page"] {
        background: linear-gradient(135deg,
            rgb(59 130 246) 0%,
            rgb(99 102 241) 50%,
            rgb(139 92 246) 100%
        );
        color: white;
        font-family: 'VazirmantnBold', sans-serif;
        font-weight: 700;
        box-shadow:
            0 6px 20px rgba(59, 130, 246, 0.4),
            0 2px 8px rgba(139, 92, 246, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        position: relative;
    }

    /* Shine effect on active item */
    .fi-sidebar-nav-item.active::before,
    .fi-sidebar-nav-item[aria-current="page"]::before {
        content: '';
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        animation: shine 3s infinite;
    }

    @keyframes shine {
        0%, 100% { right: -100%; }
        50% { right: 100%; }
    }

    /* Active item side indicator */
    .fi-sidebar-nav-item.active::after,
    .fi-sidebar-nav-item[aria-current="page"]::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 60%;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.4)
        );
        border-radius: 3px 0 0 3px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    /* Active item icon color */
    .fi-sidebar-nav-item.active .fi-sidebar-nav-item-icon,
    .fi-sidebar-nav-item[aria-current="page"] .fi-sidebar-nav-item-icon {
        color: white;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    }

    /* Active item label color */
    .fi-sidebar-nav-item.active .fi-sidebar-nav-item-label,
    .fi-sidebar-nav-item[aria-current="page"] .fi-sidebar-nav-item-label {
        color: white;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Navigation group headers */
    .fi-sidebar-nav-group-label {
        color: rgb(100 116 139);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 1rem 1rem 0.5rem;
        margin-top: 1.25rem;
        position: relative;
    }

    .fi-sidebar-nav-group-label::before {
        content: '';
        position: absolute;
        right: 1rem;
        left: 1rem;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.3),
            rgba(139, 92, 246, 0.3)
        );
        border-radius: 1px;
    }

    /* Icon styling with animated hover */
    .fi-sidebar-nav-item-icon {
        transition: all 0.3s ease;
        margin-left: 0.875rem;
    }

    .fi-sidebar-nav-item:hover .fi-sidebar-nav-item-icon {
        color: rgb(59 130 246);
        transform: scale(1.15) rotate(-5deg);
    }

    /* Badge/Counter styling - Modern pill */
    .fi-sidebar-nav-item-badge {
        background: linear-gradient(135deg,
            rgb(249 115 22) 0%,
            rgb(234 88 12) 100%
        );
        color: white;
        border-radius: 9999px;
        padding: 0.15rem 0.6rem;
        font-size: 0.7rem;
        font-weight: 700;
        box-shadow: 
            0 2px 6px rgba(249, 115, 22, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    /* Collapsible group indicators */
    .fi-sidebar-nav-group-button {
        border-radius: 0.875rem;
        transition: all 0.3s ease;
    }

    .fi-sidebar-nav-group-button:hover {
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.06),
            rgba(139, 92, 246, 0.06)
        );
    }

    /* User menu at bottom - Elegant card */
    .fi-sidebar-user-menu {
        margin-top: auto;
        padding: 1rem;
        border-top: 2px solid transparent;
        background: linear-gradient(white, white) padding-box,
                    linear-gradient(90deg, rgb(59 130 246), rgb(139 92 246)) border-box;
        backdrop-filter: blur(10px);
        position: relative;
    }

    .fi-sidebar-user-menu::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,
            rgb(59 130 246),
            rgb(99 102 241),
            rgb(139 92 246)
        );
        filter: blur(2px);
    }

    .fi-sidebar-user-menu-button {
        border-radius: 0.875rem;
        transition: all 0.3s ease;
        padding: 0.875rem;
        background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.8),
            rgba(241, 245, 249, 0.8)
        );
    }

    .fi-sidebar-user-menu-button:hover {
        background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.1),
            rgba(139, 92, 246, 0.1)
        );
        transform: translateY(-3px);
        box-shadow: 
            0 6px 16px rgba(59, 130, 246, 0.15),
            0 2px 8px rgba(139, 92, 246, 0.1);
    }
}

/* ====================================================== */
/* ✅ DARK MODE VENDOR SIDEBAR STYLING */
/* ====================================================== */
@layer components {
    /* Custom dark mode background */
    .dark .fi-body {
        background-color: rgb(15 23 42);
        background-image: 
            radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
    }

    /* Dark sidebar - Deep elegant gradient */
    .dark .fi-sidebar {
        background: linear-gradient(180deg,
            rgb(30 41 59) 0%,
            rgb(15 23 42) 100%
        );
        border-left: 1px solid rgb(51 65 85);
        box-shadow: -2px 0 20px rgba(0, 0, 0, 0.5);
    }

    /* Dark mode sidebar header - Glowing gradient */
    .dark .fi-sidebar-header {
        background: linear-gradient(135deg,
            rgb(59 130 246) 0%,
            rgb(99 102 241) 50%,
            rgb(139 92 246) 100%
        );
        box-shadow: 
            0 8px 24px rgba(59, 130, 246, 0.3),
            0 4px 12px rgba(139, 92, 246, 0.2);
    }

    /* Dark mode navigation items */
    .dark .fi-sidebar-nav-item {
        color: rgb(203 213 225);
    }

    .dark .fi-sidebar-nav-item:hover {
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.15) 0%,
            rgba(139, 92, 246, 0.15) 100%
        );
        box-shadow: 
            0 4px 16px rgba(59, 130, 246, 0.2),
            inset 0 0 0 1px rgba(59, 130, 246, 0.2);
    }

    /* Dark mode active state - Intense glow */
    .dark .fi-sidebar-nav-item.active,
    .dark .fi-sidebar-nav-item[aria-current="page"] {
        background: linear-gradient(135deg,
            rgb(59 130 246) 0%,
            rgb(99 102 241) 50%,
            rgb(139 92 246) 100%
        );
        box-shadow:
            0 0 30px rgba(59, 130, 246, 0.5),
            0 6px 24px rgba(99, 102, 241, 0.4),
            0 2px 12px rgba(139, 92, 246, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* Dark mode group labels */
    .dark .fi-sidebar-nav-group-label {
        color: rgb(148 163 184);
    }

    .dark .fi-sidebar-nav-group-label::before {
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.4),
            rgba(139, 92, 246, 0.4)
        );
    }

    /* Dark mode user menu */
    .dark .fi-sidebar-user-menu {
        border-top: 2px solid transparent;
        background: linear-gradient(rgb(30 41 59), rgb(30 41 59)) padding-box,
                    linear-gradient(90deg, rgb(59 130 246), rgb(139 92 246)) border-box;
    }

    .dark .fi-sidebar-user-menu-button {
        background: linear-gradient(135deg,
            rgba(51, 65, 85, 0.6),
            rgba(30, 41, 59, 0.6)
        );
    }

    .dark .fi-sidebar-user-menu-button:hover {
        background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.2),
            rgba(139, 92, 246, 0.2)
        );
        box-shadow: 
            0 6px 20px rgba(59, 130, 246, 0.25),
            0 2px 10px rgba(139, 92, 246, 0.2);
    }

    /* Dark mode scrollbar */
    .dark ::-webkit-scrollbar-track {
        background: rgb(30 41 59);
    }

    .dark ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgb(59 130 246), rgb(139 92 246));
    }

    .dark ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgb(99 102 241), rgb(168 85 247));
    }
}

/* ====================================================== */
/* ✅ VENDOR PANEL SPECIFIC COMPONENTS */
/* ====================================================== */
@layer components {
    /* Smooth page transitions */
    .fi-main {
        animation: fadeIn 0.4s ease-in-out;
    }

    /* Modern form inputs - Blue theme */
    .fi-input,
    .fi-select {
        transition: all 0.3s ease;
        border-radius: 0.625rem;
    }

    .fi-input:focus,
    .fi-select:focus {
        border-color: rgb(59 130 246);
        box-shadow:
            0 0 0 4px rgba(59, 130, 246, 0.1),
            0 1px 3px rgba(0, 0, 0, 0.05),
            inset 0 0 0 1px rgba(59, 130, 246, 0.3);
        transform: translateY(-1px);
    }

    /* Modern buttons - Gradient style */
    .fi-btn-primary {
        background: linear-gradient(135deg,
            rgb(59 130 246) 0%,
            rgb(99 102 241) 50%,
            rgb(139 92 246) 100%
        );
        box-shadow:
            0 4px 14px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .fi-btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        transition: left 0.5s ease;
    }

    .fi-btn-primary:hover::before {
        left: 100%;
    }

    .fi-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow:
            0 6px 20px rgba(59, 130, 246, 0.5),
            0 2px 10px rgba(139, 92, 246, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .fi-btn-primary:active {
        transform: translateY(0);
        box-shadow:
            0 2px 10px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    /* Card modern styling with gradient border */
    .fi-section,
    .fi-card {
        border-radius: 1rem;
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid transparent;
        background: linear-gradient(white, white) padding-box,
                    linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)) border-box;
    }

    .fi-section:hover,
    .fi-card:hover {
        box-shadow:
            0 8px 16px rgba(59, 130, 246, 0.1),
            0 4px 8px rgba(139, 92, 246, 0.08);
        transform: translateY(-2px);
    }

    /* Modern table styling */
    .fi-table {
        border-radius: 1rem;
        overflow: hidden;
    }

    .fi-table thead {
        background: linear-gradient(135deg,
            rgb(248 250 252) 0%,
            rgb(241 245 249) 100%
        );
    }

    .dark .fi-table thead {
        background: linear-gradient(135deg,
            rgb(30 41 59) 0%,
            rgb(15 23 42) 100%
        );
    }

    .fi-table tbody tr {
        transition: all 0.2s ease;
    }

    .fi-table tbody tr:hover {
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.04),
            rgba(139, 92, 246, 0.04)
        );
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
    }

    .dark .fi-table tbody tr:hover {
        background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.1),
            rgba(139, 92, 246, 0.1)
        );
    }

    /* Badge modern styling - Multiple color options */
    .fi-badge {
        border-radius: 9999px;
        padding: 0.25rem 0.75rem;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .fi-badge-info {
        background: linear-gradient(135deg, rgb(59 130 246), rgb(37 99 235));
        color: white;
    }

    .fi-badge-success {
        background: linear-gradient(135deg, rgb(34 197 94), rgb(22 163 74));
        color: white;
    }

    .fi-badge-warning {
        background: linear-gradient(135deg, rgb(251 191 36), rgb(245 158 11));
        color: white;
    }

    .fi-badge-danger {
        background: linear-gradient(135deg, rgb(239 68 68), rgb(220 38 38));
        color: white;
    }

    /* Toast/Notification modern styling */
    .fi-notification {
        border-radius: 1rem;
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 8px 16px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .dark .fi-notification {
        border: 1px solid rgba(59, 130, 246, 0.2);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(59, 130, 246, 0.2);
    }
}

/* ====================================================== */
/* ✅ RESPONSIVE SIDEBAR FOR MOBILE */
/* ====================================================== */
@media (max-width: 768px) {
    .fi-sidebar {
        box-shadow: 2px 0 20px rgba(59, 130, 246, 0.15);
    }

    .dark .fi-sidebar {
        box-shadow: 2px 0 30px rgba(0, 0, 0, 0.6);
    }

    /* Mobile sidebar slide animation */
    .fi-sidebar-open {
        animation: slideInRTL 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ====================================================== */
/* ✅ PRINT STYLES */
/* ====================================================== */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-footer {
        display: none;
    }

    .fi-main {
        margin: 0;
        padding: 0;
    }
}