/* Dropdown propio para TODOS los <select> del proyecto — mismo lenguaje
   visual que el calendario (flatpickr-theme.css): tarjeta redondeada, sombra,
   hover/selección en dorado. El navegador no permite estilizar la lista
   nativa de opciones, por eso este panel es 100% nuestro. */

.wk-cs-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.wk-cs {
    position: relative;
    display: inline-block;
}

/* El trigger hereda el mismo look que ya tenía el <select> nativo (misma
   base global de app.css: borde, fondo, radio, flecha) para que cerrado
   se vea exactamente igual a como se veía antes — lo único nuevo es el panel. */
.wk-cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 7px 8px 7px 11px;
    border-radius: var(--wk-r-sm, 10px);
    border: 1px solid var(--wk-border-2, rgba(210, 205, 190, .55));
    background-color: var(--wk-surface-2, rgba(250, 249, 244, .8));
    color: var(--wk-text, #1a1a1a);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.wk-cs-trigger:hover { border-color: var(--wk-primary, #d4af37); }
.wk-cs-trigger:focus-visible { border-color: var(--wk-text); box-shadow: 0 0 0 3px rgba(var(--wk-primary-rgb),.1); outline: none; }
.wk-cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-cs-arrow { font-size: 18px; color: var(--wk-primary, #d4af37); flex-shrink: 0; transition: transform .15s; }
.wk-cs.open .wk-cs-arrow { transform: rotate(180deg); }
.wk-cs-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

html.dark .wk-cs-trigger {
    border-color: var(--wk-border-2, rgba(255, 255, 255, .15));
    background-color: var(--wk-surface-2, rgba(20, 20, 20, .85));
    color: var(--wk-text, #f2f0ea);
}
html.dark .wk-cs-arrow { color: var(--wk-primary, #e3c25a); }

/* ── Panel (calca el look de .flatpickr-calendar) ─────────────────────
   "Portal": el panel se cuelga de document.body con position:fixed (ver
   customselect.js) en vez de vivir dentro de la card. Muchas cards del
   proyecto usan backdrop-filter, que crea su propio stacking context —
   ahí un z-index local NUNCA gana contra la card siguiente del flujo (le
   pasó a este mismo dropdown probando dentro de una card). Sacándolo del
   todo del árbol de la card, el problema desaparece sin tener que auditar
   ni parchear cada clase de card del proyecto una por una. */
.wk-cs-panel-portal {
    position: fixed;
    max-height: 260px;
    overflow-y: auto;
    /* 2000 no alcanzaba: los modales del proyecto (.fx-modal-bg, .rp-export-overlay,
       etc.) usan z-index hasta 10000 — un <select> dentro de un modal (ej. "Ajustar
       stock" en Productos) abría el panel por DEBAJO del propio modal, invisible.
       Flatpickr ya resuelve esto con su propio z-index:99999 por defecto; igualamos
       el mismo criterio acá, quedando debajo solo del splash/reconnect overlay. */
    z-index: 99997;
    background: var(--wk-surface, #fff);
    color: var(--wk-text, #1a1a1a);
    border: 1px solid var(--wk-border-2, rgba(0, 0, 0, .1));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 6px;
    font-family: inherit;
    backdrop-filter: blur(6px);
    animation: wk-cs-in .12s ease;
}
@keyframes wk-cs-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wk-cs-item {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wk-cs-item:hover { background: var(--wk-primary-light, rgba(212,175,55,.14)); }
.wk-cs-item.selected {
    background: var(--wk-primary, #d4af37);
    color: var(--wk-on-primary, #171717);
    font-weight: 700;
}
.wk-cs-item.disabled { color: var(--wk-text-4, #b5b1a8); cursor: not-allowed; }

/* Scrollbar del panel, discreta y con acento dorado */
.wk-cs-panel::-webkit-scrollbar { width: 8px; }
.wk-cs-panel::-webkit-scrollbar-thumb { background: var(--wk-border-2, rgba(0,0,0,.15)); border-radius: 8px; }
.wk-cs-panel::-webkit-scrollbar-thumb:hover { background: var(--wk-primary, #d4af37); }

@media (max-width: 480px) {
    .wk-cs-panel { max-height: 220px; }
}