/* swarm dashboard — tokens e componentes compartilhados (proposta "Mesa do Enxame").
   Tema: sem data-theme = segue o sistema; data-theme="light"|"dark" fixa (botão no trilho, salvo em localStorage). */
:root{
  --ground:#F2F3EE; --surface:#FFFFFF; --sunk:#E9EBE4; --ink:#161A17; --muted:#5C645D; --faint:#8B938B;
  --line:#DADED5; --line-strong:#C3C8BE;
  --accent:#2E47A0; --accent-soft:#E3E7F5; --accent-ink:#FFFFFF;
  --ok:#2C7A4B; --ok-soft:#DFEFE4; --warn:#A5580A; --warn-soft:#F6E8D6; --bad:#B0281F; --bad-soft:#F6DEDB;
  --idle:#6B7280; --idle-soft:#E8EAE6;
  --fam-bible:#23776C; --fam-market:#2E47A0; --fam-web:#8A4B7E; --fam-other:#6B7280;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow:0 1px 0 rgba(22,26,23,.04), 0 12px 32px -18px rgba(22,26,23,.28);
  --radius:10px; --rail-w:204px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1210; --surface:#171B18; --sunk:#1E231F; --ink:#E6E9E3; --muted:#A0A89F; --faint:#747C73;
    --line:#2A302B; --line-strong:#3A413B;
    --accent:#93A6F2; --accent-soft:#232B47; --accent-ink:#0F1210;
    --ok:#6CC592; --ok-soft:#1B2E22; --warn:#E3A25A; --warn-soft:#33261A; --bad:#F08A80; --bad-soft:#3A1F1C;
    --idle:#9CA3AF; --idle-soft:#262B27;
    --fam-bible:#5FC0B2; --fam-market:#93A6F2; --fam-web:#D19AC5; --fam-other:#9CA3AF;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 36px -20px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0F1210; --surface:#171B18; --sunk:#1E231F; --ink:#E6E9E3; --muted:#A0A89F; --faint:#747C73;
  --line:#2A302B; --line-strong:#3A413B;
  --accent:#93A6F2; --accent-soft:#232B47; --accent-ink:#0F1210;
  --ok:#6CC592; --ok-soft:#1B2E22; --warn:#E3A25A; --warn-soft:#33261A; --bad:#F08A80; --bad-soft:#3A1F1C;
  --idle:#9CA3AF; --idle-soft:#262B27;
  --fam-bible:#5FC0B2; --fam-market:#93A6F2; --fam-web:#D19AC5; --fam-other:#9CA3AF;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 36px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--ground); color:var(--ink); font:14px/1.5 var(--body); -webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
h1,h2,h3,h4,h5,h6{margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,.mono{font-family:var(--mono); font-size:.9em}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
img{max-width:100%}
.num,td.n,th.n{font-variant-numeric:tabular-nums}
.dim{color:var(--muted)} .faint{color:var(--faint)}
.ok-t{color:var(--ok)} .warn-t{color:var(--warn)} .bad-t{color:var(--bad)}

/* ---------- casca: trilho + área principal ---------- */
.app{display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100%}
.rail{position:sticky; top:0; height:100vh; background:var(--surface); border-right:1px solid var(--line); padding:16px 10px; display:flex; flex-direction:column; gap:2px}
.brand{display:flex; align-items:center; gap:8px; padding:4px 10px 18px; font:700 18px/1 var(--display); color:var(--ink); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand svg{width:20px; height:20px}
.nav{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; color:var(--muted); font-weight:500}
.nav:hover{background:var(--sunk); color:var(--ink); text-decoration:none}
.nav.on{background:var(--sunk); color:var(--ink); font-weight:600}
.nav svg{width:16px; height:16px; flex:none}
.nav .badge{margin-left:auto; font:500 11px/1 var(--mono); color:var(--muted)}
.nav .badge.live{color:var(--accent)}
.rail-foot{margin-top:auto; display:grid; gap:8px; padding-top:18px}
.kbd{display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--faint); font:13px var(--body); cursor:pointer; text-align:left}
.kbd:hover{border-color:var(--line-strong); color:var(--muted)}
.kbd kbd{margin-left:auto; font:500 11px/1 var(--mono); border:1px solid var(--line-strong); border-radius:4px; padding:3px 5px; color:var(--muted)}
.theme-btn{display:flex; align-items:center; gap:8px; background:transparent; border:0; color:var(--faint); font:12px var(--body); padding:4px 10px; cursor:pointer; text-align:left}
.theme-btn:hover{color:var(--ink)}
.main{padding:28px clamp(16px,3vw,40px) 64px; display:grid; gap:20px; align-content:start; min-width:0; max-width:1480px; width:100%}
@media (max-width:820px){
  .app{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .rail{align-content:flex-start; position:sticky; top:env(safe-area-inset-top,0px); height:auto; z-index:20; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line)}
  .brand{padding:4px 8px 4px 2px}
  .nav{padding:6px 8px}
  .nav .badge{display:none}
  .rail-foot{margin:0 0 0 auto; padding:0; display:flex; gap:6px; align-items:center}
  .kbd{width:auto} .kbd span.label{display:none}
  .theme-btn span.label{display:none}
}
@media (max-width:480px){
  .rail{flex-wrap:nowrap}
  .brand{font-size:0; gap:0; padding-right:4px}
  .nav .nav-l{display:none}
  .nav{padding:7px}
  .rail-foot .btn.primary{padding:8px 10px}
  .theme-btn{display:none}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- títulos de página ---------- */
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px}
.page-head h1{font:700 clamp(24px,2.6vw,30px)/1.1 var(--display); letter-spacing:-.015em}
.page-head .sub{color:var(--muted); font-size:13px; margin-top:6px}
.crumb{font:400 12px/1 var(--mono); color:var(--faint); margin-bottom:8px}
.crumb a{color:var(--faint)}
.lab{font:600 11px/1.2 var(--body); letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
.id{font:400 12px/1.3 var(--mono); color:var(--faint)}

/* ---------- cartões ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); min-width:0}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); min-height:46px}
.card-h h2,.card-h h3{font:600 12px/1.2 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.card-b{padding:14px 16px}
.empty{padding:22px 16px; color:var(--muted); font-size:13px; text-align:center}

/* ---------- botões e campos ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 13px/1 var(--body); padding:9px 14px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap; text-decoration:none}
.btn:hover{border-color:var(--ink); text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:default; border-color:var(--line-strong)}
.btn.primary{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn.primary:hover{opacity:.9}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad); background:transparent}
.btn.danger:hover{border-color:var(--bad)}
.btn.sm{padding:6px 10px; font-size:12px}
.btn.stack{flex-direction:column; align-items:flex-start; gap:5px; padding:8px 12px}
.btn.stack small{font:500 11px/1 var(--mono); color:var(--muted)}
.btn.primary.stack small{color:var(--ground); opacity:.75}
.icon-btn{background:transparent; border:0; color:var(--faint); cursor:pointer; padding:4px 6px; border-radius:5px; font:inherit}
.icon-btn:hover{color:var(--bad); background:var(--bad-soft)}
input,select,textarea{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
textarea{resize:vertical; line-height:1.5}
label.field{display:grid; gap:6px}
.field-hint{font-size:12px; color:var(--muted)}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:9px; padding:3px; background:var(--surface); gap:2px}
.seg button,.seg a{font:600 12px/1 var(--body); border:0; background:transparent; color:var(--muted); padding:7px 12px; border-radius:6px; cursor:pointer; text-decoration:none}
.seg [aria-selected="true"],.seg .on{background:var(--ink); color:var(--ground)}
.tabs{display:flex; gap:20px; font-size:13px; font-weight:600; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs button{background:transparent; border:0; font:inherit; color:var(--muted); padding:0 0 10px; cursor:pointer; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink)}
.tabs .count{font:500 11px var(--mono); color:var(--faint); margin-left:4px}

/* ---------- estado ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--body); padding:4px 9px 4px 8px; border-radius:999px; white-space:nowrap; flex:none; width:max-content}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{color:var(--ok); background:var(--ok-soft)}
.pill.warn{color:var(--warn); background:var(--warn-soft)}
.pill.bad{color:var(--bad); background:var(--bad-soft)}
.pill.live{color:var(--accent); background:var(--accent-soft)}
.pill.live::before{animation:sw-pulse 1.6s ease-in-out infinite}
.pill.idle{color:var(--idle); background:var(--idle-soft)}
@keyframes sw-pulse{50%{opacity:.25}}
.sev{display:block; height:3px; width:36px; border-radius:2px; background:var(--idle)}
.sev.ok{background:var(--ok)} .sev.warn{background:var(--warn)} .sev.bad{background:var(--bad)}

/* dinheiro: chip tracejado = ação/limite que gasta; "sem custo" = nunca chama LLM */
.cost{display:inline-flex; align-items:center; gap:5px; font:500 11px/1 var(--mono); padding:4px 7px; border-radius:999px; border:1px dashed currentColor; white-space:nowrap}
.cost::before{content:""; width:6px; height:6px; border-radius:50%; border:1.5px solid currentColor}
.free{font:500 11px/1 var(--mono); color:var(--muted); white-space:nowrap}
.btn.primary .cost{color:var(--ground)}
.lock{display:inline-block; width:10px; height:12px; vertical-align:-1px; color:var(--muted)}
.fam{display:inline-block; width:8px; height:8px; border-radius:2px; flex:none; background:var(--fam-other)}
.fam.bible{background:var(--fam-bible)} .fam.market{background:var(--fam-market)} .fam.web{background:var(--fam-web)}
.tk-chip{font:500 12px/1 var(--mono); padding:4px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent); white-space:nowrap}
a.tk-chip:hover{text-decoration:none; outline:1px solid var(--accent)}
.tag{font:600 11px/1 var(--body); padding:3px 6px; border-radius:4px; white-space:nowrap}
.tag.warn{color:var(--warn); background:var(--warn-soft)} .tag.ok{color:var(--ok); background:var(--ok-soft)}
.tag.bad{color:var(--bad); background:var(--bad-soft)} .tag.idle{color:var(--idle); background:var(--idle-soft)}
.r-comprar{color:var(--ok); font-weight:600} .r-acompanhar{color:var(--warn); font-weight:600} .r-evitar{color:var(--bad); font-weight:600}

/* medidores */
.bar{height:5px; border-radius:3px; background:var(--sunk); position:relative; overflow:hidden}
.bar > i{position:absolute; inset:0 auto 0 0; background:var(--ink); border-radius:3px}
.bar.warn > i{background:var(--warn)} .bar.bad > i{background:var(--bad)} .bar.live > i{background:var(--accent)}
.meter{display:grid; gap:5px; min-width:110px}
.meter .t{display:flex; justify-content:space-between; gap:6px; font:500 12px/1 var(--mono)}
.meter .t i{font-style:normal; color:var(--faint)}

/* tabelas */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{font:600 11px/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl th.sortable{cursor:pointer; user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl td{padding:9px 12px; border-top:1px solid var(--line); vertical-align:middle}
.tbl tr:first-child td{border-top:0}
.tbl .n{text-align:right; font-variant-numeric:tabular-nums}
.tbl .tk{font:500 13px/1 var(--mono)}
.tbl tbody tr.link{cursor:pointer}
.tbl tbody tr.link:hover{background:var(--sunk)}
.kv{display:grid}
.kv > div{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:13px}
.kv > div:first-child{border-top:0}
.kv span{color:var(--muted)}
.kv b{font:500 13px/1.3 var(--mono); text-align:right}

/* relatório em markdown */
.md{font-size:15px; line-height:1.65; max-width:78ch}
.md h1{font:700 26px/1.15 var(--display); margin:0 0 14px}
.md h2{font:700 21px/1.2 var(--display); margin:30px 0 10px; scroll-margin-top:20px}
.md h3{font:600 16px/1.3 var(--body); margin:20px 0 6px}
.md p{margin:0 0 10px}
.md ul,.md ol{padding-left:22px; margin:0 0 12px}
.md li{margin:3px 0}
.md table{border-collapse:collapse; font-size:13px; margin:8px 0 16px; display:block; overflow-x:auto; max-width:100%}
.md th{font:600 11px/1.2 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--faint); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap}
.md td{padding:8px 10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; vertical-align:top}
.md code{background:var(--sunk); padding:1px 5px; border-radius:4px; font-size:.85em}
.md pre{background:var(--sunk); padding:12px 14px; border-radius:8px; overflow-x:auto}
.md pre code{background:transparent; padding:0}
.md blockquote{margin:10px 0; padding:8px 14px; border-left:3px solid var(--warn); background:var(--warn-soft); border-radius:0 8px 8px 0}
.md hr{border:0; border-top:1px solid var(--line); margin:24px 0}

/* diálogo, toast e ⌘K */
dialog.sw-dialog{border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); color:var(--ink); padding:0; width:min(520px, calc(100vw - 32px)); box-shadow:var(--shadow)}
dialog.sw-dialog::backdrop{background:rgba(10,12,11,.45)}
.sw-dialog .d-body{padding:20px 22px; display:grid; gap:10px}
.sw-dialog h2{font:700 20px/1.2 var(--display)}
.sw-dialog p{color:var(--muted); font-size:14px; white-space:pre-wrap}
.sw-dialog .d-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 22px; border-top:1px solid var(--line); background:var(--ground); border-radius:0 0 14px 14px}
.sw-toasts{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:grid; gap:8px; z-index:1000; max-width:min(420px, calc(100vw - 32px))}
.sw-toast{background:var(--ink); color:var(--ground); padding:10px 14px; border-radius:9px; font-size:13px; box-shadow:var(--shadow); white-space:pre-wrap}
.sw-toast.bad{background:var(--bad); color:#fff}
dialog.cmdk{border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); color:var(--ink); padding:0; width:min(620px, calc(100vw - 32px)); margin-top:12vh; box-shadow:var(--shadow)}
dialog.cmdk::backdrop{background:rgba(10,12,11,.45)}
.cmdk input{width:100%; border:0; border-bottom:1px solid var(--line); border-radius:14px 14px 0 0; padding:16px 18px; font-size:16px; background:transparent}
.cmdk input:focus{outline:none}
.cmdk ul{list-style:none; margin:0; padding:6px; max-height:52vh; overflow:auto}
.cmdk li{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 12px; border-radius:8px; cursor:pointer}
.cmdk li[aria-selected="true"]{background:var(--sunk)}
.cmdk li .k{font:600 10px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); width:56px}
.cmdk li .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmdk li .m{font:400 11px/1 var(--mono); color:var(--faint); white-space:nowrap}
.cmdk .hint{padding:8px 18px 12px; font-size:12px; color:var(--faint)}

@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none !important; transition:none !important}
}

/* ---------- conta (pé do trilho): quem está logado, tenant ativo, configurações, sair ---------- */
.me{position:relative; margin-top:2px; padding-top:8px; border-top:1px solid var(--line)}
.me > summary{list-style:none; display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:9px; cursor:pointer; color:var(--ink); min-width:0}
.me > summary::-webkit-details-marker{display:none}
.me > summary:hover,.me[open] > summary{background:var(--sunk)}
.avatar{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font:700 13px/1 var(--display)}
.me-t{display:grid; min-width:0; line-height:1.25}
.me-t b{font:600 13px/1.3 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me-t small{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me .chev{flex:none; width:12px; height:12px; margin-left:auto; color:var(--faint); transition:transform .15s}
.me[open] .chev{transform:rotate(180deg)}
.me-pop{position:absolute; left:0; bottom:calc(100% + 6px); width:max(100%, 236px); background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:grid; gap:2px; z-index:40}
.me-id{display:grid; gap:2px; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; min-width:0}
.me-id b{font-weight:600; overflow-wrap:anywhere}
.me-id b:empty{display:none}
.me-id span{font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.me-switch{display:grid; gap:6px; padding:6px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.me-switch select{width:100%}
.me-switch b{font-weight:600; font-size:13px}
.me-pop a,.me-pop button{display:block; width:100%; text-align:left; padding:8px 10px; border-radius:7px; border:0; background:transparent; color:var(--ink); font:500 13px/1.3 var(--body); cursor:pointer}
.me-pop a:hover,.me-pop button:hover{background:var(--sunk); text-decoration:none}
.me-pop [data-logout]{color:var(--bad)}
@media (max-width:820px){
  .me{margin:0; padding:0; border:0}
  .me-t,.me .chev{display:none}
  .me > summary{padding:3px; border-radius:50%}
  .me-pop{left:auto; right:0; bottom:auto; top:calc(100% + 8px); width:min(280px, calc(100vw - 24px))}
}

/* ---------- login e redefinição de senha ---------- */
.auth{min-height:100%; display:grid; place-items:center; padding:32px 16px calc(32px + env(safe-area-inset-bottom,0px))}
.auth-card{width:min(400px,100%); display:grid; gap:20px}
.auth-brand{display:flex; align-items:center; gap:9px; font:700 20px/1 var(--display); color:var(--ink); letter-spacing:-.01em; justify-self:center}
.auth-brand svg{width:22px; height:22px; color:var(--accent)}
.auth-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 24px 24px; display:grid; gap:16px; box-shadow:var(--shadow)}
.auth-box h1{font:700 26px/1.1 var(--display); letter-spacing:-.015em}
.auth-box .sub{color:var(--muted); font-size:13px; margin-top:-8px}
.auth-box label.field{font-weight:600; font-size:13px}
.auth-box input:not([type="hidden"]){width:100%; padding:10px 12px; font-weight:400; font-size:15px}
.auth-box .btn{width:100%; padding:12px 14px; font-size:14px; margin-top:2px}
.auth-msg{font-size:13px; padding:9px 12px; border-radius:8px}
.auth-msg.bad{color:var(--bad); background:var(--bad-soft)}
.auth-msg.ok{color:var(--ok); background:var(--ok-soft)}
.auth-foot{font-size:12px; color:var(--faint); text-align:center; line-height:1.6}
.auth-foot code{color:var(--muted)}