/* ============================================
   🍦 GLOBAL VANILLA THEME OVERRIDE - ENHANCED
   ============================================ */

/* Override all blue colors to vanilla theme globally */
:root {
    --primary-blue: #D2691E;
    --secondary-blue: #F5DEB3;
    --light-blue: #FFF8DC;
    --dark-blue: #8B4513;
    --accent-blue: #CD853F;
}

/* Global color replacements - Enhanced */
.text-primary,
[style*="color: #1E3A8A"],
[style*="color: #4169E1"],
[style*="color: #87CEEB"],
[style*="color: #00BFFF"],
[style*="color: #0066CC"],
[style*="color: #007BFF"],
[style*="color: #0D6EFD"] {
    color: #8B4513 !important;
}

/* Background color replacements - Enhanced */
[style*="background: linear-gradient(135deg, #F0F8FF"],
[style*="background: linear-gradient(135deg, #E6F3FF"],
[style*="background: linear-gradient(135deg, #DBEAFE"],
[style*="background: linear-gradient(135deg, #87CEEB"],
[style*="background: linear-gradient(135deg, #4169E1"] {
    background: linear-gradient(135deg, #FFF8DC 0%, #F5DEB3 50%, #FAEBD7 100%) !important;
}

[style*="background: rgba(240, 248, 255"],
[style*="background: rgba(135, 206, 235"],
[style*="background: rgba(65, 105, 225"] {
    background: rgba(255, 248, 220, 0.8) !important;
}

/* Border color replacements - Enhanced */
[style*="border: 1px solid rgba(135, 206, 235"],
[style*="border-left: 4px solid #4169E1"],
[style*="border-left: 4px solid #87CEEB"],
[style*="border-left: 3px solid #4169E1"],
[style*="border-left: 3px solid #87CEEB"],
[style*="border-color: #4169E1"],
[style*="border-color: #87CEEB"] {
    border-color: rgba(245, 222, 179, 0.3) !important;
}

/* Box shadow replacements - Enhanced */
[style*="box-shadow: 0 8px 25px rgba(65, 105, 225"],
[style*="box-shadow: 0 12px 35px rgba(65, 105, 225"],
[style*="box-shadow: 0 15px 35px rgba(65, 105, 225"],
[style*="box-shadow: 0 4px 15px rgba(65, 105, 225"],
[style*="box-shadow: 0 6px 20px rgba(65, 105, 225"],
[style*="box-shadow: 0 0 0 0.2rem rgba(65, 105, 225"] {
    box-shadow: 0 8px 25px rgba(210, 105, 30, 0.1) !important;
}

/* Icon color replacements - Enhanced */
[style*="color: #4169E1"],
[style*="color: #87CEEB"],
[style*="color: #00BFFF"],
[style*="color: #0066CC"],
[style*="color: #007BFF"],
[style*="color: #FFB6C1"],
[style*="color: #DDA0DD"] {
    color: #D2691E !important;
}

/* Gradient text replacements - Enhanced */
[style*="background: linear-gradient(135deg, #1E3A8A 0%, #4169E1 50%, #87CEEB 100%)"],
[style*="background: linear-gradient(135deg, #87CEEB, #4169E1)"],
[style*="background: linear-gradient(180deg, #4169E1, #87CEEB)"] {
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #F5DEB3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Button and interactive element colors - Enhanced */
.btn-primary,
[style*="background: linear-gradient(135deg, #87CEEB"],
[style*="background: linear-gradient(135deg, #4169E1"],
[style*="background: #4169E1"],
[style*="background: #87CEEB"] {
    background: linear-gradient(135deg, #F5DEB3 0%, #D2691E 100%) !important;
}

/* Form input styling - Enhanced */
.modern-input,
.form-control,
.form-select {
    border: 2px solid rgba(245, 222, 179, 0.3) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #8B4513 !important;
}

.modern-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #D2691E !important;
    box-shadow: 0 0 0 0.2rem rgba(210, 105, 30, 0.25) !important;
}

/* Card and container styling - Enhanced */
.card,
.info-card,
.activity-card,
.certificate-card,
.project-card,
.education-card,
.work-card,
.activity-card-modern {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(245, 222, 179, 0.3) !important;
    box-shadow: 0 8px 25px rgba(210, 105, 30, 0.1) !important;
}

.card:hover,
.info-card:hover,
.activity-card:hover,
.certificate-card:hover,
.project-card:hover,
.education-card:hover,
.work-card:hover,
.activity-card-modern:hover {
    box-shadow: 0 15px 35px rgba(210, 105, 30, 0.2) !important;
}

/* Alert and notification styling - Enhanced */
.alert-info {
    background: rgba(245, 222, 179, 0.1) !important;
    color: #8B4513 !important;
    border-left: 4px solid #D2691E !important;
}

/* Pagination and navigation - Enhanced */
.pagination .page-link {
    color: #D2691E !important;
    border-color: rgba(245, 222, 179, 0.3) !important;
}

.pagination .page-link:hover {
    background: rgba(210, 105, 30, 0.1) !important;
    color: #8B4513 !important;
}

.pagination .page-item.active .page-link {
    background: #D2691E !important;
    border-color: #D2691E !important;
}

/* Badge styling - Enhanced */
.badge,
.badge-primary {
    background: linear-gradient(135deg, #F5DEB3, #D2691E) !important;
    color: white !important;
}

.badge-secondary {
    background: rgba(245, 222, 179, 0.2) !important;
    color: #D2691E !important;
    border: 1px solid rgba(245, 222, 179, 0.3) !important;
}

/* Timeline and progress elements - Enhanced */
.timeline-item::before {
    background: #D2691E !important;
}

.progress-bar {
    background: linear-gradient(135deg, #F5DEB3, #D2691E) !important;
}

/* Social media and external links - Enhanced */
.social-btn,
.social-link {
    background: rgba(255, 248, 220, 0.8) !important;
    border: 2px solid rgba(245, 222, 179, 0.3) !important;
    color: #D2691E !important;
}

.social-btn:hover,
.social-link:hover {
    background: #D2691E !important;
    color: white !important;
    border-color: #D2691E !important;
}

/* Override any remaining blue elements - Enhanced */
*[class*="blue"],
*[class*="primary"] {
    color: #8B4513 !important;
}

*[style*="#1E3A8A"],
*[style*="#4169E1"],
*[style*="#87CEEB"],
*[style*="#00BFFF"],
*[style*="#0066CC"],
*[style*="#007BFF"],
*[style*="#0D6EFD"] {
    color: #8B4513 !important;
}

/* Ensure vanilla theme for all interactive states - Enhanced */
a:hover {
    color: #D2691E !important;
}

button:hover,
.btn:hover {
    background: linear-gradient(135deg, #D2691E 0%, #F5DEB3 100%) !important;
    color: white !important;
}

/* Bootstrap overrides - Enhanced */
.text-primary { color: #8B4513 !important; }
.bg-primary { background-color: #D2691E !important; }
.border-primary { border-color: #D2691E !important; }
.btn-primary { 
    background-color: #D2691E !important; 
    border-color: #D2691E !important; 
}
.btn-outline-primary { 
    color: #D2691E !important; 
    border-color: #D2691E !important; 
}
.btn-outline-primary:hover { 
    background-color: #D2691E !important; 
    border-color: #D2691E !important; 
}

/* Mobile responsive adjustments - Enhanced */
@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem !important;
    }
    
    .card,
    .info-card {
        padding: 1.5rem !important;
    }
}

/* ============================================
   🍦 CARAMEL VANILLA AUTH THEME - ENSURE CLICKABLE BUTTONS
   ============================================ */

.auth-footer {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

.auth-footer a,
.auth-footer button,
.auth-footer .btn {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: auto !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(210, 105, 30, 0.3) !important;
    transition: all 0.3s ease !important;
    color: #8B4513 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.auth-footer a:hover,
.auth-footer button:hover,
.auth-footer .btn:hover {
    background: rgba(210, 105, 30, 0.1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(210, 105, 30, 0.25) !important;
    color: #8B4513 !important;
    text-decoration: none !important;
}

/* ============================================
   FORM FIXES
   ============================================ */

/* Ensure all form elements are clickable */
.auth-form,
.auth-form * {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

.auth-form .form-group,
.auth-form .form-floating,
.auth-form .input-group {
    position: relative !important;
    z-index: 6 !important;
    margin-bottom: 1rem !important;
}

.auth-form .form-control,
.auth-form .form-select {
    position: relative !important;
    z-index: 7 !important;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(210, 105, 30, 0.4) !important;
    color: #8B4513 !important;
    cursor: text !important;
}

.auth-form .form-control:focus {
    border-color: #D2691E !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(210, 105, 30, 0.25) !important;
}

.auth-form .btn-primary {
    background: linear-gradient(135deg, #F5DEB3 0%, #D2691E 100%) !important;
    border: none !important;
    color: white !important;
}

.auth-form .btn-primary:hover {
    background: linear-gradient(135deg, #D2691E 0%, #F5DEB3 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3) !important;
}

/* ============================================
   BUTTON FIXES
   ============================================ */

/* Ensure all buttons are clickable */
.btn,
button,
[type="button"],
[type="submit"],
[role="button"] {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Remove any overlays that might block buttons */
.btn::before,
.btn::after,
button::before,
button::after {
    pointer-events: none !important;
}

/* ============================================
   ENHANCED FORM STYLING
   ============================================ */

/* Form Control Styling */
.form-control {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(210, 105, 30, 0.3) !important;
    border-radius: 8px !important;
    color: #8B4513 !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: #D2691E !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.1) !important;
}

/* Button Styling */
.btn-primary {
    background: linear-gradient(135deg, #D2691E 0%, #F5DEB3 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #F5DEB3 0%, #D2691E 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(210, 105, 30, 0.4) !important;
}

.btn-outline-primary {
    color: #D2691E !important;
    border-color: #D2691E !important;
    background: transparent !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
    background: #D2691E !important;
    border-color: #D2691E !important;
    color: white !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3) !important;
}

/* ============================================
   MODAL FIXES
   ============================================ */

.modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(210, 105, 30, 0.3) !important;
    border-radius: 16px !important;
}

.modal-header {
    border-bottom: 1px solid rgba(210, 105, 30, 0.2) !important;
    color: #8B4513 !important;
}

.modal-footer {
    border-top: 1px solid rgba(210, 105, 30, 0.2) !important;
}

/* ============================================
   ALERT FIXES
   ============================================ */

.alert {
    border: none !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
}

.alert-success {
    background: rgba(34, 139, 34, 0.1) !important;
    color: #228B22 !important;
    border-left: 4px solid #228B22 !important;
}

.alert-danger {
    background: rgba(220, 20, 60, 0.1) !important;
    color: #DC143C !important;
    border-left: 4px solid #DC143C !important;
}

.alert-warning {
    background: rgba(255, 165, 0, 0.1) !important;
    color: #FF8C00 !important;
    border-left: 4px solid #FF8C00 !important;
}

.alert-info {
    background: rgba(210, 105, 30, 0.1) !important;
    color: #D2691E !important;
    border-left: 4px solid #D2691E !important;
}

/* ============================================
   DROPDOWN FIXES
   ============================================ */

.dropdown-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(210, 105, 30, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(210, 105, 30, 0.15) !important;
}

.dropdown-item {
    color: #8B4513 !important;
    transition: all 0.3s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(210, 105, 30, 0.1) !important;
    color: #D2691E !important;
}

/* ============================================
   ACCESSIBILITY FIXES
   ============================================ */

*:focus {
    outline: 2px solid #D2691E !important;
    outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
    .auth-form .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .btn {
        min-height: 44px !important; /* Touch target size */
        min-width: 44px !important;
    }
}

/* ============================================
   PRINT FIXES
   ============================================ */

@media print {
    .btn,
    .form-control {
        border: 1px solid #8B4513 !important;
        background: white !important;
        color: #8B4513 !important;
    }
}