/* Container do card */
.hbs-panel-card{
  background: radial-gradient(circle at top left, rgba(148,163,253,0.06), transparent 55%), var(--card-bg, #020617);
  border-radius: 18px;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(15,23,42,0.8));
  padding: 18px 18px 14px;
  border: 1px solid var(--border-color, rgba(148,163,184,0.3));
  margin-bottom: 22px;
  transition: all .25s ease;
}
.hbs-panel-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(15,23,42,0.9));
  border-color: rgba(129,140,248,0.8);
}

/* Header */
.hbs-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom: 1px dashed rgba(148,163,184,0.35);
}
.hbs-panel-title{ display:flex; flex-direction:column; gap:4px; min-width:260px; }
.hbs-panel-title h2{ margin:0; font-size:1.02rem; font-weight:800; color: var(--text-primary, #E5E7EB); }
.hbs-panel-title p{ margin:0; font-size:.86rem; color: var(--text-secondary, #9CA3AF); }

.hbs-range-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Chip */
.hbs-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(148,163,184,0.10);
  color: var(--text-secondary, #9CA3AF);
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}

/* Inputs */
.hbs-field{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(148, 163, 184, 0.10);
}
.hbs-field label{
  font-size:.78rem;
  color: var(--text-muted, #6B7280);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hbs-field input[type="date"]{
  background:transparent;
  color: var(--text-primary, #E5E7EB);
  border:none;
  outline:none;
  font-size:.88rem;
  font-weight:800;
  min-width:140px;
}

/* Botão */
.hbs-apply-btn{
  border-radius:999px;
  border:1px solid rgba(96,165,250,0.5);
  background: rgba(37,99,235,0.20);
  padding:9px 14px;
  color: var(--text-primary, #E5E7EB);
  font-size:.84rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-weight:900;
  transition: all .2s ease;
  white-space:nowrap;
}
.hbs-apply-btn:hover{ background: rgba(37,99,235,0.35); transform: translateY(-1px); }
.hbs-apply-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Área do gráfico */
.hbs-chart-wrap{
  position:relative;
  height:340px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.25);
  padding:14px;
  background: rgba(2,6,23,0.25);
  overflow:hidden;
}

/* Loading overlay */
.hbs-chart-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(3px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:5;
}
.hbs-chart-wrap.is-loading .hbs-chart-loading{ opacity:1; pointer-events:auto; }
.hbs-chart-wrap.is-loading canvas{
  opacity:.35;
  filter: blur(0.6px);
  transform: scale(0.995);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.hbs-spinner{
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(148,163,184,0.35);
  border-top-color: rgba(96,165,250,1);
  animation: hbsSpin .7s linear infinite;
}
.hbs-loading-text{
  font-size:.9rem;
  color: var(--text-primary, #E5E7EB);
  font-weight:900;
}
@keyframes hbsSpin{ to{ transform: rotate(360deg); } }

@keyframes hbsPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}
.hbs-chart-wrap.pulse{ animation: hbsPulse .28s ease; }

/* Erro */
.hbs-error{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(248,113,113,0.7);
  background: rgba(239,68,68,0.12);
  color: #fecaca;
  font-weight:700;
  font-size:.85rem;
}

/* Responsive */
@media (max-width: 768px){
  .hbs-chart-wrap{ height:300px; }
  .hbs-field input[type="date"]{ min-width: 132px; }
}

/* Ícone do date picker (Chrome/Edge/Safari) */
input[type="date"]::-webkit-calendar-picker-indicator{
  cursor: pointer;
  color: #fff!important;
  fill: #fff!important;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  filter: none;
  opacity: .75;
}