/* Profile Details Page Styles */
/* Extracted from Details.cshtml for better maintainability */

/* ============================================
   CRITICAL: Force minimal left padding on profile page - Highest priority
   Ensure ALL parent elements don't constrain width
   ============================================ */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    overflow-x: visible !important;
}

/* CRITICAL: Override the outer container that wraps main element (from _Layout.cshtml) */
body > .container,
html body > .container,
body > div.container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override ALL Bootstrap container media queries for the outer container */
@media (min-width: 576px) {
    body > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    body > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    body > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    body > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    body > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Ensure parent main element doesn't constrain width */
main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

/* Force profile page container to full width - Override any parent constraints */
#profilePage.container,
body #profilePage.container,
html body #profilePage.container,
main #profilePage.container,
body main #profilePage.container,
html body main #profilePage.container {
    padding-left: 5px !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    box-sizing: border-box !important;
    flex-basis: 100% !important;
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
}

/* Override ALL Bootstrap container media queries - Force full width at ALL breakpoints */
@media (min-width: 576px) {
    #profilePage.container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (min-width: 768px) {
    #profilePage.container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (min-width: 992px) {
    #profilePage.container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (min-width: 1200px) {
    #profilePage.container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (min-width: 1400px) {
    #profilePage.container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* CRITICAL: Use calc() to force full viewport width if parent is constrained */
@media (min-width: 992px) {
    #profilePage.container {
        width: calc(100vw - 10px) !important; /* Full viewport width minus minimal padding */
        max-width: calc(100vw - 10px) !important;
    }
}

.profile-header .container {
    padding-left: 5px !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.profile-tabs {
    padding-left: 5px !important;
    margin-left: 0 !important;
}

.profile-header .row > [class*="col-"] {
    padding-left: 5px !important;
}

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

/* ============================================
   Support Tickets Badge Styles
   ============================================ */
.support-tickets-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* ============================================
   Floating Action Icons
   ============================================ */
.floating-action-icons {
    position: fixed;
    top: 280px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999999;
    transition: opacity 0.2s ease;
}

.floating-action-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.floating-action-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    border-color: rgba(0, 0, 0, 0.08);
}

.floating-icon-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.message-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    border-radius: 50%;
}

/* ============================================
   Publisher Content Formatting Styles
   ============================================ */
/* CRITICAL: Apply zoom to publisher content for better readability */
/* Zoom increases display size without changing actual font-size */
.publisher-content {
    zoom: 1.25; /* 25% larger display (equivalent to 125% zoom) */
    /* Alternative for browsers that don't support zoom: */
    /* transform: scale(1.25); */
    /* transform-origin: top left; */
}

/* CRITICAL: Preserve empty paragraphs and spacing in publisher content */
/* Matching behavior from TinyMCE editor (AcceptanceConditions page) for consistency */
/* TinyMCE provides better default spacing, so we replicate that here */
.publisher-content p {
    margin-top: 0 !important; /* Remove browser default margin-top */
    margin-bottom: 1em !important; /* Standard paragraph spacing (matching TinyMCE) */
    line-height: 1.6 !important; /* Better line-height for readability */
    /* JavaScript will override this for empty paragraphs with line-height-based spacing */
}

/* CRITICAL: Ensure empty paragraphs have height to create spacing */
/* Empty paragraphs should have minimum height equal to line-height to create spacing */
/* This applies to paragraphs with no content or only whitespace */
.publisher-content p:empty,
.publisher-content p[data-empty-paragraph="true"] {
    min-height: 1em !important;
    margin-top: 0 !important; /* Ensure no negative or extra margin-top */
    margin-bottom: 1em !important;
    /* JavaScript will set specific min-height and margin-bottom based on computed line-height */
}

/* CRITICAL: Preserve paragraph spacing with inline styles from Mammoth */
/* If Mammoth set margin-bottom inline, respect it (but ensure minimum spacing) */
.publisher-content p[style*="margin-bottom"] {
    /* Respect inline margin-bottom styles from Mammoth, but ensure minimum */
    /* JavaScript will enforce the inline style with !important */
}

/* CRITICAL: Ensure consistent paragraph spacing for paragraphs with content */
/* Paragraphs with content should have standard spacing matching TinyMCE */
.publisher-content p:not(:empty):not([data-empty-paragraph="true"]) {
    margin-top: 0 !important; /* Remove browser default */
    margin-bottom: 1em !important; /* Standard spacing (matching TinyMCE default) */
}

/* CRITICAL: First paragraph should not have extra top margin */
.publisher-content p:first-child {
    margin-top: 0 !important;
}

/* CRITICAL: Last paragraph can have bottom margin (normal behavior) */
.publisher-content p:last-child {
    margin-bottom: 0 !important; /* Or keep 1em if you want spacing after last paragraph */
}

/* CRITICAL: Preserve all inline styles from Mammoth */
.publisher-content *[style] {
    /* All inline styles are preserved and enforced by JavaScript */
}

/* CRITICAL: Preserve color classes */
.publisher-content .red {
    color: red !important;
}

.publisher-content .blue {
    color: blue !important;
}

/* CRITICAL: Preserve text direction */
.publisher-content *[dir="ltr"] {
    direction: ltr !important;
}

.publisher-content *[dir="rtl"] {
    direction: rtl !important;
}

/* CRITICAL: Preserve text alignment */
.publisher-content *[style*="text-align: justify"] {
    text-align: justify !important;
}

.publisher-content *[style*="text-align: left"] {
    text-align: left !important;
}

.publisher-content *[style*="text-align: right"] {
    text-align: right !important;
}

.publisher-content *[style*="text-align: center"] {
    text-align: center !important;
}

/* ============================================
   Add Book Icon Styles
   ============================================ */
.add-book-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.add-book-icon:hover {
    transform: scale(1.2);
    color: #0056b3 !important;
}

.btn .add-book-icon {
    vertical-align: middle;
}

.card-title .add-book-icon {
    vertical-align: middle;
}

/* ============================================
   Add Book to Category Modal Styles
   Fix for Add Book to Category Modal - Complete Bootstrap Bypass
   Following Modal-Debugging-Guide.md Image Preview Modal case study
   ============================================ */
#addBookToCategoryModal {
    z-index: 999999 !important; /* Much higher than navbar (1040-1070) */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    display: none !important; /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
}

#addBookToCategoryModal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 60px !important; /* Account for navbar height */
}

#addBookToCategoryModal .modal-dialog {
    z-index: 1000000 !important; /* Higher than modal backdrop */
    pointer-events: auto !important;
    margin: auto !important;
    position: relative !important;
    max-width: 800px !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important; /* Remove default margin, use padding from parent */
}

#addBookToCategoryModal .modal-content {
    z-index: 1000001 !important; /* Higher than dialog */
    pointer-events: auto !important;
    opacity: 1 !important;
    background-color: #fff !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    width: 100% !important;
}

/* Ensure modal header is visible */
#addBookToCategoryModal .modal-header {
    z-index: 1000002 !important; /* Higher than content */
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #fff !important;
    position: relative !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 1rem !important;
    border-bottom: 1px solid #dee2e6 !important;
}

#addBookToCategoryModal .modal-title {
    z-index: 1000003 !important; /* Higher than header */
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: #212529 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}

#addBookToCategoryModal .btn-close {
    z-index: 1000004 !important; /* Highest z-index */
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    cursor: pointer !important;
}

#addBookToCategoryModal .modal-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

#addBookToCategoryModal .modal-footer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    padding: 1rem !important;
    border-top: 1px solid #dee2e6 !important;
}

/* Force all children to be interactive */
#addBookToCategoryModal * {
    pointer-events: auto !important;
    z-index: 100002 !important;
}

/* Make clickable elements specifically interactive */
#addBookToCategoryModal button,
#addBookToCategoryModal .btn,
#addBookToCategoryModal .book-selection-card,
#addBookToCategoryModal input,
#addBookToCategoryModal select,
#addBookToCategoryModal textarea,
#addBookToCategoryModal a {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 100003 !important;
}

/* Uniform border and fixed height for all book selection cards */
/* All cards (selected and unselected) must have equal height */
#addBookToCategoryModal .book-selection-card.card,
#addBookToCategoryModal .card.book-selection-card,
#addBookToCategoryModal div.book-selection-card {
    border: 1px solid #dee2e6 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
    outline: none !important;
    /* Fixed height for all cards - accommodates selected cards with badge and delete button */
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure card body uses flex to fill remaining space */
#addBookToCategoryModal .book-selection-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* Hide and remove backdrop completely */
.modal-backdrop {
    display: none !important;
    z-index: -1 !important;
}

/* Ensure body doesn't block */
body.modal-open {
    overflow: visible !important;
    padding-right: 0 !important;
}

/* ============================================
   TAB PANE POSITIONING - Ensure all tabs start at same position
   ============================================ */
.tab-content {
    position: relative !important;
    min-height: 0 !important;
}

/* CRITICAL: Hide all tabs initially until JavaScript determines the correct one
   This prevents Posts tab from showing briefly before user's default tab is applied */
/* Only hide tabs if ProfileTabsManager hasn't initialized yet */
.tab-content[data-tabs-pending-init="true"] .tab-pane {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* After initialization, use Bootstrap's standard behavior but ensure inactive tabs are hidden */
.tab-content:not([data-tabs-pending-init="true"]) .tab-pane:not(.show):not(.active) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Show active tabs after initialization - must have both show and active classes */
/* Use higher specificity to ensure this rule takes precedence */
.tab-content:not([data-tabs-pending-init="true"]) .tab-pane.show.active,
#profileTabsContent:not([data-tabs-pending-init="true"]) .tab-pane.show.active,
.tab-content .tab-pane.show.active[style*="display: block"],
#profileTabsContent .tab-pane.show.active[style*="display: block"],
.tab-content:not([data-tabs-pending-init="true"]) .tab-pane.show.active.fade,
#profileTabsContent:not([data-tabs-pending-init="true"]) .tab-pane.show.active.fade {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Override Bootstrap's fade transition when tab is active */
/* Bootstrap's fade class can hide tabs even with show/active if transition isn't complete */
.tab-pane.fade.show.active {
    opacity: 1 !important;
    transition: opacity 0.15s linear !important;
}

/* CRITICAL: Ensure any tab pane with inline display:block style is always visible */
.tab-pane[style*="display"][style*="block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure cards-grid starts immediately in tab-pane */
.tab-pane .cards-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   PROFILE CARD SIZE ALIGNMENT (DESKTOP/TABLET)
   Match Explore container width for consistent card sizing
   ========================================================================== */

@media (min-width: 768px) {
    body main #profilePage.container,
    html body main #profilePage.container,
    body #profilePage.container,
    html body #profilePage.container {
        max-width: 720px !important; /* Bootstrap container width at ≥768px */
        width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
    }
}

@media (min-width: 992px) {
    body main #profilePage.container,
    html body main #profilePage.container,
    body #profilePage.container,
    html body #profilePage.container {
        max-width: 960px !important; /* Bootstrap container width at ≥992px */
    }
}

@media (min-width: 1200px) {
    body main #profilePage.container,
    html body main #profilePage.container,
    body #profilePage.container,
    html body #profilePage.container {
        max-width: 1140px !important; /* Bootstrap container width at ≥1200px */
    }
}

@media (min-width: 1400px) {
    body main #profilePage.container,
    html body main #profilePage.container,
    body #profilePage.container,
    html body #profilePage.container {
        max-width: 1320px !important; /* Bootstrap container width at ≥1400px */
    }
}