/* ── SearchableSelect — pannello dropdown con ricerca ─────────────────── */

.ss-panel {
    position: fixed;
    z-index: 1060;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 200px;
}

/* Campo ricerca */
.ss-inp {
    border: none;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 8px 12px 8px 32px;
    font-size: 0.875rem;
    outline: none;
    flex-shrink: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.442 1.398a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 10px center;
    color: var(--bs-body-color, #212529);
    width: 100%;
    box-sizing: border-box;
}

.ss-inp::placeholder {
    color: var(--bs-secondary-color, #6c757d);
}

/* Lista opzioni */
.ss-list {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Singola opzione */
.ss-opt {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.875rem;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: background 0.08s;
}

.ss-opt:hover,
.ss-opt.ss-hil {
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #084298);
}

.ss-opt.ss-sel {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-weight: 500;
}

.ss-opt.ss-sel:hover,
.ss-opt.ss-sel.ss-hil {
    background: #0b5ed7;
    color: #fff;
}

.ss-opt[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* Evidenziazione del termine cercato */
.ss-mark {
    background: #fff3cd;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Pulsante "Crea: xxx" */
.ss-create-opt {
    color: var(--bs-primary, #0d6efd);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-style: normal;
}

.ss-create-opt:hover,
.ss-create-opt.ss-hil {
    background: var(--bs-success-bg-subtle, #d1e7dd);
    color: var(--bs-success-text-emphasis, #0a3622);
}

.ss-create-icon {
    font-style: normal;
    font-weight: 600;
    margin-right: 4px;
    opacity: 0.8;
}

/* Messaggio "nessun risultato" */
.ss-empty {
    padding: 14px 16px;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    text-align: center;
}

/* ── Mobile: bottom sheet ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .ss-panel {
        /* Override dell'eventuale posizionamento inline impostato da JS */
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        /* Altezza fissa: il pannello non si sposta mentre i risultati filtrano */
        height: 55vh !important;
        max-height: 55vh !important;
        border-radius: 1rem 1rem 0 0;
        border: none;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.18);
    }

    /* Handle bar in cima al bottom sheet */
    .ss-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--bs-secondary-bg, #dee2e6);
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    .ss-list {
        max-height: none; /* gestito da max-height del pannello */
    }

    .ss-inp {
        font-size: 1rem; /* previene zoom iOS su focus */
        padding: 10px 12px 10px 38px;
    }

    .ss-opt {
        font-size: 1rem;
        padding: 11px 16px;
        min-height: 44px; /* touch target minimo */
    }
}

/* ── Dark mode ────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .ss-panel {
    background: var(--bs-body-bg, #212529);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .ss-inp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23adb5bd' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.442 1.398a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .ss-opt:hover,
[data-bs-theme="dark"] .ss-opt.ss-hil {
    background: var(--bs-primary-bg-subtle, #031633);
    color: var(--bs-primary-text-emphasis, #6ea8fe);
}

[data-bs-theme="dark"] .ss-mark {
    background: #664d03;
    color: #fff;
}