/* Profile Studies - tab-specific card styling (grid layout in profile-grid-layout.css) */

/* Study Actions */
.study-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: flex;
    gap: 5px;
}

.study-card:hover .study-actions,
.unified-card.study-card:hover .study-actions,
#studies-tab-pane .unified-card:hover .study-actions,
#studies-tab-pane .study-card:hover .study-actions {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Progress bar text — profile studies tab (track sizing in card-layout.css) */
#studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar {
    border-radius: 4px !important;
    transition: width 0.6s ease !important;
    font-size: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: white !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    height: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    word-break: keep-all !important;
    hyphens: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
}

#studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar span {
    font-size: 0.5rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
    word-break: keep-all !important;
    hyphens: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5) !important;
}

/* Reading Queue styling for 0% completion studies */
.reading-queue-card {
    border: 2px dashed #6c757d !important;
    background-color: rgba(108, 117, 125, 0.05) !important;
    position: relative;
}

.reading-queue-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(108, 117, 125, 0.1) 10px,
        rgba(108, 117, 125, 0.1) 20px
    );
    pointer-events: none;
    border-radius: 12px;
}

.reading-queue-badge {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
    color: white !important;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.reading-queue-title {
    color: #6c757d !important;
    font-style: italic;
}

.reading-queue-card .card-img-top {
    opacity: 0.7;
    filter: grayscale(20%);
}

/* Study Title Overlay at Bottom of Cover */
.unified-card .study-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 235, 59, 0.85); /* Matte yellow background */
    color: #2c3e50;
    padding: clamp(6px, 0.5em, 12px) clamp(8px, 0.75em, 16px); /* Responsive padding */
    font-size: clamp(0.75rem, 0.9vw, 0.9rem); /* Responsive font size */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Profile Studies - scoped layout rules (Bootstrap 5 friendly) */

/* Grid layout rules moved to profile-grid-layout.css (shared across all tabs) */
/* This file now only contains study-specific card styling, not grid layout */

/* Study cards in grid */
/* CRITICAL: Removed fixed height - now uses aspect-ratio from _cards-base.css (1/1.8) */
.cards-grid .unified-card,
#studies-tab-pane .cards-grid .unified-card {
    flex: 1;
    width: 100%;
    max-width: 100%;
    /* Height now controlled by aspect-ratio in _cards-base.css */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    margin: 0;
}

/* Unified Card Body for Studies - Prevent overflow beyond card */
/* CRITICAL: Only apply to profile cards, not explore cards */
#studies-tab-pane .unified-card .card-body {
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important; /* Remove scrolling - text wraps instead */
    padding: clamp(10px, 0.75em, 16px) clamp(12px, 1em, 20px) !important; /* Responsive padding */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Unified Card Subtitle - Author name with proper spacing */
/* Allow wrapping to 2 lines for long author names */
/* CRITICAL: Light mode colors only - dark mode handled in dark-mode-cards.css */
#studies-tab-pane .unified-card .card-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(0.75rem, 0.875vw, 0.875rem) !important; /* Responsive font size */
    line-height: 1.5 !important;
    min-height: 1.5em !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    #studies-tab-pane .unified-card .card-subtitle {
        color: #6c757d !important;
    }
}

/* Additional Study Information (Publisher, Pages, Translator) */
#studies-tab-pane .unified-card .card-body > div[style*="flex-direction: column"] {
    margin-top: 8px !important;
}

/* Lighter colors for study card spans and icons */
/* CRITICAL: Light mode colors only - dark mode handled in dark-mode-cards.css */
#studies-tab-pane .unified-card .card-body > div[style*="flex-direction: column"] > span {
    white-space: normal !important; /* Allow wrapping for responsive text */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    font-size: clamp(0.7rem, 0.8vw, 0.8rem) !important; /* Responsive font size */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    #studies-tab-pane .unified-card .card-body > div[style*="flex-direction: column"] > span {
        color: #868e96 !important;
    }

    #studies-tab-pane .unified-card .card-body > div[style*="flex-direction: column"] > span i,
    #studies-tab-pane .unified-card .card-subtitle i {
        color: #adb5bd !important;
    }
}

/* Unified grid footer sizing for study cards (match shared system) */
#studies-tab-pane .cards-grid .unified-card .card-footer {
    padding: var(--card-footer-padding, 8px 16px) !important;
    min-height: 44px !important;
    height: auto !important;
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress {
        background-color: #e9ecef !important;
    }
}

/* Unified progress bar text size for study cards in grid */
#studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar {
    font-size: 0.5rem !important;
    line-height: 1 !important;
}

#studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar span {
    font-size: 0.5rem !important;
    line-height: 1 !important;
}

/* Responsive improvements */
@media (max-width: 992px) {
    .unified-card .study-title-overlay {
        font-size: clamp(0.7rem, 0.85vw, 0.85rem);
        padding: clamp(5px, 0.4em, 10px) clamp(6px, 0.6em, 12px);
    }
    
    /* Ensure card-body text is responsive on smaller screens */
    /* CRITICAL: Only apply to profile cards, not explore cards */
    #studies-tab-pane .unified-card .card-body {
        padding: clamp(8px, 0.6em, 14px) clamp(10px, 0.8em, 16px) !important;
    }
    
    #studies-tab-pane .unified-card .card-subtitle {
        font-size: clamp(0.7rem, 0.8vw, 0.8rem) !important;
    }
    
    #studies-tab-pane .unified-card .card-body > div[style*="flex-direction: column"] > span {
        font-size: clamp(0.65rem, 0.75vw, 0.75rem) !important;
    }
    
    /* Responsive status badge for studies */
    #studies-tab-pane .unified-card .status-badge,
    .unified-card .status-badge {
        font-size: clamp(0.45rem, 0.55vw, 0.55rem) !important;
        padding: clamp(1px, 0.1em, 3px) clamp(3px, 0.25em, 6px) !important;
        top: clamp(6px, 0.6em, 10px) !important;
        left: clamp(6px, 0.6em, 10px) !important;
        max-width: clamp(70px, 9vw, 90px) !important;
    }
    
    /* Medium screens - Proportional progress bar height */
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress {
        height: 70% !important; /* Proportional to footer height - responsive */
        min-height: 12px !important; /* Ensure minimum visibility on tablets */
        border-radius: 3px !important;
        margin: auto 0 !important; /* Center vertically with auto margins */
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    align-items: stretch !important;
        position: relative !important;
    }
    
    /* Light mode progress bar background for medium screens - only apply when NOT in dark mode */
    @media (prefers-color-scheme: light) {
        #studies-tab-pane .cards-grid .unified-card .card-footer .progress {
            background-color: #e9ecef !important;
        }
    }
    
    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
        #studies-tab-pane .cards-grid .unified-card .card-footer .progress {
            background-color: #e9ecef !important;
        }
    }
    
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar {
        font-size: 0.55rem !important; /* Slightly increased from 0.45rem */
        line-height: 1 !important;
    }
    
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar span {
        font-size: 0.55rem !important; /* Slightly increased from 0.45rem */
        line-height: 1 !important;
    }
    
    /* EXPANDED STATE - Override small sizes when cards are expanded */
    #studies-tab-pane .cards-grid > .mobile-expanded .study-title-overlay,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .study-title-overlay {
        font-size: 1.1rem !important; /* Larger than normal state */
        padding: 0.75em 1em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-subtitle,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-subtitle {
        font-size: 1rem !important; /* Larger than normal state */
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-body,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body {
        font-size: 1rem !important;
        padding: 1.25em 1.5em !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-body > div[style*="flex-direction: column"] > span {
        font-size: 0.95rem !important; /* Larger than normal state */
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .status-badge,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .status-badge {
        font-size: 0.85rem !important; /* Larger than normal state */
        padding: 0.4em 0.6em !important;
        max-width: none !important;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .unified-card .study-title-overlay {
        font-size: clamp(0.65rem, 0.8vw, 0.75rem);
        padding: clamp(4px, 0.35em, 8px) clamp(5px, 0.5em, 10px);
    }
    
    #studies-tab-pane .unified-card .card-body {
        padding: clamp(6px, 0.5em, 12px) clamp(8px, 0.7em, 14px) !important;
    }
    
    /* Extra small screens - Fixed height for mobile to ensure visibility */
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress {
        height: 12px !important; /* Fixed height for mobile - ensures visibility while fitting in 18px footer */
        border-radius: 3px !important;
        margin: auto 0 !important; /* Center vertically with auto margins */
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    align-items: stretch !important;
        position: relative !important;
    }
    
    /* Extra small screens - Larger font for progress bar text on mobile */
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar {
        font-size: 0.65rem !important; /* Increased from 0.45rem for mobile readability */
        line-height: 1 !important;
    }
    
    #studies-tab-pane .cards-grid .unified-card .card-footer .progress-bar span {
        font-size: 0.65rem !important; /* Increased from 0.45rem for mobile readability */
        line-height: 1 !important;
    }
    
    /* Extra small screens - status badge */
    #studies-tab-pane .unified-card .status-badge {
        font-size: clamp(0.4rem, 0.5vw, 0.5rem) !important;
        padding: clamp(1px, 0.08em, 2px) clamp(2px, 0.2em, 4px) !important;
        top: clamp(4px, 0.5em, 8px) !important;
        left: clamp(4px, 0.5em, 8px) !important;
        max-width: clamp(60px, 8vw, 80px) !important;
    }
    
    /* EXPANDED STATE - Override small sizes when cards are expanded (extra small screens) */
    #studies-tab-pane .cards-grid > .mobile-expanded .study-title-overlay,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .study-title-overlay {
        font-size: 1rem !important; /* Larger than normal state */
        padding: 0.7em 0.9em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-subtitle,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-subtitle {
        font-size: 0.95rem !important; /* Larger than normal state */
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-body,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body {
        font-size: 0.95rem !important;
        padding: 1.1em 1.3em !important;
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .card-body > div[style*="flex-direction: column"] > span {
        font-size: 0.9rem !important; /* Larger than normal state */
    }
    
    #studies-tab-pane .cards-grid > .mobile-expanded .status-badge,
    #studies-tab-pane .cards-grid > .mobile-expanded .unified-card .status-badge {
        font-size: 0.8rem !important; /* Larger than normal state */
        padding: 0.35em 0.5em !important;
        max-width: none !important;
    }
}

/* ============================================
   EXPANDED STATE - Study Cards
   When cards are expanded (.mobile-expanded), increase font sizes
   CRITICAL: Override viewport-based (vw) units with em/rem for proportional scaling
   ============================================ */

/* Expanded study title overlay - larger font size */
#studies-tab-pane .cards-grid > .mobile-expanded .study-title-overlay,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .study-title-overlay {
    font-size: 1.25rem !important; /* Larger than normal state - use rem instead of vw */
    padding: 0.75em 1em !important; /* Proportional padding */
    line-height: 1.5 !important;
    white-space: normal !important; /* Allow wrapping in expanded state */
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Expanded study card subtitle - larger font size */
/* CRITICAL: Override viewport-based font sizes with higher specificity */
#studies-tab-pane .cards-grid > .mobile-expanded .card-subtitle,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-subtitle,
#studies-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle {
    font-size: 1.1rem !important; /* Larger than normal state - use rem instead of vw */
    line-height: 1.7 !important;
    -webkit-line-clamp: none !important; /* Remove line clamp in expanded state */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important; /* Allow wrapping */
}

/* Expanded study card body - larger font size */
#studies-tab-pane .cards-grid > .mobile-expanded .card-body,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body {
    font-size: 1.2rem !important; /* Larger base font size for better readability when expanded */
    padding: 1.25em 1.5em !important; /* Larger padding in expanded state */
}

/* Expanded study card body text elements - larger font size */
/* CRITICAL: Override inline styles with higher specificity */
#studies-tab-pane .cards-grid > .mobile-expanded .card-body > div[style*="flex-direction: column"] > span,
#studies-tab-pane .cards-grid > .mobile-expanded .card-body > div > span,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div[style*="flex-direction: column"] > span,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div > span {
    font-size: 1.05rem !important; /* Larger than normal state - use rem instead of vw, override inline styles */
    line-height: 1.6 !important;
}

/* Expanded study status badge - larger font size */
#studies-tab-pane .cards-grid > .mobile-expanded .status-badge,
#studies-tab-pane .cards-grid > .mobile-expanded .unified-card .status-badge {
    font-size: 0.85rem !important; /* Larger than normal state - use rem instead of vw */
    padding: 0.4em 0.6em !important; /* Proportional padding */
    top: 0.75em !important;
    left: 0.75em !important;
    max-width: none !important; /* Remove max-width constraint in expanded state */
}

/* Mobile Card Menu Button - Position in top-right of image */
/* CRITICAL: Button is positioned relative to .position-relative container (image wrapper) */
/* CRITICAL: Applies to all card types: studies, publications, posts, reviews */
.mobile-card-menu-button {
    position: absolute !important;
    top: 12px !important; /* Margin from top to avoid edge cutoff */
    right: 16px !important; /* More margin from right to avoid edge cutoff */
    z-index: 1000 !important;
    width: 24px !important; /* 2/3 of 36px = 24px */
    height: 24px !important; /* 2/3 of 36px = 24px */
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease, transform 0.2s ease !important;
    color: #333 !important;
    font-size: 12px !important; /* Proportional to button size */
    opacity: 0 !important; /* Hidden by default using opacity for smooth transition */
    pointer-events: none !important; /* Disabled by default */
    visibility: hidden !important; /* Hidden by default */
}

/* CRITICAL: Override inline styles when card is expanded - highest specificity */
.mobile-expanded .mobile-card-menu-button,
.mobile-expanded > .mobile-card-menu-button,
.cards-grid .mobile-expanded .mobile-card-menu-button,
.cards-grid .mobile-expanded > .mobile-card-menu-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Show menu button only when card is expanded - applies to all card types */
/* CRITICAL: Match JavaScript mobile detection (max-width: 768px) */
@media (max-width: 768px) {
    .mobile-expanded .mobile-card-menu-button,
    .cards-grid .mobile-expanded .mobile-card-menu-button,
    #studies-tab-pane .mobile-expanded .mobile-card-menu-button,
    #studies-tab-pane .mobile-expanded .unified-card .mobile-card-menu-button,
    #studies-tab-pane .mobile-expanded .study-card .mobile-card-menu-button,
    #studies-tab-pane .cards-grid .mobile-expanded .mobile-card-menu-button,
    #studies-tab-pane .cards-grid .mobile-expanded .unified-card .mobile-card-menu-button,
    #studies-tab-pane .cards-grid .mobile-expanded .study-card .mobile-card-menu-button,
    #reviews-tab-pane .mobile-expanded .mobile-card-menu-button,
    #reviews-tab-pane .mobile-expanded .review-card .mobile-card-menu-button,
    #reviews-tab-pane .mobile-expanded .new-review-card .mobile-card-menu-button,
    #reviews-tab-pane .cards-grid .mobile-expanded .mobile-card-menu-button,
    #reviews-tab-pane .cards-grid .mobile-expanded .review-card .mobile-card-menu-button,
    #reviews-tab-pane .cards-grid .mobile-expanded .new-review-card .mobile-card-menu-button {
        display: flex !important; /* Ensure display is set */
        opacity: 1 !important; /* Make visible */
        pointer-events: auto !important; /* Enable interaction */
        visibility: visible !important; /* Ensure visibility */
    }
}

/* Hover state for menu button */
.mobile-card-menu-button:hover,
.mobile-card-menu-button:active {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.08) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS - Study Card Additional Info
   Hide additional study information (publisher, pages, translator) on mobile
   Show when card is expanded (mobile-expanded class)
   ========================================================================== */

/* Hide additional study info on mobile and tablet screens (max-width: 768px) */
/* This applies to both Profile and Explore study cards */
@media (max-width: 768px) {
    /* Profile study cards */
    #studies-tab-pane .unified-card .card-body .study-additional-info,
    #studies-tab-pane .study-card .card-body .study-additional-info {
        display: none !important;
    }
    
    /* Explore study cards */
    #exploreFeed .unified-card[data-type="study"] .card-body .study-additional-info,
    #exploreFeed .explore-card-wrapper .unified-card[data-type="study"] .card-body .study-additional-info {
        display: none !important;
    }
    
    /* CRITICAL: Show study-additional-info when card is expanded on mobile */
    /* Profile study cards - expanded state */
    #studies-tab-pane .unified-card.mobile-expanded .card-body .study-additional-info,
    #studies-tab-pane .study-card.mobile-expanded .card-body .study-additional-info,
    #studies-tab-pane .cards-grid .unified-card.mobile-expanded .card-body .study-additional-info,
    #studies-tab-pane .cards-grid > .mobile-expanded .card-body .study-additional-info,
    #studies-tab-pane .cards-grid > .mobile-expanded.unified-card .card-body .study-additional-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3em !important;
        margin-top: 0.5em !important;
    }
    
    /* Explore study cards - expanded state */
    #exploreFeed .unified-card[data-type="study"].mobile-expanded .card-body .study-additional-info,
    #exploreFeed .explore-card-wrapper .unified-card[data-type="study"].mobile-expanded .card-body .study-additional-info,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="study"] .card-body .study-additional-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3em !important;
        margin-top: 0.5em !important;
    }
    
    /* Enhanced readability for expanded study additional info */
    .mobile-expanded .card-body .study-additional-info p,
    .mobile-expanded .card-body .study-additional-info span {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: #495057 !important;
        margin-bottom: 0.25em !important;
    }
    
    .mobile-expanded .card-body .study-additional-info i {
        color: #6c757d !important;
        margin-right: 0.4em !important;
    }
}