/* =========================================================================
   Tema Light / Dark (LINCE)
   - Estado base (sem .dark-mode) = LIGHT (padrão).
   - O dark é ativado por classes do AdminLTE (.dark-mode, navbar-dark,
     sidebar-dark-primary) aplicadas via theme.js + escopo .dark-mode.
   - As regras html[data-tema="dark"] abaixo servem só de anti-flash:
     pré-pintam as superfícies grandes antes do theme.js reconciliar as
     classes no DOMContentLoaded (o servidor renderiza light por padrão).
   ========================================================================= */

:root {
  --lince-green: #28a745;
  --lince-green-dark: #1e7e34;
}

/* -------------------------------------------------------------------------
   Anti-flash: quando a preferência salva é dark, pré-pinta o essencial.
   ------------------------------------------------------------------------- */
html[data-tema="dark"] body,
html[data-tema="dark"] .content-wrapper {
  background-color: #454d55;
  color: #e9ecef;
}

html[data-tema="dark"] .main-sidebar {
  background-color: #343a40;
}

html[data-tema="dark"] .main-header.navbar {
  background-color: #343a40;
  border-color: #4b545c;
}

/* -------------------------------------------------------------------------
   Acabamento do tema LIGHT (alinhado às imagens de referência).
   Escopado em body:not(.dark-mode) para não tocar no dark.
   ------------------------------------------------------------------------- */
body:not(.dark-mode) {
  background-color: #f4f6f9;
}

/* Cards brancos, cantos arredondados e sombra suave (look das imagens) */
body:not(.dark-mode) .card {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Sidebar clara: texto/ícones em verde da marca (em vez do azul padrão) */
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link,
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link p,
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link .nav-icon {
  color: var(--lince-green-dark);
}

body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: rgba(40, 167, 69, 0.08);
}

/* Item ativo da sidebar clara: fundo verde + texto branco */
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active p,
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
body:not(.dark-mode) .sidebar-light-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--lince-green);
  color: #fff;
}

/* Links de conteúdo, tabelas, breadcrumb e text-primary em verde no light */
body:not(.dark-mode) .content a:not(.btn):not(.nav-link):not(.page-link),
body:not(.dark-mode) table a:not(.btn),
body:not(.dark-mode) .breadcrumb-item a,
body:not(.dark-mode) .content-header a,
body:not(.dark-mode) a.text-primary,
body:not(.dark-mode) .text-primary {
  color: var(--lince-green-dark) !important;
}

body:not(.dark-mode) .content a:not(.btn):not(.nav-link):not(.page-link):hover,
body:not(.dark-mode) .breadcrumb-item a:hover {
  color: var(--lince-green) !important;
}

/* -------------------------------------------------------------------------
   Tela de login: respeita o tema.
   ------------------------------------------------------------------------- */
.login-page {
  background-color: #e9ecef;
}

html[data-tema="dark"] .login-page {
  background-color: #343a40;
}

html[data-tema="dark"] .login-box .card,
html[data-tema="dark"] .login-box .card-body {
  background-color: #454d55;
  color: #e9ecef;
}