/* Filter bar styling */
#gridFilterButtons {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

#gridFilterButtons .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
}

#gridFilterButtons .btn {
    flex-shrink: 0;
}

/* Search box styling */
#gridSearchRow input {
    width: 100%;
}

@media (max-width: 768px) {
    #gridSearchRow {
        max-width: 100% !important;
    }
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
    /* Breathing room when changePage() jumps the viewport back to the first row */
    scroll-margin-top: 1rem;
}

/* Large cards: roughly 15% wider than standard.
   Columns are whole numbers, so raising the floor alone drops a column and the
   cards absorb every pixel it freed -- around +38% at tablet widths, far past
   "a bit bigger". Capping the track at 190px instead lets the leftover become
   margin, which holds the increase near 15% from 992px up (+13%/+15%/+15%) and
   caps the worst case at +22%. Below ~500px the floor still fits two columns,
   so phones are left alone. */
.file-grid.cards-lg {
    grid-template-columns: repeat(auto-fill, minmax(173px, 190px));
    justify-content: center;
}

.grid-item {
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Make comic files visually distinct */
.grid-item.file.has-comic {
    cursor: pointer;
}

.grid-item.file.has-comic:hover .thumbnail {
    opacity: 0.8;
}

.grid-item:hover {
    transform: translateY(-5px);
    z-index: 10;
    /* Bring hovered item to front */
}

/* Ensure dropdown is above everything */
.item-actions .dropdown-menu {
    z-index: 1050;
    /* Bootstrap default is 1000, go higher */
}

/* Ensure dropdown toggle button icon is always visible across all themes */
.item-actions .btn-link {
    color: #6c757d;
    /* Neutral gray that works on most backgrounds */
}

.item-actions .btn-link:hover {
    color: #495057;
    /* Slightly darker on hover */
}

.item-actions .btn-link i {
    color: inherit;
}

/* Make dropdown item hover more visible */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #0d6efd;
    /* Primary color */
    color: white;
}

.thumbnail-container {
    position: relative;
    width: 100%;
    /* height: 248px; */
    aspect-ratio: 2/3;
    /* background-color: #f8f9fa; */
    border-radius: 8px;
    overflow: clip;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    contain: layout;
}

.thumbnail {
    object-fit: cover;
    transition: opacity 0.3s;
}

/* Every card's art fills its frame, whatever the source pixel dimensions.
   Without width/height the <img> is a flex item sized from its intrinsic size --
   and min-width:auto forbids it shrinking -- so a 200x300 folder.png overflows
   and is centre-cropped while a 167x250 one sits inside the frame at 1:1. Same
   2:3 art, two apparent sizes. Sizing from the container makes the source
   dimensions irrelevant: comic covers, both generated folder variants, and
   user-supplied folder.png/jpg/gif/webp of any size in any folder. */
.grid-item .thumbnail {
    width: 100%;
    height: 100%;
}

.icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 0;
    /* Hidden by default for files with thumbnails */
}

.grid-item.folder .icon-overlay {
    opacity: 1;
    background-color: #e9ecef;
}

.grid-item.folder .thumbnail {
    display: none;
}

.grid-item.folder .icon-overlay i {
    font-size: 3rem;
    color: #ffc107;
    /* Folder color */
}

.item-info {
    margin-top: 0.5rem;
}

.item-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.item-name-tooltip .tooltip-inner {
    max-width: 300px;
    text-align: center;
}

.item-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Metadata loading state for progressive loading */
.item-meta.metadata-loading {
    color: #999;
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

.item-meta.metadata-error {
    opacity: 0.6;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Dark mode support if base.html supports it (assuming standard bootstrap dark mode or custom class) */
[data-bs-theme="dark"] .item-name {
    color: #e9ecef;
}

[data-bs-theme="dark"] .thumbnail-container {
    background-color: #2b3035;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .grid-item.folder .icon-overlay {
    background-color: #343a40;
}

/* Drag and drop styles */
.grid-item.drag-over {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3);
    border: 2px solid #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

.grid-item.folder.drag-over::after {
    content: '📁 Drop files here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(13, 110, 253, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 10;
}

[data-bs-theme="dark"] .grid-item.drag-over {
    border-color: #4dabf7;
    background-color: rgba(77, 171, 247, 0.1);
    box-shadow: 0 8px 16px rgba(77, 171, 247, 0.3);
}

/* Loading more indicator for progressive loading */
#loading-more-indicator {
    position: sticky;
    bottom: 20px;
    z-index: 100;
    margin: 1rem auto;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

#loading-more-indicator.fade-out {
    animation: fadeOut 0.3s ease-out;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ---- Sticky pagination bar (Browse Library) ----
   #pagination-controls is the last in-flow child of the tall #library-section, so a
   bottom-sticky nav pins itself to the viewport for exactly as long as there is grid
   left to scroll, then lands inline at the true bottom. No JS drives the position —
   the .is-floating class below is purely cosmetic (see initPaginationStickyObserver). */
body {
    --clu-bulkbar-h: 0px;
}

/* The bulk action bar is position:fixed with nothing reserving its space, so it used
   to cover the pager and the last grid row. Reserve its measured height instead. */
body.collection-select-mode {
    padding-bottom: var(--clu-bulkbar-h, 0px);
}

#pagination-controls {
    position: sticky;
    bottom: var(--clu-bulkbar-h, 0px);
    /* Above .grid-item:hover (10); below .collection-bulk-action-bar (1050) and modals */
    z-index: 1020;
    padding: 0.5rem 0;
}

/* The pager reads as a raised control surface rather than a patch of page.
   Both the fill and the edge are mixed from the theme's own body colour and
   background, which is the one pair every Bootswatch theme guarantees to be
   high-contrast. Deriving them beats using --bs-tertiary-bg / --bs-border-color
   directly, which several themes leave all but identical to --bs-body-bg
   (cyborg 1.01:1, simplex 1.03:1; borders on cyborg, minty and pulse).
   The plain declarations come first as the pre-color-mix() fallback. */
#pagination-controls .collection-pager-inner {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
    background: color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-color: color-mix(in srgb, var(--bs-body-color) 26%, var(--bs-body-bg));
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Detached state — add lift on top of the surface while the bar is pinned.
   The inset highlight is what reads as "raised" on dark themes, where a black
   drop shadow has almost nothing to darken. */
#pagination-controls.is-floating .collection-pager-inner {
    border-color: color-mix(in srgb, var(--bs-body-color) 34%, var(--bs-body-bg));
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: slideUp 0.3s ease-out;
}

#pagination-controls .pager-perpage {
    width: auto;
}

/* Full body colour, not --bs-secondary-color: any mix toward the background can
   only lose contrast, and several themes (minty, morph, quartz, spacelab) start
   muted enough that the result fell to 1.8-2.8:1. Hierarchy comes from the
   smaller type instead, and legibility then matches the theme's own body text. */
#pagination-controls .pager-readout {
    color: var(--bs-body-color);
}

/* Soft busy state for in-place page changes: the bar dims but never moves or vanishes */
#pagination-controls.is-busy {
    opacity: 0.65;
}

#pagination-controls.is-busy .page-link,
#pagination-controls.is-busy #itemsPerPageFloating {
    pointer-events: none;
}

.file-grid.grid-busy {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

#pagination-sentinel {
    width: 100%;
    height: 1px;
    margin: 0;
}

@media (pointer: coarse) {
    #pagination-controls .page-link {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    #pagination-controls .collection-pager-inner {
        padding: 0.4rem 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    #pagination-controls .collection-pager-inner,
    #pagination-controls.is-floating .collection-pager-inner {
        animation: none;
        transition: none;
    }
}

@supports not (position: sticky) {
    #pagination-controls {
        /* Degrade to the previous inline-only behaviour */
        position: static;
    }
}

/* Info Button Styling */
.thumbnail-container {
    position: relative;
}

.info-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    z-index: 10;
}

.info-button i {
    color: white;
    font-size: 16px;
}

.thumbnail-container:hover .info-button {
    opacity: 1;
}

.info-button:hover {
    background: rgba(0, 0, 0, 0.9);
}

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

/* Text File Viewer Modal Styling */
.text-file-content {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 70vh;
    overflow-y: auto;
}

.text-file-content pre {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* Favorite Button Styling */
.favorite-button {
    position: absolute;
    top: 10px;
    left: 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: 10;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.favorite-button i {
    color: white;
    font-size: 16px;
}

.thumbnail-container:hover .favorite-button,
.dashboard-card-img-container:hover .favorite-button {
    opacity: 1;
}

.favorite-button:hover {
    background: rgba(0, 0, 0, 0.9);
}

.favorite-button.favorited {
    opacity: 1;
    background: rgba(255, 193, 7, 0.9);
}

.favorite-button.favorited i {
    color: #212529;
}

.favorite-button.favorited:hover {
    background: rgba(255, 193, 7, 1);
}

/* To Read Button Styling */
.to-read-button {
    position: absolute;
    top: 10px;
    left: 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: 10;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

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

.thumbnail-container:hover .to-read-button,
.dashboard-card-img-container:hover .to-read-button {
    opacity: 1;
}

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

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

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

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

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

/* Mark Unread Button Styling (for Continue Reading cards) */
.mark-unread-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.8);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.mark-unread-btn i {
    color: white;
    font-size: 14px;
}

.dashboard-card-img-container:hover .mark-unread-btn {
    opacity: 1;
}

.mark-unread-btn:hover {
    background: rgba(220, 53, 69, 1);
}

.mark-unread-btn:focus {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Missing ComicInfo.xml Badge Styling */
.xml-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(220, 53, 69, 0.85);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
}

/* Issue Number Badge Styling */
.issue-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgb(253 200 63 / 85%);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
    border: black;
    border-style: solid;
    border-width: thin;
}

.issue-badge .read-icon {
    margin-left: 4px;
    font-size: 0.65rem;
}

/* Dashboard Section Styles */
.dashboard-section {
    position: relative;
}

.dashboard-swiper {
    padding: 10px 5px 30px 5px;
    /* Bottom padding for pagination/scrollbar if needed */
    overflow: hidden;
}

.dashboard-swiper .swiper-slide {
    width: 165px;
}

.dashboard-card {
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

.dashboard-card-img-container {
    position: relative;
    width: 100%;
    height: 247px;
    aspect-ratio: auto;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout;
}

.dashboard-card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Dashboard cards with folder thumbnails */
.dashboard-card.has-thumbnail .dashboard-card-img-container {
    /* overflow: visible; */
    background-color: transparent;
}

.dashboard-card .icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
}

.dashboard-card .icon-overlay i {
    font-size: 3rem;
    color: #ffc107;
}

.dashboard-card.has-thumbnail .icon-overlay {
    display: none;
}

.dashboard-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.dashboard-card:hover .dashboard-card-overlay {
    opacity: 1;
}

.dashboard-card-overlay i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dashboard-card-body h6 {
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Swiper Navigation Customization */
.dashboard-swiper .swiper-button-next,
.dashboard-swiper .swiper-button-prev {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #333;
}

.dashboard-swiper .swiper-button-next:after,
.dashboard-swiper .swiper-button-prev:after {
    font-size: 14px;
    font-weight: bold;
}

.dashboard-swiper .swiper-button-disabled {
    opacity: 0;
    cursor: default;
}

[data-bs-theme="dark"] .dashboard-card-img-container {
    background-color: #2b3035;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .dashboard-card .icon-overlay {
    background-color: #343a40;
}

[data-bs-theme="dark"] .dashboard-swiper .swiper-button-next,
[data-bs-theme="dark"] .dashboard-swiper .swiper-button-prev {
    background-color: rgba(40, 40, 40, 0.9);
    color: #fff;
}

/* =============================================================================
   Drag-Drop Upload Zone for Edit Modal
   ============================================================================= */

#editCBZModal .modal-body.drag-over {
    background-color: rgba(33, 150, 243, 0.1);
    border: 2px dashed #2196f3;
    transition: all 0.2s ease;
}

#editCBZModal .modal-body.drag-over::after {
    content: "Drop files to add";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(33, 150, 243, 0.9);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 9999;
    pointer-events: none;
}

/* CBZ Preview image info display */
.cbz-image-info {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    text-align: center;
}

/* Multi-Select & Bulk Action Bar */

.grid-item.file.bulk-selected .thumbnail-container {
    outline: 3px solid #0d6efd;
    outline-offset: -3px;
    border-radius: 8px;
}

.grid-item.file.bulk-selected .thumbnail-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 110, 253, 0.15);
    pointer-events: none;
    z-index: 5;
    border-radius: 8px;
}

[data-bs-theme="dark"] .grid-item.file.bulk-selected .thumbnail-container {
    outline-color: #4dabf7;
}

[data-bs-theme="dark"] .grid-item.file.bulk-selected .thumbnail-container::after {
    background-color: rgba(77, 171, 247, 0.15);
}

/* Selection checkbox circle overlay (top-left of thumbnail) */
.selection-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: rgba(13, 110, 253, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.selection-checkbox i {
    color: white;
    font-size: 14px;
}

.grid-item.file.bulk-selected .selection-checkbox {
    opacity: 1;
}

/* Show checkbox on hover when selection mode active */
.file-grid.selection-active .grid-item.file:hover .selection-checkbox {
    opacity: 0.6;
}

.file-grid.selection-active .grid-item.file.bulk-selected:hover .selection-checkbox {
    opacity: 1;
}

/* Multi-Select mode: always show checkbox indicator on file cards */
body.collection-select-mode .grid-item.file .selection-checkbox {
    opacity: 0.6;
}

body.collection-select-mode .grid-item.file.bulk-selected .selection-checkbox {
    opacity: 1;
}

body.collection-select-mode .grid-item.file {
    cursor: pointer;
}

/* Active state for the Multi-Select toggle button */
#toggleCollectionSelectModeBtn.active {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.35);
}

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

/* Hide favorite/to-read button when selection checkbox is visible */
.grid-item.file.bulk-selected .favorite-button,
.grid-item.file.bulk-selected .to-read-button {
    opacity: 0 !important;
}

/* Bulk action bar (fixed bottom, same pattern as series.html) */
.collection-bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 12px 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    animation: collectionSlideUpBar 0.2s ease-out;
}

@keyframes collectionSlideUpBar {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* Selection hint (below breadcrumb) */
.selection-hint {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.selection-hint i {
    font-size: 0.72rem;
}