/*
 * SELECT2-THEME.CSS - All Select2 dropdown styling
 * Uses --accent from parent fieldset context for inline dropdowns
 * Uses --select2-accent (set by JS) for body-level dropdowns
 * Respects dark/light theme via aurora-theme-dark/aurora-theme-light body classes
 */

/* ═══════════════════════════════════════════════════════════════════
   ROOT VARIABLES - Defaults for dark theme
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* --select2-accent deliberately NOT seeded here (feedback_no_
       fallbacks): the "safe fallback" #667eea was leaking Aurora-
       blue into every closed dropdown because color-mix(var(--
       select2-accent) ...) silently resolved to the default. Any
       dropdown that needs an accent pushes it on open via JS from
       the relevant fieldset's --accent. Unset → color-mix yields
       invalid → property uses its CSS initial value (no leak). */
    /* Dark theme dropdown colors */
    --select2-dropdown-bg: #1e1e1e;
    --select2-dropdown-bg-gradient: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
    --select2-dropdown-border: #353535;
    --select2-option-text: rgba(255, 255, 255, 0.85);
    --select2-option-text-hover: #ffffff;
    --select2-search-bg: rgba(0, 0, 0, 0.3);
}

/* Light theme overrides */
body.aurora-theme-light {
    --select2-dropdown-bg: #ffffff;
    --select2-dropdown-bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
    --select2-dropdown-border: #e0e0e0;
    --select2-option-text: rgba(0, 0, 0, 0.85);
    --select2-option-text-hover: #000000;
    --select2-search-bg: rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   FIELDSET SELECT2 — scoped to .fieldset context
   Uses --accent from parent fieldset. No clear button.
   ═══════════════════════════════════════════════════════════════════ */

/* Selection box — dark, accent left border, vertically centered */
:is(.fieldset, .card-back-info) .select2-container--default .select2-selection--single,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection--single,
.fk-select-row .select2-container--admin-autocomplete .select2-selection--single {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 4px;
    height: 28px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
}

:is(.fieldset, .card-back-info) .select2-container--default .select2-selection--single:hover,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection--single:hover,
.fk-select-row .select2-container--admin-autocomplete .select2-selection--single:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    border-left-color: var(--accent);
    background: rgba(0, 0, 0, 0.4);
}

/* Selected text — slot-tinted, single-line, room for arrow only */
:is(.fieldset, .card-back-info) .select2-container--default .select2-selection__rendered,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection__rendered,
.fk-select-row .select2-container--admin-autocomplete .select2-selection__rendered {
    color: #c0c0c0;
    padding: 0 1.25rem 0 0.25rem;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
}

/* Placeholder */
:is(.fieldset, .card-back-info) .select2-container--default .select2-selection__placeholder,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Hide clear button — just pick a new value */
:is(.fieldset, .card-back-info) .select2-container--default .select2-selection__clear,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection__clear {
    display: none;
}

/* Arrow — full-height slot on the right, triangle centered by absolute
   positioning on the inner <b>. The top:50%+translateY(-50%) approach
   drifts when the container inherits tall heights (e.g. .field--span
   stretches .select2-selection to 100%), so we stretch the arrow to fill
   and center the triangle inside. */
:is(.fieldset, .card-back-info) .select2-container--default .select2-selection__arrow,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection__arrow,
.fk-select-row .select2-container--admin-autocomplete .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    transform: none;
}

:is(.fieldset, .card-back-info) .select2-container--default .select2-selection__arrow b,
:is(.fieldset, .card-back-info) .select2-container--admin-autocomplete .select2-selection__arrow b,
.fk-select-row .select2-container--admin-autocomplete .select2-selection__arrow b {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    border-color: var(--accent) transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    width: 0;
    height: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SYSTEM-GREY CHIP — for builder-tags without a slot color (frame, etc).
   The inner .select2-selection--single keeps its default field look
   (dark recessed bg, accent left-border, 28px height) — that's what
   gives every other element bubble its inner-field + accent appearance
   inside the .builder-tag pill. We just paint the accent neutral
   white-grey so it doesn't render in select2's default blue.
   ═══════════════════════════════════════════════════════════════════ */
/* Frame piggy-backs on slot-1 (hair) so it reads as part of the
   character chip family instead of the muted neutral. The
   .builder-tag base + the existing slot-1-aware rules in this file
   handle the chip background tint, accent left-border, arrow, and
   open-state dropdown highlights — no per-frame overrides needed. */
.builder-tag--frame {
    --accent: var(--primary);
    --tag-color: var(--primary);
}

.fieldset .builder-tag--frame .select2-container--default .select2-selection__arrow b {
    border-top-color: var(--accent);
}

/* Left-side icon — balances the right-side dropdown arrow and gives
   the chip a glyph since frame doesn't have a slot color picker. */
.builder-tag--frame .frame-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.builder-tag--frame .frame-icon svg {
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   BODY-LEVEL DROPDOWN - Results area styling
   The dropdown container itself is styled in INLINE SEARCH MODE section
   ═══════════════════════════════════════════════════════════════════ */

/* Results list - width management */
.select2-container--admin-autocomplete .select2-results,
.select2-container--default .select2-results {
    width: 100%;
}

.select2-container--admin-autocomplete .select2-results__options,
.select2-container--default .select2-results__options {
    max-height: 250px;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--select2-accent) 30%, transparent) transparent;
}

.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar,
.select2-container--default .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-container--admin-autocomplete .select2-results__options::-webkit-scrollbar-thumb,
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--select2-accent) 30%, transparent);
    border-radius: 3px;
}

/* Result items - single-line with ellipsis truncation. Text stays a flat
   lightened grey so options read cleanly; background/border still tint
   with --select2-accent for hover/selected feedback. Inner custom option
   templates (e.g. .ckpt-option__name) set their own color and override. */
.select2-container--admin-autocomplete .select2-results__option,
.select2-container--default .select2-results__option {
    display: block;
    background: transparent;
    color: #c0c0c0;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.3;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover state — must match CDN specificity:
   .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable */
.select2-container--admin-autocomplete .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: color-mix(in srgb, var(--select2-accent) 20%, transparent);
    color: #c0c0c0;
    border-left-color: var(--select2-accent);
}

/* Selected state */
.select2-container--admin-autocomplete .select2-results__option--selected,
.select2-container--default .select2-results__option--selected {
    background: color-mix(in srgb, var(--select2-accent) 30%, transparent);
    color: #c0c0c0;
    border-left-color: var(--select2-accent);
    font-weight: 600;
}

/* Loading message */
.select2-container--admin-autocomplete .select2-results__message,
.select2-container--default .select2-results__message {
    color: color-mix(in srgb, var(--select2-option-text) 60%, transparent);
    padding: 0.75rem;
    font-size: 0.75rem;
    text-align: center;
}

/* Ensure dropdown appears above everything */
.select2-container--admin-autocomplete.select2-container--open,
.select2-container--default.select2-container--open {
    z-index: 99999;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-SELECT - Tag bubbles for elements fields
   Uses --fs-accent from parent fieldset context
   ═══════════════════════════════════════════════════════════════════ */

/* Multi-select container - transparent dark background */
.select2-container--default .select2-selection--multiple {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid color-mix(in srgb, var(--fs-accent) 60%, transparent);
    border-radius: 4px;
    min-height: 28px;
    padding: 0.25rem;
    cursor: text;
}

.select2-container--default .select2-selection--multiple:hover {
    border-color: color-mix(in srgb, var(--fs-accent) 60%, transparent);
    border-left-color: var(--fs-accent);
    background: rgba(0, 0, 0, 0.4);
}

/* Tag bubbles container */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* Individual tag bubbles - accent colored */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--fs-accent) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--fs-accent) 50%, transparent);
    border-radius: 12px;
    padding: 0.2rem 0.5rem 0.2rem 0.6rem;
    margin: 0;
    color: #c0c0c0;
    font-size: 0.75rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: color-mix(in srgb, var(--fs-accent) 45%, transparent);
    border-color: var(--fs-accent);
}

/* Remove button (X) on tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    order: 1; /* Move X to right side */
    margin-left: auto;
    padding: 0 0.1rem;
    border: none;
    background: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white;
}

/* Search input inside multi-select */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 auto;
    min-width: 100px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    color: #c0c0c0;
    font-size: 0.8rem;
    padding: 0.25rem;
    margin: 0;
    width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field:focus {
    outline: none;
}

/* Elements fieldset - no title, external bubbles above Select2 */
.fieldset--elements {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to bottom - Select2s align */
}

/* ═══════════════════════════════════════════════════════════════════
   NATIVE SELECT MATCHING - Style native selects to match Select2
   Used for age dropdown and similar numeric/static choices
   ═══════════════════════════════════════════════════════════════════ */

/* Age select and similar native selects styled to match Select2 */
select.form-select,
.field select.form-select {
    height: 28px;
    padding: 0 2rem 0 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 4px;
    color: #c0c0c0;
    font-size: 0.8rem;
    line-height: 1.3;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Dropdown arrow matching Select2 placement */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23667eea' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

select.form-select:hover,
.field select.form-select:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    border-left-color: var(--accent);
    background-color: rgba(0, 0, 0, 0.4);
}

select.form-select:focus,
.field select.form-select:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.4);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

select.form-select option {
    background: var(--select2-dropdown-bg);
    color: white;
    padding: 0.5rem;
}

/* External bubbles container - sits above Select2, grows upward */
.element-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 22px; /* Match color swatch height roughly */
    margin-bottom: 0.35rem;
    flex-grow: 1; /* Takes extra space when fieldset grows */
    align-content: flex-end; /* Bubbles align to bottom of their container */
}

.element-bubbles:empty {
    min-height: 22px; /* Keep space even when empty for alignment */
}

/* Individual bubble */
.element-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: color-mix(in srgb, var(--fs-accent) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--fs-accent) 55%, transparent);
    border-radius: 10px;
    padding: 0.1rem 0.35rem 0.1rem 0.45rem;
    color: #c0c0c0;
    font-size: 0.7rem;
    line-height: 1.2;
}

.element-bubble:hover {
    background: color-mix(in srgb, var(--fs-accent) 50%, transparent);
    border-color: var(--fs-accent);
}

.element-bubble__remove {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.element-bubble__remove:hover {
    color: white;
}

/* Hide Select2's internal tags - we show them externally */
.fieldset--elements .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: none;
}

/* Keep standard Select2 size - just hide tags, show arrow */
.fieldset--elements .select2-container--default .select2-selection--multiple .select2-search--inline {
    width: calc(100% - 24px); /* Leave room for arrow */
}

.fieldset--elements .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100%;
}

/* Add dropdown arrow to elements Select2 (like single-select) */
.fieldset--elements .select2-container--default .select2-selection--multiple::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: var(--fs-accent) transparent transparent transparent;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   INLINE SEARCH MODE - SINGLE SELECT ONLY
   Click field → field becomes editable search → results below
   
   Multi-select has inline search already (inside the selection box)
   so it doesn't need the dropdown search overlay behavior.
   We use :has(.select2-search--dropdown) to target dropdowns with search.
   ═══════════════════════════════════════════════════════════════════ */

/* When open: hide the selected text so search can take its place
   Only for single-select (has .select2-selection--single) */
.select2-container--open .select2-selection--single .select2-selection__rendered {
    visibility: hidden;
}

/* When open: hide the placeholder too - single select only */
.select2-container--open .select2-selection--single .select2-selection__placeholder {
    visibility: hidden;
}

/* Position dropdown directly over the selection (no gap)
   Only for dropdowns WITH a search box (single-select)
   Multi-select dropdowns don't have .select2-search--dropdown */
.select2-dropdown--below:has(.select2-search--dropdown) {
    margin-top: calc(-1 * var(--gs-select-height, 28px)); /* Pull up to overlay the selection box */
}

/* Handle dropdown-above case (when not enough room below) */
.select2-dropdown--above:has(.select2-search--dropdown) {
    display: flex;
    flex-direction: column-reverse;
    transform: translateY(var(--gs-select-height, 28px));
}

/* When above: results box needs margin at bottom (gap from search) */
.select2-dropdown--above:has(.select2-search--dropdown) .select2-results {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Search container: match the selection box height */
.select2-container--admin-autocomplete .select2-search--dropdown,
.select2-container--default .select2-search--dropdown {
    padding: 0;
    background: transparent;
    border-bottom: none;
    height: var(--gs-select-height, 28px);
    display: flex;
    align-items: center;
}

/* Search input: fill the search container, match selection styling */
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid color-mix(in srgb, var(--select2-accent) 60%, transparent);
    border-left: 3px solid var(--select2-accent);
    border-radius: 4px;
    color: white;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    height: var(--gs-select-height, 28px);
    box-sizing: border-box;
    box-shadow: none;
    margin: 0;
    width: 100%;
}

.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--select2-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--select2-accent) 30%, transparent);
}

/* Search input placeholder */
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field::placeholder,
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Dropdown container: transparent for single-select (search overlay mode) */
.select2-container--admin-autocomplete .select2-dropdown,
.select2-container--default .select2-dropdown {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* Results area: styled box below the search */
.select2-container--admin-autocomplete .select2-results,
.select2-container--default .select2-results {
    background: var(--select2-dropdown-bg-gradient);
    border: 1px solid var(--select2-dropdown-border);
    border-radius: 6px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px color-mix(in srgb, var(--select2-accent) 15%, transparent);
    margin-top: 4px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-SELECT DROPDOWN - No search overlay, results appear below
   Multi-select uses inline search inside the selection box itself
   ═══════════════════════════════════════════════════════════════════ */

/* Multi-select dropdown: no negative margin, just show results below */
.select2-dropdown--below:not(:has(.select2-search--dropdown)) {
    margin-top: 4px; /* Normal gap below selection */
}

/* ═══════════════════════════════════════════════════════════════════
   DYNAMIC ACCENT OPTIONS - Lighting fields change accent on hover
   JS adds .has-option-color class and data-option-color attribute
   JS mouseover event reads color and sets --select2-accent
   ═══════════════════════════════════════════════════════════════════ */

/* No additional CSS needed - the dynamic --select2-accent change
   automatically updates all accent-colored elements in the dropdown:
   - border-left on highlighted/selected options
   - background tint on hover
   - scrollbar color
   - focus glow on search input
   
   This is the Django way: one variable, infinite colors. */