/* ==========================================================================
   Mission Control - Combobox Component
   Searchable dropdown replacement for native <select> with large option lists.
   Follows ARIA combobox pattern (WAI-ARIA 1.2).
   ========================================================================== */

.mc-combobox {
    position: relative;
}

/* ── Input wrapper (text input + clear + arrow) ───────────── */
.mc-combobox__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mc-combobox__input-wrapper .mc-input {
    padding-right: var(--mc-space-9, 56px);  /* space for clear + arrow */
    cursor: default;
}

.mc-combobox__input-wrapper .mc-input:focus {
    cursor: text;
}

/* ── Clear button (x) ────────────────────────────────────── */
.mc-combobox__clear {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--mc-text-tertiary, #94a3b8);
    padding: 2px;
    line-height: 1;
    border-radius: var(--mc-radius-sm, 4px);
}

.mc-combobox__clear:hover {
    color: var(--mc-text-primary, #1a202c);
}

.mc-combobox__clear:focus-visible {
    outline: 2px solid var(--mc-primary, #3b82f6);
    outline-offset: 1px;
}

/* ── Dropdown arrow ──────────────────────────────────────── */
.mc-combobox__arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--mc-text-tertiary, #94a3b8);
    font-size: 20px;
    transition: transform 0.15s ease;
}

.mc-combobox--open .mc-combobox__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.mc-combobox__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--mc-bg-primary, #ffffff);
    border: 1px solid var(--mc-border, #e2e8f0);
    border-radius: var(--mc-radius-md, 10px);
    box-shadow: var(--mc-shadow-md, 0 10px 25px rgba(0, 0, 0, 0.08));
    max-height: 260px;
    overflow-y: auto;
    z-index: var(--mc-z-dropdown, 60);
}

/* ── Individual option ───────────────────────────────────── */
.mc-combobox__option {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--mc-space-2, 8px) var(--mc-space-3, 12px);
    font-size: var(--mc-text-sm, 14px);
    color: var(--mc-text-primary, #1a202c);
    cursor: pointer;
    display: block;
    line-height: 1.4;
}

.mc-combobox__option:hover,
.mc-combobox__option--focused {
    background: var(--mc-bg-secondary, #f8fafc);
}

.mc-combobox__option[aria-selected="true"] {
    font-weight: var(--mc-font-medium, 500);
    color: var(--mc-primary, #3b82f6);
}

.mc-combobox__option + .mc-combobox__option {
    border-top: 1px solid var(--mc-border-light, #f1f5f9);
}

.mc-combobox__option:focus-visible {
    outline: 2px solid var(--mc-primary, #3b82f6);
    outline-offset: -2px;
}

/* ── Empty state ─────────────────────────────────────────── */
.mc-combobox__empty {
    padding: var(--mc-space-3, 12px);
    text-align: center;
    font-size: var(--mc-text-sm, 14px);
    color: var(--mc-text-tertiary, #94a3b8);
}

/* ── Scrollbar styling ───────────────────────────────────── */
.mc-combobox__panel::-webkit-scrollbar {
    width: 6px;
}

.mc-combobox__panel::-webkit-scrollbar-track {
    background: transparent;
}

.mc-combobox__panel::-webkit-scrollbar-thumb {
    background: var(--mc-border, #e2e8f0);
    border-radius: 3px;
}

.mc-combobox__panel::-webkit-scrollbar-thumb:hover {
    background: var(--mc-text-tertiary, #94a3b8);
}

/* ── Transitions (Alpine.js x-transition class-based) ────── */
/* Shared with scheduler-task-form.css typeahead; defined here
   so the combobox works on any page without page-specific CSS. */
.mc-transition-enter {
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.mc-transition-enter-start {
    opacity: 0;
    transform: translateY(-4px);
}
.mc-transition-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.mc-transition-leave {
    transition: opacity 80ms ease-in;
}
.mc-transition-leave-start {
    opacity: 1;
}
.mc-transition-leave-end {
    opacity: 0;
}