/* CSS específico da página de índice (Relatórios & Bugs) — complementa report-theme.css
   (vars :root, .topbar, .brand, .site, footer, badges já vêm de lá). */

header.hero{padding:46px 0 8px}
header.hero h1{font-weight:800;font-size:34px;letter-spacing:-.8px;margin:0 0 10px}
header.hero p{font-size:15px;color:var(--txt2);max-width:65ch;margin:0}
header.hero p a{color:var(--acc);font-weight:500}

/* TABS */
.tabs{display:flex;gap:8px;margin:30px 0 6px}
.tab{appearance:none;display:inline-flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--line);
  color:var(--txt2);font-family:var(--sans);font-weight:600;font-size:14px;padding:11px 18px;border-radius:11px;cursor:pointer;transition:.15s}
.tab .count{font-family:var(--mono);font-size:11px;background:var(--bg2);color:var(--txt2);padding:2px 8px;border-radius:20px;font-weight:500}
.tab.active{background:var(--acc-bg);border-color:var(--acc-bd);color:#fff}
.tab.active .count{background:rgba(124,140,255,.25);color:#fff}
.tab:hover:not(.active){color:var(--txt);border-color:var(--line2)}

/* MONTH BAR */
.monthbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:26px 0 16px}
.monthbar .lbl{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--txt2)}
.monthbar .lbl b{color:var(--txt);font-weight:600}
.months{display:flex;gap:7px;flex-wrap:wrap}
.mchip{font-family:var(--mono);font-size:12px;color:var(--txt2);background:var(--surf);border:1px solid var(--line);
  padding:7px 13px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
.mchip:hover{border-color:var(--line2);color:var(--txt)}
.mchip.active{background:var(--acc-bg);border-color:var(--acc-bd);color:#fff;font-weight:500}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:4px 0 16px}
.kpis.bugs{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--txt3);opacity:.5}
.kpi.pass::before{background:var(--pass)} .kpi.warn::before{background:var(--warn)} .kpi.fail::before{background:var(--fail)}
.kpi.acc::before{background:linear-gradient(var(--acc),var(--acc2))}
.kpi .n{font-family:var(--mono);font-weight:700;font-size:32px;line-height:1;letter-spacing:-1px}
.kpi.pass .n{color:var(--pass)} .kpi.warn .n{color:var(--warn)} .kpi.fail .n{color:var(--fail)} .kpi.acc .n{color:var(--acc)}
.kpi .l{font-size:12px;letter-spacing:.02em;color:var(--txt2);margin-top:9px;font-weight:500}
.kpi .d{font-family:var(--mono);font-size:10.5px;color:var(--txt3);margin-top:3px}

/* DISTRIBUTION */
.ratebar{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:8px}
.ratebar .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.ratebar .meta .t{font-size:12px;letter-spacing:.02em;color:var(--txt2);font-weight:500}
.ratebar .meta .v{font-family:var(--mono);font-size:12px;color:var(--txt3)}
.stack{display:flex;height:9px;width:100%;overflow:hidden;border-radius:6px;background:var(--bg2);gap:2px}
.stack i{display:block;height:100%;border-radius:3px;min-width:2px}
.stack .s-pass{background:var(--pass)} .stack .s-warn{background:var(--warn)} .stack .s-fail{background:var(--fail)}
.stack .s-crit{background:var(--fail)} .stack .s-major{background:var(--warn)} .stack .s-minor{background:var(--pass)}
.legend{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.legend span{font-size:11.5px;color:var(--txt2);display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;display:inline-block;border-radius:3px}

/* CONTROLS */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 16px}
/* Busca ocupa a 1ª linha inteira; os selects de filtro quebram p/ a 2ª linha. */
.search{flex:1 1 100%;position:relative;min-width:220px}
.search input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--line2);background:var(--surf);color:var(--txt);
  font-family:var(--mono);font-size:13px;border-radius:11px;transition:.15s}
.search input::placeholder{color:var(--txt3)}
.search input:focus{outline:none;border-color:var(--acc-bd);box-shadow:0 0 0 3px var(--acc-bg)}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:15px}
select{height:44px;padding:0 34px 0 14px;border:1px solid var(--line2);background:var(--surf);color:var(--txt);
  font-family:var(--mono);font-size:12.5px;border-radius:11px;cursor:pointer;transition:.15s;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA7BD' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
select:focus{outline:none;border-color:var(--acc-bd);box-shadow:0 0 0 3px var(--acc-bg)}
select option{background:var(--surf2);color:var(--txt)}
.btn-clear{height:44px;padding:0 16px;border:1px solid var(--line2);background:transparent;color:var(--txt2);
  font-family:var(--sans);font-weight:500;font-size:13px;border-radius:11px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.btn-clear:hover{border-color:var(--fail-bd);color:var(--fail)}
.resultcount{font-family:var(--mono);font-size:12px;color:var(--txt3);margin:0 0 14px}

/* CARDS LIST */
.list{display:flex;flex-direction:column;gap:10px}
.card{display:grid;align-items:center;gap:14px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;transition:.15s;border-left:3px solid transparent}
.card:hover{border-color:var(--line2);background:var(--surf2)}
/* runs: 8 itens = 8 colunas (data · mod · tipo · login · device · [spacer 1fr] · status · ações).
   O device virou chip (antes era a descrição redundante); .rspacer é o espaçador flexível
   que empurra status/ações pra direita. "Ver relatório" + 🗑 vivem juntos em .actions. */
.card.runs{grid-template-columns:155px auto auto auto auto 1fr auto auto}
.card.bugs{grid-template-columns:130px auto 1fr auto auto}
.card.crit{border-left-color:var(--fail)}
.rspacer{min-width:0} /* célula 1fr vazia — só empurra as ações p/ a direita */
.chip-device.empty{color:var(--txt3);opacity:.65}
/* Ações agrupadas: "Ver/Ver bug" + excluir na mesma linha (desktop e mobile). */
.actions{display:flex;align-items:center;gap:8px;justify-self:end}
.c-date{font-family:var(--mono);font-size:12.5px;color:var(--txt);font-weight:500}
.c-desc{min-width:0;font-size:13.5px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-desc.empty{color:var(--txt3);font-style:italic}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:500;
  padding:5px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);color:var(--txt2);white-space:nowrap}
.chip-type.exp{border-color:var(--acc-bd);background:var(--acc-bg);color:#cbd2ff}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.03em;padding:6px 11px;border-radius:8px;border:1px solid;white-space:nowrap}
.st-passed{background:var(--pass-bg);color:var(--pass);border-color:var(--pass-bd)}
.st-warning{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.st-failed{background:var(--fail-bg);color:var(--fail);border-color:var(--fail-bd)}
.sev{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.03em;min-width:92px}
.sev .dot{width:9px;height:9px;border-radius:50%;flex:none}
.sev.critical{color:var(--fail)} .sev.critical .dot{background:var(--fail);box-shadow:0 0 0 4px var(--fail-bg)}
.sev.major{color:var(--warn)} .sev.major .dot{background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.sev.minor{color:var(--pass)} .sev.minor .dot{background:var(--pass);box-shadow:0 0 0 4px var(--pass-bg)}
/* Botão "ver" — só o ícone de olho (economiza largura na linha; segue a cor do botão). */
.btn-open{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;
  border-radius:10px;cursor:pointer;transition:.15s;box-shadow:0 2px 12px rgba(124,140,255,.25)}
.btn-open:hover{filter:brightness(1.08);box-shadow:0 4px 18px rgba(124,140,255,.4);transform:translateY(-1px)}
.btn-open .ar{font-size:15px;transition:.15s}
.btn-open:hover .ar{transform:translateX(2px)}
/* Botão excluir (nosso — não existe no Pages) */
.btn-del{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  border:1px solid var(--line2);background:transparent;color:var(--txt3);border-radius:10px;cursor:pointer;transition:.15s;justify-self:end}
.btn-del:hover{border-color:var(--fail-bd);color:var(--fail);background:var(--fail-bg)}
.empty-state{padding:54px 16px;text-align:center;color:var(--txt3);font-family:var(--mono);font-size:13px;
  background:var(--surf);border:1px dashed var(--line2);border-radius:var(--r)}

/* PAGINATION */
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:22px 0 0}
.pager .pinfo{font-family:var(--mono);font-size:12px;color:var(--txt3)}
.pgroup{display:flex;align-items:center;gap:6px}
.pbtn{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line2);background:var(--surf);color:var(--txt2);
  font-family:var(--mono);font-size:12.5px;border-radius:9px;cursor:pointer;transition:.15s}
.pbtn:hover:not(:disabled){border-color:var(--acc-bd);color:var(--txt)}
.pbtn.active{background:var(--acc-bg);color:#fff;border-color:var(--acc-bd)}
.pbtn:disabled{opacity:.35;cursor:not-allowed}
.pellipsis{font-family:var(--mono);color:var(--txt3);padding:0 4px}
.psize{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--txt3)}
.psize select{height:38px}

@media(max-width:920px){
  .kpis,.kpis.bugs{grid-template-columns:repeat(2,1fr)}
  .card.runs,.card.bugs{grid-template-columns:1fr;gap:11px}
  .rspacer{display:none} /* sem espaçador no stack mobile */
  .actions{justify-self:stretch;justify-content:flex-end} /* ícones (ver/excluir) à direita */
  header.hero h1{font-size:27px}
  .c-desc{white-space:normal}
}

/* Chip de ambiente: só aparece quando o run NÃO é de produção. */
.chip.chip-amb { color: var(--warn); border-color: var(--warn); font-weight: 700; }