/* =============================================================================
   Brist UI · camada de design tokens e refinos visuais
   -----------------------------------------------------------------------------
   Carregado DEPOIS de bootstrap.min.css / app.min.css / brist-custom.css, então
   vence por ordem em igualdade de especificidade.

   Contém três blocos:
     1. Paleta da marca (verde Brist) e retomada do "primary" do tema.
     2. Ponte --bs-* -> --ct-*  (o tema UBold usa prefixo --ct-; várias telas do
        Brist escrevem var(--bs-...), que hoje resolve para nada e cai em cores
        azuis/cinzas de fallback. A ponte faz essas telas herdarem o tema real).
     3. Refinos globais leves (cards, botões, foco, barras de rolagem). Sem
        alterar estrutura de menu, topbar ou grid.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Paleta da marca
   ----------------------------------------------------------------------------- */
:root {
    --brist-50:  #e8f5e9;
    --brist-100: #c8e6c9;
    --brist-200: #a5d6a7;
    --brist-300: #81c784;
    --brist-400: #66bb6a;
    --brist-500: #4caf50;   /* verde da marca */
    --brist-600: #43a047;
    --brist-700: #388e3c;
    --brist-800: #2e7d32;
    --brist-900: #1b5e20;
    --brist-rgb: 76, 175, 80;

    /* Sombras da marca (mais suaves que as do tema base). */
    --brist-shadow-xs: 0 1px 2px rgba(16, 40, 22, .06);
    --brist-shadow-sm: 0 2px 8px rgba(16, 40, 22, .06), 0 1px 2px rgba(16, 40, 22, .04);
    --brist-shadow-md: 0 6px 18px rgba(16, 40, 22, .08), 0 2px 6px rgba(16, 40, 22, .05);
    --brist-shadow-lg: 0 14px 38px rgba(16, 40, 22, .12), 0 4px 12px rgba(16, 40, 22, .06);
    --brist-shadow-brand: 0 8px 22px rgba(76, 175, 80, .28);

    --brist-radius-sm: .45rem;
    --brist-radius:    .7rem;
    --brist-radius-lg: 1rem;
    --brist-radius-xl: 1.35rem;

    --brist-ease: cubic-bezier(.22, .61, .36, 1);

    /* Escala tipográfica única (padrão de SaaS, base 14px).
       Use estes tokens em vez de valores soltos em rem. */
    --brist-fs-xxs: .6875rem;  /* 11px · etiquetas e microtextos */
    --brist-fs-xs:  .75rem;    /* 12px · rodapé, legendas */
    --brist-fs-sm:  .8125rem;  /* 13px · textos de apoio */
    --brist-fs-md:  .875rem;   /* 14px · corpo padrão */
    --brist-fs-lg:  1rem;      /* 16px · títulos de seção */
    --brist-fs-xl:  1.125rem;  /* 18px · título de página */
    --brist-fs-2xl: 1.375rem;  /* 22px · destaques */
}

/* O tema UBold vem com primary roxo (#6658dd), que briga com a marca verde do
   menu, do logo e do preloader. Aqui o primary passa a ser o verde Brist. */
:root,
html[data-bs-theme="light"] {
    --ct-primary: var(--brist-500);
    --ct-primary-rgb: var(--brist-rgb);
    --ct-primary-bg-subtle: var(--brist-50);
    --ct-primary-border-subtle: var(--brist-100);
    --ct-primary-text-emphasis: var(--brist-800);
    --ct-link-color: var(--brist-700);
    --ct-link-color-rgb: 56, 142, 60;
    --ct-link-hover-color: var(--brist-800);
    --ct-link-hover-color-rgb: 46, 125, 50;
    --ct-focus-ring-color: rgba(76, 175, 80, .25);

    /* O cinza de texto secundário do tema (#98a6ad) fica em torno de 2.4:1 de
       contraste sobre o branco, abaixo do mínimo de leitura. Escurecido para
       aproximadamente 4.5:1 sem mudar nada de layout. */
    --ct-secondary-color: #6c7a85;
    --ct-secondary-color-rgb: 108, 122, 133;
}

html[data-bs-theme="dark"] {
    --ct-primary: var(--brist-400);
    --ct-primary-rgb: 102, 187, 106;
    --ct-primary-bg-subtle: #17301b;
    --ct-primary-border-subtle: #2f5b33;
    --ct-primary-text-emphasis: #9edea1;
    --ct-link-color: var(--brist-300);
    --ct-link-color-rgb: 129, 199, 132;
    --ct-link-hover-color: var(--brist-200);
    --ct-link-hover-color-rgb: 165, 214, 167;
    --ct-focus-ring-color: rgba(129, 199, 132, .25);
    --ct-secondary-color: #9aa7b3;
    --ct-secondary-color-rgb: 154, 167, 179;
}

/* Componentes que fixam o roxo em hexadecimal (não leem --ct-primary). */
.btn-primary {
    --ct-btn-bg: var(--brist-500);
    --ct-btn-border-color: var(--brist-500);
    --ct-btn-hover-bg: var(--brist-600);
    --ct-btn-hover-border-color: var(--brist-600);
    --ct-btn-focus-shadow-rgb: var(--brist-rgb);
    --ct-btn-active-bg: var(--brist-700);
    --ct-btn-active-border-color: var(--brist-700);
    --ct-btn-disabled-bg: var(--brist-300);
    --ct-btn-disabled-border-color: var(--brist-300);
}

.btn-outline-primary {
    --ct-btn-color: var(--brist-700);
    --ct-btn-border-color: var(--brist-500);
    --ct-btn-hover-bg: var(--brist-500);
    --ct-btn-hover-border-color: var(--brist-500);
    --ct-btn-focus-shadow-rgb: var(--brist-rgb);
    --ct-btn-active-bg: var(--brist-600);
    --ct-btn-active-border-color: var(--brist-600);
    --ct-btn-disabled-color: var(--brist-300);
    --ct-btn-disabled-border-color: var(--brist-200);
}

.btn-soft-primary {
    --ct-btn-color: var(--brist-700);
    --ct-btn-bg: rgba(var(--brist-rgb), .12);
    --ct-btn-border-color: transparent;
    --ct-btn-hover-bg: var(--brist-500);
    --ct-btn-hover-border-color: var(--brist-500);
    --ct-btn-focus-shadow-rgb: var(--brist-rgb);
    --ct-btn-active-bg: var(--brist-600);
    --ct-btn-active-border-color: var(--brist-600);
}

.alert-primary {
    --ct-alert-color: var(--brist-800);
    --ct-alert-bg: rgba(var(--brist-rgb), .14);
    --ct-alert-border-color: rgba(var(--brist-rgb), .22);
}

.nav-pills { --ct-nav-pills-link-active-bg: var(--brist-500); }
.progress, .progress-stacked { --ct-progress-bar-bg: var(--brist-500); }

.badge-soft-primary { color: var(--brist-700); background-color: rgba(var(--brist-rgb), .16); }
.badge-outline-primary { color: var(--brist-700); border-color: var(--brist-500); }

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-radio-primary .form-check-input:checked {
    background-color: var(--brist-500);
    border-color: var(--brist-500);
}

.form-range::-webkit-slider-thumb { background-color: var(--brist-500); }
.form-range::-moz-range-thumb { background-color: var(--brist-500); }

input[data-switch="primary"]:checked + label,
input[data-switch]:checked + label { background-color: var(--brist-500); }

.nav-bordered a.active { border-bottom-color: var(--brist-500) !important; }
.ribbon-box .ribbon-primary { background-color: var(--brist-500); }

html[data-bs-theme="dark"] .btn-outline-primary { --ct-btn-color: var(--brist-300); }
html[data-bs-theme="dark"] .btn-soft-primary { --ct-btn-color: var(--brist-300); }
html[data-bs-theme="dark"] .badge-soft-primary { color: var(--brist-300); }
html[data-bs-theme="dark"] .badge-outline-primary { color: var(--brist-300); }
html[data-bs-theme="dark"] .alert-primary { --ct-alert-color: #b5e6b8; }

/* -----------------------------------------------------------------------------
   2. Ponte --bs-* -> --ct-*
   Telas escritas com as variáveis nativas do Bootstrap 5.3 passam a enxergar as
   cores reais do tema em vez de cair nos fallbacks azuis/cinzas.
   ----------------------------------------------------------------------------- */
:root,
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --bs-primary: var(--ct-primary);
    --bs-primary-rgb: var(--ct-primary-rgb);
    --bs-primary-bg-subtle: var(--ct-primary-bg-subtle);
    --bs-primary-border-subtle: var(--ct-primary-border-subtle);
    --bs-primary-text-emphasis: var(--ct-primary-text-emphasis);

    --bs-secondary: var(--ct-secondary);
    --bs-secondary-rgb: var(--ct-secondary-rgb);
    --bs-secondary-bg-subtle: var(--ct-secondary-bg-subtle);
    --bs-secondary-border-subtle: var(--ct-secondary-border-subtle);
    --bs-secondary-color: var(--ct-secondary-color);
    --bs-secondary-bg: var(--ct-secondary-bg);

    --bs-success: var(--ct-success);
    --bs-success-rgb: var(--ct-success-rgb);
    --bs-success-bg-subtle: var(--ct-success-bg-subtle);
    --bs-success-border-subtle: var(--ct-success-border-subtle);
    --bs-success-text-emphasis: var(--ct-success-text-emphasis);

    --bs-info: var(--ct-info);
    --bs-info-rgb: var(--ct-info-rgb);
    --bs-info-bg-subtle: var(--ct-info-bg-subtle);
    --bs-info-border-subtle: var(--ct-info-border-subtle);
    --bs-info-text-emphasis: var(--ct-info-text-emphasis);

    --bs-warning: var(--ct-warning);
    --bs-warning-rgb: var(--ct-warning-rgb);
    --bs-warning-bg-subtle: var(--ct-warning-bg-subtle);
    --bs-warning-border-subtle: var(--ct-warning-border-subtle);
    --bs-warning-text-emphasis: var(--ct-warning-text-emphasis);

    --bs-danger: var(--ct-danger);
    --bs-danger-rgb: var(--ct-danger-rgb);
    --bs-danger-bg-subtle: var(--ct-danger-bg-subtle);
    --bs-danger-border-subtle: var(--ct-danger-border-subtle);
    --bs-danger-text-emphasis: var(--ct-danger-text-emphasis);

    --bs-light: var(--ct-light);
    --bs-dark: var(--ct-dark);
    --bs-white: var(--ct-white);
    --bs-black: var(--ct-black);

    --bs-body-bg: var(--ct-body-bg);
    --bs-body-color: var(--ct-body-color);
    --bs-body-color-rgb: var(--ct-body-color-rgb);
    --bs-emphasis-color: var(--ct-emphasis-color);
    --bs-heading-color: var(--ct-heading-color);
    --bs-tertiary-bg: var(--ct-tertiary-bg);
    --bs-tertiary-color: var(--ct-tertiary-color);

    --bs-card-bg: var(--ct-secondary-bg);
    --bs-border-color: var(--ct-border-color);
    --bs-border-color-translucent: var(--ct-border-color-translucent);
    --bs-border-width: var(--ct-border-width);
    --bs-border-radius: var(--ct-border-radius);
    --bs-border-radius-sm: var(--ct-border-radius-sm);
    --bs-border-radius-lg: var(--ct-border-radius-lg);
    --bs-border-radius-pill: var(--ct-border-radius-pill);
    --bs-link-color: var(--ct-link-color);
    --bs-link-hover-color: var(--ct-link-hover-color);
    --bs-font-sans-serif: var(--ct-font-sans-serif);
}

/* -----------------------------------------------------------------------------
   3. Refinos globais
   ----------------------------------------------------------------------------- */

/* Suaviza o desenho das fontes (o tema usa Nunito). */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------------
   3.1 Tipografia padronizada
   O tema base traz uma escala irregular: h6 sai com 12px (menor que o corpo de
   14px), h5 com 15px e h4 com 18px. Aqui os títulos passam a seguir uma
   progressão previsível e nenhum deles fica menor que o texto comum.
   ----------------------------------------------------------------------------- */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: var(--brist-fs-xl); }
h5, .h5 { font-size: var(--brist-fs-lg); }
h6, .h6 { font-size: var(--brist-fs-md); }

@media (min-width: 1200px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ct-heading-color);
}

small, .small { font-size: var(--brist-fs-sm); }

.card-title { font-size: var(--brist-fs-lg); font-weight: 700; }
.card-body > .card-title:first-child { margin-top: 0; }

.badge { font-size: var(--brist-fs-xs); font-weight: 700; }
.form-label { font-size: var(--brist-fs-sm); font-weight: 600; }
.dropdown-item { font-size: var(--brist-fs-md); }
.table { font-size: var(--brist-fs-md); }

/* Cabeçalho de página: o tema centralizava o título com line-height de 75px.
   Trocado por espaçamento real, para casar com o topo das demais telas. */
.content-page .content { padding-top: 1.25rem; }

/* Abaixo de 992px o tema reescreve o padding do conteúdo com !important
   (regra que só existe no app.min.css, não no app.css), zerando o topo e
   deixando o conteúdo colado na barra superior. */
@media (max-width: 991.98px) {
    .content-page .content { padding-top: 1rem !important; }
}

.page-title-box { margin-bottom: 1rem; }
.page-title-box .page-title { font-size: var(--brist-fs-xl); line-height: 1.35; }
.page-title-box .page-title-right { margin-top: 0; }
h4.page-title, .page-title { font-size: var(--brist-fs-xl); }

/* Respiro entre o cabeçalho de título/ações e o primeiro card da tela.
   Antes vinha do min-height de 70px do componente; agora é margem explícita. */
.brist-page-header { margin-bottom: 1rem; }

/* Cards: cantos maiores e sombra mais leve. A borda continua zerada, como no
   tema original: componentes pequenos (navegação temporal, por exemplo) ficam
   com contorno duplo e aspecto pesado quando o card ganha borda. */
.card {
    --ct-card-border-radius: var(--brist-radius);
    box-shadow: var(--brist-shadow-sm);
    transition: box-shadow .22s var(--brist-ease), transform .22s var(--brist-ease);
}

html[data-bs-theme="dark"] .card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

/* Botões e campos com cantos consistentes. */
.btn { --ct-btn-border-radius: var(--brist-radius-sm); transition: all .18s var(--brist-ease); }
.btn-sm { --ct-btn-border-radius: .4rem; }
.btn-lg { --ct-btn-border-radius: var(--brist-radius); }

/* Leve elevação só nos botões de ação principais. Botões pequenos e grupos
   ficam de fora para não "pular" dentro de listagens densas. */
.btn:not(.btn-link):not(.btn-close):not(.btn-sm):not(.btn-group .btn):hover { transform: translateY(-1px); }
.btn:not(.btn-link):not(.btn-close):active { transform: translateY(0); }
.btn-primary:not(.btn-sm):hover { box-shadow: var(--brist-shadow-brand); }

.form-control, .form-select { border-radius: var(--brist-radius-sm); }
.form-control:focus, .form-select:focus {
    border-color: var(--brist-300);
    box-shadow: 0 0 0 .2rem rgba(var(--brist-rgb), .18);
}

.badge { border-radius: .4rem; }
.rounded-pill, .badge.rounded-pill { border-radius: 50rem !important; }

/* Anel de foco acessível, alinhado à marca. */
:focus-visible {
    outline: 2px solid var(--brist-500);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* Barra de rolagem discreta (WebKit e Firefox). */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--brist-rgb), .35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--brist-rgb), .32);
    border-radius: 50rem;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--brist-rgb), .55); background-clip: content-box; }

/* Seleção de texto na cor da marca. */
::selection { background: rgba(var(--brist-rgb), .22); }

/* -----------------------------------------------------------------------------
   3.2 Barra superior (topbar)
   ----------------------------------------------------------------------------- */
.navbar-custom {
    box-shadow: 0 1px 0 rgba(16, 40, 22, .06), 0 2px 10px rgba(16, 40, 22, .04);
    border-bottom: 1px solid rgba(16, 40, 22, .05);
}
html[data-bs-theme="dark"] .navbar-custom {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
    border-bottom-color: rgba(255, 255, 255, .06);
}

/* Ícones do topo: mesma caixa, mesmo tamanho, realce circular no hover. */
.navbar-custom .topbar-menu > li > .nav-link,
.navbar-custom .topbar-menu > li > div.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border-radius: var(--brist-radius-sm);
    transition: color .18s var(--brist-ease), background-color .18s var(--brist-ease);
}
.navbar-custom .topbar-menu > li > .nav-link:hover,
.navbar-custom .topbar-menu > li > div.nav-link:hover {
    background-color: rgba(var(--brist-rgb), .1);
    color: var(--brist-600);
}
.navbar-custom .topbar-menu .nav-link i { font-size: 1.2rem; line-height: 1; }

/* O item do usuário tem texto ao lado: não force a caixa quadrada nele. */
.navbar-custom .topbar-menu > li > .nav-user { min-width: 0; padding-inline: .5rem; gap: .1rem; }

.navbar-custom .button-toggle-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--brist-radius-sm);
    transition: background-color .18s var(--brist-ease), color .18s var(--brist-ease);
}
.navbar-custom .button-toggle-menu:hover { background-color: rgba(var(--brist-rgb), .1); color: var(--brist-600); }

/* Campo de busca do topo com acabamento melhor. */
.navbar-custom .app-search .form-control {
    border: 1px solid transparent;
    font-size: var(--brist-fs-md);
    height: 38px;
    transition: border-color .18s var(--brist-ease), background-color .18s var(--brist-ease), box-shadow .18s var(--brist-ease);
}
.navbar-custom .app-search .form-control:focus {
    border-color: var(--brist-200);
    box-shadow: 0 0 0 .2rem rgba(var(--brist-rgb), .14);
}

/* Contadores sobre os ícones. */
.navbar-custom .noti-icon-badge { font-size: var(--brist-fs-xxs); font-weight: 700; }

/* -----------------------------------------------------------------------------
   3.3 Menu lateral
   ----------------------------------------------------------------------------- */
.app-menu .menu .menu-item .menu-link {
    border-radius: var(--brist-radius-sm);
    font-size: var(--brist-fs-md);
    transition: background-color .18s var(--brist-ease), color .18s var(--brist-ease);
}
.app-menu .menu .menu-title {
    font-size: var(--brist-fs-xxs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
.app-menu .menu .sub-menu .menu-link { font-size: var(--brist-fs-sm); }
.app-menu .user-box .h5 { font-size: var(--brist-fs-md); }
.app-menu .user-box p { font-size: var(--brist-fs-xs); }

/* -----------------------------------------------------------------------------
   3.4 Rodapé
   Menor que o corpo do texto, como pediram, e usando os tokens da marca no
   lugar das cores fixas que estavam embutidas na view.
   ----------------------------------------------------------------------------- */
.footer {
    font-size: var(--brist-fs-xs);
    border-top: 1px solid var(--ct-border-color);
    background-color: var(--ct-secondary-bg);
}
.footer .small, .footer small { font-size: var(--brist-fs-xs); }
.footer .brist-muted { color: var(--ct-secondary-color); }
.footer .brist-sep { color: var(--ct-border-color); }
.footer .brist-link { color: var(--ct-secondary-color); }
.footer .brist-link:hover { color: var(--brist-600); }
.footer .brist-company-name { color: var(--ct-body-color) !important; letter-spacing: .02em; }

/* O tema posiciona o rodapé de forma absoluta no fim da página e reserva
   exatamente --ct-footer-height (60px) de espaço no conteúdo. Em telas
   estreitas o rodapé empilha em duas linhas e passa de 150px, invadindo o
   final da tela. Aqui ele volta a ocupar espaço no fluxo, então a altura real
   deixa de importar, seja qual for o tamanho do nome da empresa. */
@media (max-width: 991.98px) {
    #wrapper .content-page .footer {
        position: relative;
        height: auto;
        margin-top: .5rem;
    }

    .content-page .content {
        padding-bottom: .5rem !important;
    }
}

/* Tabelas: só o realce da linha sob o cursor, na cor da marca. O restante do
   desenho das listagens permanece como está. */
.table-hover > tbody > tr:hover > * { background-color: rgba(var(--brist-rgb), .05); }

/* Modais e offcanvas com o mesmo raio dos cards. */
.modal-content { border-radius: var(--brist-radius-lg); border: 0; box-shadow: var(--brist-shadow-lg); }
.dropdown-menu { border-radius: var(--brist-radius); border: 1px solid var(--ct-border-color); box-shadow: var(--brist-shadow-md); }

/* Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    .card, .btn, .navbar-custom .topbar-menu .nav-link { transition: none !important; }
    .btn:not(.btn-link):not(.btn-close):hover { transform: none; }
}