/* MeuDev - Fase 0. Tokens da casa: claro = AUSENCIA de data-theme. */
:root{
  --bg:#f1f5f9; --panel:#ffffff; --panel-2:#f8fafc; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --label-text:#475569;
  --primary:#2563eb; --primary-dark:#1d4ed8; --on-primary:#ffffff;
  /* O JS publica --link-claro/--link-escuro a partir da cor da marca; estes
     valores são só o piso de quando o white-label ainda não chegou. */
  --link-claro:#1d4ed8; --link-escuro:#93c5fd; --link:var(--link-claro);
  --surface-ok:#dcfce7; --on-ok:#166534;
  --surface-warn:#fef3c7; --on-warn:#92400e;
  --surface-danger:#fee2e2; --on-danger:#991b1b;
  --surface-info:#dbeafe; --on-info:#1e40af;
  --input-bg:#ffffff; --input-text:#0f172a;
  --sidebar-bg:#0f172a; --sidebar-on:#e2e8f0; --sidebar-on-muted:#94a3b8;
  --term-bg:#0b1220; --term-fg:#e2e8f0;
  --sombra:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
}
:root[data-theme="dark"]{
  --bg:#0b1220; --panel:#111a2e; --panel-2:#0f1728; --border:#1e293b;
  --text:#e2e8f0; --muted:#94a3b8; --label-text:#93a4bd;
  --surface-ok:rgba(22,163,74,.20); --on-ok:#86efac;
  --surface-warn:rgba(217,119,6,.20); --on-warn:#fcd34d;
  --surface-danger:rgba(220,38,38,.20); --on-danger:#fca5a5;
  --surface-info:rgba(37,99,235,.20); --on-info:#93c5fd;
  --input-bg:#0f1728; --input-text:#e2e8f0; --link:var(--link-escuro);
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="dark"],:root[data-theme="misto"]{
  --sidebar-bg:#0b1220; --sidebar-on:#e2e8f0; --sidebar-on-muted:#94a3b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.oculto{display:none !important}

/* ---- controles: nada com aparencia default do browser ---- */
input,button,textarea{font:inherit}
input[type=text],input[type=password],input[type=email]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px;
  background:var(--input-bg); color:var(--input-text); outline:none;
}
input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 16px; border-radius:9px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); cursor:pointer; font-weight:600;
}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-dark); border-color:var(--primary-dark)}
.btn.danger{background:var(--surface-danger); border-color:transparent; color:var(--on-danger)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:0 0 auto}

/* ---- login ---- */
.login{min-height:100%; display:grid; place-items:center; padding:24px 16px}
.login-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:28px; box-shadow:var(--sombra);
}
.marca{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.marca svg{width:26px;height:26px;color:var(--primary)}
.marca b{font-size:20px; letter-spacing:-.3px}
.login-sub{color:var(--label-text); font-size:13px; margin:0 0 20px}
.campo{margin-bottom:14px}
.flabel{display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--label-text); margin-bottom:6px}
.login .btn{width:100%; margin-top:6px}

/* ---- app ---- */
.app{display:grid; grid-template-columns:280px 1fr; height:100%}
.lateral{
  background:var(--sidebar-bg); color:var(--sidebar-on); padding:18px 16px;
  display:flex; flex-direction:column; gap:18px; overflow-y:auto;
}
.lateral .marca b{color:var(--sidebar-on)}
.lateral .marca svg{color:#60a5fa}
.quem{font-size:12px; color:var(--sidebar-on-muted); min-width:0; overflow-wrap:anywhere}
.tit{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sidebar-on-muted); margin:0 0 8px}
/* 🪤 Estes cartões nasceram na sidebar ESCURA e na Fase 1 passaram para o
   painel de conteúdo, que é branco no tema claro. Cor de texto chumbada em
   `--sidebar-on` dava 1,14:1 ali — o defeito só aparece quando a peça muda de
   lugar, e print nenhum denuncia. Tokens do painel, não da sidebar. */
.projetos{display:flex; flex-wrap:wrap; gap:8px}
.proj{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  flex:1 1 220px; min-width:0; text-align:left; padding:10px 12px; border-radius:9px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
}
.proj:hover{border-color:var(--primary)}
.proj[aria-pressed="true"]{background:var(--surface-info); border-color:var(--primary); color:var(--on-info)}
.proj .n{font-weight:600; font-size:14px; min-width:0; overflow-wrap:anywhere}
.proj .m{font-size:11px; color:var(--label-text)}
.proj[aria-pressed="true"] .m{color:var(--on-info)}
.rodape{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.rodape .btn{background:rgba(148,163,184,.10); border-color:rgba(148,163,184,.22); color:var(--sidebar-on)}
.rodape .btn:hover{border-color:#60a5fa}

.conteudo{display:flex; flex-direction:column; min-width:0; background:var(--bg)}
.sechead{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--border); background:var(--panel);
}
.sechead h1{font-size:21px; margin:0; letter-spacing:-.3px; min-width:0; overflow-wrap:anywhere}
.sechead .sub{font-size:12px; color:var(--label-text)}
.sechead .acoes{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; background:var(--surface-info); color:var(--on-info)}
.badge.ok{background:var(--surface-ok); color:var(--on-ok)}
.badge.warn{background:var(--surface-warn); color:var(--on-warn)}

.palco{flex:1; min-height:0; padding:16px 20px 20px; display:flex; flex-direction:column}
.term-caixa{
  flex:1; min-height:0; border-radius:12px; border:1px solid var(--border);
  background:var(--term-bg); padding:10px; overflow:hidden;
}
#term{width:100%; height:100%}
.vazio{
  flex:1; display:grid; place-items:center; text-align:center; color:var(--label-text);
  border:1px dashed var(--border); border-radius:12px; padding:24px;
}
.vazio-in{max-width:420px; display:flex; flex-direction:column; gap:10px; align-items:center}
.vazio svg{width:34px;height:34px;color:var(--muted)}

/* ---- toast e dialogo (nativos sao proibidos) ---- */
.toasts{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:60}
.toast{padding:10px 14px; border-radius:10px; box-shadow:var(--sombra); font-size:14px;
  background:var(--surface-info); color:var(--on-info); max-width:min(92vw,380px)}
.toast.ok{background:var(--surface-ok); color:var(--on-ok)}
.toast.erro{background:var(--surface-danger); color:var(--on-danger)}
.fundo{position:fixed; inset:0; background:rgba(2,6,23,.55); display:grid; place-items:center;
  padding:16px; z-index:70}
.dialogo{background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:20px; width:100%; max-width:420px; box-shadow:var(--sombra)}
.dialogo h2{margin:0 0 8px; font-size:17px}
.dialogo p{margin:0 0 18px; color:var(--label-text); font-size:14px}
.dialogo .linha{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}

@media (max-width:900px){
  .app{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .lateral{flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 16px}
  .lateral .bloco-projetos{flex:1 1 100%}
  .projetos{flex-direction:row; flex-wrap:wrap}
  .proj{width:auto; flex:1 1 180px}
  .rodape{margin-top:0; flex-direction:row; flex:1 1 100%}
  .rodape .btn{flex:1}
  .palco{padding:12px}
  .sechead{padding:12px 16px}
}

/* ===== Fase 1 ============================================================= */
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--sidebar-on); font-weight:500; font-size:14px;
}
.nav button:hover{background:rgba(148,163,184,.12)}
.nav button[aria-current="page"]{background:rgba(37,99,235,.28); border-color:#60a5fa; font-weight:600}
.nav svg{width:16px;height:16px;flex:0 0 auto}

.painel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--sombra)}
.painel + .painel{margin-top:14px}
.painel h2{margin:0 0 4px; font-size:16px}
.painel .ajuda{margin:0 0 14px; font-size:12px; color:var(--label-text)}

.table-wrap{overflow-x:auto; max-width:100%}
table.lista{width:100%; border-collapse:collapse; font-size:13px}
table.lista thead tr{background:var(--panel-2)}
table.lista th{
  text-align:center; font-size:12px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--label-text); padding:9px 10px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.lista td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle}
table.lista td.num,table.lista td.data{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.lista td.acoes{text-align:right; white-space:nowrap}
table.lista tr:last-child td{border-bottom:0}
table.lista td.livre{overflow-wrap:anywhere}
.btn.mini{padding:5px 10px; font-size:12px; border-radius:7px}
.btn.mini svg{width:13px;height:13px}
.vazio-linha{padding:18px; text-align:center; color:var(--label-text); font-size:13px}

.filterbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px}
.fgroup{display:flex; flex-direction:column; gap:5px; min-width:0}
.fgroup input,.fgroup .escolha{min-width:180px}
.escolha{display:flex; gap:6px; flex-wrap:wrap}
/* Campo de escolha sem <select>: a lista do SO não aceita CSS nenhum. */
.escolha button{
  padding:8px 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--input-bg); color:var(--input-text); cursor:pointer; font-size:13px;
}
.escolha button[aria-pressed="true"]{border-color:var(--primary); background:var(--surface-info); color:var(--on-info); font-weight:600}

.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.form-grid .campo{margin:0; min-width:0}
.dialogo.largo{max-width:620px}
.dialogo .corpo{max-height:min(62vh,520px); overflow-y:auto; margin-bottom:16px}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-info); color:var(--on-info); font-weight:600}
.chip.ro{background:var(--surface-warn); color:var(--on-warn)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; align-items:start}
.kpi{background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
     min-height:74px; display:flex; flex-direction:column; justify-content:space-between}
.kpi .r{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--label-text)}
.kpi .v{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:6px}

.aviso{display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:10px;
       background:var(--surface-warn); color:var(--on-warn); font-size:13px; margin-bottom:14px}
.aviso svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
/* Cor de PREENCHIMENTO e cor de TEXTO são tokens diferentes: --primary no
   escuro dá 3,35:1 num texto pequeno. */
.link{background:none;border:0;padding:0;color:var(--link);cursor:pointer;font:inherit;text-decoration:underline}

@media (max-width:900px){
  .lateral .nav{flex-direction:row; flex-wrap:wrap; flex:1 1 100%}
  .lateral .nav button{width:auto; flex:1 1 130px; justify-content:center}
}

#view-terminal{flex:1; min-height:0; display:flex; flex-direction:column; gap:14px}
#view-admin{flex:1; min-height:0; overflow-y:auto}
#escolher-projeto{flex:0 0 auto}

/* Lista longa filtrável dentro do diálogo (repositórios do GitHub). */
.lista-busca{
  display:flex; flex-direction:column; gap:6px; margin-top:8px;
  max-height:260px; overflow-y:auto; padding-right:4px;
}
.lista-busca button{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  text-align:left; width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.lista-busca button:disabled{opacity:.5; cursor:not-allowed}