/* ------------------------------------------------------------------ */
/* Thème                                                               */
/* ------------------------------------------------------------------ */
:root {
  --bg: #0b0f16;
  --bg-elevated: #121826;
  --bg-soft: #172032;
  --border: #223049;
  --border-soft: #1b2436;
  --text: #e6edf7;
  --text-muted: #8a99b5;
  --text-faint: #5d6b86;
  --accent: #5b8def;
  --up: #3ddc97;
  --degraded: #f5a524;
  --down: #f2555a;
  --unknown: #6b7a99;
  --paused: #4a5570;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  --radius: 14px;
  --radius-sm: 9px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

[data-theme='light'] {
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --bg-soft: #eef1f8;
  --border: #d9e0ee;
  --border-soft: #e7ecf6;
  --text: #16203a;
  --text-muted: #5b6883;
  --text-faint: #8c98b0;
  --up: #16a06b;
  --degraded: #c97a06;
  --down: #d92d36;
  --unknown: #8593ad;
  --shadow: 0 10px 24px rgba(20, 30, 60, 0.1);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter : une règle d'affichage portée par
   une classe (`.bandeau { display: flex }`) écrase sinon la valeur par défaut du
   navigateur, et l'élément reste visible alors qu'on le croit masqué. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ------------------------------------------------------------------ */
/* Barre supérieure                                                    */
/* ------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar__identity { display: flex; align-items: center; gap: 12px; }
.topbar__subtitle { margin: 2px 0 0; color: var(--text-muted); font-size: 12px; }
.topbar__status { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), #7c5cf0);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.global-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-weight: 600;
  font-size: 13px;
}
.global-pill[data-status='up'] { border-color: color-mix(in srgb, var(--up) 45%, transparent); color: var(--up); }
.global-pill[data-status='degraded'] { border-color: color-mix(in srgb, var(--degraded) 45%, transparent); color: var(--degraded); }
.global-pill[data-status='down'] { border-color: color-mix(in srgb, var(--down) 45%, transparent); color: var(--down); }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--unknown);
  flex: none;
}
[data-status='up'] .dot { background: var(--up); box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 18%, transparent); }
[data-status='degraded'] .dot { background: var(--degraded); box-shadow: 0 0 0 4px color-mix(in srgb, var(--degraded) 18%, transparent); }
[data-status='down'] .dot { background: var(--down); box-shadow: 0 0 0 4px color-mix(in srgb, var(--down) 20%, transparent); }
[data-status='paused'] .dot { background: var(--paused); }

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--unknown); }
.live[data-state='open'] .live__dot { background: var(--up); animation: pulse 2s ease-in-out infinite; }
.live[data-state='connecting'] .live__dot { background: var(--degraded); animation: pulse 1s ease-in-out infinite; }
.live[data-state='closed'] .live__dot { background: var(--down); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

.btn {
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--bg-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn--icon { width: 34px; padding: 8px 0; text-align: center; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
}
.segmented button {
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--border-soft); }
.segmented button.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }

/* Le filtre d'environnement se distingue de la fenêtre d'historique : il change
   le périmètre affiché, pas seulement la profondeur de l'historique. */
.segmented--env button.is-active {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.segmented--env:empty { display: none; }

/* ------------------------------------------------------------------ */
/* Tuiles d'indicateurs                                                */
/* ------------------------------------------------------------------ */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}

.tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tile__label { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; }
.tile__value { font-size: 26px; font-weight: 680; margin-top: 6px; letter-spacing: -0.02em; }
.tile__hint { color: var(--text-faint); font-size: 12px; margin-top: 2px; font-family: var(--mono); }
.tile--up .tile__value { color: var(--up); }
.tile--degraded .tile__value { color: var(--degraded); }
.tile--down .tile__value { color: var(--down); }

/* ------------------------------------------------------------------ */
/* Environnements & applications                                       */
/* ------------------------------------------------------------------ */
.environments { display: flex; flex-direction: column; gap: 20px; }

.env {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}

.env__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--env-color, var(--accent)) 10%, transparent), transparent);
}
.env__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.env__meta { margin-left: auto; display: flex; gap: 18px; color: var(--text-muted); font-size: 12px; font-family: var(--mono); }
.env__meta b { color: var(--text); font-weight: 600; }

.apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
}

@media (max-width: 1180px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .apps { grid-template-columns: minmax(0, 1fr); }
}

.app {
  background: var(--bg-elevated);
  padding: 15px 18px 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  container-type: inline-size;
}
.app__head { display: flex; align-items: center; gap: 10px; }
.app__name { font-weight: 620; font-size: 14px; }
.app__badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
}
.app__icon {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-soft); color: var(--text-muted); font-size: 13px;
}

.uptime-bar { display: flex; gap: 2px; height: 26px; align-items: stretch; }
.uptime-bar__cell {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--bg-soft);
  transition: opacity 0.15s ease;
}
.uptime-bar__cell[data-state='up'] { background: var(--up); }
.uptime-bar__cell[data-state='degraded'] { background: var(--degraded); }
.uptime-bar__cell[data-state='down'] { background: var(--down); }
.uptime-bar__cell[data-state='empty'] { background: color-mix(in srgb, var(--unknown) 22%, transparent); }
.uptime-bar__cell:hover { opacity: 0.6; }

.probes { display: flex; flex-direction: column; gap: 2px; }
.probe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  color: inherit;
}
.probe:hover { background: var(--bg-soft); border-color: var(--border-soft); }
.probe__name {
  font-size: 13px;
  /* `min-width: 0` autorise la troncature : sans lui le nom refuse de rétrécir
     et se fait écraser par les métriques alignées à droite. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.probe__tags { display: flex; gap: 4px; }
.tag {
  flex: none;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-faint);
  font-family: var(--mono);
}
.probe__metrics { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

.probe__latency[data-slow='true'] { color: var(--degraded); }
.probe__spark { width: 74px; height: 20px; flex: none; }
.probe.is-updated { animation: flash 0.9s ease; }

@keyframes flash {
  0% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}

/* ------------------------------------------------------------------ */
/* Panneau incidents                                                   */
/* ------------------------------------------------------------------ */
.panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.panel__filters { margin-left: auto; }
.panel__scope {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
}

.incidents { display: flex; flex-direction: column; }
.incident {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.incident:last-child { border-bottom: 0; }
.incident__badge {
  font-size: 11px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  flex: none;
}
.incident__badge[data-status='open'] { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.incident__badge[data-status='resolved'] { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); }
.incident__target { font-weight: 600; }
.incident__cause { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incident__time { margin-left: auto; color: var(--text-faint); font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.empty { padding: 26px 18px; color: var(--text-faint); text-align: center; font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Tiroir de détail                                                    */
/* ------------------------------------------------------------------ */
.drawer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.drawer[aria-hidden='false'] { pointer-events: auto; }
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.drawer[aria-hidden='false'] .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(640px, 100%);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(102%);
  transition: transform 0.24s cubic-bezier(0.22, 0.7, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.drawer[aria-hidden='false'] .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.drawer__eyebrow { margin: 0 0 3px; color: var(--text-muted); font-size: 12px; font-family: var(--mono); }
.drawer__head .btn--icon { margin-left: auto; }
.drawer__body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kv__item { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.kv__label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.kv__value { font-size: 15px; font-weight: 620; margin-top: 3px; font-family: var(--mono); }

.section__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.chart {
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 150;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.chart-legend { display: flex; gap: 14px; margin-top: 7px; color: var(--text-faint); font-size: 11.5px; font-family: var(--mono); }
.chart-legend__right { margin-left: auto; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: var(--mono); }
th { text-align: left; color: var(--text-muted); font-weight: 550; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); font-size: 11px; text-transform: uppercase; }
td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); }
tr:last-child td { border-bottom: 0; }
td.status-cell[data-status='up'] { color: var(--up); }
td.status-cell[data-status='degraded'] { color: var(--degraded); }
td.status-cell[data-status='down'] { color: var(--down); }
.error-text { color: var(--down); word-break: break-word; }

code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text-muted);
  word-break: break-all;
}

/* ------------------------------------------------------------------ */
/* Toasts & pied de page                                               */
/* ------------------------------------------------------------------ */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 9px; }
.toast {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 13px;
  max-width: 380px;
  animation: slide-in 0.22s ease;
}
.toast[data-kind='down'] { border-color: color-mix(in srgb, var(--down) 55%, transparent); }
.toast[data-kind='up'] { border-color: color-mix(in srgb, var(--up) 55%, transparent); }
.toast[data-kind='degraded'] { border-color: color-mix(in srgb, var(--degraded) 55%, transparent); }

@keyframes slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 30px;
  color: var(--text-faint);
  font-size: 12px;
  font-family: var(--mono);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer__sep { opacity: 0.5; }

@media (max-width: 720px) {
  .topbar { gap: 12px; }
  .topbar__status { margin-left: 0; }
  .topbar__actions { width: 100%; }
  main { padding: 16px 14px 40px; }
  .env__meta { display: none; }
}

/* Compléments : éléments composés en JavaScript */
.status-wrap { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.uptime-holder { display: block; }
.probe__spark-holder { display: inline-flex; align-items: center; }
.probe__code { min-width: 34px; text-align: right; color: var(--text-faint); }
.drawer__actions { display: flex; gap: 10px; padding-top: 4px; }
.drawer__actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.app__name { flex: 1 1 auto; }

/* Sur une carte étroite, la mini-courbe cède la place au nom de la sonde.
   La condition porte sur la boîte de contenu de la carte, marges intérieures déduites. */
@container (max-width: 300px) {
  .probe__spark-holder { display: none; }
}

/* ------------------------------------------------------------------ */
/* Bandeau hors ligne                                                  */
/* ------------------------------------------------------------------ */
.bandeau {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 1440px;
  margin: 14px auto -8px;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--degraded) 45%, transparent);
  background: color-mix(in srgb, var(--degraded) 12%, var(--bg-elevated));
  color: var(--degraded);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 550;
}
.bandeau__point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--degraded);
  flex: none;
}

/* ------------------------------------------------------------------ */
/* Mobile et application installée                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .topbar {
    /* `env()` évite que l'encoche ou la barre système recouvrent l'en-tête
       lorsque le dashboard tourne en plein écran depuis l'écran d'accueil. */
    padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px
      calc(16px + env(safe-area-inset-left));
    gap: 12px;
  }
  .topbar__identity { flex: 1 1 auto; }
  .topbar__subtitle { display: none; }
  .topbar__status { margin-left: auto; }
  .topbar__actions { width: 100%; justify-content: space-between; row-gap: 10px; }
  .segmented button { padding: 9px 14px; }
  /* Sur mobile le filtre d'environnement prend sa propre ligne, pleine largeur :
     c'est le contrôle le plus utilisé, il doit rester atteignable au pouce. */
  .segmented--env { width: 100%; }
  .segmented--env button { flex: 1 1 0; }

  .bandeau { margin: 12px 14px -6px; }
  main { padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .tile__value { font-size: 22px; }

  /* Cibles tactiles confortables sur la liste des sondes. */
  .probe { padding: 11px 9px; }

  .incident { flex-wrap: wrap; row-gap: 4px; }
  .incident__cause { flex-basis: 100%; white-space: normal; }
  .incident__time { margin-left: 0; }

  .drawer__panel { width: 100%; border-left: 0; }
  .drawer__head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .drawer__body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .kv { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

  .toasts { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }

  .footer { padding: 0 14px calc(24px + env(safe-area-inset-bottom)); }
}

/* Écrans très étroits : on privilégie le statut et la latence. */
@media (max-width: 400px) {
  .segmented button { padding: 8px 10px; font-size: 11px; }
  .probe__code { display: none; }
}

/* Cloche des notifications : l'état actif se lit d'un coup d'œil. */
#btn-push[data-state='on'] { border-color: color-mix(in srgb, var(--up) 55%, transparent); }
#btn-push[data-state='blocked'] { opacity: 0.6; }