/* Couleurs du thème Telegram (variables posées par telegram-web-app.js), avec
   des valeurs de repli pour un navigateur ordinaire. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111827);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --link: var(--tg-theme-link-color, #2563eb);
  --button: var(--tg-theme-button-color, #2563eb);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --section: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #f3f4f6));
  --secondary: var(--tg-theme-secondary-bg-color, #f3f4f6);
  --danger: var(--tg-theme-destructive-text-color, #dc2626);
  --critical: #e5484d;
  --warning: #f5a524;
  --info: #3e9bff;
  --ok: #30a46c;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tg]) {
    --bg: #0f1115; --text: #e5e7eb; --hint: #9ca3af; --section: #1a1d24; --secondary: #15181e;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--secondary); color: var(--text); }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

header { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--hint) 25%, transparent); }
nav { display: flex; }
nav button {
  flex: 1; border: 0; background: none; color: var(--hint); padding: 12px 4px 10px;
  font: inherit; font-weight: 600; border-bottom: 2px solid transparent;
}
nav button[aria-selected="true"] { color: var(--button); border-bottom-color: var(--button); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--critical); color: #fff; font-size: 12px; line-height: 18px; }

main { padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
.view.map { padding: 0; margin: -12px; height: calc(100vh - 46px); }
.view.map iframe { border: 0; width: 100%; height: 100%; display: block; background: #050914; }

.card {
  background: var(--bg); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
  border-left: 4px solid var(--hint); display: block; width: 100%; text-align: left; color: inherit; font: inherit;
}
button.card { border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.card.critical { border-left-color: var(--critical); }
.card.warning { border-left-color: var(--warning); }
.card.info { border-left-color: var(--info); }
.card.quiet { opacity: .6; }
.card h3 { margin: 0 0 4px; font-size: 15px; }
.meta { color: var(--hint); font-size: 13px; }
.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 8px; background: var(--secondary); color: var(--hint); margin-left: 4px; }

.empty { text-align: center; color: var(--hint); padding: 48px 16px; }
.empty .big { font-size: 40px; display: block; margin-bottom: 8px; }

.detail h2 { margin: 4px 0 6px; font-size: 18px; }
.detail .desc { white-space: pre-wrap; margin: 8px 0; }
.detail img { width: 100%; border-radius: 8px; background: #fff; margin: 8px 0; min-height: 60px; }
.labels { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.labels td { padding: 4px 0; border-top: 1px solid var(--secondary); vertical-align: top; word-break: break-all; }
.labels td:first-child { color: var(--hint); padding-right: 12px; white-space: nowrap; word-break: normal; }

.actions { display: flex; gap: 8px; margin: 12px 0 4px; }
.btn {
  flex: 1; border: 0; border-radius: 10px; padding: 11px 8px; font: inherit; font-weight: 600;
  background: var(--button); color: var(--button-text);
}
.btn.secondary { background: var(--secondary); color: var(--text); }
.btn.danger { background: none; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.btn:disabled { opacity: .5; }
.link { color: var(--link); background: none; border: 0; padding: 0; font: inherit; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.tile { background: var(--bg); border-radius: var(--radius); padding: 12px 14px; }
.tile .n { font-size: 26px; font-weight: 700; }
.tile .l { color: var(--hint); font-size: 13px; }
.tile.ok .n { color: var(--ok); }
.tile.bad .n { color: var(--critical); }
.tile.warn .n { color: var(--warning); }
.list { background: var(--bg); border-radius: var(--radius); padding: 4px 14px; margin-bottom: 10px; }
.list h3 { font-size: 13px; color: var(--hint); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
.list div { padding: 6px 0; border-top: 1px solid var(--secondary); }
.list div:first-of-type { border-top: 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(20, 20, 20, .9); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 14px; max-width: 90vw;
}
.fatal { position: fixed; inset: 0; background: var(--secondary); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; z-index: 5; }
.fatal .big { font-size: 40px; display: block; margin-bottom: 8px; }
.spinner { text-align: center; color: var(--hint); padding: 32px; }