/* OpsFlow Theme Variables - Essential for proper theming */

:root {
    /* Base Colors - Modern Light Theme */
    --background: #fafafa;
    --foreground: #1e293b;
    --card: #ffffff;
    --card-foreground: #1e293b;
    --popover: #ffffff;
    --popover-foreground: #1e293b;
    --primary: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-foreground: #ffffff;
    --secondary: #f1f5f9;
    --secondary-foreground: #475569;
    --muted: #f8fafc;
    --muted-foreground: #64748b;
    --accent: #e2e8f0;
    --accent-foreground: #1e293b;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #e2e8f0;
    --input: #ffffff;
    --ring: #3b82f6;
    --radius: 0.5rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
    
    /* OpsFlow Category Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;
    --workorders: #22c55e;
    --workorders-light: #86efac;
    --inventory: #f59e0b;
    --inventory-light: #fde68a;
    --analytics: #a855f7;
    --analytics-light: #e9d5ff;
    --admin: #ef4444;
    --admin-light: #fecaca;
    
    /* Glass Effects */
    --glass-background: rgba(255, 255, 255, 0.75);
    --glass-background-subtle: rgba(255, 255, 255, 0.5);
    --glass-background-strong: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* Glass control variables - set dynamically by JavaScript */
    --glass-blur: 12;
    --glass-enabled: 1;
    --glass-alpha: 0.85;
    --glass-overlay-alpha: 0.95;
    --glass-overlay-blur: 16;
}

.dark {
    --background: #0f172a;
    --foreground: #f1f5f9;
    --card: #1e293b;
    --card-foreground: #f1f5f9;
    --popover: #1e293b;
    --popover-foreground: #f1f5f9;
    --primary: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-foreground: #ffffff;
    --secondary: #334155;
    --secondary-foreground: #cbd5e1;
    --muted: #1e293b;
    --muted-foreground: #94a3b8;
    --accent: #334155;
    --accent-foreground: #e2e8f0;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --border: #334155;
    --input: #1e293b;
    --ring: #3b82f6;
}

/* Login Feature Bullet Styles */
.feature-bullet-workorders {
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.4);
    backdrop-filter: blur(8px);
}

.feature-bullet-analytics {
    background: rgba(168, 85, 247, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.4);
    backdrop-filter: blur(8px);
}

.feature-bullet-admin {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(8px);
}

.text-workorders-light {
    color: #86efac;
}

.text-analytics-light {
    color: #e9d5ff;
}

.text-admin-light {
    color: #fecaca;
}

/* ========================================
   Glass Morphism System - REMOVED
   ======================================== */
/* Glass classes now defined in src/css/components/index.css (single source of truth) */
/* This file should only contain CSS variables, not class definitions */

/* ========================================
   Custom Scrollbar Styling
   Reusable class for thin, themed scrollbars
   ======================================== */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* Dark Mode Custom Scrollbar */
.dark .custom-scrollbar {
    scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(71, 85, 105, 0.5);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 85, 105, 0.7);
}

/* Apply custom scrollbar to sidebar menu (backwards compatibility) */
#sidebar_menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

#sidebar_menu::-webkit-scrollbar {
    width: 6px;
}

#sidebar_menu::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar_menu::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
}

#sidebar_menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

.dark #sidebar_menu {
    scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

.dark #sidebar_menu::-webkit-scrollbar-thumb {
    background-color: rgba(71, 85, 105, 0.5);
}

.dark #sidebar_menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 85, 105, 0.7);
}

/* Section-Specific Active Menu Bullets */
/* Work Orders Section - Green */
.kt-menu-item:has(.text-workorders) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before {
    background-color: #22c55e !important;
}

/* Inventory Section - Amber */
.kt-menu-item:has(.text-inventory) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before {
    background-color: #f59e0b !important;
}

/* Analytics Section - Purple */
.kt-menu-item:has(.text-analytics) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before {
    background-color: #a855f7 !important;
}

/* Admin Sections - Red (User Management, Locations, Workflow Config) */
.kt-menu-item:has(.ki-people) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before,
.kt-menu-item:has(.ki-geolocation) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before,
.kt-menu-item:has(.text-admin) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before {
    background-color: #ef4444 !important;
}

/* Dashboards Section - Blue (keep default) */
.kt-menu-item:has(.ki-element-11) .kt-menu-accordion .kt-menu-item-active .kt-menu-bullet::before {
    background-color: #3b82f6 !important;
}

/* Skeleton Loader Styles */
.kt-pulse-item {
    background: linear-gradient(
        90deg,
        #e2e8f0 25%,
        #cbd5e1 50%,
        #e2e8f0 75%
    );
    background-size: 200% 100%;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

/* Dark mode skeleton loader */
.dark .kt-pulse-item {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
}

@keyframes pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}