/* ============================================
   SERIES MODAL - SHARED COMPONENT
   Bulk edit modal for series entries
   ============================================ */

/* Wrapper floats to left of modal and positions toggle above sidebar */
#seriesModal .series-sidebar-wrapper {
    position: absolute;
    right: calc(100%);
    top: 0;
    width: 210px;
    overflow: visible;
}

/* Show sidebar for series modal - override list-modal.css absolute positioning */
#seriesModal .series-sidebar {
    position: relative;
    right: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Custom header for series sidebar with filter toggle - floats above sidebar */
.series-sidebar-header-custom {
    position: absolute;
    top: -32px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
}

.series-sidebar-header-custom .series-stats {
    font-size: 0.7rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 500;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Filter toggle (All / Main) */
.series-filter-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
}

.series-filter-btn {
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.series-filter-btn:hover {
    color: var(--text-primary, #fff);
}

.series-filter-btn.active {
    background: var(--primary, #8b5cf6);
    color: #fff;
}

/* Entries list in sidebar - wrapper for scroll */
#seriesModal .series-entries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    /* Max 7 entries visible by default */
    max-height: 602px;
    padding: 4px 4px 4px 12px;
    margin: -4px -4px -4px -12px;
    width: calc(100% + 16px);
    transition: max-height 0.2s ease;
}

/* Show 8 entries when score is selected (modal grows) */
#seriesModal.has-score .series-entries-list {
    max-height: 688px;
}

#seriesModal .series-entries-list::-webkit-scrollbar {
    width: 4px;
}

#seriesModal .series-entries-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Series entry card (matching list-modal series-entry) */
.series-entry-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-deep, #0e0d14);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: calc(100% - 8px); /* Leave space for hover effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    overflow: visible;
}

.series-entry-item:hover {
    background: var(--bg-card, #1a1a2e);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.series-entry-item.in-list {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.45);
}

.series-entry-item.changed {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
}

/* Excluded entry styling - blur content but keep border crisp */
.series-entry-item.excluded {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.35);
}

.series-entry-item.excluded .series-entry-cover,
.series-entry-item.excluded .series-entry-info {
    opacity: 0.35;
    filter: blur(1px) grayscale(0.5);
}

.series-entry-item.excluded:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.series-entry-item.excluded:hover .series-entry-cover,
.series-entry-item.excluded:hover .series-entry-info {
    opacity: 0.5;
    filter: blur(0.5px) grayscale(0.3);
}

/* Unreleased entry indicator */
.series-entry-item.unreleased {
    border-color: rgba(255, 193, 7, 0.3);
}

.series-entry-item.unreleased .series-entry-cover::after {
    content: 'UPCOMING';
    position: absolute;
    bottom: 2px;
    left: -4px;
    right: -4px;
    padding: 2px 0;
    background: rgba(255, 193, 7, 0.9);
    color: #000;
    font-size: 0.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* Exclude button */
.series-entry-exclude {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 5;
}

.series-entry-exclude svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255, 255, 255, 0.7);
}

.series-entry-item:hover .series-entry-exclude {
    opacity: 1;
}

.series-entry-exclude:hover {
    background: rgba(239, 68, 68, 0.8);
}

.series-entry-exclude:hover svg {
    stroke: #fff;
}

/* When excluded, show the + icon and make it always visible */
.series-entry-item.excluded .series-entry-exclude {
    opacity: 1;
    background: rgba(34, 197, 94, 0.6);
}

.series-entry-item.excluded .series-entry-exclude:hover {
    background: rgba(34, 197, 94, 0.9);
}

/* Cover with status dot */
.series-entry-cover {
    position: relative;
    width: 40px;
    height: 56px;
    flex-shrink: 0;
    overflow: visible;
}

.series-entry-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Status indicator dot */
.series-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-deep, #0e0d14);
}

.series-status-dot.status-watching { background: #60a5fa; }
.series-status-dot.status-completed { background: #4ade80; }
.series-status-dot.status-rewatching { background: #c084fc; }
.series-status-dot.status-plan { background: #a78bfa; }
.series-status-dot.status-paused { background: #fbbf24; }
.series-status-dot.status-dropped { background: #f87171; }

.series-entry-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.series-entry-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary, #fff);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.series-entry-meta {
    font-size: 0.65rem;
    color: var(--text-secondary, #9ca3af);
}

/* Score input coloring */
#seriesModal .score-input.has-score {
    color: var(--primary, #8b5cf6);
    font-weight: 700;
}

/* Series modal uses list-modal.css classes for controls/extras */
#seriesModal .modal-extras {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#seriesModal .modal-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================
   MOBILE RESPONSIVE - Series entries as horizontal strip
   ============================================ */
@media (max-width: 640px) {
    /* Make modal use flex column layout */
    #seriesModal .add-list-modal {
        display: flex;
        flex-direction: column;
    }

    /* Reposition sidebar wrapper - as first child, full width horizontal strip */
    #seriesModal .series-sidebar-wrapper {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        order: -1;
        padding: 8px 0 0;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        overflow: visible;
    }

    /* Header becomes inline with filter toggle */
    #seriesModal .series-sidebar-header-custom {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 8px;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    /* Filter toggle should not stretch vertically */
    #seriesModal .series-filter-toggle {
        align-self: center;
        height: auto;
    }

    #seriesModal .series-filter-btn {
        padding: 4px 10px;
        height: auto;
        line-height: 1;
    }

    #seriesModal .series-sidebar-header-custom .series-stats {
        align-self: center;
    }

    /* Override list-modal.css hiding - make sidebar visible */
    #seriesModal .series-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Entries list as horizontal scroll - NO BACKGROUND */
    #seriesModal .series-entries-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        max-height: none !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 8px 16px 16px;
        margin: 0;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #seriesModal .series-entries-list::-webkit-scrollbar {
        display: none;
    }

    /* Entry cards as compact horizontal items - no background, floating covers only */
    #seriesModal .series-entry-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: auto !important;
        padding: 4px !important;
        gap: 6px;
        text-align: center;
        scroll-snap-align: start;
        box-shadow: none !important;
        flex-shrink: 0;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #seriesModal .series-entry-item:hover {
        transform: translateY(-2px);
        background: none !important;
        background-color: transparent !important;
        border: none !important;
    }

    /* Highlight selected entry - use cover glow instead of card background */
    #seriesModal .series-entry-item.active {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #seriesModal .series-entry-item.active .series-entry-cover {
        box-shadow: 0 0 0 2px var(--primary, #8b5cf6), 0 4px 12px rgba(139, 92, 246, 0.4);
        border-radius: 6px;
    }

    /* In-list indicator - subtle glow on cover */
    #seriesModal .series-entry-item.in-list {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #seriesModal .series-entry-item.in-list .series-entry-cover {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
    }

    /* Changed state - no card background */
    #seriesModal .series-entry-item.changed {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #seriesModal .series-entry-item.changed .series-entry-cover {
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.6);
        border-radius: 6px;
    }

    /* Cover centered on mobile */
    #seriesModal .series-entry-cover {
        width: 48px !important;
        height: 68px !important;
        margin: 0 auto;
        flex-shrink: 0;
    }

    /* Compact info for mobile horizontal view */
    #seriesModal .series-entry-info {
        width: 100%;
        align-items: center;
        min-width: 0;
    }

    #seriesModal .series-entry-title {
        font-size: 0.6rem !important;
        white-space: normal !important;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.2;
    }

    #seriesModal .series-entry-meta {
        font-size: 0.55rem;
        text-align: center;
        display: none; /* Hide meta on mobile to save space */
    }

    /* Exclude button repositioned for mobile - square shape */
    #seriesModal .series-entry-exclude {
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        opacity: 1;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.7);
    }

    #seriesModal .series-entry-exclude svg {
        width: 10px;
        height: 10px;
    }

    #seriesModal .series-entry-item.excluded .series-entry-exclude {
        border-radius: 0 !important;
    }

    /* Status dot repositioned */
    #seriesModal .series-status-dot {
        bottom: -3px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Upcoming badge adjusted */
    #seriesModal .series-entry-item.unreleased .series-entry-cover::after {
        font-size: 0.45rem;
        padding: 1px 0;
        left: -2px;
        right: -2px;
    }

    /* Excluded entry on mobile - just use opacity */
    #seriesModal .series-entry-item.excluded {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #seriesModal .series-entry-item.excluded .series-entry-cover {
        opacity: 0.35;
        filter: grayscale(0.5);
    }

    #seriesModal .series-entry-item.excluded .series-entry-title {
        opacity: 0.35;
    }

    /* Modal main - no internal scroll */
    #seriesModal .modal-main {
        flex: 1;
        overflow: visible !important;
    }

    /* Hide Notes and Custom Lists on mobile */
    #seriesModal .modal-extras details {
        display: none !important;
    }

    /* Also hide the extras container if empty */
    #seriesModal .modal-extras {
        display: none !important;
    }

    /* Modal overlay fills screen and anchors to bottom */
    #seriesModal {
        padding: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    /* Modal sheet anchored to bottom with no gap */
    #seriesModal .add-list-modal {
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: none !important;
        height: auto !important;
        position: relative !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        overflow: visible !important;
    }

    /* Ensure save button has safe area padding */
    #seriesModal .modal-actions {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Hide floating nav when series modal is open - outside media query for all sizes */
#seriesModal.open ~ .floating-nav,
body:has(#seriesModal.open) .floating-nav,
body:has(#seriesModal[style*="display: flex"]) .floating-nav {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}