/* ============================================================
   TCS — Dashboard v2 (Resumo Mensal)
   Replica fielmente o protótipo "Dashboard Melhorado.html"
   (Handoff 1 — Resumo Mensal).

   Todos os tokens (--olive-*, --lilac, --ink-*, --warn, --info,
   --success, --danger, --bg, --bg-alt, --card, --line,
   --line-strong) já existem em public/tokens.css.

   Escopo: estilos só se aplicam dentro de .dash-v2. Não há
   conflito com componentes existentes (legacy .stat-card,
   .home-section, .fat-*, etc.).
   ============================================================ */

.dash-v2{
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ─── Navegador de mês ─────────────────────────────────────── */
.dash-v2 .month-nav{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.dash-v2 .month-nav span.month-label{
  font-size:14px;
  font-weight:700;
  min-width:120px;
  text-align:center;
  background:var(--olive-25);
  border:1px solid var(--olive-100);
  border-radius:6px;
  padding:4px 16px;
  color:var(--ink);
}
.dash-v2 .month-nav button{
  width:28px;
  height:28px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--card);
  display:grid;
  place-items:center;
  color:var(--ink-60);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  transition:all .12s;
}
.dash-v2 .month-nav button:hover{
  border-color:var(--line-strong);
  color:var(--ink);
}

/* ─── Section header ───────────────────────────────────────── */
.dash-v2 .sec-h{
  display:flex;
  align-items:center;
  gap:10px;
  margin:32px 0 16px;
}
.dash-v2 .sec-h:first-child{ margin-top:0; }
.dash-v2 .sec-h .ic{
  width:30px;
  height:30px;
  border-radius:8px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.dash-v2 .sec-h .ic svg{
  stroke:#fff;
  width:14px;
  height:14px;
}
.dash-v2 .sec-h .ic.olive{ background:var(--olive); }
.dash-v2 .sec-h .ic.lilac{ background:var(--lilac); }
.dash-v2 .sec-h .ic.teal{ background:#3fa28a; }
.dash-v2 .sec-h .ic.warn { background:var(--warn);  }
.dash-v2 .sec-h .ic.info { background:var(--info);  }
.dash-v2 .sec-h h3{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.dash-v2 .sec-h .sub{
  font-size:12px;
  color:var(--ink-50);
  font-weight:500;
}
.dash-v2 .sec-h .line{
  flex:1;
  height:1px;
  background:var(--line-strong);
}

/* ─── Summary block ────────────────────────────────────────── */
.dash-v2 .summary{
  background:linear-gradient(135deg, var(--olive-25) 0%, var(--card) 50%, var(--card) 100%);
  border:1px solid var(--olive-100);
  border-radius:14px;
  padding:28px 28px 24px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(107,116,36,.06);
}
.dash-v2 .summary::after{
  content:"";
  position:absolute;
  top:-60px;
  right:-40px;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(145,155,49,.08), transparent 70%);
  pointer-events:none;
}
.dash-v2 .summary .big{
  font-family:var(--font-mono);
  font-size:38px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  position:relative;
  z-index:1;
}
.dash-v2 .summary .big .cur{
  font-size:16px;
  color:var(--ink-40);
  font-weight:500;
  margin-right:2px;
}
.dash-v2 .summary .sub{
  font-size:13.5px;
  color:var(--ink-70);
  margin-top:8px;
  font-weight:500;
  position:relative;
  z-index:1;
}
.dash-v2 .summary .sub strong{
  color:var(--ink);
  font-weight:700;
}
.dash-v2 .summary .desc{
  font-size:11.5px;
  color:var(--ink-40);
  margin-top:3px;
  position:relative;
  z-index:1;
}
.dash-v2 .kpi-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
@media (max-width: 1100px){
  .dash-v2 .kpi-row{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .dash-v2 .kpi-row{ grid-template-columns:1fr; }
}

/* ─── KPI card ─────────────────────────────────────────────── */
.dash-v2 .kpi{
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  position:relative;
  overflow:hidden;
  transition:all .2s;
}
.dash-v2 .kpi:hover{
  border-color:var(--line-strong);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.dash-v2 .kpi::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:10px 10px 0 0;
}
.dash-v2 .kpi.c-olive{ background:linear-gradient(180deg, var(--olive-25), var(--card) 60%); }
.dash-v2 .kpi.c-olive::before{ background:var(--olive); }
.dash-v2 .kpi.c-olive:hover{ border-color:var(--olive-100); }
.dash-v2 .kpi.c-warn{ background:linear-gradient(180deg, #fdf8ee, var(--card) 60%); }
.dash-v2 .kpi.c-warn::before{ background:var(--warn); }
.dash-v2 .kpi.c-warn:hover{ border-color:#e8d5a8; }
.dash-v2 .kpi.c-lilac{ background:linear-gradient(180deg, #f2f1f8, var(--card) 60%); }
.dash-v2 .kpi.c-lilac::before{ background:var(--lilac); }
.dash-v2 .kpi.c-lilac:hover{ border-color:#d4d1e8; }
.dash-v2 .kpi.c-info{ background:linear-gradient(180deg, #eaf0f4, var(--card) 60%); }
.dash-v2 .kpi.c-info::before{ background:var(--info); }
.dash-v2 .kpi.c-info:hover{ border-color:#c0d0dc; }
.dash-v2 .kpi.c-neutral{ background:var(--card); }
.dash-v2 .kpi.c-neutral::before{ background:var(--ink-20); }
.dash-v2 .kpi.c-danger{ background:linear-gradient(180deg, #fdf3f0, var(--card) 60%); }
.dash-v2 .kpi.c-danger::before{ background:var(--danger); }

.dash-v2 .kpi .label{
  font-size:10px;
  color:var(--ink-50);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dash-v2 .kpi .label .kpi-ic{
  width:22px;
  height:22px;
  border-radius:5px;
  display:grid;
  place-items:center;
  opacity:.7;
}
.dash-v2 .kpi .label .kpi-ic svg{ width:12px; height:12px; }
.dash-v2 .kpi.c-olive .label .kpi-ic{ background:var(--olive-50); color:var(--olive-700); }
.dash-v2 .kpi.c-warn  .label .kpi-ic{ background:var(--warn-bg);  color:var(--warn);  }
.dash-v2 .kpi.c-lilac .label .kpi-ic{ background:var(--lilac-50); color:var(--lilac); }
.dash-v2 .kpi.c-info  .label .kpi-ic{ background:var(--info-bg);  color:var(--info);  }
.dash-v2 .kpi.c-neutral .label .kpi-ic{ background:var(--bg-alt); color:var(--ink-60); }

.dash-v2 .kpi .val{
  font-family:var(--font-mono);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}
.dash-v2 .kpi .val .cur{
  font-size:13px;
  color:var(--ink-40);
  font-weight:500;
  margin-right:2px;
}
.dash-v2 .kpi .val .unit{
  font-size:13px;
  color:var(--ink-50);
  font-weight:500;
}
.dash-v2 .kpi .detail{
  font-size:11px;
  color:var(--ink-50);
  margin-top:8px;
  line-height:1.4;
}
.dash-v2 .kpi .spark{
  position:absolute;
  right:10px;
  bottom:8px;
  width:70px;
  height:28px;
  opacity:.6;
  pointer-events:none;
}

/* ─── Panel (sumário simples + container de tabela) ────────── */
.dash-v2 .panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
}
.dash-v2 .panel-hd{
  padding:14px 18px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dash-v2 .panel-hd h3{
  font-size:13.5px;
  font-weight:700;
  margin:0;
}
.dash-v2 .panel-hd .sub{
  font-size:11px;
  color:var(--ink-60);
  margin-left:8px;
}

/* ─── Tabela ──────────────────────────────────────────────── */
.dash-v2 .dtbl{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}
.dash-v2 .dtbl thead th{
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-60);
  font-weight:700;
  padding:10px 14px;
  background:var(--bg);
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.dash-v2 .dtbl thead th.r{ text-align:right; }
.dash-v2 .dtbl tbody td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.dash-v2 .dtbl tbody tr:hover{ background:var(--bg); }
.dash-v2 .dtbl td.r{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:500;
}
.dash-v2 .dtbl td.dim{
  color:var(--ink-30);
  opacity:.7;
}
.dash-v2 .dtbl tr.row-total{
  background:var(--olive-25);
  border-top:2px solid var(--olive-100);
}
.dash-v2 .dtbl tr.row-total td{
  font-weight:700;
  border-bottom:none;
  padding:12px 14px;
}
.dash-v2 .dtbl tr.row-total td.r{ color:var(--olive-700); }
.dash-v2 .dtbl tr.row-media{ background:var(--bg-alt); }
.dash-v2 .dtbl tr.row-media td{
  font-size:11.5px;
  color:var(--ink-60);
  font-style:italic;
}

/* ─── Mini bar ────────────────────────────────────────────── */
.dash-v2 .minibar{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dash-v2 .minibar .bar{
  height:6px;
  border-radius:3px;
  background:var(--bg-alt);
  width:80px;
  overflow:hidden;
}
.dash-v2 .minibar .bar span{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--olive);
}

/* ─── Delta badge ─────────────────────────────────────────── */
.dash-v2 .delta{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:4px;
  font-size:11px;
  font-weight:600;
}
.dash-v2 .delta.up{ background:var(--success-bg); color:var(--success); }
.dash-v2 .delta.dn{ background:var(--danger-bg);  color:var(--danger);  }
.dash-v2 .delta.flat{ background:var(--bg-alt);   color:var(--ink-60);  }

/* ─── Chart panel ─────────────────────────────────────────── */
.dash-v2 .chart-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:16px;
}
.dash-v2 .chart-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.dash-v2 .chart-hd h3{
  font-size:14px;
  font-weight:700;
  margin:0;
}
.dash-v2 .chart-legend{
  display:flex;
  gap:14px;
  font-size:11.5px;
  color:var(--ink-70);
  font-weight:500;
}
.dash-v2 .chart-legend .lg{
  display:flex;
  align-items:center;
  gap:5px;
}
.dash-v2 .chart-legend .sw{
  width:10px;
  height:10px;
  border-radius:2.5px;
}

/* ─── Resumo Mensal v2.2: Premiação + Renovações lado a lado ──────────── */
.dash-v2 .prem-renov-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.dash-v2 .prem-renov-grid > *{
  display:flex;
  flex-direction:column;
}
.dash-v2 .prem-renov-grid > * > .panel{
  flex:1;
}
@media (max-width: 1100px){
  .dash-v2 .prem-renov-grid{ grid-template-columns:1fr; }
}
.dash-v2 .renov-aviso-sem{
  background:var(--danger-bg);
  border:1px solid var(--danger);
  border-radius:8px;
  padding:8px 12px;
  margin-bottom:10px;
  font-size:11.5px;
  color:var(--danger);
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
}
.dash-v2 .renov-aviso-sem svg{ width:14px; height:14px; flex-shrink:0; }
.dash-v2 .renov-aviso-sem strong{ font-weight:700; }

/* ─── Financeiro v2: layout 2 colunas Evolução + Recebimentos duplos ────── */
.dash-v2 .evo-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.dash-v2 .evo-grid .chart-panel.evo-chart{
  padding:18px 20px;
}
.dash-v2 .recv-grid{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width: 1100px){
  .dash-v2 .evo-grid{ grid-template-columns:1fr; }
  .dash-v2 .recv-grid{ grid-template-columns:1fr; }
}

/* Pior mês: ícone vermelho */
.dash-v2 .kpi.c-danger .label .kpi-ic{ background:var(--danger-bg); color:var(--danger); }

/* ─── Grid helpers ────────────────────────────────────────── */
.dash-v2 .g2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.dash-v2 .g3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:20px;
}
@media (max-width: 1100px){
  .dash-v2 .g2{ grid-template-columns:1fr; }
  .dash-v2 .g3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .dash-v2 .g3{ grid-template-columns:1fr; }
}

/* ─── Accordion ───────────────────────────────────────────── */
.dash-v2 .acc-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background .1s;
  user-select:none;
}
.dash-v2 .acc-header:hover{ background:var(--bg); }
.dash-v2 .acc-av{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:700;
  font-size:11px;
  flex-shrink:0;
}
.dash-v2 .acc-header .name{
  font-weight:700;
  font-size:13px;
  flex:1;
}
.dash-v2 .acc-header .total{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  color:var(--olive-700);
}
.dash-v2 .acc-header .chev{
  color:var(--ink-40);
  transition:transform .2s;
  width:16px;
  height:16px;
}
.dash-v2 .acc-header.open .chev{ transform:rotate(180deg); }
.dash-v2 .acc-body{
  display:none;
  border-bottom:1px solid var(--line);
}
.dash-v2 .acc-header.open + .acc-body{ display:block; }

/* ─── Toggle "Detalhar por" ────────────────────────────────── */
.dash-v2 .v2-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px;
  font-size:12px;
}
.dash-v2 .v2-toggle button{
  padding:5px 12px;
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-60);
  border-radius:6px;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:all .15s;
}
.dash-v2 .v2-toggle button.on{
  background:var(--card);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.dash-v2 .v2-toggle-label{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-60);
  margin-right:4px;
}
.dash-v2 .v2-toggle-aviso{
  font-size:10.5px;
  color:var(--ink-50);
  font-style:italic;
}
.dash-v2 .v2-toggle-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0 18px;
  padding:10px 14px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:10px;
}

/* ─── Estado vazio / loading ──────────────────────────────── */
.dash-v2 .v2-empty{
  text-align:center;
  padding:24px;
  color:var(--ink-50);
  font-size:12px;
}
.dash-v2 .v2-error{
  background:var(--danger-bg);
  border:1px solid var(--danger);
  color:var(--danger);
  border-radius:8px;
  padding:10px 14px;
  font-size:12px;
}