/* ===========================
    SUMÁRIO DO ARQUIVO
    1.  Reset e comportamento global
    2.  Botão voltar ao topo
    3.  Body (fundo, overlay, marca d’água)
    4.  Tipografia base (h1–h6, p, small, links, listas, blockquote)
    5.  Painéis elevados
    6.  Sidebar (estrutura, header, logo, toggle, footer)
    7.  Rodapé global (landing-footer)
    8.  Animações globais
    9.  Ajustes globais (:target, .is-hidden)
    10. Dashboard Wrapper (layout principal + pseudo-elemento decorativo)
    11. Main Content
    12. Header do Dashboard (estrutura, título, subtítulo, busca, user-menu)
    13. Avatar no header
    14. Dropdown do usuário
    15. Responsividade do header
    16. Login (estrutura base)
    17. Compat extra para sidebar
    18. Busca Global (input, placeholder, resultados)
    19. Dashboard Main (conteúdo principal)
    20. Charts (container, box, título, canvas)
    21. Scrollbar personalizado
    22. Responsividade geral (até 768px)
   =========================== */

/* ===== 1. Reset e comportamento global ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html { scroll-behavior: smooth; }
/* ===== fim Reset e comportamento global ===== */

/* ===== 2. Botão voltar ao topo ===== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, opacity 0.15s ease;
  color: var(--color-accent-current, var(--color-text-primary));
  background: transparent;
  border: 1px solid currentColor;
}
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top.is-hidden { opacity: 0; pointer-events: none; }
/* ===== fim Botão voltar ao topo ===== */

/* ===== 3. Body (fundo, overlay, marca d’água) ===== */
body {
  font-family: var(--font-main, 'Segoe UI', Arial, sans-serif);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.6;
  animation: fadeInBackground 1.2s ease forwards;
  transition: background-color .3s ease, color .3s ease;
  text-rendering: optimizeLegibility;
}

/* Overlay global (único, tema-aware) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--overlay-bg, transparent);
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* Conteúdo acima do overlay */
body > * {
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

/* Marca d’água discreta (tema-aware via opacidade) */
body::after {
  content: "";
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 160px;
  height: 160px;
  background: url('/static/logo.png') no-repeat center/contain;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

/* Header e botão de acessibilidade acima do overlay */
.landing-header {
  position: relative;
  z-index: 9999;/*calc(var(--z-overlay) + 2);*/
}

#accessibility-toggle {
  position: relative;
  z-index: calc(var(--z-overlay) + 3);
}

/* Header e botão de acessibilidade acima do overlay */
.landing-page .hero {
  position: relative;
  z-index: 0; /* abaixo do header */
  pointer-events: none; /* não intercepta cliques */
}
.landing-page .hero * {
  pointer-events: auto; /* mantém cliques nos filhos */
}
/* ===== fim Body ===== */

/* ===== 4. Tipografia base ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .6em;
  color: var(--color-text-primary);
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; color: var(--color-accent-current, var(--color-primary)); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p  { margin-bottom: 1em; color: var(--color-text-secondary); }
small { font-size: 13px; color: var(--color-text-secondary); }

a {
  color: var(--color-accent-current, var(--color-primary));
  text-decoration: var(--link-decoration-default);
  transition: color .2s ease;
}
a:hover,
a:focus {
  color: var(--color-text-secondary);
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-shadow: none;
}

ul, ol { margin: 0 0 1em 1.5em; }
li { margin-bottom: .4em; }

blockquote {
  border-left: 4px solid var(--color-accent-current, var(--color-primary));
  padding-left: 12px;
  margin: 1em 0;
  color: var(--color-text-secondary);
  font-style: italic;
}
/* ===== fim Tipografia base ===== */

/* ===== 5. Painéis elevados ===== */
.panel-elevado {
  background: var(--gradient-surface, var(--color-bg));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244,182,58,.2);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.panel-elevado:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}
.panel-elevado .titulo {
  font-size: var(--font-size-lg);
  color: var(--color-accent-current, var(--color-primary));
  margin-bottom: 8px;
  font-family: var(--font-main);
}
.panel-elevado .subtitulo {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.5;
}
/* ===== fim Painéis elevados ===== */
/* ===== 6. Sidebar ===== */
.sidebar {
  grid-area: sidebar;
  position: relative;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-lg);
  z-index: var(--z-sidebar, 2000);
  transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); overflow: visible; }

.sidebar-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid rgba(244,182,58,.25);
  margin-bottom: var(--space-3);
}

.sidebar-logo {
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(244,182,58,.4));
  transition: max-width .3s ease, max-height .3s ease;
}
.sidebar.collapsed .sidebar-logo { max-width: 32px; max-height: 32px; }

.toggle-sidebar {
  position: absolute;
  top: 100%;
  right: -18px;
  transform: translateY(-50%);
  background: var(--color-surface-alt, var(--color-bg));
  border: 1px solid rgba(244,182,58,.25);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--color-accent-current, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.toggle-sidebar:hover {
  background: rgba(244,182,58,.15);
  box-shadow: 0 0 6px var(--color-accent-current, var(--color-accent));
}
.sidebar.collapsed .toggle-sidebar { transform: translateY(-50%) rotate(180deg); }

.sidebar-footer {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 8px 0;
}
/* ===== fim Sidebar ===== */

/* ===== 7. Rodapé global ===== */
.landing-footer {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: 12px; line-height: 1.4;
  border-top: 1px solid rgba(244,182,58,.25);
  backdrop-filter: blur(4px);
  box-shadow: 0 -2px 8px rgba(0,0,0,.35);
  font-family: var(--font-base);

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 6px 16px;
  z-index: var(--z-overlay);
  overflow: visible;
}

.landing-footer .footer-text {
  text-align: center;
  flex: 1;
  position: relative;
}

.landing-footer .footer-security {
  position: absolute;
  right: 550px;
  bottom: -30px;
}

.landing-footer .footer-security img.footer-badge {
  height: 140px;
  width: auto;
  display: block;
}
/* ===== fim Rodapé global ===== */

/* ===== 8. Animações globais ===== */
@keyframes fadeInBackground { from {opacity:0;} to {opacity:1;} }
@keyframes fadeInContent { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeOut { from {opacity:1;} to {opacity:0; height:0; margin:0; padding:0;} }
@keyframes fadeIn { from {opacity:0; transform:scale(.95);} to {opacity:1; transform:scale(1);} }
@keyframes fadeInUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ===== fim Animações globais ===== */

/* ===== 9. Ajustes globais ===== */
:target { scroll-margin-top: 80px; }
.is-hidden { display: none !important; }
/* ===== fim Ajustes globais ===== */

/* ===== 10. Dashboard Wrapper ===== */
.dashboard-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";

  min-height: 100vh;
  row-gap: var(--gutter-sm);
  column-gap: var(--gutter);

  margin: 16px;

  .sidebar { grid-area: sidebar; margin-top: 16px; margin-left: 16px; }
  .dashboard-header { grid-area: header; margin-top: 16px; }

  padding: 0 var(--gutter) calc(var(--gutter) + 48px) 0;

  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-main);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  position: relative;
  overflow: visible;
}

.dashboard-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(212,175,55,0.24) 0%,
    rgba(212,175,55,0.12) 35%,
    rgba(212,175,55,0.06) 65%,
    rgba(212,175,55,0) 100%
  );
  /* removido mix-blend-mode para previsibilidade em temas claros */
}
/* ===== fim Dashboard Wrapper ===== */

/* ===== 11. Main Content ===== */
.main-content {
  grid-area: main;
  padding: 20px;
  position: relative;
  overflow: visible;
  z-index: 1;
  min-height: 0;
}
/* ===== fim Main Content ===== */
/* ===== 12. Header do Dashboard ===== */
.dashboard-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface, var(--color-bg));
  border: 1px solid rgba(244,182,58,.15);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);

  font-family: var(--font-main);
  color: var(--color-text-primary);
  position: relative;
  overflow: visible;
  z-index: 1000;
}

.dashboard-header .page-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-header .subheader {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.dashboard-header .global-search {
  flex: 1 1 auto;
  max-width: 360px;
  position: relative;
  z-index: 1;
}

.dashboard-header .user-menu {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: var(--z-user-menu, 1000);
}

/* ===== 13. Avatar no header ===== */
.dashboard-header .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-header .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.dashboard-header .user-avatar:hover {
  background: rgba(244,182,58,.12);
  box-shadow: inset 0 0 6px var(--color-accent-current, var(--color-accent));
  transform: scale(1.05);
}

/* ===== 14. Dropdown do usuário ===== */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--color-surface, var(--color-bg));
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 8px 0;
  z-index: var(--z-dropdown);
}
.user-dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.user-dropdown a:hover {
  background: rgba(244,182,58,.12);
  color: var(--color-accent-current, var(--color-primary));
  box-shadow: inset 0 0 6px var(--color-accent-current, var(--color-accent));
}

/* ===== 15. Responsividade do header ===== */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .dashboard-header .global-search {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
  }
  .dashboard-header .user-menu {
    margin-left: 0;
    align-self: flex-end;
  }
}

/* ===== 16. Login (estrutura base) ===== */
body.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.login-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== 17. Compat extra para sidebar ===== */
.sidebar img,
.sidebar svg {
  display: block;
}
/* ===== 18. Busca Global ===== */
.global-search {
  position: relative;
  max-width: 280px;
  flex: 0 1 auto;
}
.global-search input {
  width: 100%;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-text-secondary);
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text-primary);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.global-search input:focus {
  background: var(--color-surface-alt, var(--color-bg));
  border-color: var(--color-accent-current, var(--color-primary));
  box-shadow: 0 0 6px var(--color-accent-current, var(--color-accent));
  outline: none;
}
.global-search input::placeholder {
  color: var(--color-text-secondary);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-surface-alt, var(--color-bg));
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--radius);
  margin-top: 4px;
  list-style: none;
  padding: 0;
  z-index: 1200;
  box-shadow: var(--shadow-card);
}
.search-results[hidden] { display: none !important; }

.search-results li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.search-results li:hover {
  background: rgba(244,182,58,.12);
  color: var(--color-accent-current, var(--color-primary));
}

/* ===== 19. Dashboard Main ===== */
.dashboard-main {
  grid-area: main;
  padding: 20px;
  width: 100%;
  margin: 0;
  z-index: 1;
  min-height: 0;
}
.dashboard-main p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-top: 20px;
}

/* ===== 20. Charts ===== */
.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  justify-content: center;
}
.chart-box {
  flex: 1 1 300px;
  max-width: 500px;
  background: var(--gradient-surface, var(--color-bg));
  backdrop-filter: blur(4px);
  border: 1px solid rgba(244,182,58,.2);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.chart-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}
.chart-box h3 {
  margin-bottom: 12px;
  color: var(--color-accent-current, var(--color-primary));
  font-size: 18px;
}
.chart-box canvas {
  width: 100% !important;
  height: 300px !important;
}

/* ===== 21. Scrollbar personalizado ===== */
/* WebKit */
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-track { background: var(--color-bg); }
*::-webkit-scrollbar-thumb {
  background-color: var(--color-accent-current, var(--color-primary));
  border-radius: 5px;
  border: 2px solid var(--color-bg);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary-dark, var(--color-accent-current, var(--color-primary)));
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-current, var(--color-primary)) var(--color-bg);
}

/* ===== 22. Responsividade geral ===== */
@media (max-width: 768px) {
  .global-search {
    width: 100%;
    max-width: none;
  }

  .dashboard-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
    row-gap: var(--gutter-sm);
    column-gap: 0;
    margin-left: 12px;
    margin-top: 12px;
    padding: 0 12px calc(var(--gutter) + 48px);
  }

  .main-content {
    padding: 16px;
    width: 100%;
    margin: 0;
  }

  .dashboard-main { padding: 20px; }
  .chart-box { flex: 1 1 100%; }
}