/* ── MyLastNight Incident Ticker ─────────────────────── v3 */
/* v3 : dégradé vertical par severity, plus de pills */

#mln-ticker {
  all: unset !important;
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  height: 28px !important;
  background: rgba(8, 7, 15, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 999 !important;
  font-family: 'MapleMono', monospace !important;
  font-size: 11px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  transition: opacity 0.4s, transform 0.4s !important;
  pointer-events: none !important;
}

#mln-ticker.mln-ticker--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Label fixe à gauche */
#mln-ticker .mln-ticker-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  height: 100% !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ef4444 !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: opacity 0.15s !important;
}
#mln-ticker .mln-ticker-label:hover {
  opacity: 0.7 !important;
}

#mln-ticker .mln-ticker-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  animation: mln-ticker-pulse 2s ease-in-out infinite !important;
}

@keyframes mln-ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Zone défilante */
#mln-ticker .mln-ticker-track {
  flex: 1 !important;
  overflow: hidden !important;
  height: 100% !important;
  position: relative !important;
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%) !important;
}

#mln-ticker .mln-ticker-content {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  white-space: nowrap !important;
  animation: mln-ticker-scroll var(--ticker-duration, 30s) linear infinite !important;
  gap: 0 !important;
}

#mln-ticker .mln-ticker-content:hover {
  animation-play-state: paused !important;
}

@keyframes mln-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Item individuel avec dégradé vertical ── */
#mln-ticker .mln-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  height: 100% !important;
  position: relative !important;
}

/* Dégradé vertical à gauche de chaque item */
#mln-ticker .mln-ticker-item::before {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 3px !important;
  border-radius: 2px !important;
}

/* Severity colors via dégradé */
#mln-ticker .mln-ticker-item--critical::before {
  background: linear-gradient(to bottom, #ef4444, #dc2626) !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important;
}
#mln-ticker .mln-ticker-item--warning::before {
  background: linear-gradient(to bottom, #f59e0b, #d97706) !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4) !important;
}
#mln-ticker .mln-ticker-item--info::before {
  background: linear-gradient(to bottom, #3b82f6, #2563eb) !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4) !important;
}
#mln-ticker .mln-ticker-item--ok::before {
  background: linear-gradient(to bottom, #22c55e, #16a34a) !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4) !important;
}

/* Severity label (texte petit, coloré) */
#mln-ticker .mln-ticker-severity {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#mln-ticker .mln-ticker-item--critical .mln-ticker-severity { color: #ef4444 !important; }
#mln-ticker .mln-ticker-item--warning .mln-ticker-severity  { color: #f59e0b !important; }
#mln-ticker .mln-ticker-item--info .mln-ticker-severity     { color: #3b82f6 !important; }
#mln-ticker .mln-ticker-item--ok .mln-ticker-severity       { color: #22c55e !important; }

/* Nom du service */
#mln-ticker .mln-ticker-source {
  color: #DCC9A9 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
}

/* Titre */
#mln-ticker .mln-ticker-title {
  color: rgba(228, 228, 231, 0.75) !important;
}

/* Timestamp */
#mln-ticker .mln-ticker-time {
  color: rgba(228, 228, 231, 0.3) !important;
  font-size: 9px !important;
}

/* Séparateur */
#mln-ticker .mln-ticker-sep {
  color: rgba(255, 255, 255, 0.1) !important;
  padding: 0 6px !important;
  font-size: 6px !important;
}

/* ── Label adaptatif par severity max ── */

/* Warning only (pas de critical) → label orange */
#mln-ticker.mln-ticker--warning .mln-ticker-label {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
  border-right-color: rgba(245, 158, 11, 0.15) !important;
}
#mln-ticker.mln-ticker--warning .mln-ticker-dot {
  background: #f59e0b !important;
}

/* Critical → label rouge */
#mln-ticker.mln-ticker--critical .mln-ticker-label {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}
#mln-ticker.mln-ticker--critical .mln-ticker-dot {
  background: #ef4444 !important;
}

/* Tous résolus → label vert */
#mln-ticker:not(.mln-ticker--has-open) .mln-ticker-label {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #16a34a !important;
}
#mln-ticker:not(.mln-ticker--has-open) .mln-ticker-dot {
  background: #16a34a !important;
  animation: none !important;
}

/* ── Quand le ticker est visible, décaler le contenu ── */
body.mln-ticker-active {
  --mln-ticker-offset: 28px !important;
}

/* ── Theme overrides ── */

/* Retro */
[data-theme="retro"] #mln-ticker {
  background: rgba(28, 27, 24, 0.95) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(220, 201, 169, 0.1) !important;
}
[data-theme="retro"] #mln-ticker .mln-ticker-label {
  border-right: 1px solid rgba(220, 201, 169, 0.1) !important;
}
[data-theme="retro"] #mln-ticker .mln-ticker-source { color: #DCC9A9 !important; }
[data-theme="retro"] #mln-ticker .mln-ticker-title { color: rgba(220, 201, 169, 0.6) !important; }

/* Cyberpunk */
[data-theme="cyberpunk"] #mln-ticker {
  background: rgba(7, 5, 15, 0.96) !important;
  border-bottom: 1px solid rgba(255, 45, 120, 0.15) !important;
}
[data-theme="cyberpunk"] #mln-ticker .mln-ticker-source { color: #ffe0c0 !important; }
[data-theme="cyberpunk"] #mln-ticker .mln-ticker-title { color: rgba(0, 229, 255, 0.6) !important; }

/* 8-bit */
[data-theme="eight-bit"] #mln-ticker {
  background: #1e1c1a !important;
  backdrop-filter: none !important;
  border-bottom: 2px solid #ffb300 !important;
}
[data-theme="eight-bit"] #mln-ticker .mln-ticker-source { color: #DCC9A9 !important; }
[data-theme="eight-bit"] #mln-ticker .mln-ticker-title { color: rgba(220, 201, 169, 0.6) !important; }