@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* GLOBAL TYPOGRAPHY & OVERRIDES */
[x-cloak] { display: none !important; }
html {
    scroll-behavior: smooth;
}
body, * { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* TINY CUSTOM SCROLLBARS FOR DRAWERS & DROPDOWNS */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ULTRA-SLIM SCROLLBAR FOR COMPACT CATEGORY BAR */
.custom-scrollbar-slim {
    overflow-y: hidden !important;
}
.custom-scrollbar-slim::-webkit-scrollbar {
    height: 3px;
}
.custom-scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar-slim::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 9999px;
}
.custom-scrollbar-slim::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* GLOBAL HORIZONTAL OVERFLOW GUARD */
html, body {
    overflow-x: clip;
}

/* MEGA MENU STYLES */
.mega-menu { display: none; }
.mega-menu.open { 
    display: block; 
    animation: megaMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes megaMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.nav-chevron { transition: transform .2s ease; }
.nav-trigger.open .nav-chevron { transform: rotate(180deg); }

/* MARKETPLACE UTILITY PATTERNS */
.hero-grid {
    background-image:
        linear-gradient(rgba(81,64,200,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(81,64,200,.03) 1px, transparent 1px);
    background-size: 32px 32px;
}
.product-img {
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f8f7ff 60%, #eeeefc 100%);
}

/* DASHBOARD RETRACTABLE SIDEBAR & ACCORDION STYLES */
.sidebar {
    transition: width .25s ease, transform .25s ease;
}

.sidebar.collapsed {
    width: 76px !important;
}

.sidebar.collapsed .label,
.sidebar.collapsed .section,
.sidebar.collapsed .section-label,
.sidebar.collapsed .chevron,
.sidebar.collapsed .chevron-wrapper,
.sidebar.collapsed .section-title-text,
.sidebar.collapsed .user-meta,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .logo-toggle {
    display: none !important;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav,
.sidebar.collapsed .section-title,
.sidebar.collapsed .sidebar-brand-header {
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-brand-header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.sidebar.collapsed .sub {
    max-height: none !important;
    overflow: visible !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}

/* ACCORDION CHEVRON ICON ROTATION */
.chevron-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.section[aria-expanded="true"] .chevron-icon,
.nav-segment:has(.sub.open) .chevron-icon {
    transform: rotate(180deg);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.submenu.open {
    max-height: 600px;
}

.main-area {
    transition: margin-left .25s ease;
}

.main-area.collapsed {
    margin-left: 76px !important;
}

@media (max-width: 1024px) {
    .sidebar {
        width: 280px !important;
        transform: translateX(-100%);
        position: fixed !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-area {
        margin-left: 0 !important;
    }
}

@media (min-width: 1025px) and (max-width: 1224px) {
    .sidebar:not(.expanded) {
        width: 76px !important;
    }

    .sidebar:not(.expanded) .label,
    .sidebar:not(.expanded) .section,
    .sidebar:not(.expanded) .section-label,
    .sidebar:not(.expanded) .chevron,
    .sidebar:not(.expanded) .chevron-wrapper,
    .sidebar:not(.expanded) .section-title-text,
    .sidebar:not(.expanded) .user-meta,
    .sidebar:not(.expanded) .brand-text,
    .sidebar:not(.expanded) .logo-toggle {
        display: none !important;
    }

    .sidebar:not(.expanded) .nav-item,
    .sidebar:not(.expanded) .nav,
    .sidebar:not(.expanded) .section-title,
    .sidebar:not(.expanded) .sidebar-brand-header {
        justify-content: center !important;
    }

    .sidebar:not(.expanded) .sidebar-brand-header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sidebar:not(.expanded) .sub {
        max-height: none !important;
        overflow: visible !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
    }

    .main-area:not(.expanded) {
        margin-left: 76px !important;
    }
}

/* DRAWER & OVERLAY STYLES */
.drawer {
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
}

.drawer.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.dropdown {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* MOBILE BROWSE OVERLAY */
.mobile-browse-overlay {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .28s ease, opacity .28s ease;
}

.mobile-browse-overlay.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ADMIN ACCORDION SUBMENUS */
.sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}

.sub.open {
    max-height: 600px;
}

/* DARK MODE THEME PALETTE OVERRIDES */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0b0f17 !important;
    color: #ffffff !important;
}

html.dark aside#sidebar {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark .placeholder\:text-slate-400::placeholder {
    color: #64748b !important;
}

html.dark aside#sidebar .border-b,
html.dark aside#sidebar .border-t {
    border-color: #1e293b !important;
}

html.dark header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: #1e293b !important;
}

/* BACKGROUND PALETTE OVERRIDES */
html.dark .bg-white {
    background-color: #0f172a !important;
}

html.dark .bg-white\/95 {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

html.dark .bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.90) !important;
}

html.dark .bg-white\/80 {
    background-color: rgba(15, 23, 42, 0.80) !important;
}

html.dark .bg-slate-50,
html.dark .bg-gray-50 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-50\/80 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

html.dark .bg-slate-50\/70 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

html.dark .bg-slate-50\/60 {
    background-color: rgba(30, 41, 59, 0.6) !important;
}

html.dark .bg-slate-50\/50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .bg-slate-50\/40 {
    background-color: rgba(30, 41, 59, 0.4) !important;
}

html.dark .bg-slate-50\/30 {
    background-color: rgba(30, 41, 59, 0.3) !important;
}

html.dark .bg-slate-100,
html.dark .bg-gray-100,
html.dark .bg-zinc-100 {
    background-color: #334155 !important;
}

html.dark .bg-slate-100\/70 {
    background-color: rgba(51, 65, 85, 0.7) !important;
}

html.dark .bg-slate-200 {
    background-color: #334155 !important;
}

html.dark .bg-slate-200\/80,
html.dark .bg-slate-200\/70 {
    background-color: rgba(51, 65, 85, 0.7) !important;
}

html.dark .bg-slate-300 {
    background-color: #475569 !important;
}

/* HOVER & FOCUS BACKGROUND OVERRIDES */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-white:hover {
    background-color: #1e293b !important;
}

html.dark .hover\:bg-slate-50\/80:hover {
    background-color: rgba(30, 41, 59, 0.85) !important;
}

html.dark .hover\:bg-slate-50\/70:hover {
    background-color: rgba(30, 41, 59, 0.75) !important;
}

html.dark .hover\:bg-slate-50\/60:hover {
    background-color: rgba(30, 41, 59, 0.65) !important;
}

html.dark .hover\:bg-slate-50\/50:hover {
    background-color: rgba(30, 41, 59, 0.55) !important;
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-100\/70:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-slate-200:hover,
html.dark .hover\:bg-gray-200:hover {
    background-color: #475569 !important;
}

html.dark .hover\:bg-slate-300:hover {
    background-color: #475569 !important;
}

html.dark .focus\:bg-white:focus {
    background-color: #1e293b !important;
}

/* BORDER & DIVIDE OVERRIDES */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-gray-200,
html.dark .border-slate-200\/80 {
    border-color: #1e293b !important;
}

html.dark .border-slate-200\/90,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/50,
html.dark .border-slate-100\/80 {
    border-color: rgba(30, 41, 59, 0.7) !important;
}

html.dark .border-slate-300,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark .hover\:border-slate-300:hover {
    border-color: #475569 !important;
}

html.dark .focus\:border-slate-900:focus {
    border-color: #64748b !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #1e293b !important;
}

/* TEXT COLOR OVERRIDES */
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-950,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-zinc-950,
html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-zinc-700,
html.dark .text-black {
    color: #ffffff !important;
}

html.dark .text-slate-500,
html.dark .text-gray-500 {
    color: #64748b !important;
}

html.dark .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark .text-slate-300 {
    color: #64748b !important;
}

html.dark .text-slate-200 {
    color: #475569 !important;
}

/* HOVER & GROUP-HOVER TEXT OVERRIDES */
html.dark .hover\:text-slate-950:hover,
html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-slate-800:hover,
html.dark .hover\:text-slate-700:hover,
html.dark .hover\:text-slate-600:hover,
html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-800:hover,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-600:hover,
html.dark .hover\:text-black:hover,
html.dark .group:hover .group-hover\:text-slate-950,
html.dark .group:hover .group-hover\:text-slate-900,
html.dark .group:hover .group-hover\:text-slate-800,
html.dark .group:hover .group-hover\:text-slate-700,
html.dark .group:hover .group-hover\:text-slate-600 {
    color: #ffffff !important;
}

/* COMPONENT PANELS & DROPDOWNS */
html.dark .dropdown,
html.dark .account-dropdown-panel {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
}
/* WELCOME HERO SECTION DARK MODE BACKGROUND */
html.dark .hero-section {
    background: #0b0f17 !important;
    background-image: linear-gradient(to bottom, #0f172a, #0b0f17, #0f172a) !important;
    border-bottom-color: #1e293b !important;
}