/*
 * select2-appstack.css
 * Override di Select2Blazor per adattarsi al tema AppStack (dark/light).
 *
 * Select2Blazor v1.2.1 usa classi .s2-* (NON .select2-* di jQuery Select2).
 * I colori della libreria sono hardcoded (#fff, lightgray, #f1f1f1).
 * Qui li sovrascriviamo con le CSS variables di Bootstrap/AppStack.
 *
 * Va caricato DOPO select2blazor.css.
 */

/* ─── Dropdown container (il pannello che si apre) ─── */
.s2 .s2-inner {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    border-radius: 7px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

/* ─── Outer (il "bottone" select chiuso) ─── */
.s2 .s2-outer {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 7px !important;
    padding: 0.375rem 0.75rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.s2 .s2-outer:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 18%, transparent) !important;
}

    .s2 .s2-outer span {
        color: var(--bs-body-color) !important;
    }

    .s2 .s2-outer i {
        color: var(--bs-body-color) !important;
    }

/* ─── Stato disabled ─── */
.s2.s2-disabled .s2-outer {
    background-color: var(--bs-secondary-bg, #e2e8ee) !important;
    color: var(--bs-secondary-color, #6c757d) !important;
}

/* ─── Campo di ricerca interno ─── */
.s2 .s2-inner .s2-input-container input {
    background-color: var(--bs-secondary-bg, var(--bs-body-bg)) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 7px !important;
    padding: 0.375rem 0.75rem !important;
}

    .s2 .s2-inner .s2-input-container input:focus {
        outline: none !important;
        border-color: var(--bs-primary, #3b7ddd) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 59, 125, 221), 0.25) !important;
    }

/* ─── Container opzioni (scrollabile) ─── */
.s2 .s2-inner .s2-inner-container {
    background-color: var(--bs-body-bg) !important;
}

/* ─── Singola opzione ─── */
.s2 .s2-inner .s2-inner-container .s2-inner-option {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    padding: 0.4rem 0.75rem !important;
}

/* ─── Opzione hover ─── */
.s2 .s2-inner .s2-inner-container .s2-inner-option:hover {
    background-color: var(--bs-primary, #3b7ddd) !important;
    color: #fff !important;
}

    /* Testo dentro opzione in hover → bianco */
    .s2 .s2-inner .s2-inner-container .s2-inner-option:hover *:not(.badge) {
        color: #fff !important;
    }

/* ─── Opzione selezionata ─── */
.s2 .s2-inner .s2-inner-container .s2-inner-option.s2-inner-option-selected {
    background-color: var(--bs-secondary-bg, rgba(var(--bs-primary-rgb, 59, 125, 221), 0.15)) !important;
    color: var(--bs-body-color) !important;
}

/* ─── Opzione selezionata + hover ─── */
.s2 .s2-inner .s2-inner-container .s2-inner-option.s2-inner-option-selected:hover {
    background-color: var(--bs-primary, #3b7ddd) !important;
    color: #fff !important;
}

/* ─── Hint "submit search" ─── */
.s2 .s2-inner .s2-submit-search-hint {
    color: var(--bs-secondary-color, #737d85) !important;
}

/* ─── Badge dentro le opzioni (OptionTemplate) ─── */
.s2 .s2-inner .badge {
    display: inline-block !important;
    padding: 0.35em 0.65em !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 0.375rem !important;
    color: #fff !important;
}

/* ─── Utility Bootstrap in OptionTemplate ─── */
.s2 .s2-inner .d-flex { display: flex !important; }
.s2 .s2-inner .align-items-center { align-items: center !important; }
.s2 .s2-inner .gap-2 { gap: 0.5rem !important; }
.s2 .s2-inner .w-100 { width: 100% !important; }
.s2 .s2-inner .text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.s2 .s2-inner .small { font-size: 0.75rem !important; }
.s2 .s2-inner .fw-semibold { font-weight: 600 !important; }

/* ─── Fix per contenuto custom (OptionTemplate) ─── */
.s2 .s2-inner-option * {
    color: inherit;
}

/* Span e div generici dentro opzioni */
.s2 .s2-inner-option span:not(.badge),
.s2 .s2-inner-option div:not(.badge) {
    color: var(--bs-body-color) !important;
}

/* Hover: forza bianco su tutto tranne badge */
.s2 .s2-inner-option:hover span:not(.badge),
.s2 .s2-inner-option:hover div:not(.badge) {
    color: #fff !important;
}

/* ─── Fix per classi custom tag-option ─── */
.s2 .s2-inner .tag-option .tag-id {
    color: var(--bs-primary) !important;
}

.s2 .s2-inner .tag-option .tag-desc {
    color: var(--bs-body-color) !important;
}

.s2 .s2-inner .tag-option .tag-category {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Hover: tag custom → bianco */
.s2 .s2-inner-option:hover .tag-id,
.s2 .s2-inner-option:hover .tag-desc {
    color: #fff !important;
}

/* ─── Dark mode overrides (AppStack dark: form controls = #293042) ─── */
[data-theme="dark"] .s2 .s2-outer {
    background-color: #293042 !important;
    color: #bfc1c6 !important;
    border-color: #7f838e !important;
}

[data-theme="dark"] .s2 .s2-outer span,
[data-theme="dark"] .s2 .s2-outer i {
    color: #bfc1c6 !important;
}

[data-theme="dark"] .s2 .s2-inner {
    background-color: #293042 !important;
    color: #bfc1c6 !important;
    border-color: #7f838e !important;
}

[data-theme="dark"] .s2 .s2-inner .s2-input-container input {
    background-color: #293042 !important;
    color: #bfc1c6 !important;
    border-color: #7f838e !important;
}

[data-theme="dark"] .s2 .s2-inner .s2-inner-container {
    background-color: #293042 !important;
}

[data-theme="dark"] .s2 .s2-inner .s2-inner-container .s2-inner-option {
    background-color: #293042 !important;
    color: #bfc1c6 !important;
}

[data-theme="dark"] .s2 .s2-inner .s2-inner-container .s2-inner-option.s2-inner-option-selected {
    background-color: #3a4258 !important;
}

[data-theme="dark"] .s2 .s2-inner-option span:not(.badge),
[data-theme="dark"] .s2 .s2-inner-option div:not(.badge) {
    color: #bfc1c6 !important;
}

[data-theme="dark"] .s2 .s2-inner .tag-option .tag-category {
    background-color: #3a4258 !important;
    color: #bfc1c6 !important;
}