/* Style for selected cards */
.model-card.selected {
    outline: 2px solid var(--lora-accent);
    outline-offset: -2px;
    position: relative;
}

.model-card.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: var(--lora-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}

/* Marquee selection styles */
.marquee-selection {
    position: fixed;
    border: 2px dashed var(--lora-accent, #007bff);
    background: rgba(0, 123, 255, 0.1);
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
}

/* Visual feedback when marquee selecting */
.marquee-selecting {
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Prevent text selection during marquee */
.marquee-selecting * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ── Bulk base model modal — dedicated inline-list layout ───────────────
   Unlike the single-model modal (overlay dropdown), the bulk modal renders
   the option list inline so it never covers the footer buttons and only the
   list itself scrolls. Dropdown internals reuse the shared .base-model-*
   styles from lora-modal.css. */

#bulkBaseModelModal .modal-content {
    width: min(720px, calc(100vw - 2rem));
    height: min(640px, calc(100vh - var(--header-height, 48px) - 5.5rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bulkBaseModelModal .modal-header {
    flex-shrink: 0;
}

#bulkBaseModelModal .modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#bulkBaseModelModal .bulk-add-tags-info {
    flex-shrink: 0;
}

#bulkBaseModelModal .bulk-base-model-label {
    flex-shrink: 0;
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-1);
    color: var(--text-color);
}

.bulk-base-model-picker {
    width: 100%;
}

#bulkBaseModelModal .bulk-base-model-picker {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#bulkBaseModelModal .bulk-base-model-picker .base-model-search-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: auto;
}

#bulkBaseModelModal .base-model-search-input-wrapper {
    flex-shrink: 0;
}

/* Inline list instead of overlay dropdown */
#bulkBaseModelModal .base-model-dropdown {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-top: var(--space-1);
    border: 1px solid var(--lora-border);
    border-radius: var(--border-radius-xs);
    box-shadow: none;
    z-index: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--lora-border) transparent;
}

#bulkBaseModelModal .base-model-dropdown::-webkit-scrollbar {
    width: 8px;
}

#bulkBaseModelModal .base-model-dropdown::-webkit-scrollbar-thumb {
    background: var(--lora-border);
    border-radius: 4px;
}

#bulkBaseModelModal .base-model-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

/* The shared dropdown header uses opacity for its muted look, which makes the
   sticky background translucent — scrolled items bleed through. Keep the
   muted text color but restore a fully opaque background (bulk scope only). */
#bulkBaseModelModal .base-model-dropdown-header {
    opacity: 1;
    color: var(--text-muted, var(--text-color));
}

#bulkBaseModelModal .bulk-base-model-footer {
    flex-shrink: 0;
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--lora-border);
}