/**
 * Contacts Page Styles
 * Specific styles for contacts management page
 */

/* Tabs styling - Realmify Theme */
#contactsTabs {
    border-bottom: 1px solid var(--realmify-border-dark);
    background: transparent;
    padding: 0.5rem 0.5rem 0;
}

#contactsTabs .nav-link {
    color: var(--realmify-text-secondary) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    opacity: 1 !important;
    margin-bottom: -1px;
    transition: all var(--realmify-duration) var(--realmify-transition);
}

#contactsTabs .nav-link:not(.active) {
    color: var(--realmify-text-secondary) !important;
    background-color: transparent !important;
}

#contactsTabs .nav-link:not(.active):hover {
    color: var(--realmify-text-primary) !important;
    background-color: var(--realmify-dark-bg) !important;
    border-color: var(--realmify-border-dark) !important;
    border-bottom-color: var(--realmify-border-dark) !important;
}

#contactsTabs .nav-link.active {
    color: var(--realmify-text-primary) !important;
    background-color: var(--realmify-deep-grid-gray) !important;
    border-color: var(--realmify-border-dark) var(--realmify-border-dark) transparent !important;
    border-bottom-color: var(--realmify-deep-grid-gray) !important;
    font-weight: 600 !important;
    position: relative;
}

#contactsTabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--realmify-voxel-blue) 0%, var(--realmify-arcane-teal) 100%);
}

/* Badge styling in tabs */
#contactsTabs .nav-link .badge {
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* Fix modal overlay issue - use visibility instead of opacity to prevent z-index stacking issues */
#searchUserModal.modal:not(.show) {
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#searchUserModal.modal.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1055 !important;
}

/* Ensure modal content is above backdrop */
#searchUserModal.modal.show .modal-dialog {
    z-index: 1056 !important;
    position: relative;
}

/* Modal backdrop fix - also use visibility and ensure it's below modal content */
.modal-backdrop:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1040 !important;
}