/* Combobox pesquisável OPSView — estilos vanilla, sem dependências.
   Pareia com static/combobox.js. */

.cmbx {
    position: relative;
    display: inline-block;
    font-family: var(--font-sans, inherit);
    min-width: 180px;
}

.cmbx-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text, #1f2937);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 32px;
}
.cmbx-trigger:hover {
    border-color: var(--primary, #3b82f6);
}
.cmbx-trigger:focus-visible,
.cmbx[aria-expanded="true"] .cmbx-trigger {
    outline: none;
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3b82f6) 18%, transparent);
}
.cmbx-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmbx-trigger-label.is-placeholder {
    color: var(--text-muted, #6b7280);
}
.cmbx-trigger-caret {
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    transition: transform 0.15s;
}
.cmbx-trigger[aria-expanded="true"] .cmbx-trigger-caret {
    transform: rotate(180deg);
}

.cmbx-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 260px;
    max-width: 420px;
    max-height: 360px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cmbx-popup[hidden] {
    display: none;
}

.cmbx-search {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: 13px;
    background: transparent;
    color: var(--text, #1f2937);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.cmbx-search::placeholder {
    color: var(--text-subtle, #9ca3af);
}

.cmbx-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}
.cmbx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text, #1f2937);
    cursor: pointer;
    user-select: none;
    min-height: 32px;
    line-height: 1.3;
}
.cmbx-item:hover {
    background: color-mix(in srgb, var(--primary, #3b82f6) 8%, transparent);
}
.cmbx-item.is-active {
    background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent);
}
.cmbx-item--clear {
    color: var(--text-muted, #6b7280);
    font-style: italic;
    font-size: 12px;
    border-bottom: 1px dashed var(--border, #e5e7eb);
}
.cmbx-hint {
    color: var(--text-subtle, #9ca3af);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
}
.cmbx-empty {
    padding: 14px 12px;
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    text-align: center;
    cursor: default;
}

.cmbx-create {
    padding: 10px 12px;
    border-top: 1px solid var(--border, #e5e7eb);
    background: color-mix(in srgb, var(--primary, #3b82f6) 6%, transparent);
    color: var(--primary, #3b82f6);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}
.cmbx-create:hover {
    background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent);
}
.cmbx-create[hidden] {
    display: none;
}
.cmbx-create-q {
    font-weight: 600;
}

/* Mobile: touch targets >=44px */
@media (max-width: 768px) {
    .cmbx-trigger { min-height: 44px; padding: 10px 12px; font-size: 14px; }
    .cmbx-item { min-height: 44px; padding: 10px 14px; font-size: 14px; }
    .cmbx-popup { max-height: 60vh; }
}