/* radar.soenen.be */

:root {
  --radar: #1f9d68;
  --lv-ok: #22a565;
  --lv-warn: #e59a0b;
  --lv-crit: #e5484d;
  --lv-unknown: #8a958f;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-bs-theme="light"] {
  --bs-body-bg: #f3f6f4;
  --bs-body-color: #17201c;
  --bs-tertiary-bg: #e9eeeb;
  --bs-card-bg: #ffffff;
  --bs-border-color: #dbe3de;
}

[data-bs-theme="dark"] {
  --radar: #3ddc97;
  --lv-ok: #3ddc97;
  --lv-warn: #f5b638;
  --lv-crit: #ff5d62;
  --lv-unknown: #6f7c76;
  --bs-body-bg: #0a110e;
  --bs-body-color: #dbe6e0;
  --bs-secondary-color: #8b9a93;
  --bs-tertiary-bg: #121b17;
  --bs-border-color: #1f2c26;
  --bs-card-bg: #0f1814;
  --bs-card-cap-bg: transparent;
  --bs-emphasis-color: #f1f7f4;
}

body {
  background: var(--bs-body-bg);
  font-feature-settings: "tnum" 1;
}

.card { --bs-card-bg: var(--bs-card-bg); --bs-card-border-color: var(--bs-border-color); }
.card-header { background: transparent; border-bottom-color: var(--bs-border-color); }

/* --- marque --------------------------------------------------------------- */

.navbar { background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.navbar-brand { color: var(--radar) !important; }
.brand { font-weight: 700; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.brand-domain { color: var(--bs-secondary-color); font-weight: 400; }
.logo { color: var(--radar); }
.logo .sweep { transform-origin: 16px 16px; animation: sweep 4s linear infinite; }
.logo .blip { fill: var(--lv-ok); animation: blip 4s linear infinite; }
body.lv-warn .logo .blip { fill: var(--lv-warn); }
body.lv-crit .logo .blip { fill: var(--lv-crit); }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 8% { opacity: 0; } 12% { opacity: 1; } 60%, 100% { opacity: 0; } }

/* --- pastilles ------------------------------------------------------------ */

.dot {
  --c: var(--lv-unknown);
  display: inline-block;
  flex: none;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.dot.ok   { --c: var(--lv-ok); }
.dot.warn { --c: var(--lv-warn); }
.dot.crit { --c: var(--lv-crit); animation: pulse 1.6s ease-out infinite; }
.dot-xl   { width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); }

[data-bs-theme="dark"] .dot.ok { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 0%, transparent); }
}

/* --- synthèse ------------------------------------------------------------- */

.summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-card-bg);
  position: relative; overflow: hidden;
}
.summary::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c, var(--lv-unknown));
}
.summary.lv-ok   { --c: var(--lv-ok); }
.summary.lv-warn { --c: var(--lv-warn); }
.summary.lv-crit { --c: var(--lv-crit); }
.summary h1 { letter-spacing: -.02em; font-weight: 650; }

.stats { display: flex; gap: 2rem; }
.stats > div { display: flex; flex-direction: column; align-items: flex-end; }
.stats .num { font-family: var(--font-num); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.stats .lbl { font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 575px) { .stats { width: 100%; justify-content: space-between; } .stats > div { align-items: flex-start; } }

.alerts .list-group-item { background: var(--bs-card-bg); border-color: var(--bs-border-color); font-size: .925rem; }

.section-title {
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bs-secondary-color); margin-bottom: .9rem;
}

/* --- cartes machines ------------------------------------------------------ */

.host { border-top: 3px solid var(--c, var(--bs-border-color)); transition: border-color .3s; }
.host.lv-ok   { --c: color-mix(in srgb, var(--lv-ok) 55%, var(--bs-border-color)); }
.host.lv-warn { --c: var(--lv-warn); }
.host.lv-crit { --c: var(--lv-crit); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; font-size: .875rem; margin-bottom: .9rem; }
.kv dt { font-weight: 400; color: var(--bs-secondary-color); }
.kv dd { margin: 0; text-align: right; font-family: var(--font-num); font-size: .84rem; }

.meter { margin-bottom: .65rem; }
.meter .progress { height: 5px; margin-top: .25rem; background: var(--bs-tertiary-bg); }
.meter .small:last-child { font-family: var(--font-num); font-size: .78rem; }

.badge { font-weight: 500; font-size: .74rem; padding: .35em .6em; border: 1px solid transparent; }
.chip-ok   { color: var(--lv-ok);   background: color-mix(in srgb, var(--lv-ok) 12%, transparent);   border-color: color-mix(in srgb, var(--lv-ok) 30%, transparent); }
.chip-warn { color: var(--lv-warn); background: color-mix(in srgb, var(--lv-warn) 12%, transparent); border-color: color-mix(in srgb, var(--lv-warn) 35%, transparent); }
.chip-crit { color: var(--lv-crit); background: color-mix(in srgb, var(--lv-crit) 12%, transparent); border-color: color-mix(in srgb, var(--lv-crit) 35%, transparent); }
.chip-info { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }

.issues { list-style: none; padding: 0; font-size: .85rem; }
.issues li { padding-left: 1rem; position: relative; }
.issues li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--lv-warn); }
.issues li.crit::before { background: var(--lv-crit); }
.pkgs { font-family: var(--font-num); font-size: .75rem; color: var(--bs-secondary-color); margin-top: .3rem; line-height: 1.6; }
details summary { cursor: pointer; }

/* --- table des sites ------------------------------------------------------ */

.sites { --bs-table-bg: transparent; font-size: .9rem; }
.sites th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 600; border-bottom-color: var(--bs-border-color); }
.sites td { border-color: var(--bs-border-color); }
.sites .num { font-family: var(--font-num); font-size: .82rem; white-space: nowrap; }
.sites .url { max-width: 22rem; }
.issue-ok { color: inherit; }
.issue-warn { color: var(--lv-warn); }
.issue-crit { color: var(--lv-crit); }

/* --- connexion ------------------------------------------------------------ */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 360px; border-radius: 1rem; }
.logo-lg .sweep { animation-duration: 3s; }
.btn-radar { --bs-btn-bg: var(--radar); --bs-btn-border-color: var(--radar); --bs-btn-color: #04140c; --bs-btn-hover-bg: color-mix(in srgb, var(--radar) 85%, white); --bs-btn-hover-border-color: var(--radar); --bs-btn-hover-color: #04140c; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .logo .sweep, .logo .blip, .dot.crit { animation: none; }
}

/* --- bouton et fenêtre « Mettre à jour » ---------------------------------- */

.btn-update {
  --bs-btn-color: var(--lv-warn);
  --bs-btn-border-color: color-mix(in srgb, var(--lv-warn) 45%, transparent);
  --bs-btn-hover-color: #1b1203;
  --bs-btn-hover-bg: var(--lv-warn);
  --bs-btn-hover-border-color: var(--lv-warn);
  --bs-btn-active-bg: var(--lv-warn);
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 500;
}

.upd-dialog {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.upd-dialog::backdrop { background: rgba(5, 10, 8, .6); backdrop-filter: blur(3px); }
[data-bs-theme="dark"] .upd-dialog .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.upd-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.upd-steps > li { counter-increment: step; position: relative; padding-left: 2rem; }
.upd-steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 600;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.upd-step { margin-bottom: 1rem; }
.upd-label { font-size: .85rem; margin-bottom: .35rem; }

.cmd {
  display: flex; align-items: stretch;
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  background: var(--bs-tertiary-bg); overflow: hidden;
}
.cmd code {
  flex: 1; min-width: 0; padding: .55rem .75rem;
  font-family: var(--font-num); font-size: .8rem; color: var(--bs-emphasis-color);
  white-space: pre-wrap; word-break: break-all;
}
.cmd .copy {
  flex: none; border: 0; border-left: 1px solid var(--bs-border-color);
  background: transparent; color: var(--bs-secondary-color);
  font-size: .75rem; padding: 0 .8rem; cursor: pointer;
}
.cmd .copy:hover { color: var(--radar); }
.cmd .copy.done { color: var(--lv-ok); }

.upd-or { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--bs-secondary-color); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.upd-or::before, .upd-or::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }
.upd-note { padding: .6rem .8rem; border-radius: .5rem; border: 1px solid color-mix(in srgb, var(--lv-warn) 35%, transparent); background: color-mix(in srgb, var(--lv-warn) 8%, transparent); }
.upd-dialog code:not(.cmd code) { color: var(--bs-emphasis-color); font-size: .78rem; }