/* =============================================================================
   ComandaON — status page
   Paleta clara no :root, escura só redefinindo as variáveis.
   Sem fonte externa de propósito: a CSP é 'self' e a página precisa abrir
   instantânea justamente quando o resto está fora do ar.
   ============================================================================= */

:root {
  --bg: #fbfbfa;
  --fg: #16161a;
  --fg-soft: #57575f;
  --fg-dim: #6b6b74;
  --rule: rgba(0, 0, 0, .09);
  --rule-strong: rgba(0, 0, 0, .14);

  --up: #1a7f37;
  --partial: #9a6700;
  --down: #cf222e;
  --idle: rgba(0, 0, 0, .09);

  /* Preenchimento das barras — mais claro que a cor de texto de mesmo nome. */
  --fill-up: #2da44e;
  --fill-partial: #d4a72c;
  --fill-down: #e5484d;

  --tip-bg: #16161a;
  --tip-fg: #f4f4f5;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* O bloco de tokens escuros aparece duas vezes de propósito: uma sob a media
   query (tema do sistema) e outra sob [data-theme="dark"] (escolha explícita
   no botão). CSS não tem mixin, e a alternativa — light-dark() — ainda deixaria
   navegador antigo sem cor nenhuma. Numa página de status isso não compensa.
   Ao mexer em qualquer cor, mexer NAS DUAS. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0b;
    --fg: #ededef;
    --fg-soft: #a4a4ae;
    --fg-dim: #8b8b95;
    --rule: rgba(255, 255, 255, .09);
    --rule-strong: rgba(255, 255, 255, .16);

    --up: #3fb950;
    --partial: #d29922;
    --down: #f85149;
    --idle: rgba(255, 255, 255, .09);

    --fill-up: #36a745;
    --fill-partial: #c08c1e;
    --fill-down: #e0453d;

    --tip-bg: #1c1c20;
    --tip-fg: #ededef;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0a0b;
  --fg: #ededef;
  --fg-soft: #a4a4ae;
  --fg-dim: #8b8b95;
  --rule: rgba(255, 255, 255, .09);
  --rule-strong: rgba(255, 255, 255, .16);

  --up: #3fb950;
  --partial: #d29922;
  --down: #f85149;
  --idle: rgba(255, 255, 255, .09);

  --fill-up: #36a745;
  --fill-partial: #c08c1e;
  --fill-down: #e0453d;

  --tip-bg: #1c1c20;
  --tip-fg: #ededef;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

.page {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* --- Cabeçalho --------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 40px 0;
}

.wordmark {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.masthead__rule {
  flex: 0 0 16px;
  height: 1px;
  background: var(--rule-strong);
}

.masthead__label {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-dim);
}

/* Botão de tema. Fica na direita da masthead, discreto: é utilidade, não
   conteúdo. Qual ícone aparece é decidido no JS (classe no próprio botão),
   para não precisar duplicar a regra nos dois seletores de tema. */
.theme-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s ease, background-color .12s ease;
}

.theme-switch:hover { color: var(--fg); background: var(--idle); }
.theme-switch:focus-visible { outline: 2px solid var(--fg-soft); outline-offset: 2px; }

.theme-switch__icon { width: 16px; height: 16px; display: none; }
.theme-switch--light .theme-switch__moon { display: block; }
.theme-switch--dark .theme-switch__sun { display: block; }

/* --- Estado geral ------------------------------------------------------ */

.overview {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 44px 40px;
}

.overview__title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.overview__sub {
  margin: 8px 0 0;
  font-size: .9rem;
  color: var(--fg-soft);
  max-width: 46ch;
}

/* Ponto de status com halo pulsante. O halo só existe no estado operacional:
   é o sinal de "isto está vivo agora", que numa página de status vale mais que
   qualquer texto. Some com prefers-reduced-motion. */
.signal {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--fg-dim);
}

.signal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}

.signal--up { background: var(--up); }
.signal--degraded { background: var(--partial); }
.signal--down { background: var(--down); }
.signal--unknown { background: var(--fg-dim); }

.signal--up::after { animation: halo 2.8s ease-out infinite; }

@keyframes halo {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(3.2); }
  100% { opacity: 0;   transform: scale(3.2); }
}

@media (prefers-reduced-motion: reduce) {
  .signal--up::after { animation: none; }
}

/* --- Avisos ------------------------------------------------------------ */

.notices:not(:empty) { margin-bottom: 36px; }

/* Fio vertical em vez de caixa preenchida: informa sem gritar, e não compete
   com o estado geral logo acima. */
.notice {
  border-left: 2px solid var(--partial);
  padding: 2px 0 2px 14px;
  font-size: .875rem;
  color: var(--fg-soft);
}
.notice + .notice { margin-top: 14px; }
.notice--error { border-left-color: var(--down); }
.notice strong { color: var(--fg); font-weight: 600; }

/* --- Serviços ---------------------------------------------------------- */

.services { border-top: 1px solid var(--rule); }

.service { padding-block: 26px; border-bottom: 1px solid var(--rule); }

.service__head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
}

.service__name {
  margin: 0;
  font-size: .975rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.service__state {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: baseline;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
}
.service__state--up { color: var(--up); }
.service__state--down { color: var(--down); }
.service__state--unknown { color: var(--fg-dim); }

.service__latency {
  font-family: var(--mono);
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  letter-spacing: -.02em;
}

.service__desc {
  margin: 4px 0 0;
  font-size: .84rem;
  color: var(--fg-dim);
}

/* --- As 24 barras ------------------------------------------------------ */

.bars {
  margin-top: 18px;
  display: flex;
  gap: 4px;
  height: 46px;
}

.bar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--idle);
  transition: opacity .12s ease, transform .12s ease;
}
.bar--up { background: var(--fill-up); }
.bar--partial { background: var(--fill-partial); }
.bar--down { background: var(--fill-down); }
.bar--nodata { background: var(--idle); }

.bars:hover .bar { opacity: .4; }
.bars .bar:hover { opacity: 1; transform: scaleY(1.08); }

.scale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  font-size: .72rem;
  color: var(--fg-dim);
}

.scale__uptime {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--fg-soft);
}

/* --- Rodapé ------------------------------------------------------------ */

.colophon { padding-block: 32px 56px; }

.colophon__line {
  margin: 0;
  font-size: .8rem;
  color: var(--fg-soft);
}
.colophon__line--dim { color: var(--fg-dim); margin-top: 4px; }

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: .73rem;
  color: var(--fg-dim);
}
.key li { display: inline-flex; align-items: center; gap: 7px; }

.key__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.key__swatch--up { background: var(--fill-up); }
.key__swatch--partial { background: var(--fill-partial); }
.key__swatch--down { background: var(--fill-down); }
.key__swatch--nodata { background: var(--idle); }

/* --- Tooltip ----------------------------------------------------------- */

/* Tooltip próprio em vez do title= nativo: o nativo demora ~1s para aparecer e
   some sozinho, o que inutiliza a leitura das barras hora a hora. */
.tip {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: .75rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-8px);
  transition: opacity .1s ease;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.tip--on { opacity: 1; }
.tip__num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tip__dim { color: var(--fg-dim); }

/* --- Telas estreitas --------------------------------------------------- */

@media (max-width: 540px) {
  .page { padding-inline: 20px; }
  .masthead { padding-block: 28px 0; }
  .overview { padding-block: 32px 30px; gap: 13px; }
  .bars { height: 40px; gap: 2px; }
  .service { padding-block: 22px; }

  /* Uma coluna só: a ordem do HTML (nome, descrição, estado) já é a que se
     quer ler no celular. O estado volta para o fluxo normal. */
  .service__head { grid-template-columns: 1fr; }
  .service__state { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}