/* ─────────────────────────────────────────────────────────────
   STA Usine RT — Design tokens
   ─────────────────────────────────────────────────────────────
   À fusionner dans static/sta_custom.css (ou importer en tête).
   Compatible Tailwind : les classes utilisent var(--sta-*)
   via @layer components pour ne pas casser l'existant.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ══ Brand ══ */
  --sta-brand-deep:  #0d3b2e;   /* header, zones dirigeants */
  --sta-brand-core:  #1a5c42;
  --sta-brand:       #2a7a5a;   /* vert action principal */
  --sta-brand-soft:  #eaf4ef;
  --sta-brand-tint:  #f5faf7;

  /* ══ Neutres (warm white, agroalim premium) ══ */
  --sta-bg:          #fbfaf7;
  --sta-bg-sunk:     #f5f3ee;
  --sta-surface:     #ffffff;
  --sta-border:      rgba(13, 59, 46, 0.08);
  --sta-border-strong: rgba(13, 59, 46, 0.14);
  --sta-divider:     rgba(13, 59, 46, 0.06);

  /* ══ Encre (texte) ══ */
  --sta-ink:         #141a18;
  --sta-ink-soft:    #3a4541;
  --sta-ink-muted:   #6b7672;
  --sta-ink-faint:   #9aa4a0;

  /* ══ Accents signalétiques ══ */
  --sta-amber:       #c98a1a;   /* attention */
  --sta-amber-soft:  #fbf2e0;
  --sta-red:         #b83a2e;   /* danger / critique */
  --sta-red-soft:    #fbeae7;
  --sta-blue:        #2d5d8f;   /* info / livraison */
  --sta-blue-soft:   #e8f0f8;
  --sta-green:       #2a7a5a;   /* succès (= brand) */
  --sta-green-soft:  #eaf4ef;

  /* ══ Radii ══ */
  --sta-r-1: 6px;
  --sta-r-2: 10px;
  --sta-r-3: 14px;
  --sta-r-4: 20px;

  /* ══ Ombres (très subtiles, premium) ══ */
  --sta-shadow-sm: 0 1px 2px rgba(13,59,46,0.04), 0 0 0 0.5px rgba(13,59,46,0.06);
  --sta-shadow-md: 0 4px 16px rgba(13,59,46,0.06), 0 1px 2px rgba(13,59,46,0.04), 0 0 0 0.5px rgba(13,59,46,0.06);
  --sta-shadow-lg: 0 20px 50px rgba(13,59,46,0.10), 0 6px 16px rgba(13,59,46,0.06);

  /* ══ Type stack ══ */
  --sta-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --sta-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ─── Base (optionnel : à activer si on veut forcer la typo globale) ─── */
html {
  font-family: var(--sta-font-sans);
  color: var(--sta-ink);
  background: var(--sta-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Utilitaires : tabular-nums partout où il y a des chiffres ─── */
.num-tab, .tabular { font-variant-numeric: tabular-nums; }

/* ─── Keyframes globaux ─── */
@keyframes sta-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(0,0,0,0);           opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0);             opacity: 1; }
}

@keyframes sta-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sta-fade-up { animation: sta-fade-up .35s cubic-bezier(.2,.7,.3,1) both; }

/* ═════════════════════════════════════════════════════════════
   Composants — à intégrer via @layer components Tailwind,
   ou en CSS classique si tu préfères.
   ═════════════════════════════════════════════════════════════ */

/* ─── Card (remplace / étend .card existant) ─── */
.card {
  background: var(--sta-surface);
  border: 1px solid var(--sta-border);
  border-radius: var(--sta-r-2);
  box-shadow: var(--sta-shadow-sm);
}

/* ─── Section card (titre discret + contenu) ─── */
.section-card { padding: 18px; }
.section-card__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sta-ink-muted);
  margin-bottom: 14px;
}

/* ─── KPI tile ─── */
.kpi-tile {
  background: var(--sta-surface);
  border: 1px solid var(--sta-border);
  border-radius: var(--sta-r-2);
  padding: 16px;
  box-shadow: var(--sta-shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: pointer;
}
.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42,122,90,0.12);
}
.kpi-tile__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.kpi-tile__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sta-ink-muted);
}
.kpi-tile__value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sta-ink);
  font-variant-numeric: tabular-nums;
}
.kpi-tile__unit  { font-size: 14px; color: var(--sta-ink-muted); margin-left: 4px; }
.kpi-tile__note  { font-size: 11.5px; color: var(--sta-ink-muted); margin-top: 6px; }

/* ─── Buttons (étend .btn existant sans casser) ─── */
.btn-primary {
  background: var(--sta-brand-deep);
  color: #fff;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 550;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: var(--sta-brand-core); }

.btn-ghost {
  background: var(--sta-bg-sunk);
  color: var(--sta-ink);
  border: 1px solid var(--sta-border);
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .15s;
}
.btn-ghost:hover { background: #fff; border-color: var(--sta-border-strong); }

/* ─── Status pill ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--pulse::before { animation: sta-pulse 1.8s ease-out infinite; }
.pill--green { color: var(--sta-green); background: var(--sta-green-soft); }
.pill--amber { color: var(--sta-amber); background: var(--sta-amber-soft); }
.pill--red   { color: var(--sta-red);   background: var(--sta-red-soft); }
.pill--blue  { color: var(--sta-blue);  background: var(--sta-blue-soft); }
.pill--muted { color: var(--sta-ink-muted); background: var(--sta-bg-sunk); }

/* ─── Data row (lignes de table / listes) ─── */
.data-row {
  display: grid;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sta-border);
  align-items: center;
  font-size: 12.5px;
  transition: background .12s;
}
.data-row:last-child { border-bottom: none; }
.data-row:hover { background: var(--sta-bg-sunk); cursor: pointer; }
.data-row__head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sta-ink-muted);
  padding: 0 14px 8px;
}

/* ─── Sparkline / progress bar ─── */
.progress {
  height: 5px;
  background: var(--sta-bg-sunk);
  border-radius: 99px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}
.progress__fill--green { background: var(--sta-green); }
.progress__fill--amber { background: var(--sta-amber); }
.progress__fill--red   { background: var(--sta-red); }
.progress__fill--blue  { background: var(--sta-blue); }

/* ═════════════════════════════════════════════════════════════
   Animations hover & alertes — renforcées
   ═════════════════════════════════════════════════════════════ */

/* Card hover : lift + shadow + subtle border highlight */
.card {
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s cubic-bezier(.2,.7,.3,1),
              border-color .22s;
  will-change: transform;
}
a.card:hover,
.card:has(a):hover,
a .card:hover,
.card.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,59,46,0.12), 0 2px 6px rgba(13,59,46,0.06);
  border-color: var(--sta-border-strong);
}

/* Module tiles on home : any <a class="card"> gets lift */
a.card { cursor: pointer; display: block; }
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(42,122,90,0.15);
  border-color: var(--sta-brand);
}
a.card:active { transform: translateY(-1px); }

/* KPI tile hover : already defined but reinforce for <a> wrappers */
a .kpi-tile, .kpi-tile {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
a .kpi-tile:hover, a.kpi-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(42,122,90,0.15);
}

/* Pulse ring pour alertes critiques (class .alert-pulse sur n'importe quel élément) */
@keyframes sta-ring-pulse {
  0%   { box-shadow: 0 0 0 0 var(--sta-red-ring, rgba(184, 58, 46, 0.55)); }
  70%  { box-shadow: 0 0 0 14px rgba(184, 58, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 58, 46, 0); }
}
.alert-pulse { animation: sta-ring-pulse 1.8s ease-out infinite; }
.alert-pulse--amber { --sta-red-ring: rgba(201, 138, 26, 0.55); animation: sta-ring-pulse 1.8s ease-out infinite; }

/* Pill pulse : dot ET fond */
@keyframes sta-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.25); }
}
.pill--pulse::before {
  animation: sta-dot-pulse 1.4s ease-in-out infinite !important;
}

/* Badge pulse (cercle qui s'élargit) pour topbar badges */
@keyframes sta-badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}
.animate-pulse { animation: sta-badge-pulse 1.6s ease-in-out infinite; }

/* Action due : vibration latérale pour attirer l'œil (cuiseur/pasto countdown ≤ 0) */
@keyframes sta-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}
.animate-shake {
  animation: sta-shake 0.7s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: center;
}

/* Thermomètre pulsant pour prise de T° pasto (relevé requis) */
@keyframes sta-thermo {
  0%, 100% { transform: scale(1); color: var(--sta-red); }
  50%      { transform: scale(1.25); color: #ef4444; filter: drop-shadow(0 0 4px #ef4444aa); }
}
.animate-thermo {
  display: inline-block;
  animation: sta-thermo 1.2s ease-in-out infinite;
}

/* Déchargement (action urgente) : effet « shimmer » élégant + respiration douce.
   Ambiance premium, non agressive, attire l'œil sans distraire. */
@keyframes sta-discharge-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.28), 0 2px 8px -2px rgba(245, 158, 11, 0.22);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12), 0 6px 18px -4px rgba(245, 158, 11, 0.40);
  }
}

@keyframes sta-discharge-shimmer {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

.animate-open {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: sta-discharge-breathe 2.4s ease-in-out infinite;
  /* fine bordure ambre constante par-dessus le hover/static */
  box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.65);
  border-radius: inherit;
}

/* couche shimmer diagonale : gradient qui traverse la tuile en boucle */
.animate-open::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(245, 158, 11, 0.14) 45%,
    rgba(245, 158, 11, 0.28) 50%,
    rgba(245, 158, 11, 0.14) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: sta-discharge-shimmer 2.4s linear infinite;
  z-index: 0;
}

/* garder le contenu de la tuile au-dessus du shimmer */
.animate-open > * {
  position: relative;
  z-index: 1;
}

/* Bannière urgente — ring extérieur qui pulse */
.alert-ring-red {
  position: relative;
  box-shadow: 0 0 0 0 rgba(184, 58, 46, 0.5);
  animation: sta-ring-pulse 2s ease-out infinite;
}
.alert-ring-amber {
  --sta-red-ring: rgba(201, 138, 26, 0.5);
  animation: sta-ring-pulse 2s ease-out infinite;
}

/* Sta-fade-up slight stagger pour listes */
.sta-fade-up { animation: sta-fade-up .35s cubic-bezier(.2,.7,.3,1) both; }
.sta-fade-up:nth-child(2) { animation-delay: .04s; }
.sta-fade-up:nth-child(3) { animation-delay: .08s; }
.sta-fade-up:nth-child(4) { animation-delay: .12s; }
.sta-fade-up:nth-child(5) { animation-delay: .16s; }

/* Button hover lift subtle */
.btn-primary, .btn-ghost {
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,59,46,0.18); }
.btn-ghost:hover   { transform: translateY(-1px); }

/* Tile icon bounce au hover */
a.card:hover .kpi-tile__icon,
a.card:hover .module-tile__icon {
  transform: scale(1.06) rotate(-2deg);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.kpi-tile__icon, .module-tile__icon { transition: transform .22s; }

/* ─── Module tiles animées (home) ─── */
.sta-mod-tile {
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .2s;
  border: 1px solid var(--sta-border);
  background: var(--sta-surface);
}
.sta-mod-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -14px rgba(1,54,34,.22) !important;
  border-color: var(--sta-brand-soft);
}

/* Sparkline : dessin animé au mount */
@keyframes sta-spark-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.sta-spark-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: sta-spark-draw 1.2s cubic-bezier(.2,.7,.3,1) forwards;
}
/* décalage d'anim entre plusieurs tuiles visibles */
.sta-mod-tile:nth-child(2) .sta-spark-line { animation-delay: .08s; }
.sta-mod-tile:nth-child(3) .sta-spark-line { animation-delay: .16s; }
.sta-mod-tile:nth-child(4) .sta-spark-line { animation-delay: .24s; }
.sta-mod-tile:nth-child(5) .sta-spark-line { animation-delay: .32s; }
.sta-mod-tile:nth-child(6) .sta-spark-line { animation-delay: .40s; }