/* 
   ====================================================
   EventsQuestion UI Polish - Modern Refinements
   Focus: Glassmorphism, Spring Animations, Midnight Theme
   ====================================================
*/

:root {
    /* Brand Colors: Dark Navy Blue from Logo */
    --bs-primary: #0d2159;
    --bs-primary-rgb: 13, 33, 89;
    --bs-link-color: #0d2159;
    --bs-link-hover-color: #0a1a46;
    --brand-primary: #0d2159;
    --brand-dark: #07153a;

    --spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --midnight-bg: #020617;
    --midnight-surface: #0f172a;
    --midnight-card: #1e293b;
    --midnight-border: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
}

/* Global Primary Color Overrides */
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.btn-primary { 
    background-color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.bg-primary-subtle {
    background-color: rgba(13, 33, 89, 0.1) !important;
    color: var(--bs-primary) !important;
}

/* Force Light Text on Brand Backgrounds & Gradients */
.bg-primary, 
.bg-primary-dark,
.da-gradient-primary,
.btn-primary,
[style*="background: var(--bs-primary)"],
[style*="background-color: var(--bs-primary)"],
[style*="background: linear-gradient"],
.modal-header.bg-primary {
    color: #ffffff !important;
}

.bg-primary .modal-title,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary span, .bg-primary i, .bg-primary small,
.da-gradient-primary h1, .da-gradient-primary h2, .da-gradient-primary h3, 
.da-gradient-primary h4, .da-gradient-primary h5, .da-gradient-primary h6,
.da-gradient-primary p, .da-gradient-primary span, .da-gradient-primary i,
.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .btn-close {
    color: #ffffff !important;
    opacity: 1 !important;
}

.bg-primary .btn-close,
.modal-header.bg-primary .btn-close {
    filter: brightness(0) invert(1) !important;
}

/* Specific fix for text visibility in modals with brand headers */
.modal-header.bg-primary .modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}



[data-theme="dark"] {
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* 1. Fluid Micro-interactions (Spring Animations) */
.animate-spring {
    transition: all 0.5s var(--spring-easing) !important;
}

.hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Smooth layout updates for SSE */
.sse-update-flash {
    animation: flash-border 1.5s var(--spring-easing);
}

:root {
    --flash-end-border: rgba(226, 232, 240, 0.8);
}
[data-theme="dark"] {
    --flash-end-border: var(--midnight-border);
}

@keyframes flash-border {
    0% { border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(34, 72, 209, 0.3); }
    100% { border-color: var(--flash-end-border); box-shadow: none; }
}

/* 2. Advanced Glassmorphism */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* 3. Midnight Dark Mode Refinements */
[data-theme="dark"] body {
    background-color: var(--midnight-bg) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .da-bg-lowest {
    background-color: var(--midnight-surface) !important;
    border-color: var(--midnight-border) !important;
}

[data-theme="dark"] .da-bg-low {
    background-color: var(--midnight-bg) !important;
}

/* 4. Skeleton Loading Screens */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e2e8f0;
    border-radius: 8px;
}

[data-theme="dark"] .skeleton {
    background-color: #1e293b;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

[data-theme="dark"] .skeleton::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0)
    );
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-text { height: 1rem; margin-bottom: 0.5rem; width: 100%; }
.skeleton-title { height: 2rem; margin-bottom: 1rem; width: 60%; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card { height: 160px; width: 100%; }

/* Sidebar & Navigation Modernization */
.pe-nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.pe-nav-link.active i, 
.pe-nav-link.active span,
.pe-nav-link.active .pe-nav-content {
    background-color: transparent !important;
    color: #ffffff !important;
}

.pe-nav-link:hover:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}

.pe-nav-link.active:hover {
    background-color: var(--brand-dark) !important;
    color: #ffffff !important;
}


[data-theme="dark"] .pe-nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .pe-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.pe-menu-title {
    color: #64748b !important;
    font-weight: 800 !important;
    opacity: 0.8 !important;
}

/* 5. Placeholder Standardization */
::placeholder {
    color: #94a3b8 !important; /* Slate-400 */
    opacity: 0.7 !important;
    font-weight: 400 !important;
}

[data-theme="dark"] ::placeholder {
    color: #64748b !important; /* Slate-500 */
    opacity: 0.6 !important;
}

/* Browser Specifics */
::-webkit-input-placeholder { color: inherit; opacity: 0.7; }
::-moz-placeholder { color: inherit; opacity: 0.7; }
:-ms-input-placeholder { color: inherit; opacity: 0.7; }

/* Digital Architect Utility Extensions */
.da-gradient-primary {
    background-color: var(--bs-primary) !important;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--brand-dark) 100%) !important;
    border: none !important;
}


[data-theme="dark"] .text-primary-adaptive {
    color: #ffffff !important;
}
.text-primary-adaptive {
    color: var(--bs-primary) !important;
}

/* Global Typography & Layout Utilities */
.da-font-display {
    font-family: 'Inter', 'Outfit', sans-serif !important;
    letter-spacing: -0.02em !important;
}

.da-hover-lift {
    transition: all 0.4s var(--spring-easing) !important;
}

.da-hover-lift:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.da-bg-base {
    background-color: #f8fafc;
}
[data-theme="dark"] .da-bg-base {
    background-color: var(--midnight-surface);
}





/* Z-Index Fix for Stacked Dropdowns */
.dropdown-menu.show {
    z-index: 2000 !important;
}

.region-row:focus-within, 
.region-row:hover {
    z-index: 100 !important;
}

.dropdown-menu {
    background-color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--midnight-surface) !important;
    border: 1px solid var(--midnight-border) !important;
}