/**
 * Selectable Items Toolbar Styles
 * Generic styles for multi-select mode on any list
 */

/* Checkbox container positioning */
.selection-checkbox-container {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    display: none;
}

.item-selection-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.item-selection-checkbox:checked {
    background-color: var(--bs-primary);
    border: 2px solid var(--bs-primary);
}

/* Selection mode active state */
body.selection-mode-active .selection-checkbox-container {
    display: block !important;
}

/* Change cursor in selection mode - entire item is clickable */
body.selection-mode-active .file-item,
body.selection-mode-active [data-file-id],
body.selection-mode-active [data-folder-id] {
    cursor: pointer !important;
}

/* Highlight selected items - use border on inner elements */
body.selection-mode-active .file-item:has(.item-selection-checkbox:checked),
body.selection-mode-active [data-file-id]:has(.item-selection-checkbox:checked),
body.selection-mode-active [data-folder-id]:has(.item-selection-checkbox:checked) {
    position: relative;
    z-index: 5;
}

/* Grid/Masonry/Card layouts: Apply border to the card element */
body.selection-mode-active .file-card-wrapper:has(.item-selection-checkbox:checked) .file-card,
body.selection-mode-active .folder-card-wrapper:has(.item-selection-checkbox:checked) .folder-card {
    border: 4px solid var(--bs-primary) !important;
}

/* Justified layout: Apply border to the image itself */
body.selection-mode-active .file-item:not(.file-card-wrapper):has(.item-selection-checkbox:checked) img {
    border: 4px solid var(--bs-primary) !important;
    box-sizing: border-box;
}

/* List view selected highlight */
body.selection-mode-active .list-group-item:has(.item-selection-checkbox:checked) {
    border: 4px solid var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Selection toolbar - sticky positioning */
[id^="selectable-items-toolbar-"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px !important; /* Below navbar with small gap */
    z-index: 1040 !important; /* Below navbar (1080) and dropdown menus (1070) */
    background: var(--bs-body-bg) !important;
    transition: opacity 0.15s ease-in-out;
}

/* Hide toolbar when navbar dropdown is open - uses class added by JS */
body.navbar-dropdown-open [id^="selectable-items-toolbar-"] {
    opacity: 0;
    pointer-events: none;
}

.selection-count {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Ensure context menu stays above checkbox */
.context-menu-container {
    z-index: 30;
}

/* Context menu can coexist with selection mode since clicking it won't toggle checkbox */

/* Adjust for list view - checkbox positioned in top left corner */
body.selection-mode-active .list-group-item .selection-checkbox-container {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Card wrapper positioning */
.file-card-wrapper,
.folder-card-wrapper {
    position: relative;
}

/* Animation for checkbox appearance */
.selection-checkbox-container {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [id^="selectable-items-toolbar-"] .btn-group {
        flex-wrap: wrap;
    }

    [id^="selectable-items-toolbar-"] .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .selection-actions {
        flex-wrap: wrap !important;
    }
}

/* Ensure selection actions are properly aligned */
.selection-actions {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Show selection actions when display is set to flex by JavaScript */
.selection-actions[style*="display: flex"] {
    display: flex !important;
}

/* Hide selection actions when display is set to none by JavaScript */
.selection-actions[style*="display: none"] {
    display: none !important;
}