/* Glacier Blue Theme with Transparent 3D Effects */

/* CSS Custom Properties for Dynamic Theme Switching */
:root {
    /* Glacier Blue Color Palette */
    --glacier-primary: #4a90e2;
    --glacier-secondary: #6bb6ff;
    --glacier-tertiary: #87ceeb;
    --glacier-light: #b0e0e6;
    --glacier-ice: #f0f8ff;
    --glacier-deep: #2c5f8a;
    --glacier-dark: #1e3a52;
    
    /* 3D Effect Colors */
    --glass-bg: rgba(176, 224, 230, 0.1);
    --glass-border: rgba(176, 224, 230, 0.2);
    --glass-shadow: rgba(44, 95, 138, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.2);
    
    /* Text Colors */
    --glacier-text-primary: #1e3a52;
    --glacier-text-secondary: #2c5f8a;
    --glacier-text-light: #ffffff;
    --glacier-text-muted: rgba(30, 58, 82, 0.7);
}

/* Theme Class Applied to Body */
.glacier-blue-theme {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #ddeeff 100%);
    min-height: 100vh;
}

/* Override default body background */
.glacier-blue-theme {
    background-attachment: fixed;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(107, 182, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(135, 206, 235, 0.05) 0%, transparent 50%);
}

/* Glassmorphism Base Classes */
.glass-card {
    background: rgba(176, 224, 230, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(176, 224, 230, 0.2);
    box-shadow: 
        0 8px 32px rgba(44, 95, 138, 0.25),
        0 4px 16px rgba(44, 95, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(176, 224, 230, 0.15);
    box-shadow: 
        0 16px 48px rgba(44, 95, 138, 0.3),
        0 8px 24px rgba(44, 95, 138, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.glass-button {
    background: rgba(74, 144, 226, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 4px 16px rgba(74, 144, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.glass-button:hover {
    background: rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 6px 20px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.glass-input {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(176, 224, 230, 0.3);
    box-shadow: inset 0 2px 4px rgba(44, 95, 138, 0.1);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 
        inset 0 2px 4px rgba(44, 95, 138, 0.1),
        0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Section Backgrounds */
.glacier-blue-theme .bg-gray-50 {
    background: rgba(240, 248, 255, 0.3) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glacier-blue-theme .bg-white {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(176, 224, 230, 0.2);
    box-shadow: 
        0 8px 32px rgba(44, 95, 138, 0.25),
        0 4px 16px rgba(44, 95, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glacier-blue-theme .bg-gray-100 {
    background: rgba(176, 224, 230, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card Enhancements */
.glacier-blue-theme [class*="rounded-xl"][class*="shadow"] {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(176, 224, 230, 0.2);
    box-shadow: 
        0 8px 32px rgba(44, 95, 138, 0.25),
        0 4px 16px rgba(44, 95, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glacier-blue-theme [class*="rounded-xl"][class*="shadow"]:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 16px 48px rgba(44, 95, 138, 0.3),
        0 8px 24px rgba(44, 95, 138, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px);
}

/* Button Overrides */
.glacier-blue-theme .bg-indigo-600 {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 182, 255, 0.8)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 4px 16px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glacier-blue-theme .bg-indigo-600:hover {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.9), rgba(107, 182, 255, 0.9)) !important;
    box-shadow: 
        0 6px 20px rgba(74, 144, 226, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.glacier-blue-theme .bg-indigo-500 {
    background: linear-gradient(135deg, rgba(107, 182, 255, 0.8), rgba(135, 206, 235, 0.8)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 182, 255, 0.3);
}

/* Gradient Overrides */
.glacier-blue-theme .bg-gradient-to-br {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.8) 0%, 
        rgba(107, 182, 255, 0.6) 50%, 
        rgba(135, 206, 235, 0.4) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

.glacier-blue-theme .bg-gradient-to-br::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(74, 144, 226, 0.1) 100%);
    pointer-events: none;
}

/* Green gradient overrides for brand elements */
.glacier-blue-theme .bg-gradient-to-r.from-green-500,
.glacier-blue-theme [class*="from-[#89a894]"] {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.8), 
        rgba(107, 182, 255, 0.8)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.3);
}

/* Text Color Adjustments */
.glacier-blue-theme {
    color: var(--glacier-text-primary);
}

.glacier-blue-theme .text-gray-900,
.glacier-blue-theme .text-gray-800 {
    color: var(--glacier-text-primary) !important;
}

.glacier-blue-theme .text-gray-700 {
    color: var(--glacier-text-secondary) !important;
}

.glacier-blue-theme .text-gray-600,
.glacier-blue-theme .text-gray-500 {
    color: var(--glacier-text-muted) !important;
}

/* Badge and Tag Styling */
.glacier-blue-theme .bg-green-100 {
    background: rgba(74, 144, 226, 0.1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 144, 226, 0.2);
}

.glacier-blue-theme .text-green-800 {
    color: var(--glacier-deep) !important;
}

.glacier-blue-theme .bg-indigo-100 {
    background: rgba(107, 182, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(107, 182, 255, 0.2);
}

.glacier-blue-theme .text-indigo-800 {
    color: var(--glacier-deep) !important;
}

/* Form Elements */
.glacier-blue-theme input[type="text"],
.glacier-blue-theme input[type="email"],
.glacier-blue-theme input[type="password"],
.glacier-blue-theme select,
.glacier-blue-theme textarea {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(176, 224, 230, 0.3) !important;
    color: var(--glacier-text-primary) !important;
}

.glacier-blue-theme input:focus,
.glacier-blue-theme select:focus,
.glacier-blue-theme textarea:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(74, 144, 226, 0.5) !important;
    box-shadow: 
        inset 0 2px 4px rgba(44, 95, 138, 0.1),
        0 0 0 3px rgba(74, 144, 226, 0.1) !important;
}

/* Loading Animation Update */
.glacier-blue-theme .loading-overlay {
    background-color: rgba(74, 144, 226, 0.3) !important;
}

.glacier-blue-theme .loader {
    border-right-color: var(--glacier-primary) !important;
}

.glacier-blue-theme .loader:before,
.glacier-blue-theme .loader:after {
    border-left-color: var(--glacier-secondary) !important;
}

.glacier-blue-theme .loader:after {
    border-right-color: var(--glacier-tertiary) !important;
}

/* Floating Effect for Cards */
.glacier-blue-theme .floating-card {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* 3D Depth Effects */
.glacier-blue-theme .depth-1 {
    box-shadow: 
        0 6px 20px rgba(44, 95, 138, 0.2),
        0 3px 10px rgba(44, 95, 138, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glacier-blue-theme .depth-2 {
    box-shadow: 
        0 12px 40px rgba(44, 95, 138, 0.25),
        0 6px 20px rgba(44, 95, 138, 0.15),
        0 3px 10px rgba(44, 95, 138, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glacier-blue-theme .depth-3 {
    box-shadow: 
        0 20px 64px rgba(44, 95, 138, 0.3),
        0 12px 40px rgba(44, 95, 138, 0.2),
        0 6px 20px rgba(44, 95, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Responsive Glass Effects */
@media (max-width: 768px) {
    .glass-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .glacier-blue-theme .bg-white {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}

/* Animation Enhancements */
.glacier-blue-theme .animate-fadeIn,
.glacier-blue-theme .animate-fadeInUp {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth Theme Transition */
* {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Custom Utility Classes */
.glacier-gradient-bg {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.1) 0%, 
        rgba(107, 182, 255, 0.05) 50%, 
        rgba(135, 206, 235, 0.02) 100%);
}

.glacier-glass-border {
    border: 1px solid rgba(176, 224, 230, 0.3);
}

.glacier-text-primary {
    color: var(--glacier-text-primary);
}

.glacier-text-secondary {
    color: var(--glacier-text-secondary);
}

.glacier-text-light {
    color: var(--glacier-text-light);
}

/* Theme Switcher Button Styles */
.glacier-blue-theme #theme-switcher {
    background: rgba(74, 144, 226, 0.2) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(74, 144, 226, 0.3) !important;
    box-shadow: 
        0 4px 16px rgba(74, 144, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glacier-blue-theme #theme-switcher:hover {
    background: rgba(74, 144, 226, 0.3) !important;
    box-shadow: 
        0 6px 20px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px) scale(1.05);
}

/* Border and Shadow Overrides */
.glacier-blue-theme .border-gray-200,
.glacier-blue-theme .border-gray-300 {
    border-color: rgba(176, 224, 230, 0.3) !important;
}

.glacier-blue-theme .shadow-sm,
.glacier-blue-theme .shadow-md,
.glacier-blue-theme .shadow-lg,
.glacier-blue-theme .shadow-xl {
    box-shadow: 
        0 8px 32px rgba(44, 95, 138, 0.25),
        0 4px 16px rgba(44, 95, 138, 0.15),
        0 2px 8px rgba(44, 95, 138, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.glacier-blue-theme .hover\:shadow-xl:hover {
    box-shadow: 
        0 16px 48px rgba(44, 95, 138, 0.3),
        0 8px 24px rgba(44, 95, 138, 0.2),
        0 4px 12px rgba(44, 95, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Specific Component Overrides */
.glacier-blue-theme .bg-gray-200 {
    background: rgba(176, 224, 230, 0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hover Effects Enhancement */
.glacier-blue-theme [class*="hover:bg-"]:hover {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* Focus Ring Updates */
.glacier-blue-theme .focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(74, 144, 226, 0.3) !important;
}

.glacier-blue-theme .focus\:border-indigo-500:focus {
    border-color: rgba(74, 144, 226, 0.5) !important;
}

/* Alert/Notification Styles */
.glacier-blue-theme .bg-red-600 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Loading Overlay Enhancements */
.glacier-blue-theme .loading-overlay.active {
    background-color: rgba(74, 144, 226, 0.2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Table Styling */
.glacier-blue-theme table {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.glacier-blue-theme th,
.glacier-blue-theme td {
    border-color: rgba(176, 224, 230, 0.2) !important;
}

.glacier-blue-theme thead th {
    background: rgba(74, 144, 226, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Navigation Dots/Pagination */
.glacier-blue-theme .bg-current {
    color: var(--glacier-primary) !important;
}

/* Progress bars */
.glacier-blue-theme .bg-blue-600 {
    background: linear-gradient(135deg, var(--glacier-primary), var(--glacier-secondary)) !important;
}

/* Custom Utility Classes */
.glacier-gradient-bg {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.1) 0%, 
        rgba(107, 182, 255, 0.05) 50%, 
        rgba(135, 206, 235, 0.02) 100%);
}

.glacier-glass-border {
    border: 1px solid rgba(176, 224, 230, 0.3);
}

.glacier-text-primary {
    color: var(--glacier-text-primary);
}

.glacier-text-secondary {
    color: var(--glacier-text-secondary);
}

.glacier-text-light {
    color: var(--glacier-text-light);
}

/* Additional comprehensive theme coverage */
.glacier-blue-theme .divide-gray-200 > * + * {
    border-color: rgba(176, 224, 230, 0.3) !important;
}

.glacier-blue-theme .text-white {
    color: #ffffff !important;
}

.glacier-blue-theme .bg-transparent {
    background-color: transparent !important;
}

/* Override any remaining indigo colors */
.glacier-blue-theme .text-indigo-600 {
    color: var(--glacier-primary) !important;
}

.glacier-blue-theme .from-indigo-600 {
    --tw-gradient-from: var(--glacier-primary) !important;
}

.glacier-blue-theme .to-purple-600 {
    --tw-gradient-to: var(--glacier-secondary) !important;
}

/* Specific dashboard hero section override */
.glacier-blue-theme section.bg-gradient-to-br,
.glacier-blue-theme div.bg-gradient-to-br {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.85) 0%, 
        rgba(107, 182, 255, 0.75) 50%, 
        rgba(135, 206, 235, 0.65) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

/* For page backgrounds that use from-gray-50 */
.glacier-blue-theme .bg-gradient-to-br.from-gray-50 {
    background: linear-gradient(135deg, 
        rgba(240, 248, 255, 0.4) 0%, 
        rgba(176, 224, 230, 0.2) 50%, 
        rgba(135, 206, 235, 0.1) 100%) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.glacier-blue-theme section.bg-gradient-to-br::before,
.glacier-blue-theme div.bg-gradient-to-br::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(74, 144, 226, 0.1) 100%);
    pointer-events: none;
}