/* Layout: cabeçalho e filtros de dashboard → KPIs → cena grande e centralizada → grade de tiles.
   Visual único e claro, de propósito: vocabulário de dashboard Looker em volta de uma cena de galpão. */
:root {
  --bg: #f1f3f4; --tile: #ffffff; --line: #dadce0; --soft: #f8f9fa;
  --fg: #202124; --muted: #5f6368; --blue: #1a73e8; --blue-bg: #e8f0fe;
  --ok: #188038; --ok-bg: #e6f4ea; --warn: #b06000; --warn-bg: #fef7e0; --crit: #d93025; --crit-bg: #fce8e6;
  --yellow: #f9ab00; --sky: #cde6f6;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 14px; line-height: 1.45 }
.app { max-width: 1560px; margin: 0 auto; padding-block: 16px 28px; padding-inline: 16px; display: grid; gap: 12px }

.top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between }
.brand { display: flex; gap: 12px; align-items: center; min-width: 0 }
.brand svg { width: 40px; height: 40px; flex: none }
h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 32px); margin: 0; line-height: 1; letter-spacing: .02em; text-transform: uppercase }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.live { display: inline-flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--ok); background: var(--ok-bg); padding: 7px 10px; border-radius: 16px; letter-spacing: .06em }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: blink 1.2s steps(2) infinite }
.live b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0 }
.btn { font-family: var(--f-body); font-weight: 500; font-size: 14px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 16px; background: var(--tile); color: var(--blue); cursor: pointer }
.btn:hover { background: var(--blue-bg) }
.btn.primary { background: var(--crit); border-color: var(--crit); color: #fff }
.btn.primary:hover { background: #b3261e }
.btn.small { font-size: 12px; padding: 3px 10px }
.btn[disabled] { opacity: .6; cursor: not-allowed }
.btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--tile) }
.seg button { border: 0; background: none; color: var(--muted); padding: 8px 12px; font-family: var(--f-mono); font-size: 12px; cursor: pointer }
.seg button[aria-pressed="true"] { color: var(--blue); background: var(--blue-bg) }

.filters { display: flex; flex-wrap: wrap; gap: 8px }
.chip { font-size: 12.5px; background: var(--tile); border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px; color: var(--fg) }
.chip b { font-weight: 500; color: var(--muted); margin-right: 4px }

.tile { background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-width: 0 }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.kpi { display: grid; gap: 6px; align-content: start }
.k-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted) }
.k-lab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none }
.kpi[data-state="ok"] .k-lab::before { background: var(--ok) }
.kpi[data-state="warn"] .k-lab::before { background: var(--yellow); animation: blink 1s steps(2) infinite }
.kpi[data-state="crit"] .k-lab::before { background: var(--crit); animation: blink .6s steps(2) infinite }
.kpi[data-state="warn"] .k-val span { color: var(--warn) }
.kpi[data-state="crit"] .k-val span { color: var(--crit) }
.k-val { font-size: 34px; font-weight: 400; line-height: 1.05; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
.k-val small { font-size: 13px; color: var(--muted) }
.k-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }

.scene-wrap { background: #e4f1dd; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto }
.scene { position: relative; width: 100%; min-width: 980px; aspect-ratio: 528 / 240 }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.scene-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; font-family: var(--f-mono); font-size: 11px; color: #3c4043; background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 10px; pointer-events: none }
.inspector { position: absolute; top: 36px; right: 14px; width: min(320px, 40%); max-height: calc(100% - 50px); overflow: auto; background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: 0 4px 18px rgba(32,33,36,.18) }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: space-between }
.inspector h2 { font-size: 18px; font-weight: 500; line-height: 1.2; margin: 6px 0 8px; text-wrap: balance }
.desc { color: var(--muted); font-size: 13px; margin: 0 0 10px }
.pill { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 10px; white-space: nowrap }
.pill.ok { color: var(--ok); background: var(--ok-bg) } .pill.warn { color: var(--warn); background: var(--warn-bg) }
.pill.crit { color: var(--crit); background: var(--crit-bg) } .pill.info { color: var(--muted); background: var(--soft) }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 8px; font-size: 13px }
.kv dt { color: var(--muted) }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--muted) }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.12) }
code { font-family: var(--f-mono); font-size: .9em; background: var(--soft); padding: 0 4px; border-radius: 3px }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.grid .wide { grid-column: span 2 }
.grid .full { grid-column: 1 / -1 }
.sep { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 12.5px; color: var(--muted) }
.sep b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums }
.t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px }
.t-head h3 { font-size: 14px; font-weight: 500; margin: 0 }
.t-head span { font-size: 12px; color: var(--muted); min-width: 0; overflow-wrap: anywhere }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px }
.key.ok { background: #34a853 } .key.crit { background: var(--crit) }
.chart { height: 150px }
.chart svg { width: 100%; height: 100%; display: block; font-family: var(--f-body) }
.tbl-wrap { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums }
.tbl th { font-weight: 500; font-size: 12px; color: var(--muted); text-align: right; padding: 0 0 8px; border-bottom: 1px solid var(--line) }
.tbl th:first-child, .tbl td:first-child, .tbl th:nth-child(2), .tbl td:nth-child(2) { text-align: left }
.tbl td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; padding-left: 8px }
.note { margin: 12px 0 0; font-size: 13px; color: var(--muted) }

.steps-wrap { overflow-x: auto; padding-top: 6px }
.steps { display: grid; grid-template-columns: repeat(var(--n), minmax(72px, 1fr)); padding-bottom: 2px }
.step { display: grid; justify-items: center; gap: 5px; text-align: center; position: relative; padding: 0 4px }
.step + .step::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--line) }
.step.done + .step::before { background: var(--ok) }
.node { width: 18px; height: 18px; border-radius: 50%; background: var(--tile); border: 2px solid var(--line); position: relative; z-index: 1 }
.step.done .node { background: var(--ok); border-color: var(--ok) }
.step.active .node { border-color: var(--yellow); background: var(--warn-bg); animation: blink 1s steps(2) infinite }
.step.fail .node { background: var(--crit); border-color: var(--crit) }
.s-name { font-size: 12.5px; line-height: 1.2; font-weight: 500 }
.s-time { font-family: var(--f-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.step.fail .s-time { color: var(--crit) }

.events ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 230px; overflow: auto }
.events li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.4 }
.events time { font-family: var(--f-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.events .d { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transform: translateY(-1px) }
.events .d.ok { background: #34a853 } .events .d.warn { background: var(--yellow) } .events .d.crit { background: var(--crit) }
.events span:last-child { min-width: 0; overflow-wrap: anywhere }

footer { font-family: var(--f-mono); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }

@keyframes blink { 50% { opacity: .3 } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 720px) { .grid { grid-template-columns: minmax(0, 1fr) } .grid .wide, .grid .full { grid-column: auto } }
@media (prefers-reduced-motion: reduce) { .live i, .kpi .k-lab::before, .step.active .node { animation: none } }