/* Error styling */
.error_label {
    color: red;
}

/* Draggable elements */
.draggable-handle {
    cursor: grab;
}

/* Draggable idea cards */
.subDraggable {
    cursor: grab;
}

    .subDraggable:active {
        cursor: grabbing;
    }

    /* Override cursor for buttons inside idea cards */
    .subDraggable .kt-btn {
        cursor: pointer;
    }

    /* Override cursor for idea text to show text cursor */
    .subDraggable .ideaText {
        cursor: text;
    }

/* Zoom container styles - only zoom the draggable-zone */
.draggable-zone {
    transition: transform 0.3s ease;
    transform-origin: top left;
}

@media (min-width: 1280px) {
    /* Override Tailwind xl */
    #zoomContainer {
        grid-template-columns: minmax(200px, 280px) repeat(4, minmax(0, 1fr)) !important;
        row-gap: 0 !important;
    }

        /* Fallback row spacing before masonry JS activates */
        #zoomContainer > .draggable {
            margin-bottom: 1.875rem;
        }

            /* Pin Ideas card to column 1, spanning all rows */
            #zoomContainer > .draggable[data-text="Ideas"],
            #zoomContainer > #item-column-ideas {
                grid-column: 1 !important;
                grid-row: 1 / span 200;
                margin-bottom: 0;
            }

        /* ---- Masonry mode (activated by JS) ---- */
        #zoomContainer.masonry-active {
            grid-auto-rows: 10px !important;
            align-items: start !important;
        }

            /* Gap is baked into each item's row-span, so remove margin */
            #zoomContainer.masonry-active > .draggable {
                margin-bottom: 0;
            }
}

/* ---- Drag visual feedback ---- */
.sortable-ghost {
    opacity: 0.3;
}

.sortable-chosen {
    user-select: none;
    -webkit-user-select: none;
}

/* Prevent text selection */
.draggable-zone.is-dragging,
.draggable-zone.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

#boardWrapper {
    overflow: auto;
    position: relative;
    overflow-anchor: none;
}

#scrollable_content {
    overflow-anchor: none;
}

/* zoom controls */
#zoomControls {
    position: fixed;
    bottom: 28px;
    right: 62px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50;
}

    #zoomControls button {
        min-width: 36px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #zoomControls #zoomLevel {
        min-width: 50px;
        text-align: center;
        font-weight: 500;
        padding: 0 8px;
    }

/* Undo/Redo controls */
#undoRedoControls {
    position: fixed;
    bottom: 28px;
    left: 122px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 50;
}

    #undoRedoControls button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 30px;
        white-space: nowrap;
    }

        #undoRedoControls button:disabled {
            cursor: not-allowed;
        }

.subcategories {
    margin-left: 10px;
    min-height: 20px;
    margin-right: 10px;
    margin-bottom: 5px;
    border: 2px dashed transparent;
    border-radius: 6px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    .subcategories.nesting-pending {
        border-color: rgba(59, 130, 246, 0.4);
        background-color: rgba(59, 130, 246, 0.04);
        animation: nesting-pulse 0.6s ease-in-out infinite alternate;
    }

    .subcategories.nesting-ready {
        border-color: rgba(34, 197, 94, 0.6);
        background-color: rgba(34, 197, 94, 0.06);
    }

@keyframes nesting-pulse {
    from {
        border-color: rgba(59, 130, 246, 0.2);
    }

    to {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

/* Expand subcategory drop zones while a category is being dragged */
#zoomContainer.is-dragging-category .subcategories {
    min-height: 80px;
    border-color: rgba(148, 163, 184, 0.4);
    background-color: rgba(148, 163, 184, 0.04);
    padding: 8px;
}

    /* Hint label for empty subcategory zones */
    #zoomContainer.is-dragging-category .subcategories:not(:has(.category))::after {
        content: "Drop here to nest";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 60px;
        color: rgba(100, 116, 139, 0.5);
        font-size: 0.8rem;
        font-style: italic;
        pointer-events: none;
    }

.dIdea .kt-btn-destructive,
.draggable > .kt-card > .kt-card-header .kt-btn-destructive {
    all: unset;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    padding: 0.25rem;
    color: rgba(0, 0, 0, 0.35);
    transition: color 0.15s ease;
}

    .dIdea .kt-btn-destructive:hover,
    .draggable > .kt-card > .kt-card-header .kt-btn-destructive:hover {
        color: #ef4444;
    }