/* 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 */
.card-tags {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.7rem;
    color: inherit;
    white-space: nowrap;
}

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

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

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

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

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

.tag-badge[data-tag="Reading Order"] {
    background: #17a2b8;
    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 */
.completion-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    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;
}

/* Tag Filter Bar */
.tag-filter-bar {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-filter-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bs-primary);
}

.tag-filter-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Special colors for known tags when active */
.tag-filter-btn.active[data-tag="Marvel"] { background: #e23636; border-color: #e23636; }
.tag-filter-btn.active[data-tag="DC"] { background: #0476f2; border-color: #0476f2; }
.tag-filter-btn.active[data-tag="Event"] { background: #ffc107; border-color: #ffc107; color: #000; }
.tag-filter-btn.active[data-tag="Complete"] { background: #28a745; border-color: #28a745; }
.tag-filter-btn.active[data-tag="Crossover"] { background: #6f42c1; border-color: #6f42c1; }

/* Sort Bar */
.sort-bar {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sort-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bs-primary);
}

.sort-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* ==========================================================================
   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;
}
.tag-filter-btn.active[data-tag="Reading Order"] { background: #17a2b8; border-color: #17a2b8; }