/*
  Tokens de cor — paleta da marca Silvio Iwata (mesma do painel_atendimentos,
  ver painel_atendimentos/app/static/css/tokens.css; fonte única em
  design-system/tokens.css). Verde #008D3F / #AEC90B / #1A5036 não mudam de
  tonalidade; o modo noturno só troca neutros e qual verde faz o papel de destaque.

  Tema: padrão segue o sistema (prefers-color-scheme). O botão da topbar grava
  data-theme="light"|"dark" no <html> e isso vence o sistema.
*/
:root{
  --color-green:#008D3F;
  --color-green-light:#AEC90B;
  --color-green-dark:#1A5036;

  color-scheme:light;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f0f3f8;
  --border:#e5e7eb;
  --border-bright:#cbd5e1;
  --text:#1f2937;
  --text-dim:#4b5563;
  --text-faint:#6b7280;
  --accent:var(--color-green);
  --accent-2:var(--color-green-dark);
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --glow-1:rgba(0,141,63,.07);
  --glow-2:rgba(174,201,11,.08);
  --grid-line:rgba(0,141,63,.06);
  --glow-shadow:0 0 0 transparent;
  --hover-filter:brightness(.97);

  --font-display:'Rajdhani',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* Modo noturno: fundo verde-quase-preto (derivado do verde escuro da marca),
   destaque passa pro verde claro. Declarado duas vezes (sistema + manual) —
   CSS não permite reaproveitar o mesmo bloco entre @media e seletor. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#08110c;
    --surface:#0e1a14;
    --surface-2:#12221a;
    --border:#1f3328;
    --border-bright:#34543f;
    --text:#e6efe9;
    --text-dim:#9bb3a5;
    --text-faint:#7a9487;
    --accent:var(--color-green-light);
    --accent-2:var(--color-green);
    --good:#4ade80;
    --warn:#fbbf24;
    --bad:#f87171;
    --glow-1:rgba(0,141,63,.16);
    --glow-2:rgba(174,201,11,.06);
    --grid-line:rgba(174,201,11,.05);
    --glow-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent);
    --hover-filter:brightness(1.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08110c;
  --surface:#0e1a14;
  --surface-2:#12221a;
  --border:#1f3328;
  --border-bright:#34543f;
  --text:#e6efe9;
  --text-dim:#9bb3a5;
  --text-faint:#7a9487;
  --accent:var(--color-green-light);
  --accent-2:var(--color-green);
  --good:#4ade80;
  --warn:#fbbf24;
  --bad:#f87171;
  --glow-1:rgba(0,141,63,.16);
  --glow-2:rgba(174,201,11,.06);
  --grid-line:rgba(174,201,11,.05);
  --glow-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent);
  --hover-filter:brightness(1.25);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, var(--glow-2), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  padding:16px 22px 20px;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  pointer-events:none;
  z-index:0;
}

.wrap{max-width:1280px;margin:0 auto;position:relative;z-index:1;}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.5px;
  color:var(--accent);
  box-shadow:var(--glow-shadow), inset 0 0 8px color-mix(in srgb,var(--accent) 15%,transparent);
  flex-shrink:0;
}
.brand-text h1{
  font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:1.2px;
  margin:0;text-transform:uppercase;color:var(--text);
}
.brand-text span{
  display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);
  letter-spacing:1.2px;text-transform:uppercase;margin-top:1px;
}
.top-status{
  display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
}
.top-status .clock{color:var(--text);font-size:13px;letter-spacing:1px;font-variant-numeric:tabular-nums;}
.top-status .divider{width:1px;height:18px;background:var(--border-bright);}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:2px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid;
}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;cursor:pointer;
  background:var(--surface);color:var(--text-dim);
  border:1px solid var(--border-bright);border-radius:2px;
  font-size:14px;line-height:1;
  transition:color .15s ease,border-color .15s ease;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.pill.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 9%,transparent);}
.pill.good .pill-dot{background:var(--good);box-shadow:0 0 6px var(--good);animation:pulse 2s ease-in-out infinite;}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent);}
.pill.warn .pill-dot{background:var(--warn);box-shadow:0 0 6px var(--warn);animation:pulse 2s ease-in-out infinite;}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent);}
.pill.bad .pill-dot{background:var(--bad);box-shadow:0 0 6px var(--bad);}
.pill.demo{color:var(--text-dim);border-color:var(--border-bright);background:var(--surface-2);}
.pill.demo .pill-dot{background:var(--text-faint);}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- hero / core ---------- */
.hero{
  display:grid;grid-template-columns:190px 1fr;gap:26px;
  align-items:center;padding:4px 6px 18px;
}
@media (max-width:760px){.hero{grid-template-columns:1fr;justify-items:center;text-align:center;}}

.radar{
  width:170px;height:170px;border-radius:50%;position:relative;flex-shrink:0;
  background:radial-gradient(circle at center, color-mix(in srgb,var(--accent) 9%,transparent), transparent 72%);
  border:1px solid var(--border-bright);
}
.radar .ring{position:absolute;border-radius:50%;border:1px solid var(--border);}
.radar .ring.r1{inset:15px;}
.radar .ring.r2{inset:35px;border-style:dashed;border-color:var(--border-bright);}
.radar .sweep{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  animation:spin 7s linear infinite;
}
.radar .sweep::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb,var(--accent) 45%,transparent) 26deg, transparent 70deg);
}
@keyframes spin{to{transform:rotate(360deg);}}
.radar .node{
  position:absolute;top:50%;left:50%;width:170px;height:170px;margin:-85px 0 0 -85px;
  animation:spin 18s linear infinite;
}
.radar .node:nth-child(4){animation-duration:24s;}
.radar .node:nth-child(5){animation-duration:14s;animation-direction:reverse;}
.radar .node span{
  position:absolute;top:5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--accent);box-shadow:var(--glow-shadow);
}
.radar .node:nth-child(5) span{background:var(--accent-2);}
.radar-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;
}
.radar-core .num{
  font-family:var(--font-display);font-weight:700;font-size:27px;color:var(--text);
  line-height:1;
}
.radar-core .num span{font-size:13px;color:var(--accent);}
.radar-core .lbl{
  font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:1.2px;margin-top:4px;
}

.hero-copy .eyebrow{
  font-family:var(--font-mono);font-size:10.5px;color:var(--accent);
  letter-spacing:1.8px;text-transform:uppercase;margin:0 0 6px;
}
.hero-copy h2{
  font-family:var(--font-display);font-weight:700;font-size:23px;
  margin:0 0 7px;text-wrap:balance;color:var(--text);letter-spacing:.2px;
}
.hero-copy p{
  font-family:var(--font-body);font-size:12.5px;line-height:1.5;color:var(--text-dim);
  max-width:56ch;margin:0;
}
.hero-stats{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;}
@media (max-width:760px){.hero-stats{justify-content:center;}}
.hero-stats div{font-family:var(--font-mono);}
.hero-stats .n{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;}
.hero-stats .l{font-size:9px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}

/* ---------- sections ---------- */
.section-head{
  display:flex;align-items:baseline;gap:10px;margin:2px 0 10px;
}
.section-head h3{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--text);margin:0;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.section-head h3::before{content:'';width:3px;height:12px;background:var(--accent);display:inline-block;}
.section-head .count{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);white-space:nowrap;}
.section-head .rule{flex:1;height:1px;background:var(--border);}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:20px;}

/* corner-cut hud panel */
.panel-border{
  padding:1px;
  background:linear-gradient(135deg, var(--border-bright), var(--border) 60%);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:filter .2s ease;
}
.panel-border:hover{filter:var(--hover-filter);}
.panel-inner{
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:var(--surface);
  padding:12px 14px 10px;
  height:100%;
}

.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;}
.card-name{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text);}
.card-url{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);margin-top:2px;word-break:break-all;}

.spark{width:100%;height:26px;margin:8px 0 6px;display:block;}
.spark path.fill{fill:color-mix(in srgb,var(--accent) 14%,transparent);}
.spark path.line{fill:none;stroke:var(--accent);stroke-width:1.6;}
.spark circle{fill:var(--accent);}

.metrics{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:7px;}
.metric .v{font-family:var(--font-mono);font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;}
.metric .k{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.8px;margin-top:2px;}

.card-foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);
}
.tag{
  padding:2px 6px;border:1px solid var(--border-bright);color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.5px;font-size:8.5px;
}


.showcase-note{
  font-family:var(--font-body);font-size:11px;color:var(--text-faint);
  margin:-4px 0 10px;max-width:64ch;line-height:1.5;
}

.card-url a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--border-bright);}
.card-url a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.card-desc{font-family:var(--font-body);font-size:11.5px;line-height:1.45;color:var(--text-dim);margin:2px 0 8px;}

footer{
  margin-top:8px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text-faint);
  letter-spacing:.4px;
}

@media (prefers-reduced-motion:reduce){
  .sweep,.node{animation:none !important;}
  .pill-dot{animation:none !important;}
}