/* Panel: container padrão de cards (header, body, variante "featured" com glow interno).
   Espelha components/core/Card.jsx da Ally Design System (variante "default"). */

.panel {
  /* --card-fill: gradiente diagonal (azul mais visível no escuro, azul
     clarinho sutil no claro - ver comentário em base/tokens.css).
     Borda em degrade (--card-border-gradient: azul no escuro, branco no
     claro - pedido do usuário 2026-08-09) via a técnica de "gradient
     border": 2 backgrounds empilhados, o fill em padding-box (por cima,
     cobre o miolo) e o gradiente em border-box (só aparece na faixa de
     1px da borda, já que border-color é transparent) - mesma técnica já
     usada na sidebar (ver .side em layout/sidebar.css). */
  background: var(--card-fill) padding-box, var(--card-border-gradient);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* espaçamento migrado pra escala nomeada --space-* (Fase 5 do plano
     Apple-style, 2026-08-07 - tokens já existiam em tokens.css, "grid de
     4px", mas nada no CSS os usava ainda; começando pelos componentes
     mais usados: painel, modal, botão). */
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel-title svg { width: 15px; height: 15px; color: var(--text-faint); }
.panel-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
.panel-action {
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.panel-action:hover { color: var(--accent); }
/* 18px -> 20px (space-5): não é só renomear, 18 não batia com o grid de
   4px que a própria escala --space-* documenta - arredondado pra cima,
   ficando igual à horizontal do panel-head (padding uniforme). */
.panel-body { padding: var(--space-5); }

/* variante destacada com glow interno — usa os tokens --glow-blue/--glow-teal
   (mesma cor da marca) em vez de rgba soltos, e os tons de --ink-* pro fundo.
   Fundo escuro fixo so faz sentido no tema escuro (era o unico tema quando
   isso foi escrito) - no tema claro, virar navy fixo destoa de todo o resto
   do dashboard (branco). Ver [data-theme="light"] override logo abaixo. */
.panel.featured {
  position: relative;
  overflow: hidden;
  /* fundo próprio (não é o --card-fill padrão) - por isso também precisa
     de border-color própria: .panel base deixou border:1px solid
     transparent pensando na borda em degrade (background de 2 camadas),
     mas aqui o background é substituído por inteiro (shorthand não
     "soma" camadas), então a camada da borda-degrade some junto - sem
     isso o card ficaria sem nenhuma borda visível. */
  background: linear-gradient(135deg, var(--ink-800) 0%, var(--ink-700) 100%);
  border-color: var(--border);
}
[data-theme="light"] .panel.featured {
  background: linear-gradient(135deg, var(--white) 0%, var(--ink-50) 100%);
  border-color: var(--border);
}
.panel.featured > * { position: relative; z-index: 1; }