/* Tema escuro é o padrão (inclusive sem JS/CSS variável não suportada).
   app.js decide dark/light (preferência salva > prefers-color-scheme do
   sistema > escuro) e seta o atributo antes do primeiro paint. */
:root,
:root[data-theme="dark"]{
  --bg:#04070f;
  --bg-panel:#080d1a;
  --bg-panel-2:#0b1220;
  --bg-row-hover:#0d1626;
  --border:rgba(96,207,255,0.14);
  --border-strong:rgba(55,138,221,0.4);
  --text-primary:#eaf3fb;
  --text-secondary:#8ea3bf;
  --text-muted:#54688a;
  --accent-cyan:#60cfff;
  --accent-blue:#378add;
  --status-op:#35de94;
  --status-degraded:#ffc24b;
  --status-down:#ff5d6c;
  --status-none:#55688a;

  --accent-cyan-rgb:96,207,255;
  --accent-blue-rgb:55,138,221;
  --status-op-rgb:53,222,148;
  --status-degraded-rgb:255,194,75;
  --status-down-rgb:255,93,108;
  --status-none-rgb:84,104,138;
  --shadow-color:rgba(0,0,0,0.55);
  --header-bg:rgba(4,7,15,0.82);

  --font-ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

:root[data-theme="light"]{
  --bg:#f2f5fa;
  --bg-panel:#ffffff;
  --bg-panel-2:#eef2f8;
  --bg-row-hover:#eef4fc;
  --border:rgba(28,95,168,0.14);
  --border-strong:rgba(28,95,168,0.35);
  --text-primary:#101a2c;
  --text-secondary:#47587a;
  --text-muted:#64748b;
  --accent-cyan:#0077b6;
  --accent-blue:#1c5fa8;
  --status-op:#0d8a4c;
  --status-degraded:#a15e00;
  --status-down:#d1293e;
  --status-none:#64748b;

  --accent-cyan-rgb:0,119,182;
  --accent-blue-rgb:28,95,168;
  --status-op-rgb:13,138,76;
  --status-degraded-rgb:161,94,0;
  --status-down-rgb:209,41,62;
  --status-none-rgb:100,116,139;
  --shadow-color:rgba(30,50,90,0.16);
  --header-bg:rgba(255,255,255,0.82);
}

/* ---------- escala tipográfica ----------
   Todo tamanho de fonte e a maioria das dimensões/espaçamentos usam rem.
   Telas grandes (TV/NOC, 4K, 8K) só precisam bumpar --root-fs abaixo — o
   resto do layout escala junto, com a mesma proporção. */
html{font-size:16px;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(var(--accent-blue-rgb),0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(var(--accent-cyan-rgb),0.08), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-ui);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--accent-cyan-rgb),0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-cyan-rgb),0.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 1200px 800px at 50% 0%, black 0%, transparent 75%);
  z-index:0;
}

a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px; border-radius:4px;}

.shell{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 1.75rem 4rem;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:10;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:background-color .15s ease, border-color .15s ease;
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:1rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.wordmark{display:flex; align-items:center; gap:0.625rem; font-size:1.25rem; font-weight:900; letter-spacing:-0.01em;}
.wordmark img{height:1.75rem; width:auto; display:block;}

nav.top-nav{display:flex; align-items:center; gap:1.75rem;}
.nav-link{
  font-size:0.8125rem; font-weight:600; text-decoration:none; color:var(--text-secondary);
  padding-bottom:4px; border-bottom:2px solid transparent; letter-spacing:0.01em;
}
.nav-link.active{color:var(--text-primary); border-bottom-color:var(--accent-cyan);}
.rss-btn{
  display:flex; align-items:center; gap:0.375rem;
  border:1px solid var(--border-strong); color:var(--accent-cyan);
  background:rgba(var(--accent-cyan-rgb),0.06);
  font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.4375rem 0.875rem; border-radius:999px; text-decoration:none;
}
.rss-btn:hover{background:rgba(var(--accent-cyan-rgb),0.14);}

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; flex:none;
  border:1px solid var(--border-strong); border-radius:999px;
  background:rgba(var(--accent-cyan-rgb),0.06); color:var(--accent-cyan);
  cursor:pointer; padding:0;
  transition:background-color .15s ease;
}
.theme-toggle:hover{background:rgba(var(--accent-cyan-rgb),0.14);}
.theme-toggle svg{width:1rem; height:1rem;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block;}

/* ---------- hero ---------- */
.hero{padding:3.5rem 0 2.25rem;}
.eyebrow{
  font-size:0.75rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 0.875rem;
}
.page-intro{
  font-size:0.9rem; line-height:1.55; color:var(--text-secondary);
  max-width:40rem; margin:0 0 1.5rem;
}
.status-banner{
  display:flex; align-items:center; gap:1.25rem;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem 1.75rem;
  transition:background-color .15s ease, border-color .15s ease;
}
.status-banner.critical{border-color:rgba(var(--status-down-rgb),0.4);}
.status-banner.degraded{border-color:rgba(var(--status-degraded-rgb),0.35);}
.status-banner.operational{border-color:rgba(var(--status-op-rgb),0.35);}
.status-ring{
  position:relative; width:3.25rem; height:3.25rem; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.status-ring.critical{background:rgba(var(--status-down-rgb),0.1); border:1.5px solid var(--status-down); box-shadow:0 0 22px rgba(var(--status-down-rgb),0.45);}
.status-ring.degraded{background:rgba(var(--status-degraded-rgb),0.1); border:1.5px solid var(--status-degraded); box-shadow:0 0 22px rgba(var(--status-degraded-rgb),0.45);}
.status-ring.operational{background:rgba(var(--status-op-rgb),0.1); border:1.5px solid var(--status-op); box-shadow:0 0 22px rgba(var(--status-op-rgb),0.45);}
.status-ring svg{width:1.5rem; height:1.5rem;}
.status-copy h1{font-size:1.375rem; font-weight:700; margin:0 0 4px; text-wrap:balance;}
.status-copy p{font-size:0.875rem; color:var(--text-secondary); margin:0;}
.status-meta{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:0.375rem; flex:none;}
.cluster-tag{
  font-family:"Consolas","SFMono-Regular",monospace; font-size:0.75rem; color:var(--accent-cyan);
  background:rgba(var(--accent-cyan-rgb),0.08); border:1px solid var(--border); padding:4px 10px; border-radius:6px;
}
.live-dot-row{display:flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:var(--text-muted);}
.live-dot{
  width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--status-op);
  box-shadow:0 0 8px rgba(var(--status-op-rgb),0.8);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* ---------- section ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:3rem 0 0.875rem;
}
.section-head h2{font-size:0.8125rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-secondary); margin:0;}
.section-head span{font-size:0.75rem; color:var(--text-muted);}
.section-head h2 .section-sub{
  font-weight:400; letter-spacing:normal; text-transform:none;
  color:var(--text-muted); margin-left:0.5em;
}

.group-alert{
  display:inline-block; font-size:0.625rem; font-weight:800; letter-spacing:.04em;
  text-transform:none; color:var(--status-down);
  background:rgba(var(--status-down-rgb),0.12); padding:2px 8px; border-radius:999px;
  margin-left:8px; vertical-align:middle;
}

.table-wrap{
  border:1px solid var(--border); border-radius:14px; overflow-x:auto;
  background:var(--bg-panel);
  transition:background-color .15s ease, border-color .15s ease;
}
table{width:100%; border-collapse:collapse; min-width:56.25rem;}
thead th{
  text-align:left; font-size:0.6875rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); padding:0.875rem 1rem; border-bottom:1px solid var(--border);
  background:var(--bg-panel-2);
}
thead th.num, td.num{text-align:right;}
tbody tr{border-bottom:1px solid var(--border);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--bg-row-hover);}
tbody tr.incident{background:rgba(var(--status-down-rgb),0.045);}
td{padding:0.875rem 1rem; font-size:0.84375rem; vertical-align:middle;}

.svc-status{display:flex; align-items:center; gap:0.5625rem;}
.dot{width:0.5625rem; height:0.5625rem; border-radius:50%; flex:none;}
.dot.op{background:var(--status-op); box-shadow:0 0 9px rgba(var(--status-op-rgb),0.75);}
.dot.degraded{background:var(--status-degraded); box-shadow:0 0 9px rgba(var(--status-degraded-rgb),0.8); animation:pulse 1.8s ease-in-out infinite;}
.dot.down{background:var(--status-down); box-shadow:0 0 9px rgba(var(--status-down-rgb),0.8); animation:pulse 1.4s ease-in-out infinite;}
.dot.none{background:var(--status-none); box-shadow:none;}
.status-word{font-size:0.75rem; font-weight:600;}
.status-word.op{color:var(--status-op);}
.status-word.degraded{color:var(--status-degraded);}
.status-word.down{color:var(--status-down);}
.status-word.none{color:var(--text-muted);}
.status-detail{
  font-size:0.6875rem; color:var(--text-muted); margin-top:3px; padding-left:1.125rem;
  font-family:"Consolas","SFMono-Regular",monospace;
}
.status-detail .src{color:var(--text-secondary); font-weight:600;}

.svc-name{font-weight:600; color:var(--text-primary);}
.svc-sub{font-size:0.6875rem; color:var(--text-muted); font-family:"Consolas","SFMono-Regular",monospace;}

.replicas{font-variant-numeric:tabular-nums; color:var(--text-secondary); font-size:0.8125rem;}
.uptime{font-variant-numeric:tabular-nums; font-weight:600;}

.history{display:flex; gap:2px; align-items:flex-end;}
.bar{width:0.3125rem; height:1.375rem; border-radius:1px; flex:none; cursor:default; transition:filter .1s ease;}
.bar:hover{filter:brightness(1.35);}
.bar.op{background:var(--status-op);}
.bar.degraded{background:var(--status-degraded);}
.bar.down{background:var(--status-down);}
.bar.none{background:rgba(var(--status-none-rgb),0.35);}
.bar.unknown{background:repeating-linear-gradient(135deg, rgba(var(--status-none-rgb),0.28) 0 3px, rgba(var(--status-none-rgb),0.1) 3px 6px);}

.bar-tooltip{
  position:fixed; z-index:50;
  background:var(--bg-panel-2); border:1px solid var(--border-strong);
  color:var(--text-primary); font-size:0.71875rem; font-family:var(--font-ui);
  white-space:nowrap; padding:0.4375rem 0.6875rem; border-radius:7px;
  box-shadow:0 8px 20px var(--shadow-color);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-100%);
  transition:opacity .1s ease;
}
.bar-tooltip.visible{opacity:1; visibility:visible;}
.bar-tooltip .tt-date{color:var(--text-secondary); font-weight:700; margin-right:6px;}
.bar-tooltip .tt-time{color:var(--accent-cyan); font-variant-numeric:tabular-nums; font-family:"Consolas","SFMono-Regular",monospace;}

.fetch-error{
  margin:1rem 0 0; padding:0.75rem 1rem; border-radius:10px;
  background:rgba(var(--status-down-rgb),0.08); border:1px solid rgba(var(--status-down-rgb),0.35);
  color:var(--status-down); font-size:0.8125rem; display:none;
}
.fetch-error.visible{display:block;}

footer{
  margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
  font-size:0.75rem; color:var(--text-muted);
}
footer strong{color:var(--text-secondary); font-weight:600;}

/* =================================================================
   Mobile (≤720px): a tabela vira uma lista de cards — histórico com
   30 barrinhas de 5px não é legível nem operável com scroll horizontal
   num telefone. Cabeçalho de cada campo some do <thead> e reaparece
   como rótulo por linha via data-label (definido em app.js).
   ================================================================= */
@media (max-width:720px){
  html{font-size:15px;}

  .header-inner{padding:0.75rem 1rem; gap:0.75rem;}
  nav.top-nav{gap:0.75rem;}
  .nav-link{display:none;} /* única página — "Live Status" é redundante no mobile */
  .theme-toggle{width:2.25rem; height:2.25rem;} /* alvo de toque ~36px */

  .shell{padding:0 1rem 2.5rem;}
  .hero{padding:1.75rem 0 1.5rem;}
  .page-intro{max-width:none;}

  .status-banner{flex-wrap:wrap; padding:1.25rem;}
  .status-meta{margin-left:0; align-items:flex-start; width:100%;}

  .section-head{margin:2rem 0 0.75rem;}

  .table-wrap{border:none; background:transparent; overflow-x:visible; border-radius:0;}
  table{min-width:0; display:block;}
  thead{display:none;}
  tbody{display:block;}
  tbody tr{
    display:block; border:1px solid var(--border); border-bottom:1px solid var(--border);
    border-radius:12px; padding:0.875rem 1rem; margin-bottom:0.625rem;
    background:var(--bg-panel);
  }
  tbody tr.incident{border-color:rgba(var(--status-down-rgb),0.35);}
  td{
    display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
    padding:0.375rem 0; border-bottom:1px dashed var(--border);
  }
  td:last-child{border-bottom:none; padding-bottom:0;}
  td.num{text-align:right;}
  td::before{
    content:attr(data-label); flex:none;
    font-size:0.6875rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-muted);
  }
  td:first-child{padding-top:0;}
  td:first-child::before, td:nth-child(2)::before{display:none;}
  td:first-child .status-detail{padding-left:0; margin-top:6px;}
  td:nth-child(2){flex-direction:column; align-items:flex-start; gap:2px;}
  .history{justify-content:flex-end;}
}

/* =================================================================
   Telas grandes / TV de operação — o conteúdo só cresce em max-width
   até aqui (1180px numa tela 4K vira um selo minúsculo no meio do
   vazio). --root-fs escala TODO o layout (é tudo rem), então só
   ajustamos aqui o teto de largura e a densidade da grade de barras.
   ================================================================= */
@media (min-width:2200px){
  html{font-size:18px;}
  .shell, .header-inner{max-width:92rem;}
  table{min-width:64rem;}
}
@media (min-width:3840px){ /* 4K UHD */
  html{font-size:22px;}
  .shell, .header-inner{max-width:118rem;}
  table{min-width:72rem;}
}
@media (min-width:7680px){ /* 8K UHD */
  html{font-size:30px;}
  .shell, .header-inner{max-width:160rem;}
  table{min-width:80rem;}
}

@media (prefers-reduced-motion:reduce){
  .live-dot, .dot.down{animation:none;}
  .bar-tooltip{transition:none;}
  body, header, .status-banner, .table-wrap{transition:none;}
}