/* Profile Layout Fixes - Ensure Left-Aligned Layout */
/* This file fixes profile layout issues caused by RTL classes */


/* Profile Header Layout Fixes */
.profile-header {
    direction: ltr;
    text-align: left;
}

.profile-header .container {
    direction: ltr;
    text-align: left;
    padding-left: 5px !important; /* Minimal left padding - almost at edge */
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.profile-header .row {
    direction: ltr;
    text-align: left;
}

.profile-header .col-md-2,
.profile-header .col-md-10 {
    direction: ltr;
    text-align: left;
}

/* Fix Bootstrap RTL-aware classes in profile header */
.profile-header .position-absolute.top-0.end-0 {
    right: 0 !important;
    left: auto !important;
}

.profile-header .me-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

.profile-header .me-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

.profile-header .me-1 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

/* Profile Photo Container - Allow left alignment for profile-photo-col */
.profile-header .text-center:not(.profile-photo-col) {
    text-align: center !important;
}

.profile-header .profile-photo-col {
    text-align: left !important;
}

.profile-header .profile-photo-col .profile-photo {
    margin: 0 !important;
}

.profile-header .profile-photo-col .profile-photo-container {
    text-align: left !important;
}

/* Profile Info Section */
.profile-header h1 {
    text-align: left !important;
    direction: ltr;
}

.profile-header .badge {
    text-align: left !important;
    direction: ltr;
}

.profile-header p {
    text-align: left !important;
    direction: ltr;
}

.profile-header .row.g-2 {
    direction: ltr;
    text-align: left;
}

.profile-header .col-auto {
    direction: ltr;
    text-align: left;
}

/* Profile Tabs Navigation */
.profile-tabs {
    direction: ltr !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding-left: 5px !important; /* Minimal left padding - almost at edge */
    margin-left: 0 !important;
}

.profile-tabs .nav {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    /* Don't override Bootstrap's flex - let it work naturally */
}

.profile-tabs .nav-item {
    direction: ltr !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Ensure tabs are clickable */
    cursor: pointer !important;
    /* Let Bootstrap handle display - don't override */
}

.profile-tabs .nav-link {
    direction: ltr !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Ensure links are clickable */
    cursor: pointer !important;
    /* Let Bootstrap handle display - don't override */
}

/* Mobile: Make tabs responsive and clickable - SIMPLIFIED */
@media (max-width: 991px) {
    .profile-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    
    .profile-tabs .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: max-content !important;
    }
    
    .profile-tabs .nav-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .profile-tabs .nav-link {
        display: block !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
}

/* Very Small Mobile: Fit all tabs in one row */
@media (max-width: 575px) {
    .profile-tabs,
    #profileTabs,
    .nav-tabs#profileTabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Hide scrollbar on Firefox */
        -ms-overflow-style: none !important; /* Hide scrollbar on IE/Edge */
    }
    
    /* Hide scrollbar on WebKit browsers */
    .profile-tabs::-webkit-scrollbar,
    #profileTabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .profile-tabs .nav,
    #profileTabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    .profile-tabs .nav-item,
    #profileTabs .nav-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Reduce padding and font size to fit all tabs in one row */
    .profile-tabs .nav-link,
    #profileTabs .nav-link {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
}

.profile-tabs .nav-link i {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* ======================================================================
   PROFILE TABS - Responsive Equal Width on All Screen Sizes
   ====================================================================== */

/* Override tab styling for responsive equal-width layout */
.profile-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.profile-tabs .nav-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Single tab: do not stretch to full width - size to content and align left like first tab */
#profileTabs .nav-item:only-child,
.profile-tabs .nav-item:only-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

#profileTabs .nav-item:only-child .nav-link,
.profile-tabs .nav-item:only-child .nav-link {
    min-width: 7rem; /* Reasonable minimum so "Posts" doesn't look cramped */
}

.profile-tabs .nav-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ======================================================================
   PROFILE TABS - Edge-to-edge on desktop/tablet (first tab left, last tab right)
   ====================================================================== */
/* Tablet (768–1199px): ensure tab bar has no horizontal padding so it touches container edges. */
@media (min-width: 768px) and (max-width: 1199px) {
    #profileTabs,
    .nav-tabs.profile-tabs,
    #profilePage .profile-tabs {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Desktop (1200px+): container has left/right padding; pull tab bar out so it touches edges. */
@media (min-width: 1200px) {
    #profileTabs,
    .nav-tabs.profile-tabs,
    #profilePage .profile-tabs {
        margin-left: calc(-1 * var(--profile-page-padding-left-desktop, 0.5rem)) !important;
        margin-right: calc(-1 * var(--profile-page-padding-right, 0.9375rem)) !important;
        width: calc(100% + var(--profile-page-padding-left-desktop, 0.5rem) + var(--profile-page-padding-right, 0.9375rem)) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* Tab Content */
.tab-content {
    direction: ltr;
    text-align: left;
}

/* Profile Page Container - Override Bootstrap's centering */
#profilePage.container,
.container#profilePage {
    padding-left: 5px !important; /* Minimal left padding - almost at edge */
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tab-pane {
    direction: ltr;
    text-align: left;
}

/* CRITICAL: Exception for publisher content to preserve Word document formatting */
.tab-content .publisher-content,
.tab-pane .publisher-content,
.card-body .publisher-content {
    /* Don't override inline styles from Word documents - let them work naturally */
    direction: unset !important;
    text-align: unset !important;
}

/* CRITICAL: Let inline styles work naturally - NO CSS interference */
.publisher-content * {
    /* Do nothing - let inline styles take natural precedence */
}

/* CRITICAL: Force inline styles to take absolute precedence */
.publisher-content *[style*="color"] {
    /* Force color from inline style to override any CSS */
    color: unset !important;
}

/* EXTREME NUCLEAR OPTION: Force specific color preservation for any color */
.publisher-content *[style*="color: blue"] {
    color: blue !important;
}

.publisher-content *[style*="color: red"] {
    color: red !important;
}

.publisher-content *[style*="color: green"] {
    color: green !important;
}

.publisher-content *[style*="color: black"] {
    color: black !important;
}

.publisher-content *[style*="color: white"] {
    color: white !important;
}

/* ULTIMATE NUCLEAR OPTION: Use CSS custom properties as fallback */
.publisher-content *[style*="--forced-color"] {
    color: var(--forced-color) !important;
}

/* ULTIMATE NUCLEAR OPTION: Dynamic color classes created by JavaScript */
.publisher-content .force-colorblue {
    color: blue !important;
}

.publisher-content .force-colorred {
    color: red !important;
}

.publisher-content .force-colorgreen {
    color: green !important;
}

.publisher-content .force-colorblack {
    color: black !important;
}

.publisher-content .force-colorwhite {
    color: white !important;
}

/* ULTIMATE NUCLEAR OPTION: CSS variables with maximum specificity */
.publisher-content *[style*="--element-color"] {
    color: var(--element-color) !important;
}

/* ULTIMATE NUCLEAR OPTION: Data attribute fallback */
.publisher-content *[data-forced-color] {
    color: attr(data-forced-color) !important;
}

/* CRITICAL: Let inline styles work naturally - NO CSS interference */
.publisher-content *[style*="font-family"],
.publisher-content *[style*="font-size"],
.publisher-content *[style*="direction"],
.publisher-content *[style*="text-align"] {
    /* Do nothing - let inline styles take natural precedence */
}

/* Publications Tab */
#publications-tab-pane {
    direction: ltr;
    text-align: left;
}

#publications-tab-pane .tab-add-button {
    direction: ltr;
    text-align: left;
}

#publications-tab-pane .btn {
    direction: ltr;
    text-align: left;
}

#publications-tab-pane .btn i {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

#publications-tab-pane .row {
    direction: ltr;
    text-align: left;
}

#publications-tab-pane .col-md-3 {
    direction: ltr;
    text-align: left;
}

/* Publication Cards */
.publication-card {
    direction: ltr;
    text-align: left;
}

.publication-card .card-body {
    direction: ltr;
    text-align: left;
}

/* Exception for publisher content to preserve Word formatting */
.publication-card .card-body .publisher-content,
.card-body .publisher-content {
    /* Don't override inline styles - let them work naturally */
}

.publication-card .card-title:not([dir="rtl"]) {
    direction: ltr;
    text-align: left;
}

.publication-card .card-title[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.publication-card .card-text {
    direction: ltr;
    text-align: left;
}

.publication-card .card-text i {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

.publication-card .card-footer {
    direction: ltr;
    text-align: left;
}

.publication-card .btn {
    direction: ltr;
    text-align: left;
}

.publication-card .btn i {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

/* Card Actions */
.card-actions {
    direction: ltr;
    text-align: left;
}

.card-actions .btn {
    direction: ltr;
    text-align: left;
}

.card-actions .btn.me-1 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

/* Status Badge */
.publication-card .position-absolute.top-0.start-0 {
    left: 0 !important;
    right: auto !important;
}

/* Alert Messages */
.alert {
    direction: ltr;
    text-align: left;
}

/* Buttons */
.btn {
    direction: ltr;
    text-align: left;
}

.btn i:not(#profileActionsDropdown i) {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

/* Badges */
.badge {
    direction: ltr;
    text-align: left;
}

/* Ensure Persian text content is still right-aligned */
.publication-card .card-title[lang="fa"],
.publication-card .card-text[lang="fa"],
.publication-card .card-body [lang="fa"] {
    direction: rtl;
    text-align: right;
}

.publication-card .card-title[lang="ar"],
.publication-card .card-text[lang="ar"],
.publication-card .card-body [lang="ar"] {
    direction: rtl;
    text-align: right;
}

.publication-card .card-title[lang="ur"],
.publication-card .card-text[lang="ur"],
.publication-card .card-body [lang="ur"] {
    direction: rtl;
    text-align: right;
}

/* Profile Bio */
.profile-header p[lang="fa"],
.profile-header p[lang="ar"],
.profile-header p[lang="ur"] {
    direction: rtl;
    text-align: right;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .profile-header .col-md-2,
    .profile-header .col-md-10 {
        direction: ltr;
        text-align: left;
    }
    
    .profile-header .text-center:not(.profile-photo-col) {
        text-align: center !important;
    }
    
    .profile-header .profile-photo-col {
        text-align: left !important;
    }
}

@media (max-width: 576px) {
    .profile-header .position-absolute.top-0.end-0 {
        right: 0 !important;
        left: auto !important;
    }
    
    .profile-header .me-3 {
        margin-right: 1rem !important;
        margin-left: 0 !important;
    }
}