/* ============================================================
   Bid On Energy – Electricity Indicators Plugin  v1.0
   ============================================================ */

:root {
  --boe-primary:   #0a74da;
  --boe-accent:    #ff6b35;
  --boe-low-bg:    #fef2f2;
  --boe-low-bar:   #ef4444;
  --boe-low-badge: #dc2626;
  --boe-med-bg:    #fffbeb;
  --boe-med-bar:   #f59e0b;
  --boe-med-badge: #d97706;
  --boe-high-bg:   #eff6ff;
  --boe-high-bar:  #3b82f6;
  --boe-high-badge:#2563eb;
  --boe-crit-bg:   #f0fdf4;
  --boe-crit-bar:  #22c55e;
  --boe-crit-badge:#16a34a;
  --boe-radius:    12px;
}

/* ── WRAPPER ── */
.boe-indicators-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── HEADER ── */
.boe-header {
  background: linear-gradient(135deg, var(--boe-primary) 0%, #0e4f99 100%);
  border-radius: var(--boe-radius) var(--boe-radius) 0 0;
  padding: 24px 28px;
  color: #fff;
}
.boe-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.boe-brand { display: flex; align-items: center; gap: 14px; }
.boe-brand-icon {
  font-size: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px 12px;
}
.boe-title  { margin: 0; font-size: 1.45rem; font-weight: 700; }
.boe-subtitle { margin: 4px 0 0; font-size: .85rem; opacity: .8; }
.boe-cta-btn {
  background: var(--boe-accent);
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  transition: opacity .2s;
}
.boe-cta-btn:hover { opacity: .88; color: #fff; }

/* ── OVERALL GAUGE ── */
.boe-overall-section {
  padding: 24px 20px 10px;
  display: flex;
  justify-content: center;
}
.boe-overall-card {
  background: #fff;
  border-radius: var(--boe-radius);
  border: 2px solid #e2e8f0;
  padding: 24px 40px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  min-width: 260px;
  position: relative;
}
.boe-overall-label {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 12px;
}
.boe-overall-gauge { display: flex; justify-content: center; }
.boe-arc-svg { width: 200px; height: 120px; overflow: visible; }
.boe-arc-fill { transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.boe-overall-card.boe-low  .boe-arc-fill { stroke: var(--boe-low-bar);  }
.boe-overall-card.boe-med  .boe-arc-fill { stroke: var(--boe-med-bar);  }
.boe-overall-card.boe-high .boe-arc-fill { stroke: var(--boe-high-bar); }
.boe-overall-card.boe-critical .boe-arc-fill { stroke: var(--boe-crit-bar); }
.boe-updated { font-size: .75rem; color: #94a3b8; margin-top: 10px; }

/* ── CATEGORY TITLE ── */
.boe-category-block { padding: 18px 20px 0; }
.boe-category-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--boe-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.boe-category-title::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--boe-primary);
  border-radius: 2px;
}

/* ── GRID ── */
.boe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.boe-layout-list .boe-grid {
  grid-template-columns: 1fr;
}

/* ── INDICATOR CARD ── */
.boe-card {
  background: #fff;
  border-radius: var(--boe-radius);
  border: 1px solid #e2e8f0;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.boe-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: var(--boe-radius) 0 0 var(--boe-radius);
}
.boe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }

.boe-low  { border-left-color: var(--boe-low-bar); }
.boe-med  { border-left-color: var(--boe-med-bar); }
.boe-high { border-left-color: var(--boe-high-bar);}
.boe-critical { border-left-color: var(--boe-crit-bar);}

.boe-card.boe-low::before  { background: var(--boe-low-bar); }
.boe-card.boe-med::before  { background: var(--boe-med-bar); }
.boe-card.boe-high::before { background: var(--boe-high-bar);}
.boe-card.boe-critical::before { background: var(--boe-crit-bar);}

.boe-card-label {
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  line-height: 1.35;
}

/* ── METER BAR ── */
.boe-meter-wrap { margin-bottom: 10px; }
.boe-meter-bg {
  height: 10px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.boe-meter-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.boe-meter-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 8px; height: 100%;
  border-radius: 99px;
  background: rgba(255,255,255,.35);
}
.boe-low  .boe-meter-fill { background: linear-gradient(90deg, #fca5a5, var(--boe-low-bar)); }
.boe-med  .boe-meter-fill { background: linear-gradient(90deg, #fcd34d, var(--boe-med-bar)); }
.boe-high .boe-meter-fill { background: linear-gradient(90deg, #93c5fd, var(--boe-high-bar));}
.boe-critical .boe-meter-fill { background: linear-gradient(90deg, #86efac, var(--boe-crit-bar));}

.boe-meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: #94a3b8;
  margin-top: 3px;
}

/* ── CARD FOOTER ── */
.boe-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.boe-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #1e293b;
}

/* ── BADGES ── */
.boe-level-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 99px;
  color: #fff;
}
.boe-badge-lg { padding: 6px 18px; font-size: .85rem; margin-top: 6px; }
.boe-low      .boe-level-badge { background: var(--boe-low-badge); }
.boe-med      .boe-level-badge { background: var(--boe-med-badge); }
.boe-high     .boe-level-badge { background: var(--boe-high-badge);}
.boe-critical .boe-level-badge { background: var(--boe-crit-badge);}

/* ── PLUGIN FOOTER ── */
.boe-footer {
  text-align: center;
  padding: 18px 20px 24px;
  font-size: .78rem;
  color: #94a3b8;
}
.boe-footer a { color: var(--boe-primary); text-decoration: none; }
.boe-footer a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .boe-header-inner { flex-direction: column; align-items: flex-start; }
  .boe-overall-card { padding: 18px 20px; min-width: unset; }
  .boe-grid { grid-template-columns: 1fr; }
  .boe-arc-svg { width: 160px; height: 96px; }
}