/* holyMirror — CSS maison minimal, aucun framework */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif; background: #0d1117; color: #e6edf3;
}
header { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  background: #161b22; border-bottom: 1px solid #30363d; }
header h1 { font-size: 1.1rem; margin: 0; flex: 1; }
nav { display: flex; gap: .8rem; padding: .8rem 1rem; flex-wrap: wrap; align-items: end; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
input, select, button {
  background: #21262d; color: #e6edf3; border: 1px solid #30363d;
  border-radius: 6px; padding: .4rem .6rem; font-size: .9rem;
}
button { cursor: pointer; }
button:hover { background: #30363d; }
.error { color: #f85149; }
#chart { width: 100%; height: 60vh; }
#data-status { padding: 0 1rem; font-size: .8rem; color: #8b949e; }
#agent-badge { font-size: .8rem; }
#agent-badge.ok { color: #3fb950; }
#agent-badge.degraded { color: #d29922; }
#agent-badge.unreachable, #agent-badge.unknown { color: #f85149; }
#agent-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#agent-popup[hidden] { display: none; }
.popup-box {
  background: #161b22; border: 1px solid #d29922; border-radius: 8px;
  padding: 1.2rem 1.6rem; max-width: 28rem; margin: 1rem;
}
.popup-box h2 { margin-top: 0; font-size: 1rem; }
#timeline { max-width: 100%; background: #0d1117; border: 1px solid #30363d; }
#agent-table { font-size: .75rem; border-collapse: collapse; width: 100%; }
#agent-table th, #agent-table td { border: 1px solid #30363d; padding: .2rem .4rem; text-align: left; }
details { padding: 0 1rem 1rem; }
summary { cursor: pointer; color: #8b949e; }