/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Copyright (C) 2024-2026 Philippe Naveau — contact@perfshop.io */
/* PerfShop — JMeter UI — https://perfshop.io */

/**
 * components.css — Reusable atomic widgets.
 *
 * Loaded AFTER layout.css. Holds pills, badges, status indicators,
 * progress bar, metric cards, report rows, alerts, target radios and
 * the inline charts grid. Modal-specific styling lives in modals.css.
 */

/* ── Header pills (live / idle) ───────────────────────────────────── */
.live-pill {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(46, 213, 115, .1);
  border:        1px solid rgba(46, 213, 115, .3);
  color:         var(--success);
  padding:       6px 14px;
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     .75rem;
}
.live-pill .dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--success);
  animation:     blink 1.5s ease-in-out infinite;
}
.idle-pill {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(120, 120, 160, .1);
  border:        1px solid rgba(120, 120, 160, .3);
  color:         var(--text2);
  padding:       6px 14px;
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     .75rem;
}

/* ── Container health badge ───────────────────────────────────────── */
.container-badge {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 11px;
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     .72rem;
  font-weight:   600;
  border:        1px solid;
  transition:    all .4s ease;
  cursor:        default;
}
.container-badge.cb-up       { background: rgba(46, 213, 115, .1); border-color: rgba(46, 213, 115, .35); color: #2ed573; }
.container-badge.cb-down     { background: rgba(255, 71, 87, .1);  border-color: rgba(255, 71, 87, .35);  color: #ff4757; }
.container-badge.cb-checking { background: rgba(120, 120, 160, .08); border-color: rgba(120, 120, 160, .2); color: var(--text2); }

.cb-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
  transition:    background .4s;
}
.cb-dot.up       { background: #2ed573; box-shadow: 0 0 6px rgba(46, 213, 115, .6); animation: blink 2s ease-in-out infinite; }
.cb-dot.down     { background: #ff4757; }
.cb-dot.checking { background: var(--text2); opacity: .5; }

/* ── Radio group + custom URL row ─────────────────────────────────── */
.radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; color: var(--text2); }
.custom-url-row { display: none; margin-top: .75rem; }

/* ── Status badges (idle / running / finished / warning / error) ──── */
.status-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
  padding:     .3rem .9rem;
  border-radius: 20px;
  font-size:   .8rem;
  font-weight: 700;
  font-family: var(--mono);
}
.s-idle     { background: rgba(120, 120, 160, .12); color: var(--text2);  border: 1px solid rgba(120, 120, 160, .3); }
.s-running  { background: rgba(46, 213, 115, .12);  color: var(--success); border: 1px solid rgba(46, 213, 115, .3); }
.s-finished { background: rgba(102, 126, 234, .12); color: var(--accent);  border: 1px solid rgba(102, 126, 234, .3); }
.s-warning  { background: rgba(255, 165, 2, .12);   color: var(--warning); border: 1px solid rgba(255, 165, 2, .3); }
.s-error    { background: rgba(255, 71, 87, .12);   color: var(--danger);  border: 1px solid rgba(255, 71, 87, .3); }

/* ── Progress bar ─────────────────────────────────────────────────── */
.progress-bar {
  height:        3px;
  background:    var(--surface2);
  border-radius: 2px;
  margin:        12px 0;
  overflow:      hidden;
}
.progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--accent), #a855f7);
  border-radius: 2px;
  transition:    width .8s ease;
}

/* ── Metrics grid ─────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(3, 1fr); } }

.metric-card {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       14px;
  text-align:    center;
}
.metric-val { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.metric-val.warn { color: var(--warning); }
.metric-val.err  { color: var(--danger); }
.metric-lbl {
  font-size:      .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text2);
  margin-top:     3px;
}

/* ── Reports list rows ────────────────────────────────────────────── */
.report-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 0;
  border-bottom:   1px solid rgba(42, 42, 64, .6);
}
.report-row:last-child { border-bottom: none; }
.report-id { font-family: var(--mono); font-size: .78rem; color: var(--text2); }

/* ── Alerts + script tag ──────────────────────────────────────────── */
.alert-info {
  background:    rgba(102, 126, 234, .08);
  border:        1px solid rgba(102, 126, 234, .25);
  color:         #a5b4fc;
  border-radius: 8px;
  padding:       10px 14px;
  font-size:     .82rem;
  margin-top:    12px;
}
.script-tag {
  display:       inline-block;
  background:    rgba(102, 126, 234, .12);
  color:         var(--accent);
  font-family:   var(--mono);
  font-size:     .72rem;
  padding:       2px 8px;
  border-radius: 5px;
  border:        1px solid rgba(102, 126, 234, .25);
}

/* ── Charts grid + panels ─────────────────────────────────────────── */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 750px) { .charts-grid { grid-template-columns: 1fr; } }

.chart-panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       18px 20px;
}
.chart-title {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text2);
  margin-bottom:  12px;
}
.chart-canvas-wrap { position: relative; height: 160px; }