/* ==========================================================================
   1. Utilitários Gerais
   ========================================================================== */

.readonly {
    background-color: #e8e8e8;
    pointer-events: none !important;
    cursor: not-allowed !important;
}



/* ==========================================================================
   2. Validação de Senha
   ========================================================================== */

#password-contain p {
    padding-right: 13px;
}

#password-contain p.valid {
    color: #0ab39c;
}

#password-contain p.valid::before {
    position: relative;
    content: "✔";
}

#password-contain p.invalid {
    color: #f06548;
}

#password-contain p.invalid::before {
    position: relative;
    content: "✖";
}



/* ==========================================================================
   3. Botões
   ========================================================================== */

/* Sombra no foco/hover */
.btn-primary:focus,
.btn-primary:hover {
    box-shadow: 0 0 0 3px rgba(41, 86, 164, 0.4) !important;
}

.btn-secondary:focus,
.btn-secondary:hover {
    box-shadow: 0 0 0 3px rgba(250, 170, 49, 0.5) !important;
}

.btn-light:focus,
.btn-light:hover {
    box-shadow: 0 0 0 3px rgba(238, 238, 238, 0.6) !important;
}



/* ==========================================================================
   4. DataTables
   ========================================================================== */

/* Fix: dataTables.bootstrap5.css aplica background-color: var(--bs-table-bg) em todos os descendentes da
   tabela, tornando o dropdown-menu transparente. Style.css também define z-index: 2 no dropdown-menu,
   que fica atrás das linhas da tabela. */
.dataTables_wrapper .dropdown-menu {
    background-color: #fff;
    z-index: 1055;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Fix: style.css define `.dataTables_wrapper button { color: #fff }` para os botões de controle da tabela,
   mas essa regra vaza para botões de ação dentro das células td. Aqui restauramos as cores corretas
   para cada variante btn-outline dentro de td — modo claro. */
body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-primary {
    color: #2956a4;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-secondary {
    color: #838383;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-success {
    color: #65c15c;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-danger {
    color: #fc564a;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-warning {
    color: #ffc107;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-info {
    color: #40b8f5;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-dark {
    color: #212529;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn-outline-light {
    color: #f8f9fa;
}

body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-primary:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-primary:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-primary:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-primary.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-secondary:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-secondary:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-secondary:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-secondary.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-success:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-success:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-success:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-success.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-danger:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-danger:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-danger:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-danger.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-warning:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-warning:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-warning:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-warning.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-info:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-info:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-info:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-info.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-dark:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-dark:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-dark:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-dark.show,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-light:hover,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-light:active,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-light:focus,
body:not(.dark-only) .dataTables_wrapper tbody td .btn.btn-outline-light.show {
    color: #fff !important;
}

/* Cores dos btn-outline dentro das células td — modo escuro */
body.dark-only .dataTables_wrapper tbody td .btn-outline-primary {
    color: #7366ff !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-secondary {
    color: #b3b3b3 !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-success {
    color: #65c15c !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-danger {
    color: #fc564a !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-warning {
    color: #ffc107 !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-info {
    color: #40b8f5 !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-dark {
    color: #e9ecef !important;
}

body.dark-only .dataTables_wrapper tbody td .btn-outline-light {
    color: #2b2b36 !important;
}

/* Hover — modo escuro (amarelo pede texto escuro, demais pedem texto branco) */
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-primary:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-primary:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-primary:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-secondary:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-secondary:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-secondary:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-success:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-success:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-success:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-danger:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-danger:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-danger:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-info:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-info:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-info:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-dark:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-dark:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-dark:focus {
    color: #fff !important;
}

body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-warning:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-warning:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-warning:focus,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-light:hover,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-light:active,
body.dark-only .dataTables_wrapper tbody td .btn.btn-outline-light:focus {
    color: #000 !important;
}



/* ==========================================================================
   5. Tabela
   ========================================================================== */

/* Reduz o padding das células */
.table td.grupo-acesso {
    padding: 0.2rem 0.85rem !important;
}


/* Hover — modo claro */
body:not(.dark-only) .table {
    --bs-table-hover-bg: #fafafa !important;
}

body:not(.dark-only) .table thead.dataTable-head {
    background-color: #f7f8f9;
}

/* Hover — modo escuro */
body.dark-only .table {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
}

body.dark-only .table thead.dataTable-head {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Striped — modo escuro */
body.dark-only .table-striped tbody tr:nth-of-type(odd)>* {
    background-color: #21232b !important;
}

/* Fix: dropdown de ações dentro de célula de tabela saía translúcido. São duas causas somadas,
   ambas em style.css: (1) `.dropdown-menu .dropdown-item` recebe `opacity: 0.6` — o tema desenha
   o item apagado de propósito e só devolve opacity: 1 no hover; (2) o menu não tem fundo próprio,
   porque o --bs-dropdown-bg do Bootstrap herda --bs-body-bg e o tema define essa variável como
   `auto`, valor inválido para background-color, o que equivale a transparente. Resultado: item a
   60% sobre a linha da tabela. Aqui o menu ganha fundo sólido e o item perde a transparência; o
   realce de hover continua vindo do tema. var(--white) resolve os dois modos sozinho (#fff no
   claro, #262932 no escuro), e o `Remover` segue vermelho porque .text-danger é !important. */
td .dropdown-menu {
    background-color: var(--white);
}

td .dropdown-menu .dropdown-item {
    opacity: 1;
}

body.dark-only td .dropdown-menu .dropdown-item {
    color: #e9ecef;
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-only td .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}



/* ==========================================================================
   6. Dark Mode — Componentes
   ========================================================================== */

/* form-select */
body.dark-only .form-select {
    background-color: #262932;
    border: 1px solid #374558;
}

/* form-control: o style.css escurece fundo/borda mas não define `color`,
   então inputs fora de .theme-form ficam com texto escuro sobre fundo escuro
   (ex.: filtro de período da home). Mesma cor usada pelo tema nos modais. */
body.dark-only .form-control {
    color: rgba(255, 255, 255, 0.6);
}

/* Sidebar: item ativo com texto branco */
body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active span,
body.dark-sidebar .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active span {
    color: #fff !important;
}

/* Vanilla Smart Select */
body.dark-only .vs-container--default .vs-selection {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e9ecef;
}

body.dark-only .vs-container--default.vs-container--disabled .vs-selection {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-only .vs-dropdown.vs-container--default {
    background-color: #2b2b36;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-only .vs-dropdown.vs-container--default .vs-search {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #e9ecef;
    background-color: transparent;
}

body.dark-only .vs-dropdown.vs-container--default .vs-search:focus {
    color: #fff;
    background-color: transparent;
}

body.dark-only .vs-dropdown.vs-container--default .vs-result {
    color: #e9ecef;
}

body.dark-only .vs-dropdown.vs-container--default .vs-result:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.dark-only .vs-dropdown.vs-container--default .vs-result[aria-selected=true] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-only .vs-dropdown.vs-container--default .vs-result--highlighted {
    background-color: #2956a4;
    color: #fff;
}

body.dark-only .vs-dropdown.vs-container--default .vs-results--loading,
body.dark-only .vs-dropdown.vs-container--default .vs-results--no-results {
    color: #adb5bd;
}

body.dark-only .vs-container--default .vs-selection__placeholder {
    color: #adb5bd;
}

body.dark-only .vs-container--default .vs-selection__clear {
    color: #adb5bd;
}




/* ==========================================================================
   7. Sidebar — Abertura Compacta via Hover
   ========================================================================== */

/* 1. Largura e sombra */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
    width: 80px !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
    width: 265px !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15) !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important;
    height: 100% !important;
}

/* 2. Largura máxima dos itens de menu */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li {
    max-width: 80px !important;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li {
    max-width: 265px !important;
    margin: initial !important;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s ease !important;
}

/* 3. Textos dos itens do menu */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li a span {
    display: inline-block !important;
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.25s ease, max-width 0.25s ease, visibility 0.25s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li a span {
    opacity: 1;
    visibility: visible;
    max-width: 150px;
    transition: opacity 0.3s ease 0.15s, max-width 0.3s ease 0.15s, visibility 0.3s ease 0.15s !important;
}

/* 4. Títulos de seção */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main-title {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0 20px !important;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.25s ease, max-height 0.25s ease, visibility 0.25s ease, padding 0.25s ease, margin 0.25s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main-title {
    opacity: 1;
    visibility: visible;
    max-height: 50px;
    padding: 25px 0 6px 20px !important;
    margin-top: 10px !important;
    transition: opacity 0.3s ease 0.15s, max-height 0.3s ease 0.15s, visibility 0.3s ease 0.15s, padding 0.3s ease 0.15s, margin 0.3s ease 0.15s !important;
}

/* 5. Submenus */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links .sidebar-list .sidebar-title.active~.sidebar-submenu {
    display: none !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links .sidebar-list .sidebar-title.active~.sidebar-submenu {
    display: block !important;
}

/* 6. Setas (.according-menu) */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .according-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .according-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s !important;
}

/* 7. Badges */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .badge {
    opacity: 0;
    max-width: 0;
    padding: 0 !important;
    overflow: hidden;
    transition: opacity 0.25s ease, max-width 0.25s ease, padding 0.25s ease !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .badge {
    opacity: 1;
    max-width: 50px;
    padding: 0.45em 0.8em 0.33em !important;
    transition: opacity 0.3s ease 0.15s, max-width 0.3s ease 0.15s, padding 0.3s ease 0.15s !important;
}

/* 8. Logos */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper {
    display: none !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper {
    display: block !important;
    animation: sidebarFadeIn 0.3s ease forwards;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper {
    display: block !important;
    animation: sidebarFadeIn 0.3s ease forwards;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-icon-wrapper {
    display: none !important;
}

@keyframes sidebarFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/* ==========================================================================
   8. Layout — Sticky Footer
   ========================================================================== */

.page-wrapper .page-body-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    flex: 1 0 auto !important;
    min-height: auto !important;
}

/* z-index baixo para o sidebar (z-index: 9) passar por cima ao dar hover */
.page-wrapper .page-body-wrapper .footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    z-index: 1 !important;
}

/* ==========================================================================
   Busca de Atalhos (Topbar Search)
   ========================================================================== */

/* Spinner oculto por padrão; JS adiciona .ativo para mostrar durante o fetch */
.Typeahead-spinner {
    display: none;
}

.Typeahead-spinner.ativo {
    display: block;
}

/* Itens de resultado */
.Typeahead-menu .ProfileCard {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background-color 0.15s;
}

.Typeahead-menu .ProfileCard:last-child {
    border-bottom: none;
}

.Typeahead-menu .ProfileCard:hover,
.Typeahead-menu .ProfileCard.selecionado {
    background-color: rgba(0, 0, 0, 0.05);
}

.Typeahead-menu .ProfileCard-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7366ff;
    background-color: rgba(115, 102, 255, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 8px;
}

.Typeahead-menu .ProfileCard-realName {
    font-size: 0.875rem;
    color: #2c323f;
}

/* Mensagem de nenhum resultado */
.Typeahead-menu .EmptyMessage {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #888;
    text-align: center;
}

/* Modo escuro */
body.dark-only .Typeahead-menu .ProfileCard {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-only .Typeahead-menu .ProfileCard:hover,
body.dark-only .Typeahead-menu .ProfileCard.selecionado {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-only .Typeahead-menu .ProfileCard-realName {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-only .Typeahead-menu .EmptyMessage {
    color: rgba(255, 255, 255, 0.45);
}



/* ==========================================================================
   Correção padding header
   ========================================================================== */

.page-wrapper .page-header .header-wrapper {
    padding: 18px 30px !important;
}



/* ==========================================================================
   11. Tabs com erro de validação
   ========================================================================== */

/* Dot indicador vermelho após o texto da tab */
.nav-pills .nav-link.tab-has-error::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tab inativa com erro: texto e borda vermelhos */
.nav-pills .nav-link.tab-has-error:not(.active) {
    color: #dc3545 !important;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Tab ativa com erro: dot com borda branca para contraste com o fundo azul */
.nav-pills .nav-link.tab-has-error.active::after {
    border: 2px solid white;
    width: 10px;
    height: 10px;
}

/* Widget KPI background */
.card-kpi-bg {
    background-image: url(../images/widget-bg.png);
    background-size: cover;
}

body.dark-only .card-kpi-bg {
    background-blend-mode: color-burn;
}



/* ==========================================================================
   12. Vanilla Smart Select — Estado is-invalid
   ==========================================================================
   O VSS oculta o <select> nativo e insere .vs-container--default como
   próximo irmão imediato (insertBefore(container, select.nextSibling)).
   Por isso usamos o seletor adjacente (+) para propagar a borda vermelha
   do Bootstrap ao widget visual do VSS.
   ========================================================================== */

/* Modo claro */
select.is-invalid+.vs-container--default .vs-selection {
    border-color: #dc3545 !important;
    /* box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25) !important; */
}

/* Modo escuro */
body.dark-only select.is-invalid+.vs-container--default .vs-selection {
    border-color: #dc3545 !important;
    /* box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25) !important; */
}



/* ==========================================================================
   13. Dark Mode — Modal
   ==========================================================================
   O style.css tem regras com maior especificidade para .modal-content que
   sobrescrevem os estilos gerais de dark mode de .form-control e .form-select.
   Este bloco reestabelece as cores corretas para todos os controles de formulário
   dentro de qualquer modal quando o dark mode está ativo.
   ========================================================================== */

/* Inputs e textareas */
body.dark-only .modal .form-control {
    background-color: #262932 !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-only .modal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-only .modal .form-control:focus {
    background-color: #262932 !important;
    border-color: #2956a4 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Selects nativos */
body.dark-only .modal .form-select {
    background-color: #262932 !important;
    border-color: #374558 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Labels */
body.dark-only .modal .form-label {
    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
    14. Costumização de font nos form-controls
   ========================================================================== */

.form-control {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

.form-control::placeholder {
    color: #9ca3af;
}

.vs-container--default .vs-selection__placeholder {
    color: #9ca3af;
}

/* ==========================================================================
    15. Sidebar — desabilita capitalize automático do template
   ========================================================================== */

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a span,
.page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a span {
    text-transform: none;
}


/* Sidebarsubmenu */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-submenu li a {
    font-weight: normal !important;
}

/* Sidebar submenu ativo */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-submenu li a.active {
    color: #fff !important;
}

/* ==========================================================================
   17. Select de Marca — logo da marca
   ========================================================================== */

.marca-logo-thumb {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==========================================================================
   18. Fix: overflow:hidden no .page-wrapper quebra position:sticky
   ==========================================================================
   style.css define `.page-wrapper, .landing-page { overflow: hidden }` (regra
   pensada para a landing page de demonstração do tema). Qualquer ancestral com
   overflow != visible impede que um descendente com position:sticky "grude" de
   verdade — ele passa a rolar normalmente com o resto da página. O overflow-x
   do body já cobre a necessidade original de esconder estouro horizontal, então
   liberar aqui é seguro e necessário para sidebars sticky (ex.: resumo da
   proposta em Compras > Cotações > Lançar Proposta).
   ========================================================================== */

.page-wrapper {
    overflow: visible;
}


/* ==========================================================================
   19. Dashboard de Estoque (home) — chips de abas
   ==========================================================================
   Os chips são "tabs" visuais em formato pílula, com estado ativo e hover —
   estados que os utilitários do Bootstrap/tema não cobrem. O layout do card,
   legendas e demais elementos do dashboard usam apenas utilitários no template.
   ========================================================================== */

/* Cards equalizados (col d-flex > card flex-fill): como item flex, o card não
   encolhe abaixo da largura mínima do conteúdo (min-width: auto) — uma tabela
   larga estoura o card para fora da coluna em vez de rolar no .table-responsive.
   min-width: 0 restaura o encolhimento e devolve o scroll horizontal à tabela. */
.card.flex-fill {
    min-width: 0;
}

.db-chip {
    font-size: 11px;
    padding: 3px 11px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid #e0e4ec;
    color: #55607a;
    background: #f6f8fb;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.db-chip:not(.ativa):hover {
    background: #eaeef5;
    color: #2f3542;
}

.db-chip.ativa {
    background: rgba(41, 86, 164, 0.12);
    border-color: #2956a4;
    color: #2956a4;
    font-weight: 600;
}

/* Modo escuro */
body.dark-only .db-chip {
    background: #232743;
    border-color: #343a5a;
    color: #aab0c5;
}

body.dark-only .db-chip.ativa {
    background: rgba(41, 86, 164, 0.35);
    border-color: #4a7fd6;
    color: #9dbdf5;
}

/* Rótulos dos gráficos de barras horizontais: halo em volta do texto
   (paint-order: stroke) garante leitura tanto sobre a barra colorida
   quanto sobre o fundo do card, em qualquer tamanho de barra. */
#chart-vidros-valor .apexcharts-data-labels text,
#chart-opaco-valor .apexcharts-data-labels text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}

body.dark-only #chart-vidros-valor .apexcharts-data-labels text,
body.dark-only #chart-opaco-valor .apexcharts-data-labels text {
    fill: #e7e9f2 !important;
    stroke: #1d2035;
}

/* Textos SVG dos gráficos ApexCharts no dark mode: o Apex fixa o fill escuro
   padrão via atributo de apresentação, que não reage ao tema — a regra de
   classe abaixo vence o atributo e clareia os textos (miolo dos donuts, valor
   do gauge, rótulos de eixo). Escopado aos gráficos da home (ids "chart-*"). */
body.dark-only [id^="chart-"] .apexcharts-text,
body.dark-only [id^="chart-"] .apexcharts-datalabel-value {
    fill: #e7e9f2;
}

/* Rótulos secundários (ex.: "peças", "devoluções" no miolo do donut)
   continuam em cinza-médio, legível nos dois temas. */
body.dark-only [id^="chart-"] .apexcharts-datalabel-label {
    fill: #8a93a4;
}



/* ==========================================================================
   20. form-check-input — centralização vertical com o label
   ==========================================================================
   O Bootstrap posiciona o .form-check-input com margin-top fixo (calculado
   para uma linha de label), o que desalinha quando o label quebra em duas
   linhas ou tem altura diferente. Transformar o .form-check em flex com
   align-items:center centraliza input e label de forma confiável.

   O espaçamento padrão do BS usa padding-left:1.5em no container +
   margin-left:-1.5em no input — combinação que quebra no layout flex.
   Zeramos ambos e usamos `gap` para o respiro entre input e label. */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-left: 0;
}

.form-check .form-check-input {
    margin-top: 0;
    margin-left: 0;
    flex-shrink: 0;
}

.form-check .form-check-label {
    margin-bottom: 0;
}


/* ==========================================================================
   22. Switches do formulário — centralização vertical na linha
   ==========================================================================
   Colunas com switch (label + .form-check.form-switch) ficam mais baixas que
   as colunas vizinhas (label + .form-control/.form-select) na mesma .row, e o
   Bootstrap grid só estica a *coluna* (colunas são flex items com
   align-items:stretch por padrão) — o conteúdo interno não preenche essa
   altura sozinho. Tornando a coluna um flex-column e o switch flex-grow, ele
   passa a centralizar na altura real da linha (que já herda align-items:center
   do .form-check da seção 20). */
.switch-col {
    display: flex;
    flex-direction: column;
}

.switch-col .form-check.form-switch {
    flex: 1 1 auto;
}


/* ==========================================================================
   23. Parâmetros de Compras — elementos visuais da tela
   ==========================================================================
   Chip de ícone nos headers, linha do tempo do SLA, cartões de opção (radio
   card) da compra direta e régua de alçadas. Estados que os utilitários do
   Bootstrap/tema não cobrem; o restante da tela usa apenas utilitários. */

/* Headers dos cards da tela: neutraliza regras do tema que interferem.
   style.css aplica text-transform:capitalize no h5 e, em qualquer <span>
   filho direto de .card-header, display:block + font-size:12px +
   color:#75758a + margin-top:5px + letter-spacing:1px — o que desfigura
   o chip de ícone e os badges. Especificidade calculada para vencer
   `.card .card-header>span` (custom.css também carrega por último). */
.card .card-header.pc-card-header h5 {
    text-transform: none;
}

.card .card-header.pc-card-header > span {
    margin-top: 0;
    letter-spacing: normal;
    font-size: inherit;
    color: inherit;
    display: inline-block;
}

.card .card-header.pc-card-header > .badge {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

/* Chip de ícone no cabeçalho de cada card */
.card .card-header.pc-card-header > .pc-icon-chip,
.pc-icon-chip {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(41, 86, 164, 0.1);
    color: #2956a4;
    flex: none;
    font-size: 1rem;
}

/* Linha do tempo do SLA */
.pc-sla-step {
    background: #fff;
    border: 1px solid #e0e4ec;
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.pc-sla-step .pc-sla-valor {
    color: #2956a4;
}

.pc-sla-arrow {
    flex: 1 1 auto;
    height: 1px;
    background: #d3d9e4;
    min-width: 1rem;
    position: relative;
}

.pc-sla-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    border-left: 6px solid #d3d9e4;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
}

/* Cartões de opção (radio card) */
.pc-option-card {
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* .pc-option-card-checked é o fallback aplicado via JS para navegadores
   sem suporte a :has() (ex.: Firefox ESR antigo) */
.pc-option-card:has(.form-check-input:checked),
.pc-option-card.pc-option-card-checked {
    border-color: #2956a4 !important;
    background: rgba(41, 86, 164, 0.06);
    box-shadow: 0 0 0 0.2rem rgba(41, 86, 164, 0.1);
}

/* Régua de alçadas */
.pc-ladder {
    display: flex;
    height: 2.4rem;
    border: 1px solid #e0e4ec;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 600;
}

.pc-ladder > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.pc-ladder .pc-faixa-livre {
    background: rgba(101, 193, 92, 0.15);
    color: #3d8a35;
    flex: 0 0 26%;
}

.pc-ladder .pc-faixa-simples {
    background: rgba(41, 86, 164, 0.1);
    color: #2956a4;
    border-left: 1px solid #e0e4ec;
    flex: 1 1 auto;
}

.pc-ladder .pc-faixa-dupla {
    background: #f6f8fb;
    color: #55607a;
    border-left: 1px solid #e0e4ec;
    flex: 0 0 26%;
}

.pc-ladder-legenda {
    display: flex;
    font-size: 0.74rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.pc-ladder-legenda span:nth-child(1) {
    flex: 0 0 26%;
}

.pc-ladder-legenda span:nth-child(2) {
    flex: 1 1 auto;
}

.pc-ladder-legenda span:nth-child(3) {
    flex: 0 0 26%;
    text-align: end;
}

/* Botão de adicionar com borda tracejada, como ação secundária de grade */
.pc-btn-dashed {
    border-style: dashed !important;
}

/* Modo escuro */
body.dark-only .card .card-header.pc-card-header > .pc-icon-chip,
body.dark-only .pc-icon-chip {
    background: rgba(41, 86, 164, 0.35);
    color: #9dbdf5;
}

body.dark-only .pc-sla-step {
    background: #262932;
    border-color: #374558;
}

body.dark-only .pc-sla-step .pc-sla-valor {
    color: #9dbdf5;
}

body.dark-only .pc-sla-arrow {
    background: #374558;
}

body.dark-only .pc-sla-arrow::after {
    border-left-color: #374558;
}

body.dark-only .pc-option-card:has(.form-check-input:checked),
body.dark-only .pc-option-card.pc-option-card-checked {
    border-color: #4a7fd6 !important;
    background: rgba(41, 86, 164, 0.25);
}

body.dark-only .pc-ladder {
    border-color: #374558;
}

body.dark-only .pc-ladder .pc-faixa-livre {
    background: rgba(101, 193, 92, 0.18);
    color: #8fd688;
}

body.dark-only .pc-ladder .pc-faixa-simples {
    background: rgba(41, 86, 164, 0.35);
    color: #9dbdf5;
    border-left-color: #374558;
}

body.dark-only .pc-ladder .pc-faixa-dupla {
    background: #232743;
    color: #aab0c5;
    border-left-color: #374558;
}