/* Kit d'interface BV : composants génériques, tous carrés, couleurs prises dans les jetons. */

/* Panneau : fond levé, liseré d'accent en tête. */
.panel {
  position: relative;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  border: var(--hairline) solid var(--line);
  padding: var(--space-5);
  backdrop-filter: blur(6px);
}
.panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
}

/* Onglets encadrés (navigation principale). */
.tabs { display: flex; gap: 0; border: var(--hairline) solid var(--line); background: var(--bg-sunken); }
.tabs > a, .tabs > button {
  position: relative;
  color: var(--text-dim);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  padding: 7px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tabs > * + * { border-left: var(--hairline) solid var(--line); }
.tabs > :hover { color: var(--text); background: var(--bg-hover); }
.tabs > .current { color: var(--text); background: var(--tint); }
.tabs > .current::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow); }

/* Onglets soulignés (sections d'un panneau). */
.subtabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: var(--hairline) solid var(--line); margin: var(--space-2) 0 var(--space-5); }
.subtabs button {
  position: relative;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  padding: 9px 14px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.subtabs button::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.subtabs button:hover { color: var(--text); }
.subtabs button.current { color: var(--text); }
.subtabs button.current::after { transform: none; box-shadow: 0 0 10px var(--glow); }

/* Choix exclusif compact. */
.segmented { display: inline-flex; border: var(--hairline) solid var(--line); background: var(--bg-sunken); margin-bottom: var(--space-3); }
.segmented button { background: none; border: 0; color: var(--text-dim); font-size: var(--text-sm); padding: 6px 14px; cursor: pointer; transition: color var(--dur-fast), background-color var(--dur-fast); }
.segmented button + button { border-left: var(--hairline) solid var(--line); }
.segmented button:hover { color: var(--text); }
.segmented button.current { color: var(--bg); background: var(--accent); }

/* Bouton discret. */
.toggle {
  background: none;
  border: var(--hairline) solid var(--line);
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding: 4px 12px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.toggle:hover { color: var(--text); border-color: var(--accent); background: var(--tint); }

/* Interrupteur principal : vert au repos, rayures défilantes en marche. */
.power {
  --tone: var(--ok);
  position: relative;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 26px;
  min-width: 170px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  border: var(--hairline) solid var(--tone);
  cursor: pointer;
  transition: background-color var(--dur-fast), box-shadow var(--dur);
}
.power:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 40%, transparent); }
/* Rayures et halo bougent par transform et opacity : le compositeur les anime sans recalculer la page. */
.power.on { --tone: var(--danger); isolation: isolate; background: color-mix(in srgb, var(--tone) 6%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--tone) 35%, transparent); }
.power .stripes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.power .stripes::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -45.25px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 16%, transparent) 0 8px, transparent 8px 16px) 0 0 / 45.25px 100%;
  animation: stripes 2.4s linear infinite;
}
.power.on::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  box-shadow: 0 0 22px color-mix(in srgb, var(--tone) 35%, transparent);
  opacity: 0;
  animation: glow .9s ease-in-out infinite alternate;
}
@keyframes stripes { to { transform: translateX(45.25px); } }
@keyframes glow { to { opacity: 1; } }
.power.stopping { --tone: var(--warn); }
.power:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Pastilles. */
.badge {
  flex: none;
  font: var(--text-xs)/1.6 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 7px;
  border: var(--hairline) solid var(--line-strong);
  color: var(--text-dim);
}
.badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.badge.warn, .badge.open { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.badge.closed { color: var(--text-faint); }

.chip { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: var(--text-sm); border: var(--hairline) solid var(--line); background: var(--bg-sunken); padding: 3px 10px; }
.chip img { height: 14px; width: auto; filter: var(--icon-filter); }

/* Jauge : graduations tous les 10 %, remplissage en dégradé, reflet qui défile. */
.meter { height: 8px; background: var(--bg-sunken); border: var(--hairline) solid var(--line); position: relative; }
.meter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%);
}
.meter progress { display: block; width: 100%; height: 100%; border: 0; appearance: none; background: none; }
.meter progress::-webkit-progress-bar { background: none; }
.meter progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--glow); }
.meter progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--glow); }
/* Reflet : une bande glisse par transform dans .shine, coupé à la valeur (--v). */
.meter .shine { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); overflow: hidden; pointer-events: none; }
.meter .shine::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-350%);
  animation: shine 2.4s linear infinite;
}
@keyframes shine { from { transform: translateX(-350%); } to { transform: translateX(583.33%); } }

/* Grille de cellules séparées par un filet (indicateurs, dépôts). */
.cells > :last-child:nth-child(4n+3) { grid-column: span 2; }
.cells { display: grid; gap: var(--hairline); background: var(--line); border: var(--hairline) solid var(--line); }
.cells > * { background: var(--bg-raised); padding: var(--space-3) var(--space-4); min-width: 0; position: relative; transition: background-color var(--dur-fast); }
.cells > *::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.cells > :hover { background: var(--bg-hover); }
.cells > :hover::before { transform: none; }

.metric strong { display: block; font: 400 var(--text-xl)/1.25 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.metric span { display: block; color: var(--text-dim); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.metric small { display: block; color: var(--text-faint); font: var(--text-xs) var(--font-mono); margin-top: 2px; }

/* Tableaux. */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th { text-align: left; color: var(--text-faint); font: 500 var(--text-xs)/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px 8px 0; border-bottom: var(--hairline) solid var(--line-strong); }
td { padding: 9px 12px 9px 0; border-bottom: var(--hairline) solid var(--line); font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color var(--dur-fast); }
tbody tr:hover { background: var(--bg-hover); }

/* Alerte. */
.alert { border: var(--hairline) solid var(--danger); border-left-width: 3px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); padding: 10px 14px; font-size: var(--text-sm); }

/* État en direct : carré qui respire sur l'horloge commune. */
.state { font: var(--text-xs)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.state.ok { color: var(--ok); }
.state.warn { color: var(--warn); }
.state.bad { color: var(--danger); }
.state.live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 0;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: beat .9s ease-in-out infinite alternate;
}
@keyframes beat { from { opacity: .35; } }

/* Graphiques (ui/chart.js). */
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.chart-hint { color: var(--text-faint); font: var(--text-xs) var(--font-mono); }
.chart-canvas { height: 320px; background: var(--bg-sunken); border: var(--hairline) solid var(--line); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* Journal de lignes (flux d'agent), coloré comme le décompilateur. */
.lines { overflow: auto; font: var(--text-sm)/1.5 var(--font-mono); background: var(--bg-sunken); }
.line { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr); gap: var(--space-2); padding: 5px 12px; border-bottom: var(--hairline) solid color-mix(in srgb, var(--line) 60%, transparent); }
.line:hover { background: var(--bg-hover); }
.line time { color: var(--text-faint); }
.line .kind { color: var(--text-faint); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .06em; padding-top: 1px; }
.line pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.line.commande pre { color: var(--syn-keyword); }
.line.commande .kind { color: var(--syn-keyword); }
.line.sortie pre { color: var(--text-dim); max-height: 14em; overflow: auto; }
.line.message pre { font-family: var(--font-ui); font-size: var(--text-md); }
.line.modification pre { color: var(--syn-variable); }
.line.erreur pre, .line.erreur .kind { color: var(--syn-error); }
.line.réflexion pre { color: var(--syn-comment); font-style: italic; }

/* Sélecteur de thème : chaque carré prend les couleurs de son propre thème. */
.theme-picker { display: flex; gap: 6px; }
.theme-picker button {
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  border: var(--hairline) solid var(--line-strong);
  background: linear-gradient(135deg, var(--bg) 0 45%, var(--accent) 45% 72%, var(--accent-2) 72%);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
}
.theme-picker button:hover { transform: translateY(-2px); }
.theme-picker button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent), 0 0 12px var(--glow); }