/* ============================================
   💙 GLOBAL TEXT MUTED OVERRIDE
   ============================================ */

/* Override Bootstrap's text-muted to use blue instead of gray */
.text-muted {
    color: #4169E1 !important;
}

.card .text-muted,
.modal .text-muted,
.alert .text-muted {
    color: #4169E1 !important;
}

/* ============================================
   💙 AUTH THEME FIXES
   ============================================ */

/* 💙 Bright Blue Auth Theme - Ensure clickable buttons */
.auth-footer {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.auth-link {
    position: relative !important;
    z-index: 1001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-block !important;
    padding: 12px 20px !important;
    margin: 8px !important;
    border-radius: 12px !important;
    background: rgba(135, 206, 235, 0.2) !important;
    border: 1px solid rgba(65, 105, 225, 0.3) !important;
    transition: all 0.3s ease !important;
    color: #1E3A8A !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.auth-link:hover {
    background: rgba(65, 105, 225, 0.3) !important;
    border-color: rgba(65, 105, 225, 0.5) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.25) !important;
    color: #1E3A8A !important;
}

/* Ensure no overlapping elements */
.auth-card {
    position: relative !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 8px 32px rgba(65, 105, 225, 0.15) !important;
}

.auth-container {
    position: relative !important;
    z-index: 99 !important;
    background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 100%) !important;
    min-height: 100vh !important;
}

/* Canvas should stay behind */
#star-canvas,
#particle-canvas {
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Auth form styling */
.auth-form .form-control {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(135, 206, 235, 0.4) !important;
    color: #1E3A8A !important;
}

.auth-form .form-control:focus {
    border-color: #4169E1 !important;
    box-shadow: 0 0 0 0.2rem rgba(65, 105, 225, 0.25) !important;
}

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

.auth-form .btn-primary:hover {
    background: linear-gradient(135deg, #4169E1 0%, #87CEEB 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(65, 105, 225, 0.3) !important;
}

/* Compact Login Box Styling */
.auth-compact-box {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.auth-compact-role-box {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Role Cards Compact */
.role-card-hover {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.role-card-hover:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(65, 105, 225, 0.3) !important;
}

/* Input Group Styling */
.input-group-text {
    background: #F8FAFC !important;
    border: 2px solid rgba(65, 105, 225, 0.2) !important;
    border-right: none !important;
}

.form-control {
    border-left: none !important;
    border: 2px solid rgba(65, 105, 225, 0.2) !important;
}

.form-control:focus {
    border-color: #4169E1 !important;
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1) !important;
}

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

.btn-primary:hover {
    background: linear-gradient(135deg, #87CEEB 0%, #4169E1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4) !important;
}

.btn-outline-primary {
    color: #4169E1 !important;
    border-color: #4169E1 !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}

.btn-outline-primary:hover {
    background: #4169E1 !important;
    border-color: #4169E1 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Alert Styling */
.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #991B1B !important;
    border: none !important;
    border-left: 4px solid #EF4444 !important;
    border-radius: 12px !important;
}

/* Card Styling */
.card {
    border: none !important;
    box-shadow: 0 15px 50px rgba(65, 105, 225, 0.2) !important;
}

/* Badge Styling */
.badge {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .auth-compact-box {
        margin: 1rem !important;
        max-width: none !important;
    }
    
    .auth-compact-role-box {
        margin: 1rem !important;
        max-width: none !important;
    }
    
    .card-body {
        padding: 1.5rem !important;
    }
}