/* Painel "Meus relatórios", carregado inerte: só o shell com flag
   server-side ligada cria seu DOM (ver reports-panel.js). Mesma paleta de
   variáveis do dashboard-layout-editor.css, para os dois conviverem sem
   destoar visualmente. */
.reports-panel {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--border, #263044);
  border-radius: 10px;
  background: var(--card, #151b29);
}
.reports-panel__header { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.reports-panel__title { margin:0; font-size:16px; }
.reports-panel__message { margin:12px 0; padding:8px 10px; border-radius:6px; background:var(--bg, #0f1420); color:var(--muted); font-size:13px; }
.reports-panel__list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.reports-panel__loading,
.reports-panel__empty { margin:0; color:var(--muted); font-size:13px; }

.reports-panel__row {
  display:flex; flex-direction:column; gap:8px;
  padding:10px; border:1px solid var(--border, #263044); border-radius:8px; background:var(--bg, #0f1420);
}
.reports-panel__row--ativo { outline:2px solid var(--accent, #6ea8fe); outline-offset:2px; }
.reports-panel__row-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reports-panel__open {
  background:none; border:none; padding:0; color:inherit; font-size:14px; font-weight:600;
  cursor:pointer; text-align:left;
}
.reports-panel__open:hover,
.reports-panel__open:focus-visible { text-decoration:underline; }
.reports-panel__badge {
  font-size:11px; padding:2px 8px; border-radius:999px;
  background:var(--accent, #6ea8fe); color:#0f1420; font-weight:600;
}
.reports-panel__meta { color:var(--muted); font-size:12px; }
.reports-panel__row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.reports-panel__row-actions button {
  font-size:12px; padding:4px 8px; border-radius:6px; border:1px solid var(--border, #263044);
  background:transparent; color:inherit; cursor:pointer;
}
.reports-panel__row-actions button:disabled { opacity:0.5; cursor:not-allowed; }

.reports-panel__rename-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* [Achado N-3] author style vence o UA stylesheet do [hidden] — sem esta
   regra o formulário de renomear fica SEMPRE visível embaixo de toda linha
   de relatório, mesmo com form.hidden === true em JS. */
.reports-panel__rename-form[hidden] { display:none; }
.reports-panel__rename-input { flex:1 1 auto; min-width:120px; }

.reports-panel__new,
.reports-panel__novo-opcao,
.reports-panel__novo-cancelar {
  font-size:13px; padding:6px 12px; border-radius:6px; border:1px solid var(--border, #263044);
  background:var(--bg, #0f1420); color:inherit; cursor:pointer;
}

.reports-panel__novo {
  margin-top:12px; padding:14px; border:1px solid var(--border, #263044); border-radius:8px; background:var(--bg, #0f1420);
}
.reports-panel__novo-label { display:flex; flex-direction:column; gap:4px; margin:10px 0; font-size:12px; color:var(--muted); }
.reports-panel__novo-titulo { font-size:14px; padding:6px 8px; }
.reports-panel__novo-opcoes { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }

@media (max-width: 767px) {
  .reports-panel__row-main,
  .reports-panel__row-actions { flex-direction:column; align-items:flex-start; }
}