/* ========================================================================
   SAFARI-SPECIFIC FIXES for Alpha Ring
   ======================================================================== */

/* Safari-specific CSS Variables Fallbacks */
:root {
    /* Force explicit fallbacks for Safari */
    --safari-glass-bg: rgba(255, 255, 255, 0.12);
    --safari-glass-border: rgba(255, 255, 255, 0.2);
    --safari-text-primary: #ffffff;
    --safari-text-secondary: rgba(255, 255, 255, 0.9);
    --safari-text-muted: rgba(255, 255, 255, 0.7);
}

/* ========================================================================
   SAFARI DETECTION & MAIN FIXES
   ======================================================================== */

/* Safari-specific media query targeting WebKit browsers */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    
    /* Main Containers */
    .main-container,
    .container > div[class*="main"],
    div[class*="container"][class*="main"] {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Search Forms and Cards */
    .search-form,
    .settings-card,
    .card,
    div[class*="card"],
    div[class*="form"] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    
    /* Form Controls */
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-opacity: 1 !important;
    }
    
    /* Form Control Focus States */
    .form-control:focus,
    .form-select:focus,
    input:focus,
    select:focus,
    textarea:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(139, 92, 246, 0.5) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    /* Placeholders */
    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    }
    
    /* Buttons */
    .btn-primary {
        background: linear-gradient(135deg, #00caff 0%, #0099cc 100%) !important;
    }
    
    .btn-success {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    }
    
    .btn-info {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    }
    
    .btn-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    }
    
    .btn-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    }
    
    /* Text Colors */
    .text-primary,
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
    }
    
    .text-secondary {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .text-muted {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Gradient Text Fallbacks */
    .settings-header h1,
    h1[class*="gradient"],
    [class*="gradient-text"] {
        background: none !important;
        color: #00caff !important;
        -webkit-text-fill-color: #00caff !important;
    }
    
    /* Navigation Brand Colors */
    .main-navigation .btn-primary {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    }
    
    /* Alert Boxes */
    .alert {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .alert-success {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #6ee7b7 !important;
    }
    
    .alert-danger {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #fca5a5 !important;
    }
    
    .alert-warning {
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }
    
    .alert-info {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #6ee7b7 !important;
    }
}

/* ========================================================================
   ADVANCED SAFARI TARGETING
   ======================================================================== */

/* More specific Safari targeting using @supports */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    
    /* This specifically targets Safari */
    
    /* Force backdrop-filter fallbacks */
    [style*="backdrop-filter"],
    [class*="backdrop"],
    [class*="glass"] {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }
    
    /* Form elements specific fixes */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="file"],
    select,
    textarea {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-appearance: none !important;
    }
    
    /* Text area specific fixes */
    textarea {
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
    }
    
    /* Option elements */
    option {
        background: rgba(30, 30, 60, 0.95) !important;
        color: #ffffff !important;
    }
}

/* ========================================================================
   BACKUP FALLBACKS for OLDER SAFARI VERSIONS
   ======================================================================== */

/* Fallback for very old Safari versions without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    
    .main-container,
    .search-form,
    .settings-card,
    .card,
    [class*="glass"] {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }
    
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
}

/* ========================================================================
   WEBKIT-SPECIFIC OVERRIDES
   ======================================================================== */

/* WebKit-specific fixes for scrollbars and form elements */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    
    /* Custom scrollbars for Safari */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    /* Fix WebKit autofill styles */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        background-color: transparent !important;
    }
    
    /* Safari search input fixes */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
    }
}

/* ========================================================================
   FORCE VISIBILITY for CRITICAL ELEMENTS
   ======================================================================== */

/* Force specific elements to be visible in Safari */
#rag_system_prompt,
#rag_user_prompt,
#rag_query_expansion_prompt,
#rag_context_instructions,
#ai_rating_prompt,
#email_system_prompt,
#email_user_prompt {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-appearance: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================================================
   SAFARI SOLID BACKGROUND FALLBACKS (CRITICAL FIX)
   ======================================================================== */

/* Safari Compatibility Fixes - Replace problematic CSS with solid backgrounds */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    /* Replace backdrop-filter with solid backgrounds for Safari */
    .login-container,
    .main-container,
    .container > div[class*="main"],
    div[class*="container"][class*="main"] {
        background: rgba(30, 41, 59, 0.95) !important; /* Solid fallback */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .login-header,
    .settings-card,
    .card,
    div[class*="card"],
    div[class*="form"] {
        background: rgba(51, 65, 85, 0.9) !important; /* Solid fallback */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Form controls with solid backgrounds instead of glassmorphism */
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        background: rgba(51, 65, 85, 0.8) !important; /* Solid dark background */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-appearance: none !important;
    }
    
    .form-control:focus,
    .form-select:focus,
    input:focus,
    select:focus,
    textarea:focus {
        background: rgba(71, 85, 105, 0.9) !important; /* Lighter solid on focus */
        border-color: rgba(255, 255, 255, 0.6) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Fix autofill styles */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px rgba(51, 65, 85, 0.8) inset !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
    }
    
    /* Checkbox fixes */
    .form-check-input {
        background: rgba(51, 65, 85, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        -webkit-appearance: none !important;
    }
    
    .form-check-input:checked {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Button fixes */
    .btn-primary,
    .btn-login {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #1e293b !important;
        border: none !important;
    }
    
    .btn-primary:hover,
    .btn-login:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #1e293b !important;
    }
    
    /* Text area specific fixes */
    textarea {
        background: rgba(51, 65, 85, 0.8) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    /* Option elements */
    option {
        background: rgba(51, 65, 85, 0.95) !important;
        color: #ffffff !important;
    }
    
    /* Navigation and container fixes */
    .nav-btn,
    .navigation-container {
        background: rgba(51, 65, 85, 0.9) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Alert fixes */
    .alert {
        background: rgba(51, 65, 85, 0.9) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .alert-success {
        background: rgba(16, 185, 129, 0.8) !important;
    }
    
    .alert-danger {
        background: rgba(239, 68, 68, 0.8) !important;
    }
    
    .alert-warning {
        background: rgba(245, 158, 11, 0.8) !important;
    }
    
    .alert-info {
        background: rgba(16, 185, 129, 0.8) !important;
    }
}

/* ========================================================================
   ADDITIONAL SAFARI COMPATIBILITY FIXES
   ======================================================================== */

/* Fix for CSS Grid issues in Safari */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    .nav-buttons {
        display: -webkit-grid !important;
        display: grid !important;
        -webkit-grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    }
    
    /* Fix for flexbox issues */
    .brand-section {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }
    
    /* Navigation container fixes */
    .navigation-container {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }
    
    /* Fix transform and transition issues */
    .nav-btn:hover {
        -webkit-transform: translateY(-2px) !important;
        transform: translateY(-2px) !important;
        -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Fix backdrop-filter fallbacks */
    .nav-btn {
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }
    
    .navigation-container {
        -webkit-backdrop-filter: blur(16px) !important;
        backdrop-filter: blur(16px) !important;
    }
}

/* Fix for Safari not respecting min-height on flex items */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .nav-btn {
        height: 44px !important;
        min-height: 44px !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }
    
    @media (max-width: 768px) {
        .nav-btn {
            height: 40px !important;
            min-height: 40px !important;
        }
    }
    
    @media (max-width: 576px) {
        .nav-btn {
            height: 36px !important;
            min-height: 36px !important;
        }
    }
}

/* ========================================================================
   DEBUGGING HELPERS (remove in production)
   ======================================================================== */

/* Uncomment for Safari debugging */
/*
body::after {
    content: "Safari Detected";
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 10000;
    display: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    body::after {
        display: block;
    }
}
*/