/* ========================================
   iOS 18.1 Glassmorphism Design System
   ======================================== */

/* ========================================
   1. CSS Variables - Glassmorphism
   ======================================== */

:root {
    /* Glass Surface Colors */
    --glass-white: rgba(255, 255, 255, 0.7);
    --glass-white-medium: rgba(255, 255, 255, 0.5);
    --glass-white-light: rgba(255, 255, 255, 0.3);

    --glass-dark: rgba(0, 0, 0, 0.3);
    --glass-dark-medium: rgba(0, 0, 0, 0.2);
    --glass-dark-light: rgba(0, 0, 0, 0.1);

    /* Vibrant Colors with Transparency */
    --glass-primary: rgba(0, 122, 255, 0.8);
    --glass-primary-light: rgba(0, 122, 255, 0.6);
    --glass-primary-hover: rgba(0, 122, 255, 0.9);

    --glass-success: rgba(52, 199, 89, 0.8);
    --glass-success-light: rgba(52, 199, 89, 0.6);
    --glass-success-hover: rgba(52, 199, 89, 0.9);

    --glass-warning: rgba(255, 149, 0, 0.8);
    --glass-warning-light: rgba(255, 149, 0, 0.6);
    --glass-warning-hover: rgba(255, 149, 0, 0.9);

    --glass-danger: rgba(255, 59, 48, 0.8);
    --glass-danger-light: rgba(255, 59, 48, 0.6);
    --glass-danger-hover: rgba(255, 59, 48, 0.9);

    --glass-info: rgba(90, 200, 250, 0.8);
    --glass-info-light: rgba(90, 200, 250, 0.6);

    /* Blur Levels */
    --blur-sm: 10px;
    --blur-md: 20px;
    --blur-lg: 40px;
    --blur-xl: 60px;

    /* Border Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* Shadows - Soft & Subtle */
    --shadow-glass-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-glass-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-glass-lg: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-glass-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* Glow Effects */
    --glow-primary: 0 0 20px rgba(0, 122, 255, 0.3);
    --glow-success: 0 0 20px rgba(52, 199, 89, 0.3);
    --glow-warning: 0 0 20px rgba(255, 149, 0, 0.3);
    --glow-danger: 0 0 20px rgba(255, 59, 48, 0.3);
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        --glass-white: rgba(255, 255, 255, 0.15);
        --glass-white-medium: rgba(255, 255, 255, 0.1);
        --glass-white-light: rgba(255, 255, 255, 0.05);

        --glass-dark: rgba(0, 0, 0, 0.5);
        --glass-dark-medium: rgba(0, 0, 0, 0.4);
        --glass-dark-light: rgba(0, 0, 0, 0.3);
    }
}

/* ========================================
   11. GLOBAL BOOTSTRAP OVERRIDES
   Apply glassmorphism to ALL elements automatically
   ======================================== */

/* All Cards - Frosted Glass */
.card {
    background: var(--glass-white) !important;
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-glass-md) !important;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-lg) !important;
}

/* Card Headers - Vibrant Glass */
.card-header {
    background: var(--glass-white-medium) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-header.bg-primary {
    background: var(--glass-primary) !important;
    color: white !important;
}

.card-header.bg-success {
    background: var(--glass-success) !important;
    color: white !important;
}

.card-header.bg-info {
    background: var(--glass-info) !important;
    color: white !important;
}

.card-header.bg-warning {
    background: var(--glass-warning) !important;
    color: white !important;
}

.card-header.bg-danger {
    background: var(--glass-danger) !important;
    color: white !important;
}

/* Card Footer */
.card-footer {
    background: var(--glass-white-light) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Buttons - Vibrant Glass */
.btn-primary {
    background: var(--glass-primary) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-glass-sm), var(--glow-primary) !important;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--glass-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-md), var(--glow-primary) !important;
}

.btn-success {
    background: var(--glass-success) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-glass-sm), var(--glow-success) !important;
    transition: all 0.3s ease;
}

.btn-success:hover {
    background: var(--glass-success-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-md), var(--glow-success) !important;
}

.btn-warning {
    background: var(--glass-warning) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-glass-sm), var(--glow-warning) !important;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background: var(--glass-warning-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-md), var(--glow-warning) !important;
}

.btn-danger {
    background: var(--glass-danger) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-glass-sm), var(--glow-danger) !important;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: var(--glass-danger-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-md), var(--glow-danger) !important;
}

.btn-info {
    background: var(--glass-info) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-glass-sm) !important;
    transition: all 0.3s ease;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-md) !important;
}

/* Form Controls - Glass Inputs */
.form-control {
    background: var(--glass-white-medium) !important;
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: var(--glass-white) !important;
    border-color: var(--glass-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* Modals - Frosted Glass */
.modal-content {
    background: var(--glass-white) !important;
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-glass-xl) !important;
}

.modal-backdrop {
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    .card {
        background: var(--glass-dark) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .card-header {
        background: var(--glass-dark-medium) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .card-footer {
        background: var(--glass-dark-light) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .form-control {
        background: var(--glass-dark-medium) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    .form-control:focus {
        background: var(--glass-dark) !important;
    }

    .modal-content {
        background: var(--glass-dark) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}