/* ==========================================================================
   3d6 Analytics — Design Tokens
   Fase 7 — Padrão Visual 3d6
   ========================================================================== */

:root {
  /* ── Paleta Principal ── */
  --3d6-verde:        #27a862;
  --3d6-verde-rgb:    39, 168, 98;
  --3d6-grafite:      #26292e;
  --3d6-grafite-rgb:  38, 41, 46;
  --3d6-branco:       #ffffff;

  /* ── Derivadas ── */
  --3d6-verde-hover:  #1e8c52;
  --3d6-verde-light:  rgba(var(--3d6-verde-rgb), .12);
  --3d6-grafite-light: rgba(var(--3d6-grafite-rgb), .08);

  /* ── Tipografia ── */
  --3d6-font-titulos:   'Now Alt', 'Montserrat', system-ui, -apple-system, sans-serif;
  --3d6-font-corpo:     'ZT Nature', 'Montserrat', system-ui, -apple-system, sans-serif;
  --3d6-font-mono:      SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* ── Sidebar & Navbar ── */
  --3d6-sidebar-bg:     var(--3d6-grafite);
  --3d6-navbar-bg:      var(--3d6-grafite);
  --3d6-sidebar-text:   rgba(255, 255, 255, .75);
  --3d6-sidebar-hover:  rgba(255, 255, 255, .1);
  --3d6-sidebar-active: #fff;

  /* ── Body ── */
  --3d6-body-bg:        #f8f9fa;
}

/* ── Utilitárias ── */
.bg-3d6-verde     { background-color: var(--3d6-verde) !important; }
.bg-3d6-grafite   { background-color: var(--3d6-grafite) !important; }
.text-3d6-verde   { color: var(--3d6-verde) !important; }
.text-3d6-grafite { color: var(--3d6-grafite) !important; }
.border-3d6-verde { border-color: var(--3d6-verde) !important; }

/* ── Botão primário 3d6 ── */
.btn-3d6 {
  background-color: var(--3d6-verde);
  border-color: var(--3d6-verde);
  color: var(--3d6-branco);
}
.btn-3d6:hover, .btn-3d6:focus, .btn-3d6:active {
  background-color: var(--3d6-verde-hover) !important;
  border-color: var(--3d6-verde-hover) !important;
  color: var(--3d6-branco) !important;
}
.btn-outline-3d6 {
  border-color: var(--3d6-verde);
  color: var(--3d6-verde);
  background: transparent;
}
.btn-outline-3d6:hover, .btn-outline-3d6:active {
  background-color: var(--3d6-verde) !important;
  border-color: var(--3d6-verde) !important;
  color: var(--3d6-branco) !important;
}

/* ── Sidebar: dot verde nas seções ── */
.sidebar .nav-section-label {
  color: rgba(255,255,255,.4);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .75rem 1rem .25rem;
}
.sidebar .nav-section-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--3d6-verde);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── Fase 8 — Sidebar: grupos recolhíveis e sub-links de Relatórios ── */
.sidebar .nav-section-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .6rem 1rem .4rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.sidebar .nav-section-toggle:hover,
.sidebar .nav-section-toggle.active {
  color: var(--3d6-sidebar-active);
}
.sidebar .nav-section-toggle .bi-chevron-down {
  margin-left: auto;
  color: rgba(255,255,255,.5);
  transition: transform .2s ease;
}
.sidebar .nav-section-toggle.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.sidebar .nav-sub-link { padding-left: 2.25rem; font-size: .9rem; }

/* ── Card com borda superior verde ── */
.card-3d6-top {
  border-top: 3px solid var(--3d6-verde) !important;
}

/* ── Badge 3d6 ── */
.badge-3d6 {
  background: var(--3d6-verde);
  color: var(--3d6-branco);
  font-weight: 600;
}

/* ── Login card ── */
.login-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--3d6-grafite);
  color: var(--3d6-verde);
  border-radius: 16px;
  font-size: 1.6rem;
}

/* ==========================================================================
   Relatórios do caixa — cards e barra de escopo (29/08/2026)

   Tudo aqui é desenhado para o DEDO, não para o cursor: a estação da cantina é
   um monitor sensível ao toque de 1024x768, e o mesmo desenho reaparece no
   dashboard do Operador, que muitas vezes é um celular.

   Duas regras que valem para o bloco inteiro:

   - Alvo mínimo de 56px de altura. Abaixo disso o toque erra em quem está com a
     mão ocupada, e errar aqui significa ler o número de outro recorte.
   - Nenhum estado depende de `hover`. Em tela sensível ao toque não existe
     hover: o que o `:hover` pinta só aparece DEPOIS do toque, quando a página
     já mudou. O estado selecionado é pintado por classe, vinda do servidor.
   ========================================================================== */

/* ── Os três cards de relatório (menu do PDV e dashboard) ── */
.rel-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 88px;
  padding: 1rem 1.1rem;
  border: 1px solid #e3e6e4;
  border-radius: .85rem;
  background: var(--3d6-branco);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s, transform .1s;
}
.rel-card:hover, .rel-card:focus-visible {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
  color: inherit;
}
.rel-card:active { transform: translateY(0); background: var(--3d6-verde-light); }
.rel-card .rel-card-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: .7rem;
  background: var(--3d6-verde-light);
  color: var(--3d6-verde);
  font-size: 1.55rem;
}
.rel-card .rel-card-titulo { font-weight: 600; line-height: 1.2; font-size: 1.05rem; }
.rel-card .rel-card-ajuda { font-size: .82rem; color: #6c757d; }
.rel-card .rel-card-seta { margin-left: auto; color: #b6bbb8; font-size: 1.2rem; }

/* ── Barra de escopo ── */
.escopo-barra {
  background: var(--3d6-branco);
  border: 1px solid #e3e6e4;
  border-radius: .85rem;
  padding: .85rem;
  margin-bottom: 1rem;
}
/* O recorte corrente escrito por extenso, e não apenas destacado no botão.
   Ler o valor certo do recorte errado é o erro mais caro possível nestas telas:
   a paróquia abre vários eventos no mesmo dia, e um total de evento lido como
   total do dia fecha o caixa a menos. */
.escopo-atual {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.escopo-atual .escopo-etiqueta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a8f8c;
}
.escopo-atual .escopo-valor { font-weight: 600; font-size: 1.05rem; }

.escopo-botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.escopo-btn {
  flex: 1 1 8.5rem;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .5rem .6rem;
  border: 1.5px solid #dee2e6;
  border-radius: .7rem;
  background: var(--3d6-branco);
  color: #495057;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.escopo-btn .escopo-btn-nota { font-size: .74rem; font-weight: 400; color: #8a8f8c; }
.escopo-btn:hover, .escopo-btn:focus-visible { color: #495057; border-color: #adb5bd; }
.escopo-btn:active { background: var(--3d6-grafite-light); }
.escopo-btn.ativo {
  border-color: var(--3d6-verde);
  background: var(--3d6-verde-light);
  color: var(--3d6-verde);
}
.escopo-btn.ativo .escopo-btn-nota { color: var(--3d6-verde); }

/* ── Escolher outro evento / outra data ── */
.escopo-painel { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #eceeed; }
.escopo-lista { max-height: 320px; overflow-y: auto; overflow-x: clip; }
.escopo-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .6rem .8rem;
  border: 1px solid #e9ecef;
  border-radius: .6rem;
  background: var(--3d6-branco);
  color: inherit;
  text-decoration: none;
}
.escopo-linha + .escopo-linha { margin-top: .4rem; }
.escopo-linha:hover, .escopo-linha:focus-visible { border-color: var(--3d6-verde); color: inherit; }
.escopo-linha.ativo { border-color: var(--3d6-verde); background: var(--3d6-verde-light); }
.escopo-linha .escopo-linha-data {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #6c757d;
  font-size: .85rem;
}
.escopo-linha .escopo-linha-nome { font-weight: 600; }