/* ============================================================================
   DASHBOARD BILHETERIA - CajueiroPark ERP
   Servido por ServerModule.CustomFiles - edite e de F5 (nao precisa recompilar).
   O HTML e montado no Delphi (uDashBoard.MontarDashBilheteria) e usa so estas
   classes; assim o layout fica aqui e o Pascal cuida apenas dos dados.
   Paleta: #041a47 #0d47a1 #01579b #0288d1 #4fc3f7 #4dd0e1 #b3e5fc #e0f7fa
   ========================================================================== */

.cjb-wrap {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #0d3c61;
  background: #eef3f7;
  padding: 14px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

/* ---------- barra do topo ---------- */
.cjb-barra {
  background: linear-gradient(90deg, #041a47, #0d47a1);
  border-radius: 14px;
  padding: 13px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  box-shadow: 0 8px 22px rgba(1, 40, 80, .28);
}
.cjb-barra h1 { font-size: 19px; font-weight: 800; letter-spacing: .4px; margin: 0; }
.cjb-barra .cjb-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.cjb-per { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 600; }

/* ---------- KPIs ---------- */
.cjb-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 13px; }
.cjb-kpi {
  background: #fff; border-radius: 16px; padding: 13px 15px;
  box-shadow: 0 6px 18px rgba(1, 40, 80, .10);
  border-left: 5px solid #0288d1; position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease;
}
.cjb-kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(1,40,80,.18); }
.cjb-kpi .cjb-rot { font-size: 11px; color: #6b7c8c; text-transform: uppercase; letter-spacing: .5px; }
.cjb-kpi .cjb-val { font-size: 25px; font-weight: 800; margin-top: 4px; line-height: 1; }
.cjb-kpi .cjb-var { font-size: 11.5px; margin-top: 5px; font-weight: 700; }
.cjb-kpi .cjb-ico { position: absolute; right: 10px; top: 8px; font-size: 25px; opacity: .14; }
.cjb-kpi.v { border-left-color: #0a7d2c; }
.cjb-kpi.o { border-left-color: #ef6c00; }
.cjb-kpi.r { border-left-color: #c62828; }
.cjb-up { color: #0a7d2c; }
.cjb-down { color: #c62828; }
.cjb-neutro { color: #7c8b99; }

/* mini grafico dentro do KPI */
.cjb-spark { height: 24px; margin-top: 7px; display: flex; align-items: flex-end; gap: 2px; }
.cjb-spark i { flex: 1; background: #b3e5fc; border-radius: 2px 2px 0 0; min-height: 2px; }
.cjb-kpi.v .cjb-spark i { background: #a5d6a7; }
.cjb-kpi.o .cjb-spark i { background: #ffcc80; }
.cjb-kpi.r .cjb-spark i { background: #ef9a9a; }

/* ---------- cartoes de conteudo ---------- */
.cjb-linha { display: grid; gap: 13px; margin-top: 13px; }
.cjb-l2 { grid-template-columns: 1.55fr 1fr; }
.cjb-card { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(1,40,80,.10); }
.cjb-card h3 { font-size: 14px; color: #01579b; margin: 0 0 3px 0; }
.cjb-card .cjb-leg { font-size: 11.5px; color: #7c8b99; margin-bottom: 11px; }
.cjb-vazio { color: #90a4ae; font-size: 13px; padding: 26px 0; text-align: center; }

/* area (acessos por hora) */
.cjb-area { height: 150px; }
.cjb-area svg { width: 100%; height: 100%; }
.cjb-eixo { display: flex; justify-content: space-between; font-size: 11px; color: #7c8b99; margin-top: 4px; }

/* barras (ocupacao futura) */
.cjb-barras { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 8px; }
.cjb-barras .cjb-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.cjb-barras .cjb-col { width: 100%; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #4fc3f7, #0288d1); min-height: 3px; }
.cjb-barras .cjb-col.pico { background: linear-gradient(180deg, #ffd54f, #ef6c00); }
.cjb-barras span { font-size: 10.5px; color: #7c8b99; text-align: center; line-height: 1.35; }

/* donut (mix de ingressos) */
.cjb-donut { display: flex; align-items: center; gap: 15px; }
.cjb-leg2 { font-size: 12.5px; line-height: 1.85; }
.cjb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* barra empilhada (formas de pagamento) */
.cjb-emp { height: 22px; border-radius: 11px; overflow: hidden; display: flex; margin: 8px 0 4px; background: #eceff1; }
.cjb-emp i { height: 100%; }
.cjb-sep { margin-top: 12px; border-top: 1px solid #eef4f8; padding-top: 10px; }

/* mapa de calor */
.cjb-heat { display: grid; grid-template-columns: 46px repeat(var(--cols, 11), 1fr); gap: 3px; font-size: 10px; color: #7c8b99; }
.cjb-heat .cjb-c { height: 19px; border-radius: 4px; background: #eef3f7; }
.cjb-heat .cjb-h { display: flex; align-items: center; justify-content: center; }

/* ---------- insights ---------- */
.cjb-ins { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 13px; }
.cjb-i {
  background: #f4fbff; border: 1px solid #cfe8f7; border-left: 4px solid #0288d1;
  border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.45;
}
.cjb-i.al { background: #fff8f2; border-color: #f8dcc4; border-left-color: #ef6c00; }
.cjb-i.ok { background: #f3fbf5; border-color: #cbe9d4; border-left-color: #0a7d2c; }
.cjb-i b { color: #01579b; }
.cjb-tag { display: inline-block; background: #0288d1; color: #fff; border-radius: 20px;
  padding: 1px 9px; font-size: 11px; font-weight: 700; margin-right: 7px; }
.cjb-tag.al { background: #ef6c00; }
.cjb-tag.ok { background: #0a7d2c; }

/* ---------- responsivo ---------- */
@media (max-width: 1200px) {
  .cjb-kpis { grid-template-columns: repeat(3, 1fr); }
  .cjb-l2 { grid-template-columns: 1fr; }
  .cjb-ins { grid-template-columns: 1fr; }
}

/* ---------- filtro de periodo (botoes na barra do topo) ---------- */
.cjb-filtros { display: flex; gap: 8px; }
.cjb-filtros .cjb-per {
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  user-select: none;
}
.cjb-filtros .cjb-per:hover { background: rgba(255,255,255,.28); }
.cjb-filtros .cjb-per:active { transform: scale(.96); }
.cjb-filtros .cjb-per.cjb-on {
  background: #ffffff; color: #0d47a1; font-weight: 800;
  border-color: #ffffff; box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

/* ---------- so aparece depois de montado ----------------------------------
   O dashboard fica invisivel enquanto o navegador monta o grid dos KPIs e os
   graficos (era isso que aparecia "desconfigurado"), e entra com um fade.
   Feito por animacao de CSS de proposito: se dependesse de JS e ele falhasse,
   a tela ficaria escondida para sempre. Aqui o pior caso e' ver o fade.
   Para ajustar: o 1o numero e' a duracao do fade, o 2o o tempo parado.     */
@keyframes cjbEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.cjb-wrap { animation: cjbEntra .30s ease .35s both; }