/* BrTracker Admin — paleta espelha o app (verde-escuro de gui_common.h). */
:root {
  --fundo: #0b1115;
  --painel: #121c22;
  --painel2: #19272d;
  --borda: #26373f;
  --borda-forte: #3a515a;
  --texto: #edf4f4;
  --dim: #a3b8bf;
  --verde: #52dbac;
  --verde-esc: #167b60;
  --amarelo: #ffd21e;
  --laranja: #ff7e1a;
  --vermelho: #e2484d;
  --azul: #4a9ee0;
  --roxo: #9a6ae0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--verde); }

/* ---------- Layout ---------- */
.app { display: none; min-height: 100vh; grid-template-columns: 224px minmax(0, 1fr); }
.app.on { display: grid; }

.rail {
  background: var(--painel);
  border-right: 1px solid var(--borda);
  padding: 28px 16px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
}
.rail .marca {
  font-weight: 700; font-size: 16px; letter-spacing: .5px;
  padding: 4px 8px 28px; color: var(--texto);
}
.rail .marca small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; letter-spacing: 0; }
.rail button {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  text-align: left; padding: 9px 10px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
}
.rail button:hover { background: var(--painel2); color: var(--texto); border-color: var(--borda); }
.rail button.sel { background: #173b32; color: #92f0c9; border-color: #2b6653; box-shadow: inset 3px 0 var(--verde); }
.rail .rodape { margin-top: auto; font-size: 11px; color: var(--dim); padding: 8px; }

.conteudo { padding: 32px 34px 60px; overflow-x: hidden; max-width: 1800px; width: 100%; margin: 0 auto; }
.topo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topo h1 { font-size: 28px; margin: 2px 0; font-weight: 650; letter-spacing: -.7px; }
.topo .cresce { flex: 1; }

/* ---------- Componentes ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.card {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 20px; position: relative; overflow: hidden; box-shadow: 0 4px 18px #00000012;
}
.card .rot { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.card .val { font-size: clamp(22px, 2vw, 32px); font-weight: 650; margin: 10px 0 6px; letter-spacing: -.8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card .sub { color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--borda-forte); }
.card.verde::before { background: var(--verde); }
.card.amarelo::before { background: var(--amarelo); }
.card.laranja::before { background: var(--laranja); }
.card.vermelho::before { background: var(--vermelho); }
.card.azul::before { background: var(--azul); }
.card.roxo::before { background: var(--roxo); }

.painel {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 22px; margin-bottom: 20px;
}
.painel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--dim); margin: 0 0 12px; font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; color: var(--dim); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px;
  border-bottom: 1px solid var(--borda); white-space: nowrap; cursor: pointer; user-select: none;
}
th:hover { color: var(--texto); }
td { padding: 14px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:hover { background: var(--painel2); }
tbody tr.clic { cursor: pointer; }
.tabela-wrap { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.chip.ativa { background: #14331d; color: #63d183; border-color: #235c34; }
.chip.expirada { background: #3a2410; color: #ffab5e; border-color: #6b4318; }
.chip.sem-licenca { background: #232925; color: var(--dim); border-color: #333c36; }
.chip.bloqueado { background: #3a1618; color: #ff8a8d; border-color: #6b2529; }
.chip.info { background: #16283a; color: #7cc0f0; border-color: #24486b; }
.chip.alerta { background: #3a3510; color: #ffe07a; border-color: #6b6118; }
.chip.roxo { background: #2a1b3d; color: #c4a2f5; border-color: #47316b; }

.pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #333c36; margin-right: 6px; }
.pt.on { background: var(--verde); box-shadow: 0 0 7px var(--verde); }

button.b {
  background: var(--painel2); border: 1px solid var(--borda-forte); color: var(--texto);
  padding: 7px 12px; border-radius: 7px; cursor: pointer;
}
button.b:hover { border-color: var(--verde-esc); background: #18251d; }
button.b.pri { background: var(--verde-esc); border-color: var(--verde); color: #fff; }
button.b.pri:hover { background: var(--verde); }
button.b.perigo { border-color: #6b2529; color: #ff8a8d; }
button.b.perigo:hover { background: #2a1113; border-color: var(--vermelho); }
button.b:disabled { opacity: .45; cursor: not-allowed; }
button.b.mini { padding: 4px 9px; font-size: 12px; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
  background: #0f1713; border: 1px solid var(--borda); color: var(--texto);
  padding: 7px 10px; border-radius: 7px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--verde); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
label.campo { display: block; margin-bottom: 10px; }
[hidden] { display: none !important; }
label.campo span { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
label.campo input, label.campo select, label.campo textarea { width: 100%; }

.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dim { color: var(--dim); }
.pequeno { font-size: 12px; }
.vazio { color: var(--dim); text-align: center; padding: 28px; }

/* ---------- Login ---------- */
.login { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at top, #183a32 0%, transparent 60%); }
.login.on { display: flex; }
.login .cx { background: var(--painel); border: 1px solid var(--borda); border-radius: 20px; padding: 36px; width: 420px; max-width: 100%; box-shadow: 0 30px 100px #0006; }
.login h1 { color: var(--verde); font-size: 20px; margin: 0 0 4px; }
.login p { color: var(--dim); font-size: 12px; margin: 0 0 18px; }

/* ---------- Modal / detalhe ---------- */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.62); display: none;
  align-items: center; justify-content: center; padding: 24px; z-index: 50;
}
.fundo-modal.on { display: flex; }
.modal {
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 12px;
  width: 100%; max-width: 880px; max-height: 90vh; overflow-y: auto; padding: 20px 22px;
}
.modal.estreito { max-width: 460px; }
.modal h2 { margin: 0 0 2px; font-size: 17px; }
.modal .fechar { float: right; }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; word-break: break-all; }

.sec { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px; }
.sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); margin: 0 0 10px; }

/* ---------- Toast ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 99; }
.toast {
  background: var(--painel); border: 1px solid var(--borda-forte); border-left: 3px solid var(--verde);
  padding: 10px 14px; border-radius: 8px; max-width: 380px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.toast.err { border-left-color: var(--vermelho); }

/* ---------- Grafico ---------- */
.graf { width: 100%; height: 130px; display: block; }
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--borda-forte); border-top-color: var(--verde); border-radius: 50%; animation: gira .7s linear infinite; vertical-align: -2px; }
@keyframes gira { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .app.on { grid-template-columns: 1fr; }
  .rail { flex-direction: row; overflow-x: auto; height: auto; padding: 10px; z-index: 20; border-bottom: 1px solid var(--borda); }
  .rail .marca, .rail .rodape { display: none; }
  .grid2 { grid-template-columns: 1fr; }
}

.selo-marca { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--verde); color: #0b251c; font-weight: 850; font-size: 14px; letter-spacing: -1px; margin-right: 6px; }
.login .selo-marca { width: 48px; height: 48px; font-size: 19px; margin-bottom: 24px; }
.eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 700; color: var(--verde); margin-bottom: 5px; }
.subtitulo { color: var(--dim); font-size: 13px; margin: 5px 0 0; }
.rail .marca small { margin-top: 8px; font-size: 10px; }
.rail button[data-aba] { padding: 12px; margin: 3px 0; white-space: nowrap; }
.rail .rodape { border-top: 1px solid var(--borda); padding-top: 18px; }
.login .campo { margin-bottom: 18px; }
.login input, .login button.b { min-height: 44px; }
button.b.pri { font-weight: 600; }
button.b.pri:hover { color: #0b251c; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tags:empty { display: none; }
.tag { display: inline-block; background: #1c3441; color: #abd7f2; border: 1px solid #355363; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 550; overflow-wrap: anywhere; }
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--verde); color: var(--verde); }
.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.indicadores > div { border-left: 2px solid var(--borda-forte); padding-left: 16px; }
.indicadores strong { display: block; font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.indicadores span { display: block; color: var(--dim); font-size: 12px; max-width: 190px; }
.nota-financeira { color: var(--dim); font-size: 12px; line-height: 1.7; margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: 10px; }
.aviso { color: #ffd38c; font-weight: 600; }
.graf { height: 170px; }
.modal { box-shadow: 0 30px 100px #0008; }
.modal .tags { margin-bottom: 12px; }
.modal .sec { padding-top: 20px; margin-top: 22px; }
@media (max-width: 1200px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indicadores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .conteudo { padding: 22px 14px 40px; }
  .topo { gap: 10px; }
  .topo > div:first-child { flex-basis: 100%; }
  .topo input, .topo select { max-width: 100%; }
  .topo h1 { font-size: 25px; }
  .card { padding: 16px 14px; }
  .painel { padding: 16px; }
  .indicadores { gap: 16px; }
  .fundo-modal { padding: 10px; }
  .modal { padding: 20px 16px; max-height: 94vh; }
  .kv { grid-template-columns: 115px 1fr; }
  .login .cx { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; } }
/* Atualizacoes: texto simples preserva quebras sem aceitar HTML do editor. */
.release-notas { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin-top: 16px; }
.release-editor { min-height: 210px; width: 100%; resize: vertical; line-height: 1.6; }
.release-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 16px 0; font-size: 13px; }
.release-meta dt { color: var(--dim); }
.release-meta dd { margin: 0; overflow-wrap: anywhere; }