/**
 * DosiPlot v5.0 — Simulation Monte Carlo Interactive
 * © 2025 Pr. Yassine OULHOUQ
 * Université Mohammed Premier (UMP) — Oujda, Maroc
 * Module: Charts — Chart Box, Header, Badges, Wrapper, Interactive Cursor
 */

/* ============================================
   CHART BOX
   ============================================ */
.chart-box {
  background: var(--gradient-surface, linear-gradient(180deg, var(--bg1), var(--bg0)));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow);
  position: relative;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top glow accent line */
.chart-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.3), transparent);
  pointer-events: none;
}

/* Hover effect for chart boxes */
.chart-box:hover {
  border-color: var(--border2);
}

/* ============================================
   CHART HEADER
   ============================================ */
.ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: 0.3px;
}

/* ============================================
   CHART BADGES
   ============================================ */
.cb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--blue-lt);
  color: var(--blue);
  border: 1px solid rgba(0, 180, 255, 0.15);
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cb.elec {
  background: var(--amber-lt);
  color: var(--amber);
  border-color: rgba(255, 176, 32, 0.15);
}

/* Badge variants */
.cb.success {
  background: var(--green-lt);
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.15);
}

.cb.warning {
  background: var(--amber-lt);
  color: var(--amber);
  border-color: rgba(255, 176, 32, 0.15);
}

.cb.error {
  background: var(--red-lt);
  color: var(--red);
  border-color: rgba(255, 68, 85, 0.15);
}

/* ============================================
   CHART WRAPPER / CANVAS
   ============================================ */
.cw {
  flex: 1;
  position: relative;
  min-height: 300px;
  max-height: calc(100vh - 260px);
  overflow: hidden;
}

/* Canvas element inside chart wrapper */
.cw canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ============================================
   CHART INTERACTIVE OVERLAY
   ============================================ */
.chart-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.chart-overlay.interactive {
  pointer-events: auto;
  cursor: crosshair;
}

/* ============================================
   CHART LEGEND (custom)
   ============================================ */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--t2);
  cursor: pointer;
  transition: opacity 0.2s;
}

.chart-legend-item:hover {
  opacity: 0.7;
}

.chart-legend-item.inactive {
  opacity: 0.3;
}

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   CHART EMPTY / LOADING STATE
   ============================================ */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--t3);
  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
}

.chart-empty-icon {
  font-size: 36px;
  opacity: 0.3;
  margin-bottom: 12px;
}

.chart-empty-text {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ============================================
   CHART TOOLBAR (zoom, export)
   ============================================ */
.chart-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chart-toolbar-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--t3);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-toolbar-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-lt);
}