/* Cockpit Áxe — mesa de auditoria da triagem.
   Paleta da marca Áxe (verde-tinta + teal + ouro); ouro só na marca e nos títulos.
   Tipografia: IBM Plex Sans (texto e números tabulares); IBM Plex Mono só em JSON/SQL. */
:root {
  --axe-bg: #0e1a17;
  --axe-panel: #13241f;
  --axe-panel-2: #182d27;
  --axe-primary: #16a087;
  --axe-primary-dim: #0f5c4c;
  --axe-accent: #c4a35a;
  --axe-info: #7fb7e0;
  --axe-text: #e9f2ee;
  --axe-text-dim: #93aba3;
  --axe-border: rgba(147, 171, 163, 0.18);
  --axe-border-strong: rgba(196, 163, 90, 0.35);
  --axe-danger: #e5484d;
  --axe-ok: #3ecf8e;
  --axe-warn: #d9b25f;
  --axe-radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--axe-bg);
  color: var(--axe-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

a { color: var(--axe-primary); text-decoration-color: rgba(22, 160, 135, 0.45); text-underline-offset: 2px; }
a:hover, a:visited:hover { color: #4fd8bd; text-decoration-color: currentColor; }
a:visited { color: var(--axe-primary); }
:focus-visible { outline: 2px solid var(--axe-accent); outline-offset: 2px; border-radius: 4px; }

.cockpit-topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  padding: .8rem 1.5rem; border-bottom: 1px solid var(--axe-border-strong);
  background: var(--axe-bg); position: sticky; top: 0; z-index: 10;
}
.cockpit-brand { font-weight: 700; letter-spacing: .01em; color: var(--axe-accent); text-decoration: none; font-size: 1.05rem; }
.cockpit-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.cockpit-nav a { color: var(--axe-text-dim); text-decoration: none; font-size: .92rem; padding: .15rem 0; border-bottom: 2px solid transparent; }
.cockpit-nav a:hover { color: var(--axe-text); }
.cockpit-nav a[aria-current="page"] { color: var(--axe-text); border-bottom-color: var(--axe-primary); }

.cockpit-main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.cockpit-footer { text-align: center; padding: 1.2rem; color: var(--axe-text-dim); font-size: .8rem; }

.cockpit-card {
  background: var(--axe-panel); border: 1px solid var(--axe-border); border-radius: var(--axe-radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem;
}
.cockpit-card h2 { margin: 0 0 .5rem; color: var(--axe-accent); font-size: 1.35rem; font-weight: 600; }
.cockpit-card h3 { margin: 1.6rem 0 .6rem; color: var(--axe-text); font-size: 1.08rem; font-weight: 600; }
.cockpit-card h4 { margin: 1.1rem 0 .4rem; color: var(--axe-text); font-size: .98rem; font-weight: 600; }
.cockpit-card p { max-width: 78ch; }
.cockpit-lede { color: var(--axe-text-dim); margin-top: 0; }

.cockpit-badge {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: rgba(147, 171, 163, .14); color: var(--axe-text-dim); white-space: nowrap;
}
.cockpit-badge.ok { background: rgba(62, 207, 142, .15); color: var(--axe-ok); }
.cockpit-badge.warn { background: rgba(217, 178, 95, .16); color: var(--axe-warn); }
.cockpit-badge.down { background: rgba(229, 72, 77, .16); color: #ff7b7f; }
.cockpit-badge.info { background: rgba(127, 183, 224, .16); color: var(--axe-info); }
.cockpit-badge.mute { background: rgba(147, 171, 163, .12); color: var(--axe-text-dim); }

/* Veredito no topo do detalhe: o que aconteceu com a nota, numa linha */
.cockpit-verdict { display: block; padding: 1rem 1.2rem; border-radius: var(--axe-radius);
  border: 1px solid var(--axe-border); border-left-width: 6px; background: var(--axe-panel-2); margin: .8rem 0 1.2rem; }
.cockpit-verdict strong { display: block; font-size: 1.15rem; font-weight: 600; }
.cockpit-verdict span { color: var(--axe-text-dim); font-size: .92rem; }
.cockpit-verdict.ok { border-left-color: var(--axe-ok); }
.cockpit-verdict.info { border-left-color: var(--axe-info); }
.cockpit-verdict.warn { border-left-color: var(--axe-warn); }
.cockpit-verdict.down { border-left-color: var(--axe-danger); }
.cockpit-verdict.mute { border-left-color: var(--axe-text-dim); }

/* A nota como o atendente a lê no TomTicket */
.cockpit-note { background: #f3f6f4; color: #1c2b26; border-radius: 8px; padding: 1rem 1.2rem; max-width: 78ch;
  white-space: pre-wrap; line-height: 1.6; font-size: .95rem; }
.cockpit-note-caption { color: var(--axe-text-dim); font-size: .85rem; margin: .4rem 0 0; }

.cockpit-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 0; }
.cockpit-actions form { margin: 0; }

#cockpit-graph {
  width: 100%; height: 70vh; border: 1px solid var(--axe-border); border-radius: 14px; background-color: #0b1513;
  background-image: linear-gradient(rgba(196, 163, 90, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 163, 90, .05) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
.cockpit-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; }
.cockpit-legend-item { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--axe-text-dim); }
.cockpit-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cockpit-graph-detail { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 320px; max-height: 60vh; overflow-y: auto; display: none; }
.cockpit-graph-detail.visible { display: block; }
.cockpit-graph-detail .cockpit-card { position: relative; }
.cockpit-graph-close { position: absolute; top: .6rem; right: .6rem; background: none; border: none; color: var(--axe-text-dim);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .15rem .4rem; }
.cockpit-graph-close:hover { color: var(--axe-text); }

.cockpit-table-wrap { overflow-x: auto; }
table.cockpit-table { width: 100%; border-collapse: collapse; }
table.cockpit-table th, table.cockpit-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--axe-border);
  font-size: .9rem; vertical-align: top; }
table.cockpit-table th { color: var(--axe-text-dim); font-weight: 600; font-size: .84rem; }
table.cockpit-table tbody tr:hover { background: rgba(22, 160, 135, .06); }
table.cockpit-table tbody tr:last-child td { border-bottom: none; }
table.cockpit-table td a { font-weight: 500; }

.cockpit-doc-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: rgba(147, 171, 163, .14); color: var(--axe-text-dim); }
.cockpit-doc-badge[data-cat="ADR"] { background: rgba(22, 160, 135, .15); color: var(--axe-primary); }
.cockpit-doc-badge[data-cat="Arquitetura"] { background: rgba(196, 163, 90, .15); color: var(--axe-accent); }
.cockpit-doc-badge[data-cat="Roadmap"] { background: rgba(127, 183, 224, .15); color: var(--axe-info); }
.cockpit-doc-badge[data-cat="Runbook"] { background: rgba(229, 130, 72, .15); color: #f0a878; }
.cockpit-doc-badge[data-cat="Apresentação"] { background: rgba(196, 90, 156, .15); color: #e79fd0; }

.cockpit-doc { font-size: .95rem; max-width: 80ch; }
.cockpit-doc h1, .cockpit-doc h2, .cockpit-doc h3, .cockpit-doc h4 { color: var(--axe-accent); margin: 1.6em 0 .6em; line-height: 1.3; }
.cockpit-doc h1:first-child, .cockpit-doc h2:first-child, .cockpit-doc h3:first-child { margin-top: 0; }
.cockpit-doc h1 { font-size: 1.5rem; }
.cockpit-doc h2 { font-size: 1.25rem; border-bottom: 1px solid var(--axe-border); padding-bottom: .35em; }
.cockpit-doc h3 { font-size: 1.08rem; }
.cockpit-doc h4 { font-size: .98rem; color: var(--axe-text-dim); }
.cockpit-doc p, .cockpit-doc ul, .cockpit-doc ol { margin: .75em 0; }
.cockpit-doc ul, .cockpit-doc ol { padding-left: 1.4em; }
.cockpit-doc li { margin: .3em 0; }
.cockpit-doc strong { color: var(--axe-text); }
.cockpit-doc hr { border: none; border-top: 1px solid var(--axe-border); margin: 1.6em 0; }
.cockpit-doc blockquote { margin: 1em 0; padding: .5em 1em; border-left: 3px solid var(--axe-primary-dim); background: rgba(22, 160, 135, .06); color: var(--axe-text-dim); }
.cockpit-doc code { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; background: rgba(196, 163, 90, .12); color: var(--axe-accent);
  padding: .1em .4em; border-radius: 4px; font-size: .88em; }
.cockpit-doc pre { background: rgba(0, 0, 0, .35); border: 1px solid var(--axe-border); border-radius: 8px; padding: .9em 1em; overflow-x: auto; }
.cockpit-doc pre code { background: none; color: var(--axe-text); padding: 0; font-size: .85em; }
.cockpit-doc table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .88rem; }
.cockpit-doc th, .cockpit-doc td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--axe-border); }
.cockpit-doc th { color: var(--axe-text-dim); font-weight: 600; }
.cockpit-doc img { max-width: 100%; border-radius: 8px; }

.cockpit-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.cockpit-filters label { display: flex; flex-direction: column; font-size: .82rem; color: var(--axe-text-dim); gap: .2rem; }
.cockpit-filters input, .cockpit-filters select { background: var(--axe-bg); color: var(--axe-text); border: 1px solid var(--axe-border);
  border-radius: 6px; padding: .42rem .55rem; font-family: inherit; font-size: .9rem; }
.cockpit-filters button, .cockpit-button { background: var(--axe-primary); color: #04120d; border: none; border-radius: 6px; padding: .5rem 1rem;
  font-weight: 600; cursor: pointer; font-family: inherit; font-size: .9rem; }
.cockpit-filters button:hover, .cockpit-button:hover { background: #1cc4a4; }
.cockpit-button.secondary { background: transparent; color: var(--axe-text); border: 1px solid var(--axe-border-strong); }
.cockpit-button.secondary:hover { background: rgba(196, 163, 90, .1); }
/* Link com cara de botão: a cor de link visitado (a:visited) não pode vencer a do botão. */
a.cockpit-button, a.cockpit-button:visited, a.cockpit-button:hover, a.cockpit-button:visited:hover {
  color: #04120d; text-decoration: none; display: inline-block; }
a.cockpit-button.secondary, a.cockpit-button.secondary:visited, a.cockpit-button.secondary:hover,
a.cockpit-button.secondary:visited:hover { color: var(--axe-text); }
.cockpit-mono { font-variant-numeric: tabular-nums; }
.cockpit-truncate { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.cockpit-pagination { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; align-items: center; color: var(--axe-text-dim); font-size: .9rem; }
.cockpit-pre { background: #0a1311; border: 1px solid var(--axe-border); border-radius: 8px; padding: .9em 1em; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .82em; color: var(--axe-text); }

/* Trilha do fluxo completo: cada estação é um passo; a cor diz quem agiu */
.cockpit-trace { list-style: none; padding: 0 0 0 .2rem; margin: .4rem 0 0; position: relative; }
.cockpit-trace::before { content: ""; position: absolute; left: 7px; top: .4rem; bottom: .4rem; width: 2px; background: var(--axe-border); }
.cockpit-trace-step { position: relative; padding-left: 1.8rem; margin: 0 0 .35rem; }
.cockpit-trace-step::before { content: ""; position: absolute; left: 1px; top: .55rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--axe-bg); border: 3px solid var(--axe-text-dim); }
.cockpit-trace-step.kind-jev::before { border-color: var(--axe-info); }
.cockpit-trace-step.kind-llm::before { border-color: var(--axe-primary); }
.cockpit-trace-step.kind-sl::before { border-color: var(--axe-accent); }
.cockpit-trace-step.kind-decision::before { border-color: var(--axe-ok); background: var(--axe-ok); }
.cockpit-trace-step.kind-post::before { border-color: var(--axe-ok); }
.cockpit-trace-step summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; padding: .35rem .5rem;
  border-radius: 6px; list-style: none; }
.cockpit-trace-step summary::-webkit-details-marker { display: none; }
.cockpit-trace-step summary:hover, .cockpit-trace-step details[open] > summary { background: rgba(147, 171, 163, .07); }
.cockpit-trace-meta { color: var(--axe-text-dim); font-size: .84rem; }
.cockpit-trace-body { padding: .3rem .5rem .8rem; }
.cockpit-trace-body h5 { margin: .6rem 0 .3rem; font-size: .85rem; color: var(--axe-text-dim); font-weight: 600; }
.cockpit-trace-body pre { max-height: 28rem; overflow: auto; }
.cockpit-copy { background: none; border: 1px solid var(--axe-border); color: var(--axe-text-dim); border-radius: 6px; padding: .25rem .6rem;
  font-family: inherit; font-size: .8rem; cursor: pointer; margin-top: .3rem; }
.cockpit-copy:hover { color: var(--axe-text); border-color: var(--axe-border-strong); }

/* Memória dos clientes */
.cockpit-kpis { display: flex; flex-wrap: wrap; gap: 2rem; margin: .4rem 0 1rem; }
.cockpit-kpi strong { display: block; font-size: 1.6rem; font-weight: 600; color: var(--axe-text); }
.cockpit-kpi span { color: var(--axe-text-dim); font-size: .85rem; }

@media (max-width: 720px) {
  .cockpit-main { padding: 1rem; }
  .cockpit-card { padding: 1rem; }
  .cockpit-topbar { padding: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Status por processo (ADR-014) */
.cockpit-alert-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border-radius: 999px; background: #e5484d; color: #fff; font-size: .72rem; font-weight: 700; margin-left: .25rem; }
.st-head { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: flex-start; }
.st-head form { margin: 0; }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .8rem; margin-top: .6rem; }
.st-card { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem; border-radius: var(--axe-radius);
  border: 1px solid var(--axe-border); border-left-width: 4px; background: var(--axe-panel-2); color: var(--axe-text);
  text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.st-card:hover, .st-card:visited:hover { border-color: var(--axe-border-strong); color: var(--axe-text); }
.st-card:visited { color: var(--axe-text); }
.st-card.ok { border-left-color: var(--axe-ok); } .st-card.info { border-left-color: var(--axe-info); }
.st-card.warn { border-left-color: var(--axe-warn); } .st-card.down { border-left-color: #e5484d; }
.st-card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.st-card small, .mute { color: var(--axe-text-dim); }
.st-counts { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; }
.st-counts b { font-weight: 600; } .st-counts .ok { color: var(--axe-ok); } .st-counts .info { color: var(--axe-info); }
.st-counts .warn { color: var(--axe-warn); } .st-counts .down { color: #ff7b7f; } .st-counts .mute { color: var(--axe-text-dim); }
.st-top { font-size: .82rem; } .st-open { font-size: .78rem; color: var(--axe-warn); }
.st-summary { font-size: .85rem; }
.st-inline { display: inline; margin: 0 0 0 .3rem; }
.st-col-main { overflow-wrap: anywhere; min-width: 12rem; }
.st-check { flex-direction: row !important; align-items: center; gap: .35rem !important; }
.st-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.st-form { display: grid; gap: .6rem; }
.st-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--axe-text-dim); }
.st-form input[type=text] { background: var(--axe-bg); color: var(--axe-text); border: 1px solid var(--axe-border); border-radius: 6px;
  padding: .45rem .55rem; font: inherit; }
@media (max-width: 640px) {
  .st-stack thead { display: none; }
  .st-stack, .st-stack tbody, .st-stack tr, .st-stack td { display: block; width: 100%; }
  .st-stack tr { border-top: 1px solid var(--axe-border); padding: .5rem 0; }
  .st-stack td { border: 0; padding: .15rem 0; min-width: 0; }
  .st-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--axe-text-dim);
    text-transform: uppercase; letter-spacing: .03em; }
}
.st-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .45rem; }
.st-actions form { margin: 0; }
.st-resolved { opacity: .75; }

/* Carregando: barra no topo e botão ocupado assim que a pessoa clica (js/loading.js) */
.axe-loading { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, var(--axe-primary) 35%, var(--axe-accent) 65%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat; transition: opacity .15s; }
.axe-loading.is-active { opacity: 1; animation: axe-loading-run 1.1s linear infinite; }
@keyframes axe-loading-run { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.axe-loading-msg { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; margin: 0; max-width: 22rem; padding: .6rem .9rem;
  background: var(--axe-panel-2); color: var(--axe-text); border: 1px solid var(--axe-border-strong); border-radius: var(--axe-radius);
  font-size: .9rem; display: none; }
.axe-loading-msg.is-visible { display: block; }
.is-loading { position: relative; cursor: progress !important; }
.is-loading::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: axe-spin .7s linear infinite; }
@keyframes axe-spin { to { transform: rotate(360deg); } }
html[aria-busy="true"], html[aria-busy="true"] a { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .axe-loading.is-active { animation: none; background: var(--axe-primary); }
  .is-loading::after { animation-duration: 2s; }
}