/**
 * MuDream Template - Critical Fixes
 * Addresses common style issues and WebEngine compatibility
 */

/* ======== CRITICAL PATH FIXES ======== */

/* Ensure FontAwesome loads properly */
.fas, .far, .fab, .fal, .fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.far {
    font-weight: 400;
}

.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* Fix missing background images fallbacks */
.app-background-page-bg,
.app-background-main-bg {
    background-color: #0a0a0a !important;
    background-image: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
}

/* Ensure proper font loading fallbacks */
body {
    font-family: 'Circe', 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Fix potential layout issues */
* {
    box-sizing: border-box !important;
}

/* Critical responsive fixes */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap !important;
    }
    
    .header-navigation-wrap {
        width: 100% !important;
        order: 3 !important;
    }
    
    .header-right-buttons-wrap {
        flex-shrink: 0 !important;
    }
}

/* WebEngine content area fixes */
.page-content,
.layouts-page-content {
    min-height: 400px;
    position: relative;
    z-index: 1;
}

/* Fix transparent backgrounds */
.table,
.general-table-ui,
.myaccount-table {
    background: rgba(0, 0, 0, 0.3) !important;
}

.table td,
.general-table-ui td,
.myaccount-table td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Form elements visibility */
.form-control,
input[type="text"],
input[type="email"], 
input[type="password"],
select,
textarea {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color, #ff6b00) !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2) !important;
    outline: none !important;
}

/* Button fixes */
.btn {
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

/* Navigation fixes */
.header-navigation-item {
    position: relative !important;
}

.header-navigation-dropdown .header-navigation-dropdown-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 200px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
}

.header-navigation-dropdown:hover .header-navigation-dropdown-list {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Language selector fixes */
.select-options-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.3s ease !important;
}

.select-custom:hover .select-options-list,
.select-custom.active .select-options-list {
    max-height: 200px !important;
}

.select-option {
    display: block !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.select-option:hover {
    background: rgba(79, 195, 247, 0.2) !important;
    color: #ffffff !important;
}

/* Social panel fixes */
.app-socials-wrapper {
    position: fixed !important;
    z-index: 1000 !important;
}

/* Server status fixes */
.online-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.online-badge.online .online-badge-badge {
    background: #5cb85c !important;
    animation: pulse 2s infinite !important;
}

.online-badge.offline .online-badge-badge {
    background: #d9534f !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Content visibility fixes */
.layouts-page-content {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Loading states */
.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Print styles */
@media print {
    .header,
    .footer,
    .app-socials-wrapper {
        display: none !important;
    }
    
    .layouts-page-content {
        background: white !important;
        color: black !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .table td,
    .form-control,
    input, select, textarea {
        border: 2px solid #ffffff !important;
    }
    
    .btn {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.rankings_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rankings_menu a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    color: #ddd;
    font-size: 13px;
    transition: all 0.25s ease;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Hover */
.rankings_menu a:hover {
    background: #f28c1f;
    color: #fff;
    border-color: #f28c1f;
    transform: translateY(-1px);
}

/* Activo */
.rankings_menu a.active {
    background: linear-gradient(135deg, #f28c1f, #ffb347);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(242,140,31,0.35);
}