/* ===================================
   GLASSMORPHISM DESIGN SYSTEM
   Complete Glass Effect Styles
   =================================== */

/* ===================================
   CORE GLASS VARIABLES & MIXINS
   =================================== */

:root {
    /* Light Mode Glass Variables */
    --glass-bg-light: rgba(255, 255, 255, 0.08);
    --glass-bg-hover-light: rgba(255, 255, 255, 0.12);
    --glass-bg-active-light: rgba(255, 255, 255, 0.15);
    --glass-border-light: rgba(255, 255, 255, 0.15);
    --glass-border-hover-light: rgba(255, 255, 255, 0.25);

    /* Dark Mode Glass Variables */
    --glass-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-bg-hover-dark: rgba(255, 255, 255, 0.08);
    --glass-bg-active-dark: rgba(255, 255, 255, 0.12);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --glass-border-hover-dark: rgba(255, 255, 255, 0.2);

    /* Shadow Effects */
    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
    --glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
    --glass-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* Blur Effects */
    --glass-blur-sm: blur(10px);
    --glass-blur-md: blur(16px);
    --glass-blur-lg: blur(20px);
    --glass-blur-xl: blur(24px);

    /* Color Overlays */
    --glass-blue: rgba(30, 144, 255, 0.18);
    --glass-green: rgba(16, 185, 129, 0.3);
    --glass-red: rgba(239, 68, 68, 0.2);
    --glass-purple: rgba(139, 92, 246, 0.15);

    /* Transitions */
    --glass-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.6, 1);
    --glass-transition-normal: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --glass-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Adjustments */
.dark {
    --glass-bg: var(--glass-bg-dark);
    --glass-bg-hover: var(--glass-bg-hover-dark);
    --glass-bg-active: var(--glass-bg-active-dark);
    --glass-border: var(--glass-border-dark);
    --glass-border-hover: var(--glass-border-hover-dark);
}

/* ===================================
   BASIC GLASS ELEMENTS
   =================================== */

/* Glass Card - Base Element */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: var(--glass-transition-normal);
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%);
    border: 1px solid rgba(30, 144, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(30, 144, 255, 0.15), 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Glass Input */
.glass-input {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: var(--glass-transition-fast);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(30, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    outline: none;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ===================================
   GLASS BUTTONS
   =================================== */

/* Base Glass Button */
.glass-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.glass-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

.glass-btn:active {
    transform: translateY(-1px);
}

/* Glass Button - Blue */
.glass-btn-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: rgba(147, 197, 253, 1) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
}

.glass-btn-blue:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.35) !important;
    color: white !important;
}

/* Glass Button - Green */
.glass-btn-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: rgba(110, 231, 183, 1) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2) !important;
}

.glass-btn-green:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35) !important;
    color: white !important;
}

/* Glass Button - Red */
.glass-btn-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.12) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: rgba(252, 165, 165, 1) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2) !important;
}

.glass-btn-red:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(239, 68, 68, 0.2) 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.35) !important;
    color: white !important;
}

/* Glass Button - Yellow */
.glass-btn-yellow {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0.12) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    color: rgba(253, 224, 71, 1) !important;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2) !important;
}

.glass-btn-yellow:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4) 0%, rgba(251, 191, 36, 0.2) 100%) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.35) !important;
    color: white !important;
}

/* Button Shimmer Animation */
.glass-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

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

/* Button Glow Animation */
@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 4px 20px var(--glow-color, rgba(255, 255, 255, 0.2));
    }
    50% {
        box-shadow: 0 8px 35px var(--glow-color, rgba(255, 255, 255, 0.4));
    }
}

.glass-btn-blue { --glow-color: rgba(59, 130, 246, 0.3); }
.glass-btn-green { --glow-color: rgba(16, 185, 129, 0.3); }
.glass-btn-red { --glow-color: rgba(239, 68, 68, 0.3); }
.glass-btn-yellow { --glow-color: rgba(251, 191, 36, 0.3); }

.glass-btn.glow {
    animation: buttonGlow 2s ease-in-out infinite;
}

/* =================================== 
   GLASS ALERTS & NOTIFICATIONS
   =================================== */

.glass-alert {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInDown 0.3s ease-out;
}

.glass-alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: rgba(110, 231, 183, 0.95);
}

.glass-alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: rgba(147, 197, 253, 0.95);
}

.glass-alert-warning {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: rgba(254, 215, 170, 0.95);
}

.glass-alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(252, 165, 165, 0.95);
}

/* ===================================
   GLASS PANELS & CONTAINERS
   =================================== */

/* Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: var(--glass-transition-normal);
}

.glass-panel:hover {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(30, 144, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Glass Container */
.glass-container {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

/* Glass Header */
.glass-header {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.glass-header h1,
.glass-header h2,
.glass-header h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
}

/* Glass Footer */
.glass-footer {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ===================================
   GLASS MODAL & OVERLAY
   =================================== */

.glass-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.glass-modal {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    max-width: 500px;
    width: 90%;
    animation: slideUp 0.3s ease-out;
}

/* ===================================
   GLASS SHIMMER & SHINE EFFECTS
   =================================== */

/* Base Shimmer */
.glass-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.glass-shimmer:hover::before {
    left: 100%;
}

/* Fast Shimmer */
.glass-shimmer-fast::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.3s ease;
}

.glass-shimmer-fast:hover::before {
    left: 100%;
}

/* Slow Shimmer */
.glass-shimmer-slow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.8s ease;
}

.glass-shimmer-slow:hover::before {
    left: 100%;
}

/* ===================================
   GLASS FORMS & INPUTS
   =================================== */

/* Glass Form Group */
.glass-form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.glass-form-group label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Glass Select */
.glass-select {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
    transition: var(--glass-transition-fast);
}

.glass-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(30, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1);
    outline: none;
}

/* Glass Textarea */
.glass-textarea {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    resize: vertical;
    transition: var(--glass-transition-fast);
    font-family: inherit;
}

.glass-textarea:focus {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(30, 144, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1);
    outline: none;
}

/* ===================================
   GLASS BADGES & LABELS
   =================================== */

.glass-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--glass-transition-fast);
}

.glass-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.glass-badge-primary {
    background: rgba(30, 144, 255, 0.2);
    border: 1px solid rgba(30, 144, 255, 0.3);
    color: rgba(147, 197, 253, 0.95);
}

.glass-badge-success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: rgba(110, 231, 183, 0.95);
}

.glass-badge-danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(252, 165, 165, 0.95);
}

/* ===================================
   GLASS AVATARS & PROFILES
   =================================== */

.glass-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    transition: var(--glass-transition-fast);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.glass-avatar:hover {
    border: 2px solid rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(30, 144, 255, 0.2);
}

.glass-avatar-lg {
    width: 80px;
    height: 80px;
}

.glass-avatar-xl {
    width: 120px;
    height: 120px;
}

/* ===================================
   GLASS DIVIDERS & SEPARATORS
   =================================== */

.glass-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 20px 0;
}

.glass-divider-vertical {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 0 20px;
}

/* ===================================
   GLASS LISTS & ITEMS
   =================================== */

.glass-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.glass-list-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
    transition: var(--glass-transition-fast);
    cursor: pointer;
}

.glass-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

.glass-list-item.active {
    background: rgba(30, 144, 255, 0.15);
    border: 1px solid rgba(30, 144, 255, 0.25);
}

/* ===================================
   GLASS ANIMATIONS
   =================================== */

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Glass Pulse Animation */
.glass-pulse {
    animation: pulse 2s infinite;
}

/* Glass Shimmer Animation */
.glass-shimmer-animate {
    animation: shimmer 2s infinite;
}

/* ===================================
   GLASS SHADOWS (Depth Levels)
   =================================== */

.glass-shadow-none {
    box-shadow: none;
}

.glass-shadow-sm {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.glass-shadow-md {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-shadow-lg {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.glass-shadow-xl {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.glass-shadow-inner {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-shadow-both {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===================================
   GLASS SPACING UTILITIES
   =================================== */

.glass-p-2 {
    padding: 8px;
}

.glass-p-3 {
    padding: 12px;
}

.glass-p-4 {
    padding: 16px;
}

.glass-p-6 {
    padding: 24px;
}

.glass-p-8 {
    padding: 32px;
}

.glass-m-2 {
    margin: 8px;
}

.glass-m-3 {
    margin: 12px;
}

.glass-m-4 {
    margin: 16px;
}

.glass-m-6 {
    margin: 24px;
}

.glass-m-8 {
    margin: 32px;
}

.glass-gap-2 {
    gap: 8px;
}

.glass-gap-3 {
    gap: 12px;
}

.glass-gap-4 {
    gap: 16px;
}

.glass-gap-6 {
    gap: 24px;
}

/* ===================================
   GLASS RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    .glass-panel {
        padding: 16px;
    }

    .glass-modal {
        padding: 16px;
    }

    .glass-header {
        padding: 12px 16px;
    }

    .glass-footer {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .glass-list {
        gap: 4px;
    }

    .glass-list-item {
        padding: 10px 12px;
    }
}

/* ===================================
   GLASS ACCESSIBILITY
   =================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {

    .glass-card,
    .glass-panel,
    .glass-modal {
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .glass-card,
    .glass-input,
    .glass-shimmer::before,
    .glass-shimmer-fast::before,
    .glass-shimmer-slow::before {
        transition: none;
        animation: none;
    }
}

/* ===================================
   GLASS THEME VARIATIONS
   =================================== */

/* Icy Blue Theme */
.glass-theme-icy {
    --glass-overlay: rgba(173, 216, 230, 0.08);
    --glass-border: rgba(135, 206, 235, 0.2);
    --glass-shadow: 0 8px 32px rgba(135, 206, 235, 0.15);
}

/* Cosmic Purple Theme */
.glass-theme-cosmic {
    --glass-overlay: rgba(186, 85, 211, 0.08);
    --glass-border: rgba(186, 85, 211, 0.2);
    --glass-shadow: 0 8px 32px rgba(186, 85, 211, 0.15);
}

/* Forest Green Theme */
.glass-theme-forest {
    --glass-overlay: rgba(34, 139, 34, 0.08);
    --glass-border: rgba(34, 139, 34, 0.2);
    --glass-shadow: 0 8px 32px rgba(34, 139, 34, 0.15);
}

/* Sunset Orange Theme */
.glass-theme-sunset {
    --glass-overlay: rgba(255, 140, 0, 0.08);
    --glass-border: rgba(255, 140, 0, 0.2);
    --glass-shadow: 0 8px 32px rgba(255, 140, 0, 0.15);
}

/* ===================================
   GLOBAL DIV/CONTAINER GLASS STYLES
   Auto-apply to common div patterns
   =================================== */

/* Base glass styling for common background classes */
.bg-gray-800,
.bg-gray-900,
.bg-gray-700,
.bg-slate-800,
.bg-slate-900,
.bg-neutral-800,
.bg-neutral-900,
.bg-zinc-800,
.bg-zinc-900,
[class*="bg-gray-8"],
[class*="bg-gray-9"],
[class*="bg-slate-8"],
[class*="bg-slate-9"] {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Card and Panel patterns */
.card,
.panel,
.box,
.container-card,
.content-card,
.info-card,
.stat-card,
.data-card,
.feature-card,
.item-card,
[class*="-card"],
[class*="Card"] {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

.card:hover,
.panel:hover,
.box:hover,
[class*="-card"]:hover,
[class*="Card"]:hover {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border: 1px solid rgba(30, 144, 255, 0.2) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(30, 144, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Common container classes */
.container-glass,
.wrapper,
.content-wrapper,
.main-content,
.section-content,
.page-content,
.form-container,
.form-wrapper,
.modal-content,
.dialog-content,
.popup-content {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

/* Sidebar patterns */
.sidebar,
.side-panel,
.side-nav,
.nav-sidebar,
.left-panel,
.right-panel,
[class*="sidebar"],
[class*="Sidebar"] {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Header/Footer patterns */
.header,
.page-header,
.section-header,
.content-header,
.footer,
.page-footer,
.section-footer {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Stat/Metric boxes */
.stat-box,
.metric-box,
.info-box,
.data-box,
.summary-box,
.highlight-box {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

.stat-box:hover,
.metric-box:hover,
.info-box:hover,
.data-box:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* List containers */
.list-container,
.list-wrapper,
.item-list,
.data-list,
.results-list,
ul.glass-list,
ol.glass-list {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

/* Table containers */
.table-container,
.table-wrapper,
.data-table,
.table-responsive {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Form sections */
.form-section,
.form-group,
.input-group,
.field-group,
.form-row {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

/* Chat/Message containers */
.chat-container,
.message-container,
.conversation-container,
.chat-box,
.message-box,
.chat-wrapper {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

/* Dropdown/Menu containers */
.dropdown-menu,
.dropdown-content,
.menu-content,
.popup-menu,
.context-menu,
.submenu {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Tooltip containers */
.tooltip,
.tooltip-content,
.popover,
.popover-content {
    background: rgba(31, 41, 55, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Tab containers */
.tab-content,
.tab-panel,
.tabs-container,
.tab-pane {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Accordion/Collapse containers */
.accordion,
.accordion-item,
.collapse-content,
.expandable-content {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}

/* Progress/Loading containers */
.progress-container,
.loading-container,
.spinner-container {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

/* Colored glass variants for divs */
.glass-blue,
[class*="glass-blue"],
.bg-blue-glass {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.glass-green,
[class*="glass-green"],
.bg-green-glass,
.glass-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.glass-red,
[class*="glass-red"],
.bg-red-glass,
.glass-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.glass-yellow,
[class*="glass-yellow"],
.bg-yellow-glass,
.glass-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
}

.glass-purple,
[class*="glass-purple"],
.bg-purple-glass,
.glass-violet {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.glass-pink,
[class*="glass-pink"],
.bg-pink-glass {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%) !important;
    border-color: rgba(236, 72, 153, 0.2) !important;
}

.glass-cyan,
[class*="glass-cyan"],
.bg-cyan-glass,
.glass-teal {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
    border-color: rgba(6, 182, 212, 0.2) !important;
}

.glass-orange,
[class*="glass-orange"],
.bg-orange-glass {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.08) 100%) !important;
    border-color: rgba(251, 146, 60, 0.2) !important;
}

/* Shimmer effect for glass containers */
.glass-shimmer,
[class*="glass-"][class*="shimmer"],
.card.shimmer,
.panel.shimmer {
    position: relative;
    overflow: hidden;
}

.glass-shimmer::before,
[class*="-card"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.glass-shimmer:hover::before,
[class*="-card"]:hover::before {
    left: 100%;
}

/* Empty state containers */
.empty-state,
.no-data,
.no-results,
.placeholder-container {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
}

/* Error/Warning state containers */
.error-container,
.warning-container,
.alert-container {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 10px !important;
}

.error-container {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.warning-container {
    background: rgba(251, 191, 36, 0.1) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

/* Success state containers */
.success-container {
    background: rgba(16, 185, 129, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    border-radius: 10px !important;
}

/* Exclude certain elements from glass styling */
.no-glass,
.transparent,
[class*="no-glass"],
img,
video,
iframe,
canvas,
svg:not(.glass-svg) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}