/*
 * apps/monitor/static/css/widgets/macro.css
 * ------------------------------------------
 * Styles du widget F3 — Macro & taux.
 *
 * PÉRIMÈTRE :
 *   - Toutes les règles sont scopées sous `.widget-macro`. Aucun sélecteur
 *     global, aucun reset — on s'appuie sur base.html (F1) pour les bases.
 *   - Pas de dépendance Bootstrap, pas de variables externes : ce fichier
 *     est autonome et peut être inclus seul (cf. _dev/macro_preview.html).
 *
 * PALETTE :
 *   - Vert/rouge tirés des conventions Meelton (voir COOLORS #10B981 /
 *     #EF4444). On reste sobre : pas d'aplats, juste des accents.
 *
 * PIÈGE : éviter `.wm-row { display: grid }` avec `grid-template-columns`
 * en ch — ne tient pas sur mobile. Fallback flex + min-width.
 */

.widget-macro {
  display: block;
  width: 100%;
  font-size: 0.95rem;
  color: #1f2937;
}

.widget-macro__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e5e7eb;
}

.widget-macro__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
}

.widget-macro__stale-badge {
  font-size: 0.75rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

.widget-macro__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── une ligne = une série ─────────────────────────────────────────────── */

.wm-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(5rem, 1fr) minmax(5rem, 1fr) 80px auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #f1f5f9;
  line-height: 1.3;
}

.wm-row:last-child {
  border-bottom: none;
}

.wm-row__label {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wm-row__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.wm-row__delta {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
  color: #6b7280;
}

.wm-row__delta .wm-delta__arrow {
  font-size: 0.7rem;
  display: inline-block;
  margin-right: 0.1rem;
}

.wm-row.wm-up .wm-row__delta { color: #047857; }
.wm-row.wm-down .wm-row__delta { color: #b91c1c; }
.wm-row.wm-flat .wm-row__delta { color: #6b7280; }

.wm-row__spark {
  height: 24px;
  display: flex;
  align-items: center;
}

.wm-row__freshness {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  text-align: right;
}

/* ── états ─────────────────────────────────────────────────────────────── */

.wm-row--loading .wm-row__label::after {
  content: "…";
  margin-left: 0.25rem;
  color: #9ca3af;
}
.wm-row--loading .wm-row__value,
.wm-row--loading .wm-row__delta,
.wm-row--loading .wm-row__freshness {
  color: #d1d5db;
}

.wm-row--nodata {
  opacity: 0.6;
}

.wm-error {
  padding: 0.5rem;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ── sparkline SVG ─────────────────────────────────────────────────────── */

.wm-spark {
  width: 80px;
  height: 24px;
  display: block;
}

.wm-spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wm-spark__area {
  stroke: none;
  fill: currentColor;
  opacity: 0.1;
}

.wm-spark--up   { color: #047857; }
.wm-spark--down { color: #b91c1c; }
.wm-spark--flat { color: #6b7280; }

/* ── responsive — colonnes compactées < 560px ───────────────────────────── */

@media (max-width: 560px) {
  .wm-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "delta spark"
      "fresh fresh";
    gap: 0.15rem 0.5rem;
  }
  .wm-row__label     { grid-area: label; }
  .wm-row__value     { grid-area: value; }
  .wm-row__delta     { grid-area: delta; text-align: left; }
  .wm-row__spark     { grid-area: spark; }
  .wm-row__freshness { grid-area: fresh; text-align: left; }
}