/**
 * Special CSS fixes for Font Awesome icons
 */

/* Fix for specific icons that are not displaying correctly */
.fas:before,
.fa:before,
.far:before,
.fab:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

.far:before {
    font-weight: 400 !important;
}

.fab:before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Specific unicode values for problematic icons */
.fa-comments:before,
.fas.fa-comments:before {
    content: "\f086" !important;
}

.fa-user-slash:before,
.fas.fa-user-slash:before {
    content: "\f506" !important;
}

.fa-envelope:before,
.fas.fa-envelope:before {
    content: "\f0e0" !important;
}

.fa-gear:before,
.fas.fa-gear:before,
.fa-cog:before,
.fas.fa-cog:before {
    content: "\f013" !important;
}

.fa-user:before,
.fas.fa-user:before {
    content: "\f007" !important;
}

.fa-briefcase:before,
.fas.fa-briefcase:before {
    content: "\f0b1" !important;
}

.fa-users:before,
.fas.fa-users:before {
    content: "\f0c0" !important;
}

.fa-paper-plane:before,
.fas.fa-paper-plane:before {
    content: "\f1d8" !important;
}

.fa-heart:before,
.fas.fa-heart:before {
    content: "\f004" !important;
}

.fa-crown:before,
.fas.fa-crown:before {
    content: "\f521" !important;
}

.fa-gauge-high:before,
.fas.fa-gauge-high:before {
    content: "\f625" !important;
}

.fa-exclamation-circle:before,
.fas.fa-exclamation-circle:before {
    content: "\f06a" !important;
}

/* Make sure all icons are displayed properly */
i.fas, 
i.far, 
i.fab, 
i.fa {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific fix for icon in navigation */
.tjp-nav-item i.fas {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 0.5rem !important;
}

/* Fix for navigation layout */
.tjp-profile-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 15px 0 !important;
}

.tjp-nav-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; 
    width: 100% !important;
}

/* Make all nav items consistent */
.tjp-nav-item {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important; 
    white-space: nowrap !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    float: none !important;
}

/* Fix for nested icons */
.tjp-nav-item i.fas:before {
    position: static !important;
}

/* Fix tab active state appearance */
.tjp-nav-item.active {
    background-color: var(--primary-color, #2271b1) !important;
    color: white !important;
}

/* For smaller screens - make items responsive */
@media (max-width: 768px) {
    .tjp-nav-container {
        justify-content: center !important;
    }
    
    .tjp-nav-item {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}

/* Fix for save button */
.tjp-save-button {
    background-color: var(--primary-color, #2271b1) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    position: relative !important;
    overflow: hidden !important;
}

.tjp-save-button:hover {
    background-color: var(--primary-hover, #135e96) !important;
}

.tjp-save-button:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    background-color: #6c757d !important;
}

.tjp-save-button:disabled::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
    100% {
        left: 100% !important;
    }
}

/* Fix for form actions container */
.tjp-form-actions {
    margin-top: 2rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border-color, #e0e0e0) !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
}

/* Fix for cancel button */
.tjp-cancel-button {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.tjp-cancel-button:hover {
    background-color: #e9ecef !important;
}

/* Ensure form inputs are consistent */
.tjp-form-control {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.tjp-form-control:focus {
    border-color: var(--primary-color, #2271b1) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 113, 177, 0.25) !important;
}

/* Fix form layout and spacing */
.tjp-form-group {
    margin-bottom: 1.5rem !important;
}

.tjp-form-group label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.tjp-form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.tjp-col {
    position: relative !important;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    flex: 1 0 0% !important;
}

/* Fix form on mobile */
@media (max-width: 768px) {
    .tjp-form-row {
        flex-direction: column !important;
    }
    
    .tjp-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .tjp-form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .tjp-save-button,
    .tjp-cancel-button {
        width: 100% !important;
    }
} 