/* /www/wwwroot/livintech/sistema/public/assets/css/liv-select.css */
/* ==========================================================================
   SELECT LARANJA — regra global e FINAL da plataforma Livintech
   --------------------------------------------------------------------------
   Cobre TODO tipo de select do sistema, em uma única cascata:

     1) select nativo  (com ou sem classe: .mfilter-select, .edc-fsel,
        .ccf-sel, .cracha-select, .os-filter-select, .liv-metric-select …)
     2) .form-select do Bootstrap 5.3
     3) Tom Select (theme bootstrap5) — wrapper, controle, chips e dropdown
     4) select2 (resíduo em telas antigas de pessoas)

   POR QUE UM ARQUIVO SÓ:
   o azul vinha de três fontes diferentes (Bootstrap, tema bootstrap5 do
   Tom Select e o anel de foco do próprio navegador) e os overrides estavam
   picotados entre style.css, liv-layout.css e liv-components.css — telas
   que não carregam esses três (app, viewer do CFTV, portal, softphone)
   continuavam azuis. Este arquivo é carregado por último em toda tela que
   tenha select, então vence sem depender de quem veio antes.

   NÃO criar mais override de cor de select em CSS de módulo.
   ========================================================================== */

:root {
    /* Não dependem de liv-tokens.css: esta folha roda também nas telas
       standalone (app, portal, softphone), que não carregam os tokens. */
    --liv-sel-orange:      #ea580c;
    --liv-sel-orange-soft: #ff9142;
    --liv-sel-orange-50:   #fff7ed;
    --liv-sel-orange-100:  #ffedd5;
    --liv-sel-orange-200:  #fed7aa;
    --liv-sel-orange-700:  #c2410c;
    --liv-sel-ring:        0 0 0 .2rem rgba(234, 88, 12, .25);

    /* Realce que percorre as opções (hover / setas do teclado).
       Translúcido de propósito: funciona igual no claro e no escuro,
       e fica sempre MAIS FRACO que o laranja sólido do item marcado. */
    --liv-sel-hover-bg:    rgba(234, 88, 12, .16);

    /* Anel de foco padrão do Bootstrap 5.3 (era rgba(13,110,253,.25)) */
    --bs-focus-ring-color: rgba(234, 88, 12, .25);
}


/* ── 1) NATIVO + BOOTSTRAP ───────────────────────────────────────────────
   accent-color pinta os widgets que o navegador desenha sozinho. */
select,
.form-select {
    accent-color: var(--liv-sel-orange);
}

select:focus,
.form-select:focus,
.input-group > .form-select:focus,
.modal select:focus,
.modal .form-select:focus {
    border-color: var(--liv-sel-orange-soft) !important;
    box-shadow: var(--liv-sel-ring) !important;
    outline: 0;
}

/* Foco por teclado: o Chrome desenha um outline azul próprio quando o
   select não tem borda estilizada (caso dos selects "crus" do app). */
select:focus-visible,
.form-select:focus-visible {
    outline: 2px solid rgba(234, 88, 12, .6) !important;
    outline-offset: 1px;
}


/* ── 2) OPÇÕES ───────────────────────────────────────────────────────────
   O linear-gradient é o truque necessário no Chromium: só background-color
   é ignorado no item marcado da lista. */
select option:checked,
select option[selected],
.form-select option:checked,
select:focus option:checked {
    background: var(--liv-sel-orange) linear-gradient(var(--liv-sel-orange), var(--liv-sel-orange)) !important;
    color: #fff !important;
}

/* Listbox aberto no próprio DOM (multiple / size > 1): aqui o realce
   azul do sistema aparece de verdade e é estilizável. */
select[multiple] option:checked,
select[size]:not([size="1"]) option:checked,
select[multiple]:focus option:checked,
select[size]:not([size="1"]):focus option:checked {
    background: var(--liv-sel-orange) linear-gradient(var(--liv-sel-orange), var(--liv-sel-orange)) !important;
    color: #fff !important;
}

select option:hover,
select[multiple] option:hover,
select[size]:not([size="1"]) option:hover {
    background: var(--liv-sel-hover-bg) linear-gradient(var(--liv-sel-hover-bg), var(--liv-sel-hover-bg)) !important;
    color: var(--liv-sel-orange-700) !important;
}


/* ── 2b) POPUP NATIVO ESTILIZÁVEL (Chrome/Edge 135+) ─────────────────────
   A barra que percorre as opções no popup do select nativo é desenhada
   pelo navegador com a cor de destaque do sistema (azul) — `option:hover`
   é simplesmente ignorado ali. O único jeito de pintá-la é trocar o motor
   de render do popup por `appearance: base-select`, que entrega o picker
   como elemento estilizável de verdade.

   Fica dentro de @supports: navegador que não suporta continua com o
   popup nativo de sempre, sem nenhuma mudança.

   Canvas / CanvasText são as cores de sistema — acompanham sozinhas o
   `color-scheme: dark` que o app e o telão já declaram, então o mesmo
   CSS serve para tela clara e escura.
   ────────────────────────────────────────────────────────────────────── */
@supports (appearance: base-select) {

    /* !important OBRIGATÓRIO aqui.
       Quase toda tela declara `appearance: none` (para esconder a seta nativa)
       ou `appearance: auto` (para mostrá-la) no <style> da própria página — e
       esse <style> vem DEPOIS do <link> desta folha, então vencia por ordem e
       devolvia o popup nativo, com a barra azul do sistema de volta.
       Foi o caso de /pages/propostas/ (.prop-status-select e .prop-filter-select). */
    select,
    ::picker(select) {
        appearance: base-select !important;
        -webkit-appearance: base-select !important;
    }

    /* Caixa do picker — mesma cara do dropdown do Tom Select */
    ::picker(select) {
        background: Canvas;
        color: CanvasText;
        border: 1px solid rgba(128, 128, 128, .28);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
        padding: 4px;
        max-height: 320px;
        overflow-y: auto;
    }

    ::picker(select) option {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: .875rem;
        line-height: 1.3;
        cursor: pointer;
    }

    /* Barra que percorre as opções: laranja fraco */
    /* !important porque muitos módulos pintam `.minha-classe option
       { background:#fff }` no <style> da página, que carrega depois. */
    ::picker(select) option:hover,
    ::picker(select) option:focus,
    ::picker(select) option:active,
    ::picker(select) option:not(:checked):hover {
        background: var(--liv-sel-hover-bg) !important;
        color: var(--liv-sel-orange-700) !important;
        outline: none;
    }

    /* Opção marcada: laranja cheio (sempre mais forte que o realce) */
    ::picker(select) option:checked {
        background: var(--liv-sel-orange) !important;
        color: #fff !important;
    }
    ::picker(select) option:checked:hover {
        background: var(--liv-sel-orange-700) !important;
        color: #fff !important;
    }

    /* O ✓ que o modo estilizável acrescenta empurraria o texto e mudaria
       o alinhamento de todos os selects da plataforma. */
    ::picker(select) option::checkmark {
        display: none;
    }

    ::picker(select) optgroup {
        padding: 6px 10px 2px;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        opacity: .6;
    }

    /* Seta do botão: cinza discreto, gira ao abrir */
    select::picker-icon {
        color: #9ca3af;
        transition: transform .2s ease;
    }
    select:open::picker-icon {
        transform: rotate(180deg);
    }

    /* Selects que JÁ desenham a própria seta (background-image) ou que são
       invisíveis de propósito: sem isto o modo estilizável acrescentaria uma
       segunda seta. Lista fechada — todo o resto usa o ::picker-icon padrão. */
    .form-select::picker-icon,          /* seta do Bootstrap                    */
    .mfilter-select::picker-icon,       /* app + base.css: chevron SVG próprio  */
    .sol-subbar select::picker-icon,    /* pílula compacta da barra do app      */
    .prop-status-select::picker-icon,   /* invisível sobre a bolinha de status  */
    .orc-status-select::picker-icon {   /* idem, em orçamentos                  */
        display: none;
    }

    /* Barra de rolagem do picker em laranja */
    ::picker(select) {
        scrollbar-width: thin;
        scrollbar-color: var(--liv-sel-orange-200) transparent;
    }
}

/* Dropdown do Tom Select: mesma barra de rolagem laranja */
.ts-dropdown,
.ts-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: var(--liv-sel-orange-200) transparent;
}
.ts-dropdown-content::-webkit-scrollbar { width: 8px; }
.ts-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--liv-sel-orange-200);
    border-radius: 999px;
}


/* ── 3) TOM SELECT ───────────────────────────────────────────────────────
   !important obrigatório: o theme bootstrap5 da lib carrega depois em
   algumas telas e usa a cor primária azul do Bootstrap. */
.ts-wrapper.focus .ts-control,
.ts-wrapper.focus.single .ts-control,
.ts-wrapper.input-active .ts-control {
    border-color: var(--liv-sel-orange-soft) !important;
    box-shadow: var(--liv-sel-ring) !important;
    outline: 0 !important;
}

.ts-control,
.ts-control input {
    caret-color: var(--liv-sel-orange);
}

/* Item em foco no dropdown (setas do teclado / mouse) */
.ts-dropdown .active,
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown [data-selectable].active,
.ts-dropdown .create:hover,
.ts-dropdown .create.active {
    background: var(--liv-sel-hover-bg) !important;
    color: var(--liv-sel-orange-700) !important;
}

/* Item já escolhido */
.ts-dropdown .option.selected,
.ts-dropdown .option.selected.active,
.ts-dropdown .selected {
    background: linear-gradient(135deg, var(--liv-sel-orange-soft), var(--liv-sel-orange)) !important;
    color: #fff !important;
}

/* Chips do modo múltiplo */
.ts-wrapper.multi .ts-control > div {
    background: var(--liv-sel-orange-50) !important;
    color: var(--liv-sel-orange-700) !important;
    border: 1px solid var(--liv-sel-orange-200) !important;
}
.ts-wrapper.multi .ts-control > div.active {
    background: linear-gradient(135deg, var(--liv-sel-orange-soft), var(--liv-sel-orange)) !important;
    color: #fff !important;
    border-color: var(--liv-sel-orange) !important;
}
.ts-wrapper.multi .ts-control > div .remove {
    border-left-color: var(--liv-sel-orange-200) !important;
}

/* Plugin checkbox_options */
.ts-dropdown .option input[type="checkbox"] {
    accent-color: var(--liv-sel-orange);
}


/* ── 4) SELECT2 (telas antigas de pessoas) ───────────────────────────────── */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--liv-sel-orange) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--liv-sel-orange-50) !important;
    color: var(--liv-sel-orange-700) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--liv-sel-orange-soft) !important;
    box-shadow: var(--liv-sel-ring) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--liv-sel-orange-50) !important;
    border-color: var(--liv-sel-orange-200) !important;
    color: var(--liv-sel-orange-700) !important;
}
/* /www/wwwroot/livintech/sistema/public/assets/css/liv-select.css */