/* Reading Lists Premium Redesign */

:root {
    --card-height: 400px;
    --card-border-radius: 16px;
    --card-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --hover-scale: 1.02;
    --overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.reading-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.reading-list-card {
    position: relative;
    height: var(--card-height);
    border-radius: var(--card-border-radius);
    background-color: var(--bs-card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: var(--card-transition), z-index 0s;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.card-stack-container {
    position: relative;
    flex: 1;
    min-height: 0;
}

.reading-list-card:hover {
    transform: translateY(-10px) scale(var(--hover-scale));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: var(--bs-primary);
    z-index: 100;
    /* Bring to front on hover */
    overflow: visible;
}

/* Ensure content stays clipped to border-radius for the main container if needed, 
   but since we want images to pop out, we rely on the image border radius if any. 
   Actually, let's keep overflow hidden for the rounded corners on the static state 
   but allow popout for the stack items.
   
   Better approach: Keep card overflow visible, but use a wrapper for the background/content 
   that mimics the card shape? 
   
   Let's try simpler: reading-list-card allows visible overflow. 
   We add border-radius to the stack items themselves.
*/

.card-stack-item {
    position: absolute;
    top: 3%;
    left: 18%;
    width: 65%;
    height: 90%;
    background-size: cover;
    /* background-position: center; */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center bottom;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
    /* border-radius: var(--card-border-radius); */
    /* Add radius to items */
}

/* Stacking Order */
.card-stack-item:nth-child(1) {
    z-index: 5;
}

.card-stack-item:nth-child(2) {
    z-index: 4;
    transform: scale(0.98) translateY(5px);
    opacity: 0;
}

.card-stack-item:nth-child(3) {
    z-index: 3;
    transform: scale(0.96) translateY(10px);
    opacity: 0;
}

.card-stack-item:nth-child(4) {
    z-index: 2;
    transform: scale(0.94) translateY(15px);
    opacity: 0;
}

.card-stack-item:nth-child(5) {
    z-index: 1;
    transform: scale(0.92) translateY(20px);
    opacity: 0;
}

/* Reveal stack items on hover/init if present */
.reading-list-card .card-stack-item {
    opacity: 1;
    /* Show all items underneath initially but hidden by stacking */
}

/* Fan Effect on Hover */
.reading-list-card:hover .card-stack-item:nth-child(1) {
    transform: translateY(-40px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.reading-list-card:hover .card-stack-item:nth-child(2) {
    transform: translateY(-20px) rotate(-5deg) translateX(-15px) scale(0.98);
    opacity: 1;
}

.reading-list-card:hover .card-stack-item:nth-child(3) {
    transform: translateY(-20px) rotate(5deg) translateX(15px) scale(0.98);
    opacity: 1;
}

.reading-list-card:hover .card-stack-item:nth-child(4) {
    transform: translateY(-10px) rotate(-10deg) translateX(-30px) scale(0.95);
    opacity: 0.8;
}

.reading-list-card:hover .card-stack-item:nth-child(5) {
    transform: translateY(-10px) rotate(10deg) translateX(30px) scale(0.95);
    opacity: 0.8;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--overlay-gradient); */
    z-index: 2;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.reading-list-card:hover .card-overlay {
    opacity: 0.9;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.2) 100%); */
}

/* Content Area */
.card-content {
    padding: 1rem 1.25rem;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 100%); */
    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
    flex-shrink: 0;
}

.card-title-lg {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.card-meta {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.reading-list-card:hover .card-actions {
    opacity: 1;
    max-height: 50px;
    margin-top: 0.5rem;
}

/* Empty State / Fallback */
.no-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bs-gray-700) 0%, var(--bs-gray-900) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-load {
    animation: slideUpFade 0.5s ease backwards;
}

.stagger-load:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-load:nth-child(2) {
    animation-delay: 0.2s;
}

.stagger-load:nth-child(3) {
    animation-delay: 0.3s;
}

.stagger-load:nth-child(4) {
    animation-delay: 0.4s;
}

.stagger-load:nth-child(5) {
    animation-delay: 0.5s;
}

.stagger-load:nth-child(6) {
    animation-delay: 0.6s;
}

/* Modal Improvements */
.modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Tag Badges on Cards
   The card has a fixed height, so the tag row never wraps: it takes the
   space the counter leaves, and fitCardTags() (reading_list.js) folds what
   does not fit into a "+N" chip. */
.card-meta {
    min-width: 0;
}

.card-count {
    flex-shrink: 0;
    white-space: nowrap;
}

.card-tags {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.25rem;
    overflow: hidden;
}

.tag-badge {
    display: inline-block;
    flex-shrink: 0;
    max-width: 100%;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    /* Theme-aware: the old white-at-20% vanished on light themes */
    background: rgba(var(--bs-emphasis-color-rgb), 0.08);
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.12);
    font-size: 0.7rem;
    line-height: 1.4;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Last resort, set by fitCardTags() once every other tag is hidden: the
   first tag shrinks to an ellipsis rather than leave the row empty. Never
   unconditional -- the browser would squeeze it before any tag got hidden. */
.card-tags .tag-badge.tag-squeeze {
    flex-shrink: 1;
    min-width: 2.5rem;
}

.tag-badge[hidden] {
    display: none;
}

.tag-badge.tag-more {
    font-weight: 600;
    cursor: help;
}

/* Special colors for known tags */
.tag-badge[data-tag="Marvel"] {
    background: #e23636;
    border-color: transparent;
    color: white;
}

.tag-badge[data-tag="DC"] {
    background: #0476f2;
    border-color: transparent;
    color: white;
}

.tag-badge[data-tag="Event"] {
    background: #ffc107;
    border-color: transparent;
    color: #000;
}

.tag-badge[data-tag="Complete"] {
    background: #28a745;
    border-color: transparent;
    color: white;
}

.tag-badge[data-tag="Crossover"] {
    background: #6f42c1;
    border-color: transparent;
    color: white;
}

.tag-badge[data-tag="Reading Order"] {
    background: #17a2b8;
    border-color: transparent;
    color: white;
}

/* Tag Pills in Modal */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--bs-primary);
    color: white;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.tag-pill .remove-tag {
    cursor: pointer;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
}

.tag-pill .remove-tag:hover {
    opacity: 1;
}

/* Editable Title Cursor */
.card-title-lg {
    cursor: text;
}

.card-title-lg:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Progress Bar */
.progress-bar-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Progress colors based on completion */
.progress-bar-fill.progress-low {
    background: linear-gradient(90deg, #dc3545, #e85d6b);
}

.progress-bar-fill.progress-medium {
    background: linear-gradient(90deg, #fd7e14, #ffc107);
}

.progress-bar-fill.progress-high {
    background: linear-gradient(90deg, #20c997, #28a745);
}

.progress-bar-fill.progress-complete {
    background: linear-gradient(90deg, #28a745, #20c997);
}

/* Completion Badge */
/* Want to Read Bookmark Toggle
   Mirrors .to-read-button on the collection grid (static/css/collection.css):
   hidden until hover, always visible once marked. Duplicated rather than
   linking collection.css here, which would pull the whole file-grid stylesheet
   into this page. */
.want-to-read-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.want-to-read-button i {
    color: white;
    font-size: 16px;
}

.reading-list-card:hover .want-to-read-button,
.want-to-read-button:focus {
    opacity: 1;
}

.want-to-read-button:hover {
    background: rgba(0, 0, 0, 0.9);
}

.want-to-read-button:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.want-to-read-button.marked {
    opacity: 1;
    background: rgba(255, 193, 7, 0.9);
}

.want-to-read-button.marked i {
    color: #212529;
}

.want-to-read-button.marked:hover {
    background: rgba(255, 193, 7, 1);
}

/* Shifted left of the bookmark toggle, which occupies the top-right corner. */
.completion-badge {
    position: absolute;
    top: 10px;
    right: 48px;
    background: #28a745;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* ==========================================================================
   Bulk Select Mode
   ========================================================================== */

.card-select-checkbox {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.card-select-checkbox .form-check-input {
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

body.reading-list-select-mode .card-select-checkbox {
    display: block;
}

body.reading-list-select-mode .reading-list-card {
    cursor: pointer;
}

.reading-list-card.selected {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

#toggleSelectModeBtn.active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.35);
}

#toggleSelectModeBtn.active:hover {
    background-color: #5c636a;
    border-color: #565e64;
    color: #fff;
}

.reading-list-bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #1a1d21 0%, #0d0f12 100%);
    border-top: 3px solid var(--bs-primary, #0d6efd);
    padding: 14px 0;
    z-index: 1040;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55), 0 -2px 0 rgba(13, 110, 253, 0.45);
    color: #fff;
    animation: bulkBarSlideIn 0.28s ease-out, bulkBarPulse 1.6s ease-in-out 0.28s 2;
}

@keyframes bulkBarSlideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes bulkBarPulse {
    0%, 100% { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55), 0 -2px 0 rgba(13, 110, 253, 0.45); }
    50% { box-shadow: 0 -8px 32px rgba(13, 110, 253, 0.6), 0 -2px 0 rgba(13, 110, 253, 1); }
}

/* Force readable text on the dark bar, regardless of Bootswatch theme. */
.reading-list-bulk-action-bar .btn-outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.75);
    background-color: transparent;
}

.reading-list-bulk-action-bar .btn-outline-light:hover,
.reading-list-bulk-action-bar .btn-outline-light:focus {
    color: #1a1d21 !important;
    background-color: #fff;
    border-color: #fff;
}

.reading-list-bulk-action-bar #readingListBulkCount {
    color: #fff;
    font-size: 1.05rem;
}