/* Glassmorphism Design System */
:root {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --glass-blur: 12px;
    --glass-text: #1f2937;
}

[data-theme="dark"] {
    --glass-bg: rgba(30, 30, 30, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --glass-text: #f3f4f6;
}

/* Product Cards - Subtle Glass Effect */
.product-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
}

.product-card:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .product-card:hover {
    background: rgba(40, 40, 40, 0.9);
}

/* Modals & Overlays */
.notification-center,
.mobile-sort-menu,
.advanced-filters-sidebar,
.product-quick-add {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .notification-center,
[data-theme="dark"] .mobile-sort-menu,
[data-theme="dark"] .advanced-filters-sidebar,
[data-theme="dark"] .product-quick-add {
    background: rgba(25, 25, 35, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Floating Action Buttons & Quick Actions */
.quick-action-btn,
.search-toggle-btn,
.mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .search-toggle-btn,
[data-theme="dark"] .mobile-menu-toggle {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Header Glass Effect - If header has class .header-main */
.header-main,
.main-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .header-main,
[data-theme="dark"] .main-header {
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Badges */
.badge,
.highlight-chip {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}