/* PersonalizadosFlux: troca o rosa/magenta padrão do tema (#e91e63) pelo azul da marca (#1f8fe0)
   em estados "preenchido"/"focado" dos campos. Os 3 blocos abaixo espelham exatamente as 3
   regras do material-dashboard.min.css que usam a cor rosa (border-color, color e o box-shadow
   dos pseudo-elementos ::before/::after do rótulo flutuante — esse último foi o mais fácil de
   esquecer, e é o que causava a linha rosa presa atrás do texto mesmo com o texto já em azul). */

.input-group.input-group-outline.is-focused .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-label + .form-control {
    border-color: #1f8fe0 !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #1f8fe0, inset -1px 0 #1f8fe0, inset 0 -1px #1f8fe0 !important;
}

.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
    color: #1f8fe0 !important;
    -webkit-text-fill-color: #1f8fe0 !important;
}

.input-group.input-group-outline.is-focused .form-label::before,
.input-group.input-group-outline.is-focused .form-label::after,
.input-group.input-group-outline.is-filled .form-label::before,
.input-group.input-group-outline.is-filled .form-label::after {
    border-top-color: #1f8fe0 !important;
    box-shadow: inset 0 1px #1f8fe0 !important;
}

.form-check-input:checked {
    background-color: #1f8fe0 !important;
    border-color: #1f8fe0 !important;
}

/* O tema usa um glifo do Font Awesome ("\f00c") pro check da checkbox, mas não carregamos
   essa fonte de propósito (evita depender da conta/kit da Creative Tim) — sem ela o glifo
   vira um caractere errado. Troca por um checkmark Unicode simples. */
.form-check:not(.form-switch) .form-check-input[type="checkbox"]::after {
    font-family: initial !important;
    content: "\2713" !important;
}

.form-check-input:focus {
    border-color: #1f8fe0 !important;
    box-shadow: 0 0 0 2px rgba(31, 143, 224, .25) !important;
}

/* .text-primary do tema também é o rosa #e91e63 (não uma variável), usado no wordmark da
   sidebar ("flux") e em links de destaque como "Esqueci minha senha". */
.text-primary {
    color: #1f8fe0 !important;
}

/* .btn-link herda a mesma cor rosa via --bs-btn-color; usado no botão "Reenviar" (verificação
   de e-mail pendente). Sobrescrevendo o color final em vez da variável, que é mais robusto. */
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    color: #1f8fe0 !important;
}

/* Choices.js (select com busca, usado nos campos "Cliente" de Ordens de Serviço e Orçamentos)
   vem com cor teal por padrão — ajustado pra combinar com o resto do app (borda arredondada
   igual aos outros campos, azul da marca no foco e no item selecionado dentro da lista). */
.choices__inner {
    border-radius: 8px !important;
    border-color: #d2d6da !important;
    background-color: #fff !important;
    min-height: 44px !important;
    padding: 8.75px 12px !important;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: #1f8fe0 !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-color: #d2d6da !important;
    border-radius: 8px !important;
}

.choices__list--dropdown .choices__input {
    border-color: #d2d6da !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(31, 143, 224, .12) !important;
}

.choices__list--dropdown .choices__item.is-selected {
    background-color: #1f8fe0 !important;
    color: #fff !important;
}

/* Nome de empresa/cliente longo (ex.: "RENATA M M S P PINHEIRO PERSONALIZADOS LTDA") quebrava em
   várias linhas dentro do próprio item — mesmo com uma borda separando um item do outro (tentativa
   anterior), duas linhas de uma única opção ainda pareciam duas opções soltas e diferentes pra quem
   está lendo rápido. Corta numa linha só com reticências: nunca mais parece "duplicado", e o nome
   completo continua acessível pelo tooltip nativo (atributo title, setado via JS em api.js). */
.choices__list--dropdown .choices__item--choice,
.choices__list[aria-expanded] .choices__item--choice {
    border-bottom: 1px solid #d2d6da;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.choices__list--dropdown .choices__item--choice:last-child,
.choices__list[aria-expanded] .choices__item--choice:last-child {
    border-bottom: none;
}

/* O tema já vem com suporte nativo a Choices.js (por isso os seletores .choices__* já existem
   no CSS compilado) — só que o "sublinhado" que cresce no foco da caixa fechada (.choices__list--single)
   também usa o rosa #e91e63 num background-image (gradiente, não border-color/box-shadow como nos
   outros campos), por isso passou batido das 3 regras já corrigidas acima. */
.choices .choices__list.choices__list--single,
.choices .choices__list.choices__list--single:focus {
    background-image: linear-gradient(0deg, #1f8fe0 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0) !important;
}

/* Dropzone de upload de imagem (logo da empresa, fotos de ordem de serviço) — arrastar/soltar
   ou clicar pra abrir o seletor nativo, que no celular já mostra as opções de câmera/galeria. */
.dropzone {
    position: relative;
    border: 2px dashed #d2d6da;
    border-radius: 12px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    background: #f8f9fa;
    transition: border-color .15s ease, background-color .15s ease;
}

.dropzone:hover,
.dropzone.dropzone-active {
    border-color: #1f8fe0;
    background: rgba(31, 143, 224, .06);
}

.dropzone .dropzone-icon {
    font-size: 32px;
    color: #1f8fe0;
    display: block;
}

.dropzone .dropzone-text {
    font-size: .8rem;
    color: #7b809a;
    margin: 6px 0 0;
}

.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Campos de busca/"por página"/"ordenar" soltos no cabeçalho das telas de listagem (produtos,
   clientes, ordens de serviço, orçamentos, empresas) — usam .form-control puro do Bootstrap, sem
   o wrapper .input-group-outline que o tema exige pra desenhar a borda (esse wrapper precisa de
   um <label> flutuante, que não faz sentido aqui). Sem isso o campo fica sem borda nem fundo
   nenhum, quase invisível. Desenhando a caixa na mão pra ficar igual ao resto do app. */
.form-control.form-control-sm {
    background-color: #fff !important;
    border: 1px solid #d2d6da !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: .375rem .75rem !important;
}

.form-control.form-control-sm:focus {
    border-color: #1f8fe0 !important;
    box-shadow: 0 0 0 2px rgba(31, 143, 224, .15) !important;
}

.form-control.form-control-sm::placeholder {
    color: #adb5bd;
}

/* Ícone de lupa dentro dos campos de busca das telas de listagem — só posiciona o glifo por cima
   do canto esquerdo do input e abre espaço nele (padding-left) pra o texto não ficar por baixo. */
.filtro-busca-wrap {
    position: relative;
    display: inline-block;
}

.filtro-busca-wrap .material-symbols-rounded {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #adb5bd;
    pointer-events: none;
}

.filtro-busca-wrap input.form-control.form-control-sm {
    padding-left: 34px !important;
}

/* Celular/tablet (abaixo do breakpoint xl, quando o menu lateral vira off-canvas e aparece o
   botão hambúrguer): textos e áreas de toque do menu maiores — no iPhone os padrões do tema
   ficam pequenos demais pra tocar/ler com conforto. */
@media (max-width: 1199.98px) {
    .sidenav .nav-link .nav-link-text {
        font-size: 1rem !important;
    }

    .sidenav .nav-link i.material-symbols-rounded {
        font-size: 22px !important;
    }

    .sidenav .nav-link {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .sidenav-header .navbar-brand span {
        font-size: 1rem !important;
    }

    #sidebar-usuario {
        font-size: .85rem !important;
    }

    /* Botão hambúrguer que abre o menu lateral */
    #iconNavbarSidenav {
        padding: 10px !important;
    }

    #iconNavbarSidenav .sidenav-toggler-inner {
        transform: scale(1.35);
    }

    /* Botão "X" que fecha o menu lateral aberto */
    #iconSidenav {
        font-size: 24px !important;
        padding: 10px !important;
    }

    /* Avatar do usuário no canto superior direito, maior pra facilitar o toque */
    #user-menu-toggle img {
        width: 42px !important;
        height: 42px !important;
    }

    .dropdown-menu .dropdown-item {
        font-size: .95rem !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}