/* ==============================
    UI – Tokens
   ============================== */

:root {
  /* Surfaces & textes */
  --ui-bg: #f9fafc;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f9fc;
  --ui-border: rgba(0, 0, 0, 0.12);

  --ui-text: #111827;
  --ui-text-2: #374151;
  --ui-muted: #6b7280;

  /* Radius & spacing */
  --ui-radius-sm: 6px;
  --ui-radius-lg: 12px;
  --ui-pill-radius: 999px;

  /* Ombres légères */
  --ui-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Accents (tu as déjà des variables, on s’aligne dessus) */
  --ui-blue: var(--main-blue);
  --ui-green: var(--main-green);
  --ui-orange: var(--main-orange);
  --ui-purple: var(--main-purple);

  /* Danger (pas dans tes vars) */
  --ui-red: #e74c3c;

  /* Couleurs de fond “tint” */
  --ui-tint-blue: rgba(0, 105, 217, 0.12);
  --ui-tint-green: rgba(39, 174, 96, 0.14);
  --ui-tint-orange: rgba(243, 156, 18, 0.16);
  --ui-tint-purple: rgba(142, 68, 173, 0.13);
  --ui-tint-red: rgba(231, 76, 60, 0.14);
  --ui-tint-gray: rgba(17, 24, 39, 0.06);

  /* Focus ring */
  --ui-focus: 0 0 0 3px rgba(47, 128, 237, 0.15);
}

/* ==============================
   UI – Pill
   ============================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 2px 10px;
  border-radius: var(--ui-pill-radius);

  border: 1px solid var(--ui-border);
  background: var(--ui-tint-gray);
  color: var(--ui-text-2);

  font-size: inherit;
  font-weight: 600;
  line-height: 1.25;

  white-space: nowrap;
  vertical-align: middle;
}

/* Tailles */
.pill-sm { padding: 1px 8px; font-size: 0.75rem; font-weight: 600; }
.pill-md { padding: 2px 10px; font-size: 0.82rem; }
.pill-lg { padding: 4px 12px; font-size: 0.9rem; }

/* Style: “soft” (défaut) / “solid” / “outline” */
.pill-soft { /* défaut */ }
.pill-solid { background: #333; color: #fff; border-color: rgba(0,0,0,0.08); }
.pill-outline { background: transparent; }

/* Icône (optionnelle) */
.pill .pill-ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* Lien dans pill (si tu mets <a>) */
.pill a { color: inherit; text-decoration: none; }
.pill a:hover { text-decoration: underline; }

/* ==============================
   UI – Pill variants
   ============================== */

.pill-ok     { background: var(--ui-tint-green);  color: #065f46; border-color: rgba(39,174,96,0.25); }
.pill-warn   { background: var(--ui-tint-orange); color: #7c2d12; border-color: rgba(243,156,18,0.28); }
.pill-danger { background: var(--ui-tint-red);    color: #7f1d1d; border-color: rgba(231,76,60,0.28); }
.pill-info   { background: var(--ui-tint-blue);   color: #1e3a8a; border-color: rgba(0,105,217,0.25); }
.pill-note   { background: var(--ui-tint-purple); color: #4c1d95; border-color: rgba(142,68,173,0.25); }

/* Cas RHFlow spécifiques */
.pill-formation  { background: #e0f3ff; color: #075985; border-color: rgba(7,89,133,0.18); }
.pill-validation { background: #ffe9d5; color: #7c2d12; border-color: rgba(124,45,18,0.18); }

/* ==============================
   UI – Pill interactive
   ============================== */

.pill-click {
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.pill-click:hover {
  border-color: rgba(0, 105, 217, 0.35);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.pill-click:active {
  transform: translateY(1px);
}
.pill-click:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}
.pill-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==============================
   UI – Badge (label)
   ============================== */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--ui-border);
  background: #f3f4f6;
  color: var(--ui-text-2);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-ok     { background: var(--ui-tint-green); }
.badge-warn   { background: var(--ui-tint-orange); }
.badge-danger { background: var(--ui-tint-red); }
.badge-info   { background: var(--ui-tint-blue); }

/* ==============================
   UI – Helpers
   ============================== */

.stack { display: flex; flex-direction: column; gap: 8px; }
.row   { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stack-nogap { display: flex; flex-direction: column;}

.muted { color: var(--ui-muted); }
.small { font-size: 0.85em; }

.card {
  background: var(--ui-surface);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow-sm);
}

.divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 10px 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.dot-ok { background: var(--ui-green); }
.dot-warn { background: var(--ui-orange); }
.dot-danger { background: var(--ui-red); }
.dot-info { background: var(--ui-blue); }