/* Homelab dashboard — « Console nocturne » */
:root {
  --bg: #0E1116;
  --surface: #161B22;
  --surface-2: rgba(255, 255, 255, 0.03);
  --line: #262D37;
  --line-soft: #1F252E;
  --text: #E6EAF0;
  --text-2: #C9D1DC;
  --muted: #8B95A5;
  --faint: #7D8796;
  --amber: #F5B544;
  --amber-2: #C9A86A;
  --cyan: #5CC8E8;
  --violet: #9C8CF0;
  --ok: #4FD18B;
  --ok-text: #7FE3AE;
  --warn: #F5B544;
  --crit: #FF6B6B;
  --radius-l: 22px;
  --radius-m: 18px;
  --radius-s: 14px;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --sans: 'Geist', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { min-height: 100vh; padding: 40px 24px 56px; -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--amber); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.wrap { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

/* ---------- En-tête ---------- */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.top__date { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.top__row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.top__clock { font-size: 72px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.top__hello { font-size: 28px; font-weight: 500; color: var(--text-2); }
.top__chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 16px; }
.chip__main { font-size: 15px; font-weight: 600; }
.chip__sub { font-size: 12px; color: var(--muted); }
.chip--status { padding: 12px 18px; }
.chip--status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(79,209,139,.18); }
.chip--ok { background: rgba(79,209,139,.10); border-color: rgba(79,209,139,.35); }
.chip--ok .chip__main { color: var(--ok-text); }
.chip--warn { background: rgba(245,181,68,.10); border-color: rgba(245,181,68,.4); }
.chip--warn .dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(245,181,68,.18); }
.chip--warn .chip__main { color: var(--amber); }
.chip--crit { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.45); }
.chip--crit .dot { background: var(--crit); box-shadow: 0 0 0 4px rgba(255,107,107,.2); }
.chip--crit .chip__main { color: #FF9C9C; }
.badge-demo { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #0E1116; background: var(--amber); border-radius: 6px; padding: 3px 7px; align-self: center; }

/* ---------- Recherche + raccourcis ---------- */
.search { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; height: 56px; }
.search:focus-within { border-color: #4A4030; }
.search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 17px; height: 100%; min-width: 0; }
.search input::placeholder { color: var(--faint); }
.kbd { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid #333B47; border-radius: 6px; padding: 3px 7px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.link { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px 0 10px; height: 44px; font-size: 14px; font-weight: 500; }
.link:hover { border-color: #3A4250; }
.link__abbr { width: 26px; height: 26px; border-radius: 8px; color: #0E1116; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* ---------- Grille ---------- */
.grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__title { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card__meta { font-size: 12px; color: var(--ok-text); }
.card__meta--warn { color: var(--amber); }
.card__meta--crit { color: #FF9C9C; }
.is-stale { opacity: .55; }
.stale-note { font-family: var(--mono); font-size: 11px; color: var(--amber); }

/* ---------- Énergie ---------- */
.power { background: linear-gradient(180deg, #19160F 0%, var(--surface) 70%); border-color: #3A3222; padding: 28px; gap: 22px; }
.power .card__title { color: var(--amber-2); }
.power__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.power__now { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.power__value { font-size: 76px; font-weight: 600; letter-spacing: -.04em; color: var(--amber); line-height: 1; font-variant-numeric: tabular-nums; }
.power__unit { font-size: 26px; color: var(--amber-2); }
.power__price { font-size: 15px; color: var(--text-2); margin-top: 8px; }
.power__price b { color: var(--amber); }
.power__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__label { font-size: 12px; color: var(--muted); }
.stat__value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: 14px; font-weight: 400; color: var(--muted); }
.chart { width: 100%; height: 150px; display: block; }
.chart-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 6px; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.outlets { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.outlet { border-radius: var(--radius-s); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid; }
.outlet--bas { background: rgba(245,181,68,.08); border-color: #3A3222; }
.outlet--haut { background: rgba(92,200,232,.07); border-color: #23394A; }
.outlet__head { display: flex; justify-content: space-between; align-items: baseline; }
.outlet__name { font-size: 14px; font-weight: 600; }
.outlet__w { font-family: var(--mono); font-size: 18px; }
.outlet--bas .outlet__w { color: var(--amber); }
.outlet--haut .outlet__w { color: var(--cyan); }
.outlet__devices { font-size: 12px; color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.tile__label { font-size: 12px; color: var(--muted); }
.tile__value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__value small { font-size: 12px; font-weight: 400; color: var(--muted); }
.ups { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; border-top: 1px solid #2E2A20; padding-top: 18px; font-size: 14px; color: var(--muted); }
.ups b { color: var(--text); }
.ups__state { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ups__house { margin-left: auto; }

/* ---------- Nœuds ---------- */
.nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.node { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.node__head { display: flex; justify-content: space-between; align-items: center; }
.node__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.node__ip { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.node__role { font-size: 12px; color: var(--muted); margin-top: -8px; }
.meter { display: flex; flex-direction: column; gap: 5px; }
.meter__row { display: flex; justify-content: space-between; font-size: 12px; }
.meter__row span:first-child { color: var(--muted); }
.meter__row span:last-child { font-family: var(--mono); }
.node__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid #222832; padding-top: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block; }
.dot--down { background: var(--crit); }
.dot--warn { background: var(--warn); }

/* ---------- KPI cluster ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-size: 12px; color: var(--muted); }
.kpi__value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: 14px; font-weight: 400; color: var(--muted); }
.kpi__sub { font-size: 12px; color: var(--muted); }
.kpi__sub--ok { color: var(--ok-text); }
.kpi__sub--warn { color: var(--amber); }
.kpi__sub--crit { color: #FF9C9C; }

/* ---------- Listes latérales ---------- */
.svc { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.svc:last-child { border-bottom: 0; }
.svc__name { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc__ms { width: 60px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bk { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bk__name { flex: 1; }
.bk__when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.net { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.net .card__title { grid-column: 1 / -1; }
.act { display: flex; gap: 12px; font-size: 13px; line-height: 1.4; }
.act__t { font-family: var(--mono); color: var(--faint); width: 42px; flex: none; }
.act__txt { color: var(--text-2); }

.foot { font-family: var(--mono); font-size: 11px; color: #5F6875; text-align: center; }

@media (max-width: 640px) {
  body { padding: 24px 16px 40px; }
  .top__clock { font-size: 56px; }
  .top__hello { font-size: 22px; }
  .power__value { font-size: 60px; }
  .ups__house { margin-left: 0; }
}
.node__foot span { white-space: nowrap; }