/* Root palette for consistency */
:root{
  --brand-primary: #1557a2;
  --guide: #64748B;
  --guide-light: #94a3b8;
  --bg-soft: #f5f9ff;
  --bd-soft: #dbe7f6;
}

/* Card headers */
.custom-card-header{
  background: var(--bg-soft);
  border-bottom: 1px solid var(--bd-soft);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Drawer header */
.drawer-header{
  border-bottom: 1px solid #EEF2F7;
}
.drawer-title{
  margin: 0;
  font-weight: 700;
}

/* KPI pills above the drawer */
.info-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .30rem .60rem;
  border: 1px solid var(--bd-soft);
  background: var(--bg-soft);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Sticky readout inside the chart card */
.sticky-readout{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid #EEF2F7;
  border-radius: 6px;
  padding: 6px 10px;
}

/* Inputs and buttons */
.form-control-sm{
  font-variant-numeric: tabular-nums;
}
.btn-group > .btn{
  min-width: 72px;              /* bigger target */
}
.btn-outline-secondary{
  --bs-btn-color: #334155;
  --bs-btn-border-color: #CBD5E1;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #E2E8F0;
  --bs-btn-hover-border-color: #94A3B8;
}

/* AG Grid tuning (Alpine theme tokens) */
.ag-theme-alpine.custom-ag-grid{
  --ag-font-size: 13px;
  --ag-foreground-color: #0f172a;
  --ag-background-color: #ffffff;
  --ag-border-color: #E5E7EB;
  --ag-header-background-color: #F8FAFC;
  --ag-header-foreground-color: #111827;
  --ag-row-hover-color: #F1F5F9;
  --ag-selected-row-background-color: #EFF6FF;
}
.ag-theme-alpine.custom-ag-grid .ag-header-cell-label{
  font-weight: 600;
}
.ag-theme-alpine.custom-ag-grid .ag-cell{
  line-height: 1.2;
}

/* Small tweaks */
.text-muted{
  color: #64748B !important;
}