/* ==========================================================================
   DO-Tickets — Shell Global (Etapa 2)
   --------------------------------------------------------------------------
   Onde a Etapa 1 (dt-design-system.css) tratou do CONTEUDO das telas
   (campos, botoes, paineis de formulario), esta camada trata do QUADRO em
   volta delas: navbar, menu lateral, barra de abas do Adianti, listagens
   (TDataGrid + filtros), cards de dashboard, abas de TNotebook, modais e
   painel lateral.

   ORDEM DE CARGA
   Carregado por libraries_user.html, imediatamente depois de
   dt-design-system.css e, portanto, o ULTIMO CSS da pagina antes de {HEAD}.
   Consome os tokens --dt-* definidos pelo design system.

   RELACAO COM O dostickets-adminlte.css
   Aquele arquivo carrega logo antes deste e ja cobre boa parte do tema
   escuro usando os mesmos tokens --dt-*. Depois que a Etapa 2 unificou a
   paleta, as regras dele passaram a renderizar com as cores deste design
   system. Portanto NAO reescrevemos o que ele ja resolve — este arquivo
   cuida apenas do que ficou faltando ou do que estava com cor fixa.

   Dois problemas que ele nao resolve e que tratamos aqui:
   a) `.datagrid-header-actions` tem `background-color:#fff` fixo no
      application.css, sem token — a barra de filtros das listagens fica
      branca dentro de um card escuro.
   b) Todo o polimento do menu lateral esta escrito sob `body.dark-mode`.
      Como o <aside> do layout.html tem `data-bs-theme="dark"` fixo, ele e
      escuro nos DOIS temas — mas no tema claro a classe .dark-mode nao
      existe no body e o menu perde o polimento. Aqui aplicamos nos dois.

   USO DE !important
   Restrito aos pontos em que o application.css legado ja usa !important
   (cabecalho de #chart-box, borda das abas ativas). Cada ocorrencia esta
   comentada com a regra que precisa vencer.
   ========================================================================== */


/* ==========================================================================
   20. ESTRUTURA / CANVAS
   ========================================================================== */

.app-wrapper.wrapper {
    background-color: var(--dt-canvas);
}

.app-main.content-wrapper {
    background-color: var(--dt-canvas);
}

/* !important necessario: o dostickets-adminlte.css pinta a area de conteudo
   com `body.dark-mode .app-main.content-wrapper { background-color:
   var(--dt-surface) !important }`. Como os cards tambem usam --dt-surface,
   no tema escuro eles ficavam exatamente da cor do fundo e perdiam a
   separacao — no tema claro o fundo e o canvas, mais escuro que o card.
   Igualamos o comportamento dos dois temas. Mesma especificidade (0,3,1) da
   regra original; vence pela ordem de carga. */
body.dark-mode .app-main.content-wrapper,
[data-bs-theme="dark"] .app-main.content-wrapper {
    background-color: var(--dt-canvas) !important;
}

/* O application.css fixa `html, body { height: 95.5% }`, herdado de um
   layout antigo: o body fica menor que a viewport e o conteudo transborda,
   produzindo uma barra de rolagem parasita. Voltamos ao comportamento
   normal. O padding do banner de ambiente de testes entra no calculo porque
   o Bootstrap aplica box-sizing:border-box globalmente. */
html {
    height: auto;
}

body {
    height: auto;
    min-height: 100vh;
}

/* O <body> do layout.html tem a utilitaria `bg-body-tertiary`, que o
   Bootstrap aplica com !important — medimos #f8f9fa no lugar do canvas
   #f4f6f9, criando uma emenda de tom visivel abaixo do rodape em telas com
   pouco conteudo. Mesmo tratamento dado ao <aside>: em vez de disputar com
   outro !important, alimentamos a variavel que a utilitaria consome. */
body.builder-template-layout {
    --bs-tertiary-bg-rgb: 244, 246, 249;
    --bs-bg-opacity: 1;
}

[data-bs-theme="dark"] body.builder-template-layout,
body.builder-template-layout.dark-mode {
    --bs-tertiary-bg-rgb: 19, 26, 35;   /* = --dt-canvas escuro (#131a23) */
}

.app-content.content > .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* ==========================================================================
   21. NAVBAR (app-header)
   ========================================================================== */

.app-header.main-header.navbar {
    min-height: 56px;
    background-color: var(--dt-surface);
    border-bottom: 1px solid var(--dt-border);
    box-shadow: var(--dt-shadow-xs);
}

.app-header.main-header.navbar > .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    min-width: 0;
}

.app-header.main-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
}

.app-header.main-header .dt-navbar-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(16rem, 40vw);
    margin-right: 0;
}

.app-header.main-header .dt-appbar-actions {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .125rem;
    margin-left: auto !important;
    min-width: 0;
}

.app-header.main-header .dt-appbar-actions > .nav-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.app-header.main-header .dt-appbar-actions .navbar-custom-menu {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.app-header.main-header .navbar-nav > .nav-item > .nav-link,
.app-header.main-header .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 40px;
    padding: .375rem .625rem;
    color: var(--dt-text-muted);
    border-radius: var(--dt-radius);
    transition: background-color var(--dt-transition),
                color var(--dt-transition);
}

.app-header.main-header .nav-link:hover,
.app-header.main-header .nav-link:focus-visible {
    color: var(--dt-text);
    background-color: var(--dt-surface-sunken);
}

.app-header.main-header .nav-link:focus-visible {
    outline: 0;
    box-shadow: var(--dt-focus-ring);
}

.app-header.main-header .nav-link > i {
    font-size: 1rem;
    line-height: 1;
}

/* Marca. O .brand-logo ja recebe a cor primaria do dostickets-adminlte.css;
   aqui so acertamos proporcao e peso do texto. */
.dt-navbar-brand,
.app-sidebar .brand-link {
    font-weight: 600;
    color: var(--dt-text);
    text-decoration: none;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    box-shadow: var(--dt-shadow-xs);
}

.app-header .brand-text,
.app-sidebar .brand-text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    font-size: .9375rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contadores de chat / mensagens / notificacoes */
.app-header .navbar-badge,
.app-header .badge.navbar-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 1.05rem;
    padding: .15rem .3rem;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--dt-surface);
}

/* Zera o contador quando nao ha nada pendente: o layout renderiza "0" fixo. */
.app-header .navbar-badge[data-count="0"] {
    display: none;
}

.app-header .nav-item {
    position: relative;
}

/* Menu do usuario */
.menu-user.dropdown-menu {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-lg);
}

.menu-user .user-header {
    background-color: var(--dt-surface-muted);
    border-bottom: 1px solid var(--dt-border);
    color: var(--dt-text);
}

.menu-user .user-header img {
    border: 2px solid var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
}

.menu-user .user-footer {
    background-color: var(--dt-surface-muted);
    border-top: 1px solid var(--dt-border);
}

.dropdown-menu {
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-lg);
    background-color: var(--dt-surface);
    padding: .375rem;
}

.app-header.main-header .dropdown-menu {
    max-width: calc(100vw - 1rem);
    z-index: 2050;
}

.app-header.main-header .dropdown-menu-end,
.app-header.main-header .dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
}

.app-header.main-header .dropdown-menu-lg {
    width: min(20rem, calc(100vw - 1rem));
    min-width: min(20rem, calc(100vw - 1rem));
}

.dropdown-menu .dropdown-item {
    border-radius: var(--dt-radius-sm);
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--dt-text);
}

/* Texto em --dt-text, e nao em azul: sobre o fundo translucido do
   --dt-primary-soft no tema escuro, o azul cheio nao teria contraste. */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--dt-primary-soft);
    color: var(--dt-text);
}

.dropdown-menu .dropdown-divider {
    border-top-color: var(--dt-border);
    margin: .375rem 0;
}

.dropdown-menu .dropdown-header {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dt-text-subtle);
}


/* ==========================================================================
   22. MENU LATERAL (app-sidebar / #side-menu)
   --------------------------------------------------------------------------
   O <aside> do layout.html carrega data-bs-theme="dark" fixo, entao o menu
   e escuro nos dois temas. O custom.js transforma #side-menu em .sidebar-menu
   e liga o treeview do AdminLTE v4; os submenus continuam saindo do Adianti
   como `ul.nav-treeview`.
   ========================================================================== */

/* Cor de fundo da barra.
   NAO adianta declarar `background-color` aqui: o <aside> do layout.html tem
   a classe utilitaria `bg-body-secondary`, que o Bootstrap 5 aplica como
   `background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity))
   !important`. Uma declaracao normal perderia para o !important, e medimos
   isso na pratica: a barra vinha #343a40 (o cinza padrao do tema escuro do
   Bootstrap) em vez da cor pretendida.
   Em vez de escalar para outro !important, alimentamos a variavel que
   aquela regra consome. O resultado e a mesma cor nos dois temas — o valor
   repete de proposito o #121c2a que o dostickets-adminlte.css usa sob
   body.dark-mode, para a barra nao mudar de tom ao alternar o tema. */
.app-sidebar.main-sidebar {
    --bs-secondary-bg-rgb: 18, 28, 42;
    --bs-bg-opacity: 1;
    border-right: 1px solid rgba(148, 163, 184, .16);
}

.app-sidebar .sidebar-brand {
    background-color: rgba(0, 0, 0, .18);
}

/* Barra de rolagem discreta — o menu tem 50+ itens. */
.app-sidebar .sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

.app-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .32);
    border-radius: 999px;
}

.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, .55);
}

/* Cartao do usuario */
.app-sidebar .user-panel {
    align-items: center;
    gap: .625rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.app-sidebar .user-panel .info a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
}

.app-sidebar .user-panel .info small {
    font-size: .75rem;
    font-weight: 400;
    color: rgba(226, 232, 240, .60);
}

/* --------------------------------------------------------------------------
   Itens do menu.
   Escrito sem depender de body.dark-mode: vale nos dois temas, porque o
   proprio aside e sempre escuro.
   -------------------------------------------------------------------------- */

#side-menu.sidebar-menu,
.app-sidebar .nav-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 .5rem;
}

#side-menu .nav-link,
.app-sidebar .nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .5rem .625rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(226, 232, 240, .80);
    border-radius: var(--dt-radius);
    transition: background-color var(--dt-transition),
                color var(--dt-transition),
                box-shadow var(--dt-transition);
}

#side-menu .nav-link:hover,
#side-menu .nav-link:focus,
.app-sidebar .nav-sidebar .nav-link:hover,
.app-sidebar .nav-sidebar .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .07);
}

#side-menu .nav-link:focus-visible,
.app-sidebar .nav-sidebar .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(var(--dt-primary-rgb), .55);
}

/* Item ativo: faixa de cor a esquerda + fundo suave. */
#side-menu .nav-link.active,
.app-sidebar .nav-sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(var(--dt-primary-rgb), .20);
    box-shadow: inset 3px 0 0 var(--dt-primary);
}

#side-menu .nav-link p,
.app-sidebar .nav-sidebar .nav-link p {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#side-menu .nav-icon,
.app-sidebar .nav-sidebar .nav-icon {
    flex: 0 0 1.5rem;
    font-size: .9375rem;
    text-align: center;
    color: rgba(226, 232, 240, .62);
    transition: color var(--dt-transition);
}

#side-menu .nav-link:hover .nav-icon,
#side-menu .nav-link.active .nav-icon,
.app-sidebar .nav-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}

/* Seta do submenu. O Adianti pode emitir `.right` (v3) ou `.nav-arrow` (v4);
   cobrimos os dois. A rotacao no menu-open ja vem do dostickets-adminlte.css,
   aqui garantimos o mesmo para a marcacao .has-treeview do Adianti. */
#side-menu .nav-arrow,
#side-menu .nav-link > p > .right,
#side-menu .nav-link > .right {
    margin-left: auto;
    font-size: .75rem;
    opacity: .55;
    transition: transform var(--dt-transition), opacity var(--dt-transition);
}

#side-menu .nav-item.menu-open > .nav-link .nav-arrow,
#side-menu .nav-item.menu-open > .nav-link > p > .right,
#side-menu .nav-item.menu-open > .nav-link > .right,
#side-menu li.menu-open > a > p > .right,
#side-menu li.menu-open > a > .right {
    transform: rotate(-90deg);
    opacity: .9;
}

/* Submenus */
#side-menu .nav-treeview {
    padding-left: .5rem;
    margin: 2px 0 4px;
    border-left: 1px solid rgba(148, 163, 184, .22);
}

#side-menu .nav-treeview > .nav-item > .nav-link,
#side-menu .nav-treeview > li > a {
    min-height: 34px;
    padding-top: .375rem;
    padding-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 400;
    color: rgba(226, 232, 240, .66);
}

#side-menu .nav-treeview > .nav-item > .nav-link:hover,
#side-menu .nav-treeview > li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

/* Titulo de secao (nav-header) */
.app-sidebar .nav-header {
    padding: 1rem .875rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .75);
}

/* Badge de contagem dentro do menu */
.app-sidebar .nav-badge,
#side-menu .badge {
    margin-left: auto;
    font-size: .6875rem;
    font-weight: 700;
    padding: .2rem .4rem;
    border-radius: 999px;
}

/* Nao ha estilo de "menu mini" aqui de proposito: o modo compacto do
   AdminLTE v4 exige a classe `sidebar-mini` no <body>, e o layout.html usa
   `sidebar-expand-lg`. Nessa configuracao `sidebar-collapse` esconde a
   barra inteira em vez de reduzi-la, entao regras de icone centralizado
   nunca chegariam a ser aplicadas. */


/* ==========================================================================
   23. RODAPE
   ========================================================================== */

.app-footer.main-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
    background-color: var(--dt-surface);
    border-top: 1px solid var(--dt-border);
    color: var(--dt-text-muted);
}

.dt-footer-admin-link {
    color: var(--dt-text-muted);
    text-decoration: none;
    font-size: .8125rem;
}

.dt-footer-admin-link:hover {
    color: var(--dt-primary-ink);
}


/* ==========================================================================
   24. BARRA DE ABAS DO ADIANTI (#adianti_tab_content)
   --------------------------------------------------------------------------
   As cores base ja vem tokenizadas do dostickets-adminlte.css. Aqui tratamos
   apenas a forma: o application.css desenha as abas com o visual de
   `nav-tabs` do Bootstrap 3 (bordas em tres lados, cantos quadrados).
   ========================================================================== */

#adianti_content .adianti_tabs_container {
    border-bottom: 1px solid var(--dt-border);
    margin-bottom: .75rem;
}

#adianti_tab_content {
    border-bottom: 0;
    gap: 2px;
}

#adianti_tab_content .adianti-tab {
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0;
    transition: background-color var(--dt-transition),
                color var(--dt-transition),
                border-color var(--dt-transition);
}

#adianti_tab_content .adianti-tab:not(.active):hover {
    background-color: var(--dt-surface-muted);
    color: var(--dt-text);
    border-bottom-color: var(--dt-border-strong);
}

#adianti_tab_content .adianti-tab.active {
    font-weight: 600;
    background-color: var(--dt-surface);
}

#adianti_tab_content .adianti-close-tab {
    margin-top: 0;
    border-radius: 50%;
    line-height: 20px;
}

#adianti_tab_content .adianti-close-tab:hover {
    background-color: var(--dt-danger-soft);
}

#adianti_content .tab-arrow {
    appearance: none;
    justify-content: center;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    font: inherit;
    line-height: 1;
}


/* ==========================================================================
   25. PAINEIS DE LISTAGEM E DASHBOARD
   ========================================================================== */

.panel,
.card {
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg);
    background-color: var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
}

.panel > .panel-heading,
.card > .card-header {
    padding: .875rem 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg) var(--dt-radius-lg) 0 0;
}

.panel > .panel-heading .panel-title,
.card > .card-header .card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
}

.panel > .panel-footer,
.card > .card-footer {
    padding: .75rem 1.125rem;
    background-color: var(--dt-surface-muted);
    border-top: 1px solid var(--dt-border);
    border-radius: 0 0 var(--dt-radius-lg) var(--dt-radius-lg);
}

/* Cabecalho do painel de graficos.
   !important necessario: o application.css:2821 pinta
   `#chart-box > .panel-heading { background-color:#2196F3 !important }`. */
#chart-box > .panel-heading {
    color: var(--dt-text) !important;
    background-color: var(--dt-surface-muted) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--dt-border) !important;
}

/* Widgets de dashboard do AdminLTE (small-box / info-box). */
.small-box,
.info-box {
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-sm);
    border: 1px solid var(--dt-border);
    overflow: hidden;
    transition: transform var(--dt-transition), box-shadow var(--dt-transition);
}

.small-box:hover,
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--dt-shadow);
}

.small-box > .inner h3,
.info-box .info-box-number {
    font-weight: 700;
    letter-spacing: -.02em;
}

.small-box .small-box-footer {
    background-color: rgba(0, 0, 0, .10);
    font-size: .8125rem;
    padding: .5rem;
}

.info-box .info-box-icon {
    border-radius: var(--dt-radius) 0 0 var(--dt-radius);
}

/* FAIXAS DE DESTAQUE DO FLUXO DE EVENTO
   O stepper sinaliza em que etapa o usuario esta por uma faixa colorida no
   topo do card — azul para a atual, verde para as concluidas, cinza para as
   pendentes — e o painel de tabela usa a mesma ideia em ciano.

   O dostickets-adminlte.css apaga as tres com
   `body.dark-mode .card { border-color: var(--dt-border) !important }`.
   Medido no tema escuro: as etapas atual, concluida e pendente ficavam todas
   com a mesma borda #2c3948 e o indicador de "voce esta aqui" desaparecia.

   Por isso estas regras vivem aqui e nao no register_css da tela: o
   !important so pode ser vencido por outro !important, e ai decide a
   especificidade. Os seletores do stepper somam (0,3,0) contra os (0,2,1) da
   regra que atrapalha. O painel de tabela tem so uma classe propria, entao
   repete o seletor de tema para empatar em (0,2,1) e vencer por vir depois. */
.evento-modern-stepper .card.active {
    border-top: 3px solid var(--dt-primary) !important;
}

.evento-modern-stepper .card.completed {
    border-top: 3px solid var(--dt-success) !important;
}

.evento-modern-stepper .card.upcoming {
    border-top: 3px solid var(--dt-border-strong) !important;
}

.evento-modern-table-panel,
body.dark-mode .evento-modern-table-panel,
[data-bs-theme="dark"] .evento-modern-table-panel {
    border-top: 3px solid var(--dt-info) !important;
}


/* ==========================================================================
   26. LISTAGENS: BARRA DE FILTROS E ACOES
   --------------------------------------------------------------------------
   `.datagrid-header-actions` e a faixa que o Mad Builder gera acima das
   listagens, com os filtros de busca a esquerda e os botoes a direita.
   O application.css:2944 fixa `background-color:#fff` sem token, o que
   produz uma tarja branca dentro do card no tema escuro.
   ========================================================================== */

.datagrid-header-actions {
    /* Tudo o que muda a forma dos campos aqui passa por TOKEN, nunca por
       declaracao direta. A regra base dos campos no dt-design-system.css tem
       especificidade (0,8,1) por causa da cadeia de :not(), e um seletor de
       contexto como `.datagrid-header-actions input.tfield` (0,2,1) perde
       dela. Medimos exatamente isso: o <select> encolhia para 34px (o
       seletor base dele e so (0,1,1)) enquanto o <input> continuava com
       42px, deixando a barra desalinhada. Redefinindo os tokens, os dois
       obedecem — e os botoes acompanham, porque .btn tambem usa
       --dt-field-h. */
    --dt-field-h: 2.125rem;      /* 34px — barra compacta */
    --dt-field-font: .8125rem;
    --dt-field-width: auto;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.125rem;
    background-color: var(--dt-surface);
    border-bottom: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg) var(--dt-radius-lg) 0 0;
}

.datagrid-header-actions > div {
    align-items: center;
    gap: .5rem;
}

/* Os campos de filtro herdam a altura padrao da Etapa 1 (42px). Dentro da
   barra de acoes eles ficam mais compactos, para nao dominar a listagem.

   O `width: auto` mantem os filtros lado a lado: `.form-control` e um bloco
   de largura 100%, e num container flex com wrap cada campo ocupava uma
   linha inteira. Isto NAO atropela telas que definem o tamanho no PHP —
   `$campo->setSize('100%')` emite `style="width:100%"` no proprio elemento,
   e estilo inline vence qualquer regra de folha sem !important. Ou seja,
   quem ja escolheu um tamanho continua com ele; quem nao escolheu passa a
   ficar em linha. */
.datagrid-header-actions input.tfield,
.datagrid-header-actions select.tcombo,
.datagrid-header-actions .form-control {
    padding-top: .25rem;
    padding-bottom: .25rem;
    min-width: 11rem;
    flex: 0 1 auto;
}

.datagrid-header-actions .btn {
    padding: .3125rem .75rem;
    font-size: .8125rem;
    flex: 0 0 auto;
}

/* Barra de filtros das telas de evento (markup proprio da aplicacao). */
.eventos-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: 1rem 1.125rem;
    background-color: var(--dt-surface-muted);
    border-bottom: 1px solid var(--dt-border);
}

.eventos-filter-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--dt-text-muted);
}


/* ==========================================================================
   27. LISTAGENS: TABELA
   ========================================================================== */

/* Rolagem horizontal contida.
   Tabelas do Adianti costumam ter 8+ colunas; sem isto a pagina inteira
   rola na horizontal no celular. O overflow fica no wrapper, nunca na
   tabela, para nao recortar dropdowns da coluna de acoes — que sao
   posicionados pelo Bootstrap com position:absolute dentro da celula. */
.panel > .panel-body > .table-responsive,
.card > .card-body > .table-responsive,
.eventos-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Zebra discreta: melhora o rastreamento horizontal em listas largas. */
.tdatagrid_body tr:nth-of-type(even) td {
    background-color: var(--dt-surface-muted);
}

.tdatagrid_body tr:nth-of-type(even):hover td,
.tdatagrid_body tr:hover td {
    background-color: var(--dt-primary-soft);
}

/* Correcao de um defeito pre-existente do tema escuro.
   O dostickets-adminlte.css pinta a CELULA com
   `body.dark-mode .tdatagrid_body tr td { background-color: var(--dt-surface) !important }`
   e tenta o hover na LINHA (`tr:hover`, sem td). Como o fundo da celula
   cobre o da linha e ainda tem !important, o hover simplesmente nao
   aparecia em nenhuma listagem no tema escuro. Aqui o hover volta a valer,
   mirando a celula e usando !important pelo mesmo motivo. */
body.dark-mode .tdatagrid_body tr:hover td,
[data-bs-theme="dark"] .tdatagrid_body tr:hover td {
    background-color: rgba(var(--dt-primary-rgb), .22) !important;
}

/* Linha selecionada.
   !important necessario: o application.css:1053 usa
   `.table tbody tr.selected td { background-color:#6c757d !important }`. */
.table tbody tr.selected td,
.tdatagrid_body tr.selected td {
    background-color: rgba(var(--dt-primary-rgb), .16) !important;
    color: var(--dt-text) !important;
}

/* Cabecalho fixo ao rolar, quando a listagem usa .table-fixed-header. */
.table-fixed-header thead th,
.table-fixed-header thead td {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--dt-surface-muted);
}

/* Coluna de acoes */
td.tdatagrid_cell.action {
    white-space: nowrap;
    text-align: center;
}

td.tdatagrid_cell.action .btn {
    min-height: 1.875rem;
    padding: .25rem .625rem;
    font-size: .8125rem;
    box-shadow: none;
}

td.tdatagrid_cell.action .btn:hover {
    transform: none;
    background-color: var(--dt-surface-sunken);
}

/* Rodape de paginacao do Adianti */
.panel > .panel-footer > .tpagenavigation,
.panel > .panel-footer > .tpagenavigation_resume {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--dt-text-muted);
}

/* Estado vazio: o Adianti nao gera markup proprio para "nenhum registro",
   entao estilizamos a celula unica que sobra ocupando a linha inteira. */
.tdatagrid_body tr td[colspan]:only-child {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: .875rem;
    color: var(--dt-text-muted);
}

/* Chips e badges usados nas listagens de evento */
.eventos-chip,
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Badges do Bootstrap 4 (.badge-success, .badge-danger, ...).
   O Bootstrap 5 REMOVEU essas classes e as substituiu por .text-bg-*. Como
   nada mais as define, elas caem no `.badge` base do BS5, que traz
   `color: #fff` sem cor de fundo — ou seja, texto branco sobre fundo branco.
   Medimos `background-color: rgba(0,0,0,0)` com `color: rgb(255,255,255)`:
   os selos de status ficam literalmente invisiveis.
   O codigo da aplicacao usa essas classes em ~95 pontos (badge-success,
   badge-warning, badge-danger, badge-secondary, badge-info, badge-primary,
   badge-light, badge-dark), entao reintroduzimos o mapa de cores em vez de
   reescrever as telas.
   -------------------------------------------------------------------------- */
/* As cores abaixo sao tons mais fechados que os tokens semanticos
   (--dt-success, --dt-warning, --dt-info). Isso e proposital: aqueles tons
   sao calibrados para bordas e icones, onde 3:1 basta. Num selo o texto
   branco fica por cima do preenchimento, e ai vale o criterio de texto
   normal da WCAG AA (4.5:1) — o selo tem 12px, abaixo do limite de "texto
   grande". Medimos o --dt-success original em 3,30:1 com branco; os valores
   usados aqui ficam todos acima de 4,5:1. */
.badge.badge-primary   { color: #fff; background-color: #2563eb; }
.badge.badge-success   { color: #fff; background-color: #15803d; }
.badge.badge-warning   { color: #fff; background-color: #b45309; }
.badge.badge-danger    { color: #fff; background-color: #dc2626; }
.badge.badge-info      { color: #fff; background-color: #0e7490; }
.badge.badge-secondary { color: #fff; background-color: #64748b; }
.badge.badge-dark      { color: #fff; background-color: #334155; }

.badge.badge-light {
    color: var(--dt-text);
    background-color: var(--dt-surface-sunken);
    border: 1px solid var(--dt-border);
}


/* ==========================================================================
   28. ABAS (TNotebook / nav-tabs)
   ========================================================================== */

/* !important necessario: o application.css:2827 aplica
   `.nav-tabs .nav-link.active { border-top: 3px solid #2196F3 !important }`,
   que desenha uma barra azul no topo da aba, fora da paleta. Trocamos a
   marcacao de aba ativa para um sublinhado na cor primaria. */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-top: 0 !important;
    border-bottom: 2px solid var(--dt-primary) !important;
    color: var(--dt-primary-ink);
    background-color: transparent;
    font-weight: 600;
}

.nav-tabs {
    gap: 2px;
    border-bottom: 1px solid var(--dt-border);
}

.nav-tabs .nav-link {
    padding: .5rem .875rem;
    font-size: .875rem;
    color: var(--dt-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--dt-text);
    background-color: var(--dt-surface-muted);
    border-bottom-color: var(--dt-border-strong);
}

.tnotebook .frame.tab-content {
    background-color: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-top: 0;
    border-radius: 0 0 var(--dt-radius-lg) var(--dt-radius-lg);
}


/* ==========================================================================
   29. MODAIS (TWindow / jQuery UI dialog)
   ========================================================================== */

.ui-dialog {
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-lg);
    background-color: var(--dt-surface);
    overflow: hidden;
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.125rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dt-text);
    background-color: var(--dt-surface-muted);
    border: 0;
    border-bottom: 1px solid var(--dt-border);
    border-radius: 0;
}

/* Janelas MDI: o application.css:28 usa `background-color:#007bff` com texto
   branco. Alinhamos com a paleta mantendo o contraste da barra de titulo. */
.mdi_window .ui-dialog-titlebar {
    height: auto;
    min-height: 44px;
    color: #fff;
    background-color: var(--dt-primary);
    border-bottom-color: var(--dt-primary-hover);
}

.mdi_window .ui-dialog-titlebar .ui-dialog-title {
    color: #fff;
}

.ui-dialog .ui-dialog-titlebar-close {
    border-radius: var(--dt-radius-sm);
}

.ui-widget-overlay {
    background: rgba(15, 23, 42, .45);
    opacity: 1;
}


/* ==========================================================================
   30. PAINEL LATERAL (#adianti_right_panel)
   ========================================================================== */

#adianti_right_panel.right-panel {
    background-color: var(--dt-surface);
    border-left: 1px solid var(--dt-border);
    box-shadow: var(--dt-shadow-lg);
}

/* Mesma especificidade (1,3,0) da regra do application.css:433, que fixa
   `background:#f9f9f9`; vence pela ordem de carga. */
#adianti_right_panel > div > div.panel > div.panel-heading {
    background-color: var(--dt-surface-muted);
    border-bottom: 1px solid var(--dt-border);
    color: var(--dt-text);
}


/* ==========================================================================
   31. RESPONSIVO
   ========================================================================== */

@media (max-width: 991.98px) {
    .datagrid-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .datagrid-header-actions > div {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .app-header.main-header.navbar {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .app-header.main-header.navbar > .container-fluid {
        gap: .375rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .app-header.main-header .dt-navbar-brand {
        max-width: 34vw;
    }

    .app-header.main-header .brand-text {
        font-size: .8125rem;
    }

    .app-header.main-header .dt-appbar-actions .navbar-custom-menu {
        display: none !important;
    }

    .app-header.main-header .dt-appbar-actions > .nav-item > .nav-link,
    .app-header.main-header .dt-appbar-actions > .nav-item > .btn.nav-link {
        min-width: 38px;
        min-height: 38px;
        padding-left: .45rem;
        padding-right: .45rem;
    }

    .app-header.main-header .dropdown-menu {
        position: fixed !important;
        top: calc(56px + env(safe-area-inset-top, 0px) + .35rem) !important;
        right: .5rem !important;
        left: .5rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
    }

    .app-header.main-header .dropdown-header {
        overflow: hidden;
    }

    .app-header.main-header .dropdown-header h6,
    .app-header.main-header .dropdown-header small,
    .app-header.main-header .dropdown-header .text-sm {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-content.content > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* Na barra de filtros do celular os campos voltam a 16px para evitar o
       zoom automatico do iOS ao focar um input. */
    /* No celular os filtros voltam a ocupar a linha inteira e recuperam a
       altura e a fonte cheias — 16px evita o zoom automatico do iOS ao
       focar um campo. Tudo via token, pelo mesmo motivo do bloco acima. */
    .datagrid-header-actions {
        --dt-field-width: 100%;
        --dt-field-h: 2.875rem;
        --dt-field-font: 1rem;
    }

    .datagrid-header-actions input.tfield,
    .datagrid-header-actions select.tcombo,
    .datagrid-header-actions .form-control {
        flex: 1 1 100%;
    }

    .eventos-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .app-footer.main-footer {
        justify-content: center;
        text-align: center;
    }

    /* Modais ocupam a tela inteira no celular. */
    .ui-dialog {
        max-width: 100vw;
        border-radius: 0;
    }
}

@media (max-width: 374.98px) {
    .app-header.main-header .dt-navbar-brand .brand-text {
        display: none !important;
    }
}


/* ==========================================================================
   32. PASTILHAS DE COR E UTILITARIAS DE TEXTO
   --------------------------------------------------------------------------
   CONTEXTO DA CASCATA
   O libraries_theme.html carrega adminlte-colors-v3.min.css DEPOIS do
   adminlte-colors.min.css do v4. Quem vence, portanto, e a paleta do v3:
   teal e #20c997 (e nao o #12827d do v4), orange e #fd7e14, purple existe.
   Nenhuma dessas cores esta quebrada — o problema e outro, e e de contraste.

   A. ICONE DAS PASTILHAS
   As classes .bg-* do Bootstrap 5 e do AdminLTE definem apenas o fundo. A cor
   do glifo nunca e fixada, entao ela e herdada do texto do corpo — que muda
   junto com o tema. O efeito medido e que cada pastilha e legivel em um tema
   e some no outro:

       tema claro (glifo #212529)     tema escuro (glifo #e2e8f0)
       bg-purple  2,37  invisivel     bg-purple  5,28  ok
       bg-indigo  2,15  invisivel     bg-indigo  5,83  ok
       bg-navy    1,07  invisivel     bg-navy   13,44  ok
       bg-dark    1,00  invisivel     bg-dark   12,51  ok
       bg-teal    7,25  ok            bg-teal    1,73  invisivel
       bg-orange  6,00  ok            bg-orange  2,08  invisivel

   Isso atinge os info-box e KPIs de todos os relatorios, alem do stepper de
   evento. A correcao fixa a tinta do glifo por cor de fundo, escolhendo entre
   branco e #212529 pelo que mede melhor — a mesma logica do .text-bg-* do
   Bootstrap. Nao usamos um branco geral: em teal, orange, info, warning e
   light o branco e justamente a pior escolha.

   B. UTILITARIAS DE TEXTO
   A paleta v3 declara essas cores so em :root, sem variante escura, e o
   .text-secondary do Bootstrap tambem nao acompanha o tema. Como texto, os
   contrastes medidos que reprovam no AA (minimo 4,5) sao:

       claro:  text-teal 2,13   text-orange 2,57
       escuro: text-navy 1,06   text-indigo 2,18   text-purple 2,40
               text-secondary 3,34

   As demais ja passam e ficam intocadas — text-teal no escuro mede 7,35 e
   text-orange 6,09, entao sobrescreve-las seria mexer no que ja funciona.

   O !important e obrigatorio nas regras de texto: a utilitaria de origem ja
   usa !important, e so um !important de especificidade maior a vence.
   ========================================================================== */

/* --- A. tinta do glifo nas pastilhas ------------------------------------- */

/* Contextos em que a aplicacao usa .bg-* como pastilha de icone preenchida.
   Fora daqui (botoes, cards, badges) nada muda. */
.info-box-icon,
.small-box > .icon,
.evento-modern-step-icon,
.config-modern-primary-icon {
    color: var(--dt-chip-ink, #fff);
}

/* Fundos claros: o glifo precisa ser escuro.
   Contraste com #212529: info 7,88 / warning 9,46 / light 14,63 /
   teal 7,25 / orange 6,00 / lime 11,41 / olive 4,40 / fuchsia 4,07 /
   pink 4,04. Todos superam o branco no mesmo fundo. */
.info-box-icon.bg-info,          .small-box > .icon.bg-info,
.info-box-icon.bg-warning,       .small-box > .icon.bg-warning,
.info-box-icon.bg-light,         .small-box > .icon.bg-light,
.info-box-icon.bg-teal,          .small-box > .icon.bg-teal,
.info-box-icon.bg-orange,        .small-box > .icon.bg-orange,
.info-box-icon.bg-lime,          .small-box > .icon.bg-lime,
.info-box-icon.bg-olive,         .small-box > .icon.bg-olive,
.info-box-icon.bg-fuchsia,       .small-box > .icon.bg-fuchsia,
.info-box-icon.bg-pink,          .small-box > .icon.bg-pink,
.evento-modern-step-icon.bg-info,
.evento-modern-step-icon.bg-warning,
.evento-modern-step-icon.bg-teal,
.evento-modern-step-icon.bg-orange,
.config-modern-primary-icon.bg-info,
.config-modern-primary-icon.bg-warning,
.config-modern-primary-icon.bg-teal,
.config-modern-primary-icon.bg-orange {
    --dt-chip-ink: #212529;
}

/* --- B. utilitarias de texto -------------------------------------------- */

/* Tema claro: teal e orange sao vivos demais sobre fundo branco.
   #0d7a63 mede 5,27 e #b45309 mede 5,02 — este ultimo e o mesmo tom ja usado
   no .badge-warning, o que mantem a paleta coerente. */
.text-teal   { color: #0d7a63 !important; }
.text-orange { color: #b45309 !important; }

/* Tema escuro: purple, indigo e navy precisam de tons claros.
   Sobre o card escuro medem 6,53 / 6,53 / 6,32. */
[data-bs-theme="dark"] .text-purple,
body.dark-mode .text-purple { color: #b39ddb !important; }

[data-bs-theme="dark"] .text-indigo,
body.dark-mode .text-indigo { color: #a99cf5 !important; }

[data-bs-theme="dark"] .text-navy,
body.dark-mode .text-navy { color: #8ea6cc !important; }

/* No escuro, teal e orange voltam ao tom vivo do v3, que ali ja passa
   (7,35 e 6,09). Sem isto o tom escurecido do tema claro vazaria. */
[data-bs-theme="dark"] .text-teal,
body.dark-mode .text-teal { color: #20c997 !important; }

[data-bs-theme="dark"] .text-orange,
body.dark-mode .text-orange { color: #fd7e14 !important; }

/* .text-secondary nasce de --bs-secondary-rgb, que o Bootstrap nao atualiza
   no tema escuro: fica em #6c757d e mede 3,34 sobre o card. O tom neutro do
   design system mede 6,10 e ja e o usado em todo o resto da interface. */
[data-bs-theme="dark"] .text-secondary,
body.dark-mode .text-secondary { color: var(--dt-text-muted) !important; }


/* ==========================================================================
   33. IMPRESSAO
   ========================================================================== */

@media print {
    .app-header,
    .app-sidebar,
    .app-footer,
    .adianti_tabs_container,
    .datagrid-header-actions,
    .teste-ambiente-banner,
    #adianti_right_panel {
        display: none !important;
    }

    .app-main.content-wrapper,
    .app-wrapper.wrapper {
        margin: 0 !important;
        background: #fff !important;
    }
}
