/* Styles for all dropzones */
.dropzone.dropzone-container {
    position: relative;
    z-index: 10;
    border: 2px dashed #ccc;
    padding: 20px;
    background: #f8f9fa;
}

    .dropzone.dropzone-container.drop-active {
        background-color: rgba(0, 255, 0, 0.5);
    }

    .dropzone.dropzone-container.drop-target {
        background-color: rgba(255, 255, 0, 0.5);
    }

.dropzone {
    position: relative;
    min-height: 80px; /* already present - good */
}

/* make sure inside cards are not using bottom margins and are absolute by default */
.draggable-card.inside-dropzone {
    margin: 0;
    /* JS will set absolute/top/left; this keeps a sensible baseline */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Styles for the draggable cards */
.draggable-card {
    cursor: grab;
    will-change: transform;
    margin-bottom: 10px;
    touch-action: none;
    transition: none; /* Remove scaling lag */
    pointer-events: auto;
}

    .draggable-card:active {
        background-color: #e0e0e0;
    }

    .draggable-card.hidden {
        visibility: hidden;
    }

.dragging-clone {
    z-index: 1000;
    cursor: grabbing;
}

.remove-btn {
    display: inline-block;
    cursor: pointer;
    padding: 5px; /* Add padding for easier tapping */
    margin: 3px;
}

.pagination-controls {
    display: flex;
    justify-content: flex-end; /* Moves pagination to the right */
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-right: 1.5rem;
    background: none; /* Removes gray background */
}

    .pagination-controls button {
        padding: 0.4rem 1rem;
        border: none;
        border-radius: 2rem; /* Rounded buttons */
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

        /* Keep the original pink color */
        .pagination-controls button:not(:disabled) {
            background-color: #D45362; /* Same pink */
            color: white;
        }

        .pagination-controls button:hover {
            background-color: #ff7b8a;
        }

        .pagination-controls button:disabled {
            background-color: #ddd;
            cursor: not-allowed;
            opacity: 0.6;
        }

    .pagination-controls span {
        font-size: 0.9rem;
        color: #555;
    }