/* ════════════════════════════════════════════════════════════════════
   Magic — Composants design system partages (refonte UX 2026-04-30)
   Tokens neobrutalist + composants reutilisables cross-modules.
   Inclus apres magic-forms.css et automation.css (override possible).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Tokens partages (alignes sur phoenix.css mais sans prefixe phx-) */
  --mg-violet: #7c3aed;
  --mg-violet-dark: #5b21b6;
  --mg-violet-soft: #faf5ff;
  --mg-violet-line: #c4b5fd;
  --mg-yellow: #fbbf24;
  --mg-yellow-soft: #fef3c7;
  --mg-emerald: #10b981;
  --mg-emerald-soft: #ecfdf5;
  --mg-amber-line: #f59e0b;
  --mg-amber-soft: #fffbeb;
  --mg-red: #dc2626;
  --mg-red-soft: #fee2e2;
  --mg-blue-soft: #dbeafe;
  --mg-ink: #0a0a0a;
  --mg-ink-soft: #1f2937;
  --mg-mute: #64748b;
  --mg-mute-soft: #94a3b8;
  --mg-line: #e2e8f0;
  --mg-line-soft: #f1f5f9;
  --mg-bg: #ffffff;
  --mg-bg-soft: #f8fafc;
  --mg-shadow: 4px 4px 0 rgba(10, 10, 10, 0.18);
  --mg-shadow-sm: 2px 2px 0 rgba(10, 10, 10, 0.15);
  --mg-shadow-lg: 6px 6px 0 rgba(10, 10, 10, 0.22);
  --mg-radius: 6px;
}

/* ═══ Stat cards neobrutalist (variantes par couleur semantique) ═══
   Usage : <div class="mg-stat-card mg-stat-card--violet">
              <div class="mg-stat-card-label">URLs</div>
              <div class="mg-stat-card-value">173</div>
              <div class="mg-stat-card-sub">42% generes</div>
            </div>
*/
.mg-stat-card {
  background: var(--mg-bg);
  border: 2px solid var(--mg-ink);
  border-radius: var(--mg-radius);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--mg-shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mg-stat-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--mg-shadow);
}
.mg-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--mg-mute-soft);
}
.mg-stat-card--violet::before  { background: var(--mg-violet); }
.mg-stat-card--blue::before    { background: #3b82f6; }
.mg-stat-card--emerald::before { background: var(--mg-emerald); }
.mg-stat-card--yellow::before  { background: var(--mg-yellow); }
.mg-stat-card--red::before     { background: var(--mg-red); }
.mg-stat-card--pink::before    { background: #ec4899; }

.mg-stat-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--mg-mute);
  margin-bottom: 4px;
}
.mg-stat-card-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--mg-ink-soft);
  line-height: 1.1;
}
.mg-stat-card-sub {
  font-size: 11px;
  color: var(--mg-mute);
  margin-top: 4px;
}
.mg-stat-card-progress {
  margin-top: 8px;
  height: 4px;
  background: var(--mg-line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.mg-stat-card-progress-fill {
  height: 100%;
  background: var(--mg-violet);
  transition: width 0.3s ease;
}

/* ═══ Empty state standardise ═══
   Usage : <div class="mg-empty">
              <div class="mg-empty-icon"><svg>...</svg></div>
              <div class="mg-empty-title">Aucun resultat</div>
              <div class="mg-empty-desc">Essayez de modifier vos filtres...</div>
            </div>
*/
.mg-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mg-mute);
}
.mg-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background: var(--mg-violet-soft);
  color: var(--mg-violet);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-empty-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--mg-ink-soft);
  margin-bottom: 6px;
}
.mg-empty-desc {
  font-size: 13px;
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto;
}
.mg-empty-desc a {
  color: var(--mg-violet);
  text-decoration: underline;
}

/* ═══ Tooltip CSS-only via data-mg-tooltip ═══
   Usage : <span data-mg-tooltip="Texte d'aide">...</span>
*/
[data-mg-tooltip] {
  position: relative;
  cursor: help;
}
[data-mg-tooltip]::after {
  content: attr(data-mg-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--mg-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--mg-radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  text-align: center;
  width: max-content;
  max-width: 240px;
  white-space: normal;
}
[data-mg-tooltip]:hover::after { opacity: 1; }

/* ═══ Loading overlay (modale + spinner) ═══
   Usage : <div class="mg-loading-overlay"><div class="mg-spinner"></div><span>Chargement...</span></div>
*/
.mg-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-weight: 600;
}
.mg-loading-overlay.hidden { display: none; }
.mg-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--mg-yellow);
  border-radius: 50%;
  animation: mg-spinner-spin 0.8s linear infinite;
}
@keyframes mg-spinner-spin {
  to { transform: rotate(360deg); }
}

/* ═══ Pack card neobrutalist (utilise par billing) ═══ */
.mg-pack-card {
  background: var(--mg-bg);
  border: 3px solid var(--mg-ink);
  box-shadow: var(--mg-shadow-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-radius: var(--mg-radius);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mg-pack-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(10, 10, 10, 0.25);
}
.mg-pack-card-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--mg-ink);
}
.mg-pack-card-desc {
  font-size: 0.8125rem;
  color: var(--mg-mute);
  margin-top: 0.25rem;
}
.mg-pack-card-credits {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.mg-pack-card-credits-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--mg-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mg-pack-card-credits-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mg-mute-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mg-pack-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.mg-pack-buy-oneshot,
.mg-pack-buy-subscription {
  border: 2px solid var(--mg-ink);
  font-weight: 800;
  font-size: 0.8125rem;
  padding: 0.65rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--mg-ink);
  transition: transform 0.1s, box-shadow 0.1s;
  border-radius: var(--w-r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.mg-pack-buy-oneshot {
  background: var(--mg-yellow);
  color: var(--mg-ink);
}
.mg-pack-buy-subscription {
  background: var(--mg-ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--mg-yellow);
  justify-content: space-between;
}
.mg-pack-buy-oneshot:hover:not(:disabled),
.mg-pack-buy-subscription:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--mg-ink);
}
.mg-pack-buy-oneshot:active,
.mg-pack-buy-subscription:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--mg-ink);
}
.mg-pack-buy-saving {
  background: var(--mg-yellow);
  color: var(--mg-ink);
  font-size: 0.6875rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 800;
}

/* ═══ Balance card (billing user) ═══ */
.mg-balance-card {
  background: var(--mg-bg);
  border: 3px solid var(--mg-ink);
  box-shadow: var(--mg-shadow-lg);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  border-radius: var(--mg-radius);
}
.mg-balance-card-title {
  font-weight: 800;
  color: var(--mg-ink);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.mg-balance-card-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--mg-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mg-balance-card-desc {
  font-size: 0.875rem;
  color: var(--mg-mute);
  margin-top: 0.5rem;
}

/* ═══ Info card (alert-info premium) ═══ */
.mg-info-card {
  border: 2px solid var(--mg-ink);
  background: var(--mg-bg);
  box-shadow: var(--mg-shadow-sm);
  padding: 1.5rem;
  border-radius: var(--mg-radius);
}
.mg-info-card-title {
  font-weight: 800;
  color: var(--mg-ink);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.mg-info-card-text {
  font-size: 0.875rem;
  color: var(--mg-mute);
  margin: 0;
  line-height: 1.5;
}

/* ═══ Saving badge ═══ */
.mg-saving-badge {
  display: inline-block;
  background: var(--mg-yellow);
  color: var(--mg-ink);
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-weight: 800;
}