.loading-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    background-color: #435ebe;
    z-index: 1051;
}

.loading-page .loading-content {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader>div {
    animation: is-rotating 1s infinite;
    animation-duration: 1.2s;
    animation-delay: 0;
    border: 4px solid #e5e5e5;
    border-radius: 50%;
    border-top-color: blue;
    height: 35px;
    width: 35px;
}

@keyframes is-rotating {
    to {
        transform: rotate(2turn);
    }
}

/**
 * LOADING SWEETALERT2
 */
.swal2-loading {
    padding-bottom: 20px !important;
}

/* O SweetAlert separa os botões com margin de .3125em, que encosta um no
   outro em diálogo de três ações (ex.: os dois modos de envio do TEF). O gap
   soma ao margin e vale também quando a linha quebra. */
.swal2-actions {
    gap: .35rem;
}

*:focus,
*:active {
    outline: 0 !important;
}

.sweet-alert button.confirm {
    outline: none !important;
}


.table-responsive {
    min-height: 500px;
}

.table-responsive .table {
    width: 99% !important;
}

.custom-file-input {
    color: transparent;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: 'Select some files';
    color: black;
    display: inline-block;
    background: #435EBE;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file-input:hover::before {
    border-color: black;
}

.custom-file-input:active {
    outline: 0;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

.boder-dashed {
    border-style: dashed !important;
}

.dropdown-menu {
    --bs-dropdown-min-width: 0rem !important;
}

.table-condensed td>span {
    border: 1px solid rgb(229, 237, 244) !important
}

#save-floating {
    bottom: 3%;
    right: 2%;
    z-index: 1000;
}

/* =========================================================
   Topbar do #main (header.sidebar-view.app-topbar em menu.blade.php)
   ---------------------------------------------------------
   Barra em card, presa no topo ao rolar: burger à esquerda,
   sino + chip do usuário à direita. Tokens no #app (claro) e
   body.theme-dark #app (escuro), mesmo padrão do offcanvas.css.
   Superfície e raio iguais aos cards Mazer (#fff / #1e1e2d, .7rem).
   z-index 1020: acima do conteúdo, abaixo de offcanvas (1045)
   e modal (1055); o dropdown do usuário nasce dentro da barra.
   ========================================================= */
#app {
    --topbar-bg: #fff;
    --topbar-border: #e4e8f0;
    --topbar-shadow: 0 2px 10px rgba(25, 42, 70, .06);
    --topbar-icon: #5b6b8c;
    --topbar-hover: rgba(67, 94, 190, .08);
    --topbar-avatar-bg: rgba(67, 94, 190, .12);
}

body.theme-dark #app {
    --topbar-bg: #1e1e2d;
    --topbar-border: #2d2d42;
    --topbar-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    --topbar-icon: #a9a9c4;
    --topbar-hover: rgba(255, 255, 255, .06);
    --topbar-avatar-bg: rgba(67, 94, 190, .35);
}

/* Colada ao topo e às laterais: "sangra" o padding de 2rem do #main com
   margens negativas (o conteúdo abaixo mantém o padding), sem raio nem
   borda lateral — só a linha inferior e a sombra separam do conteúdo. */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: -2rem -2rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 3.5rem;
    padding: .375rem 1.5rem;
    background: var(--topbar-bg);
    border: 0;
    border-bottom: 1px solid var(--topbar-border);
    border-radius: 0;
    box-shadow: var(--topbar-shadow);
}

/* Até 1199px o sidebar do Mazer vira overlay (position:absolute, left:-300px
   → 0 com #sidebar.active) com z-index 10 e backdrop 9 — abaixo da topbar
   (1020), então o menu abria "por baixo" da barra. Sobe os dois acima da
   topbar e abaixo do offcanvas (1045) / modal (1055). */
@media screen and (max-width: 1199px) {
    .sidebar-wrapper {
        z-index: 1030;
    }

    .sidebar-backdrop {
        z-index: 1029;
    }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--topbar-icon);
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
    background: var(--topbar-hover);
    color: var(--bs-primary);
}

.topbar-icon-btn.has-notifications {
    color: var(--bs-warning);
}

.topbar-icon-btn > .bi {
    /* Mesma correção da regra global ".btn > .bi" (abaixo): o tema Mazer
       impõe `.bi { width/height: 1rem }` e `.bi:before { vertical-align: sub }`,
       o que desloca o glifo dentro do botão redondo. Em inline-flex o
       ::before vira item flex e centraliza; a caixa volta a seguir o
       font-size do botão. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    line-height: 1;
    vertical-align: middle;
}

/* O tema esconde .burger-btn (display:none) — em app.css como `.burger-btn`
   e em app-dark.css como `body.theme-dark .burger-btn`, que tem especificidade
   maior; o seletor com `body` empata com essa e ganha por vir depois. Sem isso o
   burger sumia no escuro e o `space-between` jogava sino/tema/usuário para a
   esquerda. O `d-block` antigo, sendo !important, matava o inline-flex do
   .topbar-icon-btn — por isso o burger ficava no canto do quadrado. */
body .app-topbar .burger-btn {
    display: inline-flex;
}

.topbar-badge {
    position: absolute;
    top: .2rem;
    right: .2rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    background: var(--bs-danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--topbar-bg);
}

.topbar-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--topbar-border);
    margin: 0 .5rem;
}

.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .625rem .25rem .25rem;
    border-radius: 2rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color .15s ease;
}

.topbar-user:hover,
.topbar-user:focus-visible,
.topbar-user.show {
    background: var(--topbar-hover);
    color: var(--bs-body-color);
}

.topbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--topbar-avatar-bg);
    color: var(--bs-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-user-name {
    font-weight: 600;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .topbar-user-name {
        max-width: 16rem;
    }
}

.topbar-user-menu {
    min-width: 14rem;
}

.topbar-user-menu .dropdown-header {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#datatableMenu {
    position: absolute;
    z-index: 1000000;
}

/* =========================================================
   Variáveis do Bootstrap 5.3 ausentes neste build (5.2)
   ---------------------------------------------------------
   --bs-secondary-bg / --bs-secondary-color / --bs-tertiary-bg
   não são declaradas por app.css nem por app-dark.css, e
   --bs-border-color só existe no :root com valor claro
   (#dee2e6), nunca redefinido no escuro. Resultado: todo
   var(--bs-secondary-bg, #f8f9fa) e var(--bs-border-color)
   renderiza CLARO dentro do tema escuro — foi o que apagava
   as linhas de grupo do Plano de Contas e do DRE no hover.

   Declarando no body.theme-dark, as ~84 ocorrências
   espalhadas passam a escurecer sozinhas. No tema claro as
   vars seguem indefinidas de propósito: cada uso continua
   caindo no fallback que já tem hoje.
   ========================================================= */
body.theme-dark {
    --bs-border-color: #3f3f5c;
    --bs-secondary-bg: rgba(255, 255, 255, 0.06);
    --bs-secondary-color: #8a8aa3;
    --bs-tertiary-bg: rgba(255, 255, 255, 0.03);
}

/* =========================================================
   Conta Título no select do Plano de Contas: o servidor manda
   `disabled` (ela existe na lista só para dar a hierarquia) e
   o Select2 já a torna inerte. Aqui a linha ganha fundo próprio
   — o cinza do texto que o tema aplica sozinho é discreto demais.
   O tom âmbar é o mesmo do badge "Título".

   Escopo pela classe do dropdown (dropdownCssClass em main.js,
   ligada ao data-badge="lancamento"): fora dos selects de conta
   `disabled` mantém a aparência padrão. A linha "Buscando…"
   também é marcada como desabilitada pelo Select2 — fica de fora
   pelo :not(.loading-results).
   ========================================================= */
.select2-accounts-dropdown .select2-results__option--disabled:not(.loading-results) {
    background-color: #fff6e0;
    cursor: not-allowed;
}

/* select2 dark */
body.theme-dark {
    /* No escuro o ".select2-results ul li { color: !important }" abaixo
       anularia o cinza do tema — daí a cor própria, também !important. */
    .select2-accounts-dropdown .select2-results__option--disabled:not(.loading-results) {
        background-color: rgba(255, 193, 7, 0.1) !important;
        color: #9a9aab !important;
    }

    .select2-container .select2-selection--single {
        background-color: rgb(27, 27, 41) !important;
        border-color: rgb(53, 53, 79) !important;
        color: rgb(186, 192, 196) !important;
    }

    .select2-container .select2-selection--multiple {
        background-color: rgb(27, 27, 41) !important;
        border-color: rgb(53, 53, 79) !important;
        color: rgb(186, 192, 196) !important;
    }

    .select2-container .select2-selection--single .select2-container--focus .select2-container--open {
        box-shadow: 0 0 0 .25rem rgb(39, 46, 81);
    }

    .select2-container .select2-selection--nultiple .select2-container--focus .select2-container--open {
        box-shadow: 0 0 0 .25rem rgb(39, 46, 81);
    }

    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
        color: rgb(186, 192, 196) !important;
    }

    .select2-container .select2-search__field {
        background-color: rgb(27, 27, 41) !important;
        border-color: rgb(53, 53, 79) !important;
        color: rgb(186, 192, 196) !important;
    }

    .select2-container .select2-selection__placeholder {
        color: rgb(186, 192, 196) !important;
    }

    .select2-container .select2-selection__rendered {
        color: rgb(186, 192, 196) !important;
    }

    .select2-results ul li {
        color: rgb(186, 192, 196) !important;
    }

    .select2-results ul li[aria-selected=true] {
        background-color: rgb(82, 82, 94) !important;
    }

    .select2-results ul li.select2-results__option--selected {
        background-color: rgb(39, 46, 81) !important;
    }

    .select2-results ul li.select2-results__option--selected[aria-selected=true] {
        background-color: rgb(39, 46, 81) !important;
    }

    /*.select2-container .select2-search__field {
        box-shadow:  0 0 0 .25rem rgb(39, 46, 81);
    }*/

    .select2-dropdown {
        background-color: rgb(27, 27, 41) !important;
    }
}

/* =========================================================
   TABULATOR no tema escuro
   ---------------------------------------------------------
   Todas as tabelas usam tabulator.min.css + tabulator_bootstrap5
   (v5.4.2), carregados via @stack('styles') DEPOIS deste arquivo.
   Por isso cada regra repete o seletor completo do tema com o
   prefixo body.theme-dark, para vencer por especificidade — em
   especial o hover: o Tabulator 5.4 usa selectable:"highlight"
   por padrão, então TODA linha carrega .tabulator-selectable e a
   regra do tema `.tabulator-row.tabulator-selectable:hover
   { #ced4da }` (0,3,0) passava por cima do antigo
   `body.theme-dark .tabulator-row` e pintava a linha de cinza
   claro com texto claro em cima.

   Sem !important de propósito (só nas calcs, onde o próprio tema
   usa): assim classes de destaque das telas — ex. `.new-product
   !important` em fiscal/entries/show — continuam vencendo.

   Paleta: mesma do restante do dark (card #1e1e2d, inputs
   rgb(27,27,41), texto #c2c2d9, borda --bs-border-color).
   Só body.theme-dark — o tema claro não muda.
   ========================================================= */
body.theme-dark {
    --tab-bg: #1e1e2d;
    --tab-bg-alt: #1b1b29;
    --tab-bg-hover: #2a2a40;
    --tab-bg-strong: #262638;
    --tab-fg: #c2c2d9;
    --tab-fg-muted: #8a8aa3;
    --tab-border: var(--bs-border-color, #3f3f5c);
    --tab-primary: #435ebe;

    /* container e área de dados */
    .tabulator {
        background-color: var(--tab-bg);
        border: 1px solid var(--tab-border);
        color: var(--tab-fg);
    }

    .tabulator .tabulator-tableholder .tabulator-table {
        background-color: var(--tab-bg);
        color: var(--tab-fg);
    }

    .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents,
    .tabulator .tabulator-tableholder .tabulator-placeholder span {
        color: var(--tab-fg-muted);
    }

    /* header */
    .tabulator .tabulator-header {
        background-color: var(--tab-bg);
        color: var(--tab-fg);
        border-top: 1px solid var(--tab-border);
        border-bottom: 1px solid var(--tab-border);
    }

    .tabulator .tabulator-header .tabulator-header-contents,
    .tabulator .tabulator-header .tabulator-col {
        background-color: var(--tab-bg);
        color: var(--tab-fg);
    }

    .tabulator .tabulator-header .tabulator-col {
        border-right: none;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-moving,
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: var(--tab-bg-strong);
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
        color: var(--tab-fg-muted);
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter,
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter {
        color: var(--tab-fg);
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
        background-color: rgb(27, 27, 41);
        color: var(--tab-fg);
        border-color: var(--tab-border);
    }

    .tabulator .tabulator-header .tabulator-calcs-holder,
    .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
    .tabulator .tabulator-footer .tabulator-calcs-holder,
    .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
    .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {
        background: var(--tab-bg-strong) !important;
        border-color: var(--tab-border) !important;
    }

    /* linhas */
    .tabulator-row {
        background-color: var(--tab-bg);
        border-bottom: 1px solid var(--tab-border);
        color: var(--tab-fg);
    }

    .tabulator-row.tabulator-row-even {
        background-color: var(--tab-bg-alt);
    }

    .tabulator-row.tabulator-selectable:hover {
        background-color: var(--tab-bg-hover);
    }

    .tabulator-row.tabulator-selected {
        background-color: rgba(67, 94, 190, 0.30);
    }

    .tabulator-row.tabulator-selected:hover {
        background-color: rgba(67, 94, 190, 0.42);
    }

    .tabulator-row.tabulator-row-moving,
    .tabulator-row.tabulator-moving {
        background: var(--tab-bg-strong);
        border-color: var(--tab-border);
    }

    .tabulator-row .tabulator-cell {
        border-right: 1px solid var(--tab-border);
    }

    .tabulator-row .tabulator-cell.tabulator-editing {
        border-color: var(--tab-primary);
    }

    .tabulator-row .tabulator-cell.tabulator-editing input,
    .tabulator-row .tabulator-cell.tabulator-editing select,
    .tabulator-row .tabulator-cell.tabulator-editing textarea {
        background-color: rgb(27, 27, 41);
        color: var(--tab-fg);
    }

    .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
        background: var(--tab-fg-muted);
    }

    .tabulator-row .tabulator-cell .tabulator-data-tree-control {
        background: rgba(255, 255, 255, 0.10);
        border-color: var(--tab-fg-muted);
    }

    .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,
    .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
    .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
        background: var(--tab-fg);
    }

    /* grupos */
    .tabulator-row.tabulator-group {
        background: var(--tab-bg-strong);
        border-color: var(--tab-border);
        color: var(--tab-fg);
    }

    .tabulator-row.tabulator-group:hover {
        background-color: var(--tab-bg-hover);
    }

    /* footer / paginação */
    .tabulator .tabulator-footer {
        background-color: var(--tab-bg-alt);
        color: var(--tab-fg);
        border-top: 1px solid var(--tab-border);
    }

    .tabulator .tabulator-footer .tabulator-paginator {
        color: var(--tab-fg);
    }

    .tabulator .tabulator-footer .tabulator-page,
    .tabulator .tabulator-footer .tabulator-page-size {
        background: transparent;
        border: 1px solid var(--tab-border);
        color: var(--tab-fg);
    }

    .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
        background: var(--tab-bg-hover);
        border-color: var(--tab-border);
        color: #fff;
    }

    .tabulator .tabulator-footer .tabulator-page:disabled {
        background: transparent;
        border-color: var(--tab-border);
        color: #6c6c85;
    }

    .tabulator .tabulator-footer .tabulator-page.active {
        background-color: var(--tab-primary);
        border-color: var(--tab-primary);
        color: #fff;
    }

    /* popups: menu de contexto, editor "list", tooltip */
    .tabulator-popup-container {
        background: var(--tab-bg);
        border: 1px solid var(--tab-border);
        color: var(--tab-fg);
    }

    .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
        background: var(--tab-bg-hover);
    }

    .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after {
        border-color: var(--tab-fg-muted);
    }

    .tabulator-menu .tabulator-menu-separator {
        border-top-color: var(--tab-border);
    }

    .tabulator-edit-list .tabulator-edit-list-item,
    .tabulator-edit-list .tabulator-edit-list-placeholder,
    .tabulator-edit-list .tabulator-edit-list-group {
        color: var(--tab-fg);
    }

    .tabulator-edit-list .tabulator-edit-list-item.active,
    .tabulator-edit-list .tabulator-edit-list-item:hover {
        background: var(--tab-primary);
        color: #fff;
    }

    .tabulator-edit-list .tabulator-edit-list-item.focused,
    .tabulator-edit-list .tabulator-edit-list-item.active.focused {
        outline-color: var(--tab-primary);
    }

    /* overlay de carregamento / erro */
    .tabulator .tabulator-alert .tabulator-alert-msg {
        background: var(--tab-bg);
        color: var(--tab-fg);
        border-color: var(--tab-border);
    }

    .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
        color: var(--tab-fg);
    }
}

/* =========================================================
   BADGES bg-light-* no tema escuro
   ---------------------------------------------------------
   O app-dark.css transforma .bg-light-* num fundo saturado
   (ex.: warning -> #ffd145) contando com o color:#000 da
   própria classe. Mas a marcação usa "bg-light-X text-X", e
   .text-X tem !important — o texto volta a ser da mesma cor
   do fundo (amarelo sobre amarelo, contraste ~1.1:1).

   Aqui o padrão vira pílula discreta: fundo escuro tingido
   da cor + texto claro na mesma cor (contraste ~7:1, AA).
   Vale para .badge em qualquer módulo; o tema claro não muda.
   Não é preciso escopo #app: o PDV Touch e as telas de login
   nunca recebem body.theme-dark (não carregam initTheme.js).
   ========================================================= */
body.theme-dark .badge.bg-light-primary {
    background-color: rgba(114, 134, 206, 0.20) !important;
    color: #9db0f0 !important;
}

body.theme-dark .badge.bg-light-secondary {
    background-color: rgba(145, 152, 158, 0.20) !important;
    color: #b6bdc4 !important;
}

body.theme-dark .badge.bg-light-success {
    background-color: rgba(83, 165, 127, 0.20) !important;
    color: #6ee7a8 !important;
}

body.theme-dark .badge.bg-light-danger {
    background-color: rgba(232, 124, 134, 0.20) !important;
    color: #f4949c !important;
}

body.theme-dark .badge.bg-light-warning {
    background-color: rgba(255, 209, 69, 0.20) !important;
    color: #ffd45e !important;
}

body.theme-dark .badge.bg-light-info {
    background-color: rgba(74, 215, 244, 0.20) !important;
    color: #6fdff7 !important;
}

.logo>a>img {
    max-width: 135px;
    height: auto !important;
}

/* Logo centralizada no topo do sidebar (menu.blade.php). O "x" que fecha
   o menu no mobile (d-xl-none) já é absolute no tema (right:1.75rem;
   top:.25rem, medido do .sidebar-header); aqui passa a ancorar no wrapper
   flex (position-relative) e a alinhar ao centro vertical da logo. O `body`
   no seletor empata com o `body.theme-dark .sidebar-wrapper .sidebar-toggler.x`
   do app-dark.css e vence por vir depois. */
.sidebar-wrapper .sidebar-header .logo {
    text-align: center;
}

body .sidebar-wrapper .sidebar-header .sidebar-toggler.x {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nav-tabs {
    --bs-nav-tabs-border-width: auto !important;
}

span[data-toggle=tooltip] {
    font-size: 20px;
    color: #ffa800;
    padding-left: 5px;
    padding-bottom: 2px;
}

.form-select {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

.form-select option {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

/* =========================================================
   ÍCONE DENTRO DE BOTÃO E DE ADDON  (regra global)
   ---------------------------------------------------------
   Duas heranças do tema (Mazer, em app.css) desalinham todo
   ícone bootstrap-icons que não esteja num container flex:

     body .bi:before { vertical-align: sub }  -> joga o glifo
       abaixo da linha do texto;
     .bi { height: 1rem; width: 1rem }        -> caixa fixa, que
       só serve para font-size 1rem: em .btn-sm sobra espaço e
       em botão maior o glifo vaza.

   Como as duas dependem do font-size e do line-height locais, o
   mesmo ícone sai mais alto num botão e mais baixo noutro —
   era corrigido tela a tela (cashiers, product_lookup) até esta
   regra.

   A correção mexe SÓ no <i>: o botão continua inline-block, com
   o mesmo layout e o mesmo espaçamento de sempre. Uma tentativa
   anterior de tornar o .btn um container flex foi revertida —
   ela reposicionava também os botões que já estavam corretos.

   Escopo de propósito em .btn e .input-group-text, que é onde o
   ícone aparece sozinho numa caixa. Um `.bi` global mexeria em
   ícone solto no meio de texto, que depende da baseline mesmo.
   ========================================================= */

.btn > .bi,
.input-group-text > .bi {
    /* Container flex: o ::before vira item flex e o
       `vertical-align: sub` do tema deixa de valer nele. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    /* Desfaz a caixa fixa do tema — a caixa volta a acompanhar o
       font-size do botão. Precisa ser explícito: em inline-flex,
       width/height passam a valer (num <i> inline eram ignorados). */
    width: auto;
    height: auto;
    flex-shrink: 0;

    /* De volta ao padrão do bootstrap-icons, no lugar do `sub`.
       O glifo é desenhado descendo um pouco abaixo da baseline,
       então esse -.125em é o que o alinha com o texto. */
    vertical-align: -.125em;
}

/* =========================================================
   UI explicativa: <x-help-icon> e <x-help-panel>
   ---------------------------------------------------------
   Mora aqui, e não em @push('styles'), porque um componente
   Blade renderiza depois que o @stack('styles') do master já
   foi resolvido — o push nunca chegaria ao <head>.

   Atenção ao tema: --bs-secondary-color só existe no
   body.theme-dark (ver bloco das variáveis do BS 5.3 acima),
   então todo uso precisa de fallback explícito.
   ========================================================= */

.help-icon {
    /* inline-flex pelo mesmo motivo dos ícones do painel: centraliza o glifo
       em vez de deixá-lo pendurado na baseline. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    opacity: .6;
    cursor: help;
    vertical-align: middle;
    margin-left: .25rem;
    transition: opacity .15s;
}

.help-icon:hover,
.help-icon:focus-visible {
    opacity: 1;
}

.help-icon:focus-visible {
    outline: 2px solid var(--bs-primary, #435ebe);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ícone de alerta/banner ao lado de um texto de várias linhas.
   O ícone precisa alinhar com a PRIMEIRA linha, não com o centro do bloco —
   por isso a caixa tem a altura de uma linha (1.5em) e centraliza o glifo
   dentro dela. Substitui o `mt-1` no olho, que só acerta por coincidência
   quando a fonte não muda. Use junto de `align-items: start` na linha. */
.alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    line-height: 1;
    flex-shrink: 0;
}

.help-panel {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .4rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.help-panel-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .625rem .875rem;
    background: none;
    border: 0;
    text-align: left;
    color: var(--bs-body-color, #4b4b5f);
}

.help-panel-toggle:focus-visible {
    outline: 2px solid var(--bs-primary, #435ebe);
    outline-offset: -2px;
    border-radius: .4rem;
}

/* Os ícones da barra viram caixas flex que centralizam o próprio glifo.
   Sem isso o glifo continua posicionado por baseline dentro de uma linha de
   1.5 de altura, e o vertical-align: -.125em do bootstrap-icons o joga abaixo
   do texto do título. Em item flex o vertical-align simplesmente não se
   aplica, então o alinhamento para de depender de ordem de carregamento. */
.help-panel-icon,
.help-panel-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.help-panel-icon {
    color: #e9a13b;
    font-size: 1rem;
}

.help-panel-title {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    flex-grow: 1;
}

.help-panel-chevron {
    font-size: .75rem;
    opacity: .6;
    transition: transform .2s;
}

.help-panel-toggle.collapsed .help-panel-chevron {
    transform: rotate(-90deg);
}

.help-panel-body {
    padding: 0 .875rem .875rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--bs-secondary-color, #6c757d);
}

.help-panel-body > :last-child {
    margin-bottom: 0;
}

.help-panel-body strong {
    color: var(--bs-body-color, #4b4b5f);
}

/* Legenda dos tipos/estados dentro do painel. */
.help-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem .75rem;
    margin-top: .5rem;
}

.help-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
    .help-icon,
    .help-panel-chevron {
        transition: none;
    }
}