/*
 * JB Charts v1.0.0
 * Engraved neumorphic charts — standalone CSS
 * cdn: https://divdrop.io/CDN/CSS/jb-charts.css
 * Works on any page. Include after your theme tokens.
 * ═══════════════════════════════════════════════════════
 */

/* ── Token defaults (overridden by data-dd-theme blocks) ── */
:root {
  --jb-bg:          #e4e4e4;
  --jb-surface:     #e4e4e4;
  --jb-text:        #1a1a1a;
  --jb-text-muted:  #888;
  --jb-border:      rgba(0,0,0,.1);
  --jb-neu-inset:   inset 3px 3px 8px rgba(0,0,0,.13),
                    inset -3px -3px 8px rgba(255,255,255,.82);
  --jb-neu-inset-lg:inset 5px 5px 14px rgba(0,0,0,.16),
                    inset -5px -5px 14px rgba(255,255,255,.88);
  --jb-neu-raise:   -4px -4px 10px rgba(255,255,255,.85),
                     4px  4px 10px rgba(0,0,0,.15);
  --jb-neu-raise-sm:-2px -2px 6px rgba(255,255,255,.8),
                     2px  2px 6px rgba(0,0,0,.12);
  --jb-radius:      20px;
  --jb-font:        'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Engraved grey palette for disc segments */
  --jb-disc-1: #c8c8c8;
  --jb-disc-2: #b8b8b8;
  --jb-disc-3: #a8a8a8;
  --jb-disc-4: #989898;
  --jb-disc-5: #888888;
  --jb-disc-6: #787878;
}

/* ── Shared chart base ── */
.jb-chart {
  position:      relative;
  background:    var(--jb-surface);
  border-radius: var(--jb-radius);
  box-shadow:    var(--jb-neu-inset);
  font-family:   var(--jb-font);
  -webkit-font-smoothing: antialiased;
  display:       inline-flex;
  flex-direction: column;
  align-items:   center;
  padding:       1.5rem;
}
.jb-chart-label {
  font-size:      .68rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--jb-text-muted);
  margin-bottom:  1rem;
  align-self:     flex-start;
}
.jb-chart-title {
  font-size:   .88rem;
  font-weight: 800;
  color:       var(--jb-text);
  margin-top:  .85rem;
  text-align:  center;
}

/* ═══════════════════════════════════════════════════════
   GAUGE CHART
   ═══════════════════════════════════════════════════════ */
.jb-gauge-wrap {
  position:   relative;
  width:      100%;
  max-width:  320px;
  /* clip SVG to its bounds — no more spillover */
  overflow:   hidden;
  border-radius: var(--jb-radius);
}
.jb-gauge-svg {
  width:    100%;
  height:   auto;
  display:  block;
  /* overflow hidden on wrap handles clipping */
}
/* Value and range labels are now inside the SVG — no DOM overlays needed */

/* ═══════════════════════════════════════════════════════
   DISC PIE CHART
   ═══════════════════════════════════════════════════════ */
.jb-disc-wrap {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
}
.jb-disc-outer {
  border-radius: 50%;
  box-shadow:    var(--jb-neu-inset-lg);
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--jb-surface);
  position:      relative;
  flex-shrink:   0;
}
.jb-disc-svg {
  position:      absolute;
  top:           0; left: 0;
  width:         100%;
  height:        100%;
  border-radius: 50%;
  overflow:      hidden;
}
.jb-disc-inner {
  position:      relative;
  z-index:       2;
  border-radius: 50%;
  background:    var(--jb-surface);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  box-shadow:    var(--jb-neu-raise);
}
.jb-disc-inner-val {
  font-size:    1.35rem;
  font-weight:  900;
  color:        var(--jb-text);
  letter-spacing: -.04em;
  line-height:  1;
}
.jb-disc-inner-lbl {
  font-size:   .62rem;
  font-weight: 700;
  color:       var(--jb-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top:  .2rem;
}
/* Groove ring effect around disc */
.jb-disc-outer::before {
  content:       '';
  position:      absolute;
  inset:         6px;
  border-radius: 50%;
  box-shadow:    var(--jb-neu-inset);
  pointer-events: none;
  z-index:       1;
}
.jb-disc-outer::after {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  border:        1px solid rgba(0,0,0,.08);
  pointer-events: none;
}

/* Legend */
.jb-disc-legend {
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
  margin-top:     1.25rem;
  width:          100%;
}
.jb-disc-legend-row {
  display:     flex;
  align-items: center;
  gap:         .6rem;
}
.jb-disc-legend-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  box-shadow:    var(--jb-neu-raise-sm);
}
.jb-disc-legend-name {
  font-size:  .8rem;
  font-weight: 600;
  color:      var(--jb-text);
  flex:       1;
}
.jb-disc-legend-pct {
  font-size:   .78rem;
  font-weight: 800;
  color:       var(--jb-text-muted);
  font-family: ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════
   PILL BAR CHART (vertical)
   ═══════════════════════════════════════════════════════ */
.jb-bars-wrap {
  display:     flex;
  align-items: flex-end;
  gap:         1rem;
  padding:     0 .5rem;
}
.jb-bar-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .55rem;
}
.jb-bar-val {
  font-size:   .72rem;
  font-weight: 900;
  color:       var(--jb-text);
  font-family: ui-monospace, monospace;
}
.jb-bar-tube {
  position:      relative;
  border-radius: var(--jb-radius);
  background:    var(--jb-surface);
  box-shadow:    var(--jb-neu-inset);
  overflow:      hidden;
  flex-shrink:   0;
}
.jb-bar-fill {
  position:      absolute;
  bottom:        0;
  left:          0;
  right:         0;
  border-radius: var(--jb-radius);
  transition:    height 1s cubic-bezier(.4,0,.2,1);
  box-shadow:    0 -2px 8px rgba(0,0,0,.15);
}
.jb-bar-name {
  font-size:   .7rem;
  font-weight: 700;
  color:       var(--jb-text-muted);
  text-align:  center;
  white-space: nowrap;
}
.jb-bar-pct {
  font-size:   .65rem;
  font-weight: 800;
  color:       var(--jb-text-muted);
}

/* ═══════════════════════════════════════════════════════
   LINE CHART
   ═══════════════════════════════════════════════════════ */
.jb-line-wrap {
  position: relative;
  width:    100%;
}
.jb-line-svg {
  width:    100%;
  height:   auto;
  overflow: visible;
}
/* Axis labels */
.jb-axis-label {
  font-family: var(--jb-font);
  font-size:   9px;
  fill:        var(--jb-text-muted);
  font-weight: 700;
}
/* Data point dots */
.jb-dot {
  transition: r .15s;
  cursor:     pointer;
}
.jb-dot:hover { r: 6; }

/* Tooltip */
.jb-tooltip {
  position:       absolute;
  background:     var(--jb-surface);
  box-shadow:     var(--jb-neu-raise);
  border-radius:  10px;
  padding:        .45rem .75rem;
  font-size:      .74rem;
  font-weight:    700;
  color:          var(--jb-text);
  pointer-events: none;
  opacity:        0;
  transition:     opacity .15s;
  white-space:    nowrap;
  z-index:        10;
  transform:      translateX(-50%) translateY(-110%);
}
.jb-tooltip.visible { opacity: 1; }
.jb-tooltip-val {
  font-size:    1rem;
  font-weight:  900;
  display:      block;
  line-height:  1.2;
  letter-spacing: -.03em;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .jb-chart { padding: 1.1rem; }
  .jb-bars-wrap { gap: .65rem; }
}

/* ═══════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ═══════════════════════════════════════════════════════ */
[data-dd-theme="dark"] {
  --jb-bg:           #2d2d2d;
  --jb-surface:      #2d2d2d;
  --jb-text:         #e8e8e8;
  --jb-text-muted:   #888;
  --jb-border:       rgba(255,255,255,.08);
  --jb-neu-inset:    inset 3px 3px 8px rgba(0,0,0,.5),
                     inset -3px -3px 8px rgba(255,255,255,.04);
  --jb-neu-inset-lg: inset 5px 5px 14px rgba(0,0,0,.55),
                     inset -5px -5px 14px rgba(255,255,255,.05);
  --jb-neu-raise:    -4px -4px 10px rgba(255,255,255,.06),
                      4px  4px 10px rgba(0,0,0,.5);
  --jb-neu-raise-sm: -2px -2px 6px rgba(255,255,255,.05),
                      2px  2px 6px rgba(0,0,0,.4);
  --jb-disc-1: #3a3a3a;
  --jb-disc-2: #444;
  --jb-disc-3: #4e4e4e;
  --jb-disc-4: #585858;
  --jb-disc-5: #626262;
  --jb-disc-6: #6c6c6c;
}