/* ===== Nimiq Validators API — LIGHT THEME ===== */

/* Palette */
:root {
  --bg: #f5f7fb;
  --fg: #0c1226;
  --muted: #617199;

  --accent: #4ecdc4;
  --accent-ink: #0c1020;

  --card: #ffffff;
  --table-border: #e4e8f2;
  --badge: #2f9e63;

  --shadow-sm: 0 2px 8px rgba(12, 16, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(12, 16, 32, 0.10);

  --nimiq-gold:  #E9B213;
  --nimiq-honey: #E5A212;
  --gold-ink:    #0c1020;

  /* Ajouts */
  --nimiq-yellow:   #f8d66d;
  --nimiq-yellow-2: #f7cc53;
  --nimiq-turquoise:#27b6b0;
}

/* Typo de base */
:root { --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
html, body { height: 100%; font-family: var(--font-ui); }
body.theme-light {
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
  margin: 0;
  opacity: 0;
  animation: fadeIn .35s ease forwards;
}

/* Header (compact) */
.header-3col {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: .5rem; padding: .6rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--table-border);
  box-shadow: var(--shadow-sm), 0 3px 0 rgba(233,178,19,0.12);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 2px solid rgba(233,178,19,0.18);
}
.brand { display: flex; gap: 14px; align-items: center; min-width: 0; }
.logo { width: 44px; height: 44px; border-radius: 10px; background: #f0f3fb; object-fit: contain; flex-shrink: 0; }
.header-left .logo, .header-left img.logo { width: 40px; height: 40px; object-fit: contain; }

#validator-name { margin: 0 0 .15rem 0; line-height: 1.05; font-size: 1.35rem; }
#validator-address { margin: 0; line-height: 1.1; font-size: .9rem; color: var(--muted); }

/* Chaque colonne du header (nom, slogan, badges) est bornée à un tiers égal
   de la largeur (minmax(0,1fr) plutôt que "auto", qui se dimensionne sur le
   contenu et peut déborder sur ses voisines) ET reçoit son propre
   overflow:hidden — sans ça, le texte en white-space:nowrap d'un enfant
   (nom, description) peut visuellement déborder de sa piste de grille dans
   la colonne voisine, même quand la piste elle-même est correctement bornée. */
/* header-right n'a PAS overflow:hidden (contrairement à left/center) : son
   contenu est court et fixe (Fee, badges, compte à rebours), mais il doit
   pouvoir laisser déborder le menu déroulant de langue (position:absolute)
   qui s'ouvre juste en-dessous — sans ça le menu est ouvert (JS correct)
   mais visuellement rogné à rien par le clip de son ancêtre. */
.header-left, .header-center { min-width: 0; overflow: hidden; }
.header-right { min-width: 0; }
.header-left > div { min-width: 0; overflow: hidden; }
.header-center { text-align: center; padding: 0 .5rem; }

/* Description : un <br> forcé (posé en JS) à chaque " - " du texte source
   découpe le slogan en autant de lignes qu'il a de segments — plus fiable
   qu'un JS de redimensionnement par étapes sur une seule ligne, qui coupait
   le texte en plein milieu d'un mot selon la largeur de fenêtre. Taille de
   police responsive via clamp(), hauteur plafonnée par sécurité (au cas où
   une description sans tiret serait anormalement longue) avec ellipse. */
.description.one-line {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(11px, 1.3vw, 16px);
  line-height: 1.25;
  color: #374151;
  font-weight: 500;
}

/* Nom du validator : une seule ligne, ellipse ("…") plutôt qu'une coupure
   brute si le nom est trop long pour la colonne disponible. */
#validator-name.one-line {
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.05;
  text-overflow: ellipsis;
}

/* Header droit + badges */
.header-right { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.header-right #pool-fee { white-space: nowrap; }

/* Finances — graphique de flux, légende, donut de répartition. */
.fin-chart { width: 100%; height: auto; margin-top: 4px; }
.fin-gridline { stroke: var(--table-border); stroke-width: 1; }
.fin-axis-label { font-size: 9px; fill: var(--muted); }
.fin-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.fin-legend-col { flex-direction: column; gap: 8px; }
.fin-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #374151; font-weight: 600; }
.fin-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.fin-donut { width: 150px; height: 150px; flex-shrink: 0; }
.fin-recon-ok .value { color: #147a47; }
.fin-recon-info .value { color: #9b6500; }
.fin-recon-warn .value { color: #b42318; }
.fin-notes-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fin-notes-list li { padding: 10px 12px; border: 1px solid var(--table-border); border-radius: 9px; background: #fdf6e3; }
.fin-notes-list p { margin: 4px 0; font-size: 13px; line-height: 1.4; }

/* Compte à rebours du prochain restake (badge d'en-tête permanent) et
   bandeau d'avertissement en haut de la vue Restakes. */
.restake-countdown-badge { background: #fff3d6; color: #9b6500; font-weight: 700; white-space: nowrap; }
.restake-warning-banner { background: #fff8e6; border: 1px solid #f2cf7a; margin-bottom: 16px; }
.restake-warning-banner .label { color: #9b6500; font-size: 14px; }
.restake-warning-banner p { font-size: 13px; line-height: 1.5; color: #4a3a0a; }
@media (max-width: 640px) { .fin-donut-wrap { flex-direction: column; align-items: flex-start; } }

/* Bandeau "voyants" système (façon Pi-hole) — 5 indicateurs simples. */
.sys-status-panel { margin-bottom: 16px; }
.sys-status-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; }
.sys-status-item { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.sys-status-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.sys-status-dot.sys-status-ok { background: #22c55e; }
.sys-status-dot.sys-status-warning { background: #f5a524; }
.sys-status-dot.sys-status-critical { background: #ef4444; }
.sys-status-dot.sys-status-unknown { background: #9ca3af; }
.sys-status-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.sys-status-value { font-size: 13px; color: #27334f; font-weight: 700; margin-top: 1px; }
@media (max-width: 640px) { .sys-status-row { gap: 16px; } .sys-status-item { min-width: 44%; } }

/* Sélecteur de langue — menu déroulant compact (drapeaux en SVG inline, les
   emoji drapeau ne s'affichent pas sur Windows/Chrome faute de police
   couleur dédiée). Un menu plutôt que des drapeaux alignés : avec 11
   langues ça ne tiendrait plus dans l'en-tête, et encore moins sur mobile. */
.lang-dropdown { position: relative; margin-left: .5rem; flex-shrink: 0; }
.lang-dropdown-trigger {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--table-border); background: none; border-radius: .35rem;
  padding: 4px 6px; cursor: pointer;
}
.lang-dropdown-trigger:hover { background: #f0f3fb; }
.lang-dropdown-trigger:focus-visible { outline: 2px solid var(--nimiq-gold); outline-offset: 1px; }
.lang-dropdown-chevron { font-size: 10px; color: var(--muted); }
.lang-flag-icon svg { display: block; width: 20px; height: 14px; border-radius: 2px; }
.lang-dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  list-style: none; margin: 0; padding: 4px;
  background: var(--card); border: 1px solid var(--table-border); border-radius: .5rem;
  box-shadow: var(--shadow-md); min-width: 160px; max-height: 320px; overflow-y: auto;
}
.lang-dropdown-menu li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: .35rem; cursor: pointer; font-size: 13px; font-weight: 600; color: #27334f;
}
.lang-dropdown-menu li:hover { background: #f0f3fb; }
.lang-dropdown-menu li.active { background: #fdf6e3; color: var(--gold-ink); }
@media (max-width: 640px) { .lang-dropdown-menu { right: -8px; } }
.badge { background: var(--badge); color: #fff; padding: .15rem .4rem; border-radius: .35rem; font-size: 12px; font-weight: 700; line-height: 1; transition: background .2s ease; }
.badge:hover { background: #38c77f; }

/* Availability badge levels */
.badge.availability-badge { margin-left: .35rem; }
.badge.level-high { background: #0a8; color: #fff; }
.badge.level-mid  { background: #fb3; color: #000; }
.badge.level-low  { background: #e53; color: #fff; }
.badge.level-unknown { background: #999; color: #fff; }

/* RESTAKE : turquoise + texte blanc */
#restake-badge {
  background: var(--nimiq-turquoise);
  color: #ffffff !important;
  border: 1px solid #1aa59f;
  font-weight: 700;
}

/* Main paddings */
main { padding: 20px 24px }

/* Cards / KPI — 4 colonnes */
.totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.card {
  background: var(--card);
  padding: 16px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--table-border);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .label { color: var(--muted); font-size: 12px }
.card .value {
  font-weight: 700;
  font-size: 20px;
  margin-top: 6px;
  color: var(--accent);
  text-shadow: 0 0 4px rgba(78,205,196,0.25);
}

/* KPI typographies */
.totals .card { display: flex; flex-direction: column; gap: .25rem; }
.totals .card .label { font-family: inherit; font-weight: 600; letter-spacing: .01em; color: #111827; }
.totals .card .value { font-family: inherit; font-weight: 600; color: #0f172a; }
.totals .card .sub   { font-family: inherit; font-weight: 600; letter-spacing: .01em; color: #374151; line-height: 1.35; }

/* Figures KPI en turquoise (option) */
.totals .card .value .fig { color: #0fb9b1; font-family: inherit; font-weight: 600; }
.totals .card .value > span:first-child { color: #0fb9b1; }

/* Disclaimer (petit) */
.card.disclaimer .label { color: var(--muted); font-size: 12px; font-weight: 600; }
.card.disclaimer .value {
  color: var(--fg);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
  text-shadow: none;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--table-border);
}
thead th {
  text-align: left; color: var(--muted);
  font-weight: 600; font-size: 12px; padding: 12px;
  border-bottom: 1px solid var(--table-border);
  background: linear-gradient(180deg, rgba(233,178,19,0.12), rgba(233,178,19,0.06) 50%, transparent 100%);
}
tbody td { padding: 12px; border-bottom: 1px solid var(--table-border); font-size: 14px; }
td.num, th.num { text-align: right }
tbody tr:hover { background: rgba(233,178,19,0.08); transition: background .20s ease; }

/* Turquoise pour les nombres du tableau */
table .num { color: #0fb9b1; font-family: inherit; font-weight: 600; }
table td.num, table th.num { color: #0fb9b1; }

/* Filtrage visuel */
.table .highlight { background: #fff6cc; }
.table .muted-row { opacity:.35; }

/* Search (carte KPI rangée 3) */
#search-card .value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.search-help {
  margin: .20rem 0 .35rem;
  font-size: 12px;
  color: #6b7485;
}
.search-input {
  width: 72%;
  max-width: 360px;
  min-width: 220px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: .40rem .55rem;
  border: 1px solid #cfd6e6;
  border-radius: .4rem;
  background: #fff;
  margin: 0 auto;
}
/* Placeholder multi-navigateurs */
.search-input::placeholder { color:#8a93a8; opacity:1; font-size:12px; }
.search-input::-webkit-input-placeholder { color:#8a93a8; opacity:1; }
.search-input::-moz-placeholder { color:#8a93a8; opacity:1; }
.search-input:-ms-input-placeholder { color:#8a93a8; opacity:1; }
.search-input:-moz-placeholder { color:#8a93a8; opacity:1; }
/* Actions: compteur + Clear */
.search-actions {
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  margin-top:.45rem;
}
.search-meta {
  font-size:.80rem;
  color:#6b7485;
  margin-top:.30rem;
}
/* Clear: petit bouton jaune Nimiq */
.search-clear {
  display: inline-block;
  padding: 4px 10px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--nimiq-yellow);
  color: #0a0a0a;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #d5b75b;
  user-select: none;
}
.search-clear:hover { background: var(--nimiq-yellow-2); }
.search-clear:focus { outline: 2px solid #0a0a0a; outline-offset: 2px; }

/* Fade-in */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 1024px) { .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .header-3col { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .4rem; padding: .5rem .75rem; }
  .header-right { justify-content: center; }
  #validator-name { font-size: 1.2rem; }
  #validator-address { font-size: .85rem; }
  /* (si jamais tu réactives une version multi-lignes) */
  .header-center .description { -webkit-line-clamp: 3; }
}

/* Focus accessible */
:focus-visible { outline: 2px solid var(--nimiq-gold); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(233,178,19,0.28); }

/* Coin doré optionnel sur cartes */
.card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: var(--nimiq-gold);
  border-bottom-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 1px 6px rgba(233,178,19,0.35);
}

/* (Retiré) tout style spécial pour #ratio et .stake-highlight afin que
   “Staked supply ratio” et “Share of network” soient comme les autres cartes. */

/* A11y utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== BEGIN NIMIQ EVENTS UI ===== */
#live-events-dashboard-wrapper {
  margin-bottom: 16px;
}

.live-state-row {
  margin-top: 4px;
}

.live-state-card .sub {
  font-size: 12px;
  line-height: 1.45;
}

.live-card-ok {
  border-color: rgba(47, 158, 99, 0.35);
}

.live-card-warning {
  border-color: rgba(245, 158, 11, 0.45);
}

.live-card-critical {
  border-color: rgba(220, 38, 38, 0.45);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .45rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.live-ok,
.event-info .live-badge {
  background: #0a8;
  color: #fff;
}

.live-warning,
.event-warning .live-badge {
  background: #f59e0b;
  color: #111827;
}

.live-critical,
.event-critical .live-badge {
  background: #dc2626;
  color: #fff;
}

.events-card {
  margin-bottom: 16px;
}

.events-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 12px;
}

.events-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.event-item {
  border: 1px solid var(--table-border);
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
}

.event-item.event-critical {
  border-left: 4px solid #dc2626;
}

.event-item.event-warning {
  border-left: 4px solid #f59e0b;
}

.event-item.event-info {
  border-left: 4px solid #0a8;
}

.event-main {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.event-message {
  margin-top: 6px;
  font-size: 13px;
  color: #111827;
}

.event-meta {
  margin-top: 4px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .events-header {
    flex-direction: column;
  }

  .events-actions {
    justify-content: flex-start;
  }
}
/* ===== END NIMIQ EVENTS UI ===== */

/* ===== BEGIN NIMIQ ALERT CENTER UI ===== */
#alert-center-wrapper {
  margin-bottom: 16px;
}

.alert-center-card {
  margin-bottom: 16px;
}

.alert-center-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 12px;
}

.alert-summary-row {
  margin-top: 12px;
}

.alert-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .45rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.alert-ok {
  background: #0a8;
  color: #fff;
}

.alert-warning {
  background: #f59e0b;
  color: #111827;
}

.alert-critical {
  background: #dc2626;
  color: #fff;
}

.alert-list {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .alert-center-header {
    flex-direction: column;
  }
}
/* ===== END NIMIQ ALERT CENTER UI ===== */




/* ===== BEGIN NIMIQ COMPACT EVENTS UI ===== */
.events-panel-compact {
  position: relative;
}

.events-panel-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px 0;
  padding-top: 6px;
  border-top: 1px dashed var(--table-border);
}

.events-panel-hint {
  font-size: 12px;
}

.events-panel-toggle,
.event-details-toggle {
  border: 1px solid var(--table-border);
  background: #f8fafc;
  color: #111827;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.events-panel-toggle:hover,
.event-details-toggle:hover {
  background: #eef2f7;
}

.events-panel-compact .event-list[hidden],
.events-panel-collapsed .event-list {
  display: none !important;
}

.events-panel-expanded .event-list {
  display: grid;
}

.event-item-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.event-item-compact .event-main {
  align-items: center;
}

.event-details-toggle {
  margin-left: auto;
}

.event-details-content {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--table-border);
}

.event-details-content[hidden] {
  display: none !important;
}

.event-item-expanded {
  background: #fff;
}

@media (max-width: 640px) {
  .events-panel-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .event-details-toggle {
    margin-left: 0;
  }
}
/* ===== END NIMIQ COMPACT EVENTS UI ===== */



/* ===== BEGIN NIMIQ ALERT CENTER CONTRAST FIX ===== */
/* Alert Center: keep card labels readable on light backgrounds */
#alert-center-wrapper .live-state-card .label,
#alert-center-wrapper .live-state-card .sub,
#alert-center-wrapper .live-state-card .muted {
  color: #64748b !important;
}

/* Alert Center: normal numeric/text values stay dark */
#alert-center-wrapper .live-state-card .value {
  color: #111827 !important;
}

/* Alert Center: OK badges/pills use white text on green background */
#alert-center-wrapper .alert-badge.alert-ok,
#alert-center-wrapper .live-state-card .value .alert-badge.alert-ok {
  background: #008a70 !important;
  border-color: #008a70 !important;
  color: #ffffff !important;
}

/* Alert Center: force nested text inside OK badges to white */
#alert-center-wrapper .alert-badge.alert-ok *,
#alert-center-wrapper .live-state-card .value .alert-badge.alert-ok * {
  color: #ffffff !important;
}

/* Alert Center: warning/critical badges keep strong contrast */
#alert-center-wrapper .alert-badge.alert-warning {
  color: #111827 !important;
}

#alert-center-wrapper .alert-badge.alert-critical {
  color: #ffffff !important;
}
/* ===== END NIMIQ ALERT CENTER CONTRAST FIX ===== */

/* ===== BEGIN NIMIQ LIVE CARD CONTRAST FIX ===== */
/* Live cards: force white text only inside green OK badges/pills */
#live-events-dashboard-wrapper .alert-badge.alert-ok,
#live-events-dashboard-wrapper .badge.alert-ok,
#live-events-dashboard-wrapper .badge.ok,
#live-events-dashboard-wrapper .status-badge.ok,
#live-events-dashboard-wrapper .state-badge.ok,
#live-events-dashboard-wrapper .live-card-ok .value .badge,
#live-events-dashboard-wrapper .live-card-ok .value .alert-badge,
#live-events-dashboard-wrapper .live-card-ok .value .status-badge,
#live-events-dashboard-wrapper .live-card-ok .value .state-badge,
#live-events-dashboard-wrapper .live-card-ok .value span[class*="badge"] {
  background: #008a70 !important;
  border-color: #008a70 !important;
  color: #ffffff !important;
}

/* Live cards: force nested text/icons inside green OK badges to white */
#live-events-dashboard-wrapper .alert-badge.alert-ok *,
#live-events-dashboard-wrapper .badge.alert-ok *,
#live-events-dashboard-wrapper .badge.ok *,
#live-events-dashboard-wrapper .status-badge.ok *,
#live-events-dashboard-wrapper .state-badge.ok *,
#live-events-dashboard-wrapper .live-card-ok .value .badge *,
#live-events-dashboard-wrapper .live-card-ok .value .alert-badge *,
#live-events-dashboard-wrapper .live-card-ok .value .status-badge *,
#live-events-dashboard-wrapper .live-card-ok .value .state-badge *,
#live-events-dashboard-wrapper .live-card-ok .value span[class*="badge"] * {
  color: #ffffff !important;
}

/* Keep Live card labels and secondary text readable on light cards */
#live-events-dashboard-wrapper .live-state-card .label,
#live-events-dashboard-wrapper .live-state-card .sub,
#live-events-dashboard-wrapper .live-state-card .muted {
  color: #64748b !important;
}

/* Keep normal Live numeric/text values dark when they are not inside badges */
#live-events-dashboard-wrapper .live-state-card .value {
  color: #111827 !important;
}

/* But OK badges inside values must stay white */
#live-events-dashboard-wrapper .live-state-card .value .alert-badge.alert-ok,
#live-events-dashboard-wrapper .live-state-card .value .badge.alert-ok,
#live-events-dashboard-wrapper .live-state-card .value .badge.ok,
#live-events-dashboard-wrapper .live-state-card .value .status-badge.ok,
#live-events-dashboard-wrapper .live-state-card .value .state-badge.ok {
  color: #ffffff !important;
}
/* ===== END NIMIQ LIVE CARD CONTRAST FIX ===== */


/* ===== B5-A RESPONSIVE APPLICATION SHELL ===== */
:root {
  --sidebar-width: 254px;
  --sidebar-collapsed-width: 72px;
  --sidebar-bg: #10172b;
  --sidebar-fg: #e9eefb;
  --sidebar-muted: #9ba8c7;
  --discord-blurple: #5865f2;
}
* { box-sizing: border-box; }
body { min-width: 0; }
.header-3col { z-index: 40; }
.dashboard-shell { min-height: calc(100vh - 66px); display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); transition: grid-template-columns .2s ease; }
.dashboard-sidebar { position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; padding: 14px 10px; background: var(--sidebar-bg); color: var(--sidebar-fg); border-right: 1px solid rgba(255,255,255,.08); z-index: 30; }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding: 0 8px 10px; color:var(--sidebar-muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.sidebar-collapse,.mobile-menu-button { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:inherit; border-radius:9px; cursor:pointer; }
.sidebar-collapse { width:32px; height:32px; font-size:22px; line-height:1; }
.sidebar-nav { display:grid; gap:5px; }
.nav-item { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; min-height:45px; padding:4px 9px; border-radius:10px; color:var(--sidebar-muted); text-decoration:none; font-weight:700; transition:background .15s,color .15s; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(39,182,176,.28),rgba(233,178,19,.16)); box-shadow:inset 3px 0 0 var(--nimiq-gold); }
.nav-icon { display:grid; place-items:center; width:28px; height:28px; font-size:19px; }
.nav-count { min-width:22px; padding:2px 6px; border-radius:999px; background:#dc2626; color:#fff; font-size:11px; text-align:center; }
.sidebar-status { display:flex; align-items:center; gap:10px; margin:18px 8px 0; padding:12px 8px; border-top:1px solid rgba(255,255,255,.1); color:var(--sidebar-muted); font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#18a66a; box-shadow:0 0 0 4px rgba(24,166,106,.15); flex:0 0 auto; }
.dashboard-column { min-width:0; min-height:calc(100vh - 66px); display:flex; flex-direction:column; }
.dashboard-column main { width:100%; max-width:1680px; margin:0 auto; flex:1; }
.mobile-toolbar { display:none; }
.sidebar-backdrop { display:none; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 14px; }
.section-heading h2 { margin:0; font-size:clamp(1.3rem,2.2vw,1.8rem); }
.section-kicker { margin:0 0 2px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:800; }
.dashboard-section[hidden] { display:none !important; }
.module-placeholder { min-height:210px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.module-placeholder .value { color:#16213b; text-shadow:none; font-size:clamp(1rem,2vw,1.25rem); max-width:760px; }
.monitoring-panel { margin:0; }
.monitoring-head { display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.monitoring-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:.65rem; margin-top:.8rem; }
.monitoring-metric { padding:.7rem; border:1px solid rgba(90,105,130,.2); border-radius:.6rem; background:rgba(245,247,251,.65); }
.monitoring-metric strong { display:block; font-size:1.1rem; margin-top:.2rem; }
.monitoring-list { margin:.8rem 0 0; padding:0; list-style:none; }
.monitoring-list li { display:grid; grid-template-columns:minmax(130px,1fr) auto auto; gap:.7rem; align-items:center; padding:.55rem 0; border-top:1px solid rgba(90,105,130,.15); }
.monitoring-healthy { color:#147a47; }.monitoring-warning { color:#9b6500; }.monitoring-critical { color:#b42318; }
.monitoring-pill { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px; font-size:.78rem; font-weight:700; background:#e8edf5; white-space:nowrap; }
.table-section { overflow-x:auto; border-radius:12px; }
.dashboard-footer { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; min-height:64px; padding:16px 24px; color:#74809b; border-top:1px solid var(--table-border); background:rgba(255,255,255,.62); font-size:12px; text-align:center; }
.footer-heart { color:#e11d48; }
.footer-separator { color:var(--nimiq-gold); font-weight:900; }
.footer-discord-link { display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; padding:5px; border:0; border-radius:8px; color:inherit; background:transparent; text-decoration:none; box-shadow:none; transition:transform .15s ease,opacity .15s ease; }
.footer-discord-link:hover { transform:translateY(-1px) scale(1.04); opacity:.88; box-shadow:none; }
.footer-discord-link img { display:block; width:28px; height:28px; max-width:28px; object-fit:contain; }
.footer-discord-fallback { font-weight:800; letter-spacing:.01em; }
body.sidebar-collapsed .dashboard-shell { grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr); }
body.sidebar-collapsed .sidebar-title,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-count { display:none; }
body.sidebar-collapsed .sidebar-heading { justify-content:center; padding-left:0; padding-right:0; }
body.sidebar-collapsed .sidebar-collapse { transform:rotate(180deg); }
body.sidebar-collapsed .nav-item { grid-template-columns:1fr; padding-left:8px; padding-right:8px; }
body.sidebar-collapsed .nav-icon { margin:auto; }
body.sidebar-collapsed .sidebar-status { justify-content:center; padding-left:0; padding-right:0; }
@media (max-width:900px) {
  .header-3col { position:relative; top:auto; }
  .dashboard-shell { display:block; min-height:100vh; }
  /* z-index au-dessus de .header-3col (40) : sans ça, le bandeau du haut
     (resté en flux normal, non caché sur mobile) se peint par-dessus le
     tiroir de menu ouvert et le fond assombri, et le recouvre visuellement. */
  .dashboard-sidebar { position:fixed; top:0; left:0; height:100dvh; width:min(86vw,300px); transform:translateX(-105%); transition:transform .2s ease; box-shadow:12px 0 30px rgba(5,10,24,.32); z-index:50; }
  body.sidebar-mobile-open .dashboard-sidebar { transform:translateX(0); }
  .sidebar-collapse { display:none; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:45; width:100%; height:100%; border:0; background:rgba(5,10,24,.48); }
  body.sidebar-mobile-open .sidebar-backdrop { display:block; }
  .mobile-toolbar { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:56px; padding:8px 14px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--table-border); box-shadow:var(--shadow-sm); }
  .mobile-menu-button { width:40px; height:40px; color:#18223d; background:#fff; border-color:var(--table-border); font-size:20px; }
  .mobile-live { display:flex; align-items:center; gap:8px; color:#147a47; font-size:12px; font-weight:800; }
  body.sidebar-collapsed .sidebar-title,body.sidebar-collapsed .nav-label { display:initial; }
  body.sidebar-collapsed .nav-count { display:inline-block; }
  body.sidebar-collapsed .nav-item { grid-template-columns:36px minmax(0,1fr) auto; }
  body.sidebar-collapsed .sidebar-status { justify-content:flex-start; }
  .dashboard-column main { padding:16px; }
}
@media (max-width:640px) {
  .totals { grid-template-columns:1fr; }
  .monitoring-list li { grid-template-columns:1fr; gap:.25rem; }
  .section-heading { align-items:flex-start; }
  .card { padding:14px; }
  .search-input { width:100%; min-width:0; }
  .table-section table { min-width:640px; }
  .dashboard-footer { flex-direction:column; gap:.3rem; padding:18px 12px; }
  .footer-separator { display:none; }
  .footer-discord-link { min-height:44px; padding:8px 14px; }
  .footer-discord-link img { width:30px; height:30px; max-width:30px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== B5-B LIVE OVERVIEW ===== */
.live-overview-banner { display:grid; grid-template-columns:minmax(150px,1.35fr) repeat(3,minmax(110px,1fr)); gap:1px; margin-bottom:14px; overflow:hidden; border:1px solid var(--table-border); border-radius:12px; background:var(--table-border); box-shadow:var(--shadow-sm); }
.live-overview-banner > div { min-height:58px; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:10px 14px; background:var(--card); }
.live-overview-banner span { color:var(--muted); font-size:12px; font-weight:700; }
.live-overview-banner strong { color:#17213b; font-size:14px; }
.live-overview-primary { justify-content:flex-start !important; }
.live-overview-primary strong { font-size:16px; }
.live-overview-dot { width:10px; height:10px; border-radius:50%; background:#18a66a; box-shadow:0 0 0 5px rgba(24,166,106,.13); }
.live-overview-stale .live-overview-dot { background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.14); }
.live-overview-unavailable .live-overview-dot { background:#dc2626; box-shadow:0 0 0 5px rgba(220,38,38,.13); }
.overview-operational-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.overview-status-card { min-width:0; }
.overview-card-status { font-size:18px !important; text-shadow:none !important; }
.state-ok { color:#147a47 !important; }
.state-warning { color:#9b6500 !important; }
.state-critical { color:#b42318 !important; }
.overview-address { overflow:hidden; color:#17213b !important; font-size:16px !important; text-overflow:ellipsis; white-space:nowrap; text-shadow:none !important; }
.overview-facts { display:grid; gap:6px; margin:12px 0 0; }
.overview-facts > div { display:flex; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--table-border); }
.overview-facts dt { color:var(--muted); font-size:12px; }
.overview-facts dd { margin:0; color:#27334f; font-size:12px; font-weight:700; text-align:right; }
.collector-list { display:grid; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.collector-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; border-top:1px solid var(--table-border); }
.collector-list li > span:first-child { min-width:0; display:grid; }
.collector-list strong { color:#27334f; font-size:12px; }
.collector-list small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.collector-status { flex:0 0 auto; padding:2px 6px; border-radius:999px; background:#eef2f6; color:#56627d; font-size:10px; font-weight:800; }
.collector-ok { background:#e4f7ee; color:#147a47; }
.collector-error,.collector-failed { background:#fde8e7; color:#b42318; }
.overview-quick-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.overview-quick-links a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:10px 13px; border:1px solid var(--table-border); border-radius:10px; background:var(--card); color:#27334f; font-size:12px; font-weight:800; text-decoration:none; box-shadow:var(--shadow-sm); }
.overview-quick-links a:hover { border-color:rgba(39,182,176,.55); color:#0b7f7a; transform:translateY(-1px); }
@media (max-width:1180px) { .overview-operational-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .live-overview-banner { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-quick-links { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .live-overview-banner,.overview-operational-grid,.overview-quick-links { grid-template-columns:1fr; } .live-overview-banner > div { justify-content:space-between; } .live-overview-primary { justify-content:flex-start !important; } }
/* Footer author in French tricolour */
.footer-author-fr {
  display: inline-block;
  font-weight: 900;
  letter-spacing: .015em;
  background: linear-gradient(90deg, #0055a4 0 33.333%, #ffffff 33.333% 66.666%, #ef4135 66.666% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px rgba(12,18,38,.72));
}

/* ===== B5-C RELEASE IDENTITY ===== */
body[data-dashboard-release="b5c"] { --dashboard-release: "b5c"; }

/* ===== B5-D REWARDS ===== */
body[data-dashboard-release="b5e"] { --dashboard-release: "b5e"; }
.rewards-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.reward-summary-card .sub { margin-top:7px; color:var(--muted); font-size:12px; }
.section-heading.compact { margin-bottom:10px; }
.section-heading.compact h3 { margin:0; font-size:1.15rem; }
.reward-last-card { margin-bottom:16px; }
.reward-detail-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 0; }
.reward-detail-list div { min-width:0; padding:10px; border:1px solid var(--table-border); border-radius:9px; background:#f8fafc; }
.reward-detail-list dt { color:var(--muted); font-size:11px; }
.reward-detail-list dd { overflow:hidden; margin:4px 0 0; color:#27334f; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.reward-history-section { margin-top:16px; }
.reward-table-wrap { overflow-x:auto; border-radius:12px; }
/* Tableaux qui n'ont PAS de liste-cartes de repli mobile (Transactions,
   Restakes, Jobs) : classe distincte de .reward-table-wrap, qui elle est
   masquée sous 640px au profit de .reward-mobile-list (utilisé uniquement
   par Rewards). Sans cette classe séparée ces sections restaient vides sur
   mobile — la table était cachée mais rien ne la remplaçait. Reste
   scrollable horizontalement plutôt que de basculer en cartes. */
.data-table-wrap { overflow-x:auto; border-radius:12px; -webkit-overflow-scrolling:touch; }
.reward-status { display:inline-flex; padding:3px 8px; border-radius:999px; background:#eef2f6; color:#56627d; font-size:11px; font-weight:800; }
.reward-status-reconciled { background:#e4f7ee; color:#147a47; }
.reward-status-error,.reward-status-incomplete { background:#fde8e7; color:#b42318; }
.reward-status-running,.reward-status-pending { background:#fff3d6; color:#9b6500; }
.reward-mobile-list { display:none; }
.reward-day-card { padding:13px; }
.reward-day-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reward-day-amount { margin:8px 0 3px; color:#0b7f7a; font-size:1.05rem; font-weight:800; }
@media (max-width:1100px) { .rewards-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .rewards-summary-grid,.reward-detail-list { grid-template-columns:1fr; } .reward-table-wrap { display:none; } .reward-mobile-list { display:grid; gap:10px; } }