.cbz-preview-container {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.5rem;
        background-color: #f8f9fa;
        margin-top: 0.5rem;
    }

    .cbz-preview-container img {
        border-radius: 0.25rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .cbz-metadata {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .list-group-item:hover .cbz-preview-container {
        border-color: #adb5bd;
    }

    /* Smooth removal animation for deleted items */
    .list-group-item {
        transition: all 0.2s ease-out;
    }

    .list-group-item.deleting {
        opacity: 0;
        transform: translateX(-20px);
        pointer-events: none;
    }

    .drop-target-item {
        opacity: 0.6;
        font-style: italic;
        transition: opacity 0.3s ease;
    }

    .drop-target-item:hover {
        opacity: 1;
    }

    .grid-filter-buttons {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }

    #destination-list,
    #source-list {
        /* 100vh is the full height of the screen.
           We subtract approx 485px to account for the header, buttons, and breadcrumbs above it. */
        height: calc(100vh - 485px);
        overflow-y: auto;
    }

    /* Drag and drop hover effects */
    .folder-hover {
        background-color: #e3f2fd !important;
        border-color: #2196f3 !important;
        transform: scale(1.02);
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
    }

    .hover {
        background-color: #f0f8ff !important;
        border: 2px dashed #2196f3 !important;
        transition: all 0.2s ease;
    }

    /* Selected file highlighting */
    .list-group-item.selected {
        background-color: #e3f2fd;
        border-color: #2196f3;
        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
        position: relative;
    }

    /* Enhanced cursor for selected files */
    .list-group-item.selected[draggable="true"] {
        cursor: grab;
    }

    .list-group-item.selected[draggable="true"]:active {
        cursor: grabbing;
    }

    /* Tooltip for selected files */
    .list-group-item.selected::after {
        content: attr(data-selection-hint);
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .list-group-item.selected:hover::after {
        opacity: 1;
    }

    /* Draggable items cursor */
    .draggable {
        cursor: grab;
    }

    .draggable:active {
        cursor: grabbing;
    }

    .dragging {
        opacity: 0.5;
        transform: rotate(2deg);
        transition: all 0.2s ease;
    }

    /* Drop target visual feedback */
    .drop-target {
        position: relative;
    }

    .drop-target.hover::before {
        content: "Drop files here";
        position: absolute;
        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;
        z-index: 1000;
        pointer-events: none;
    }

    /* Selection count badge */
    .selection-badge {
        position: fixed;
        top: 80px;
        right: 20px;
        background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
        z-index: 1040;
        display: none;
        align-items: center;
        gap: 8px;
        animation: slideInRight 0.3s ease;
        transition: all 0.3s ease;
    }

    .selection-badge.show {
        display: flex;
    }

    .selection-badge:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5);
    }

    .selection-badge .badge-icon {
        font-size: 1rem;
    }

    .selection-badge .badge-hint {
        font-size: 0.75rem;
        opacity: 0.9;
        margin-left: 4px;
        padding-left: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

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

    /* CBZ Page Preview Viewer */
    .cbz-page-nav {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    .cbz-page-btn {
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 0.75rem 0.5rem;
        cursor: pointer;
        font-size: 1.25rem;
        opacity: 0.7;
        transition: opacity 0.2s;
        border-radius: 4px;
    }

    .cbz-page-btn:hover {
        opacity: 1;
    }

    .cbz-page-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .cbz-page-counter {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.875rem;
    }

    #cbzPageViewer {
        min-height: 200px;
    }

    #cbzPreviewContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
    }