/*
 * column_pills.css — place in assets/
 * Targets Dash 4 dcc.Dropdown class names.
 */

/* ── Compact closed trigger button ──────────────────────────────── */
.compact-col-dropdown.dash-dropdown {
    background:    #111827 !important;
    border:        1px solid #374151 !important;
    border-radius: 6px !important;
    min-height:    32px !important;
    max-height:    32px !important;
    overflow:      hidden !important;
    font-family:   'JetBrains Mono', monospace !important;
    font-size:     11px !important;
    color:         #9ca3af !important;
}

/* Hide selected value items in closed state — badge replaces them */
.compact-col-dropdown .dash-dropdown-value-item {
    display: none !important;
}

/* Always show placeholder */
.compact-col-dropdown .dash-dropdown-placeholder {
    color:   #9ca3af !important;
    display: block   !important;
}

/* ── Open menu panel ─────────────────────────────────────────────── */
.compact-col-dropdown-menu.dash-dropdown-content,
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-content {
    background-color: #1f2937  !important;
    border:           1px solid #374151 !important;
    border-radius:    6px       !important;
    z-index:          999999    !important;
    max-height:       260px     !important;
    overflow-y:       auto      !important;
    font-family:      'JetBrains Mono', monospace !important;
    font-size:        11px !important;
}

/* ── Options container ───────────────────────────────────────────── */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-options {
    overflow-y: auto    !important;
    max-height: 200px   !important;
    background: #1f2937 !important;
}

/* ── Individual option rows ──────────────────────────────────────── */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-option {
    font-family:      'JetBrains Mono', monospace !important;
    font-size:        11px    !important;
    color:            #d1d5db !important;
    background-color: #1f2937 !important;
    padding:          5px 12px !important;
    cursor:           pointer  !important;
    box-shadow:       none     !important;
}

.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-option:hover {
    background-color: #374151 !important;
    color:            #f9fafb !important;
}

/* Selected options — green */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-option:has(input:checked) {
    background-color: #064e3b !important;
    color:            #34d399 !important;
    font-weight:      600     !important;
}

/* ── Select All / Deselect All action buttons ────────────────────── */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-actions {
    background:    #111827 !important;
    border-color:  #374151 !important;
    padding:       4px 12px !important;
}
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-action-button {
    color:       #6b7280 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size:   10px !important;
}
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-action-button:hover {
    color: #34d399 !important;
}

/* ── Search box inside menu ──────────────────────────────────────── */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-search-container {
    background:   #111827 !important;
    border-color: #374151 !important;
    margin:       4px     !important;
}
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-search {
    color:       #e5e7eb !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size:   11px !important;
}

/* ── "Select All" option — styled distinctly at top of list ─────── */
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-option:first-child {
    color:         #34d399 !important;
    font-weight:   600     !important;
    border-bottom: 1px solid #374151 !important;
    margin-bottom: 2px     !important;
}
.dash-dropdown-wrapper:has(.compact-col-dropdown) .dash-dropdown-option:first-child:has(input:checked) {
    background-color: #064e3b !important;
}