/*
  Base Card (InvestIA)

  Objetivo: nenhum card pode mudar de tamanho ("pular") ao mudar paginação,
  conteúdo, hover/focus ou estado de loading.

  Regras:
  - box-sizing: border-box (card e filhos)
  - borda sempre 1px (nunca muda)
  - hover: apenas box-shadow
  - foco: outline + outline-offset (sem afetar layout)
  - altura fixa via token (min-height + height)
  - layout interno com 3 linhas fixas: header/body/footer (1 linha cada)
  - line-height explícito em todo texto
  - header/footer single-line com ellipsis
  - números: tabular-nums
  - loading/skeleton com exatamente a mesma altura do card final
*/

:root {
  /* Tokens globais (ajuste aqui e a aplicação inteira segue) */
  --app-card-border-width: 1px;
  /* Um pouco mais presente para não "sumir" no fundo */
  --app-card-border-color: var(--bs-border-color, rgba(0, 0, 0, 0.10));
  /* Mais próximo do visual do tema (print): cantos menos arredondados */
  --app-card-radius: 0.5rem;
  /* Usar token de card do tema quando existir (evita transparência) */
  --app-card-bg: var(--bs-card-bg, var(--bs-body-bg, #fff));
  --app-card-divider-color: rgba(0, 0, 0, 0.06);

  --app-card-padding-x: 1rem;
  --app-card-padding-y: 0.75rem;
  --app-card-gap: 0.5rem;

  /* Altura fixa do card (padrão). Pode ser sobrescrita por variação/inline. */
  --app-card-height: 148px;

  /* Linhas fixas (1 linha cada) */
  --app-card-header-height: 32px;
  /* Corpo ocupa o restante (1fr) dentro da altura fixa do card */
  --app-card-body-height: 44px; /* legado/compat: não é obrigatório usar este token */
  --app-card-footer-height: 28px;

  /* Tipografia */
  --app-card-font-size: 0.95rem;
  --app-card-line-height: 1.25;
  --app-card-title-font-size: 0.95rem;
  --app-card-title-line-height: 1.2;
  --app-card-meta-font-size: 0.8125rem;
  --app-card-meta-line-height: 1.2;

  /* Interação */
  /* Sombra base sutil para dar "superfície" ao card */
  --app-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --app-card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.12);
  --app-card-focus-outline-width: 2px;
  --app-card-focus-outline-color: rgba(105, 108, 255, 0.75);
  --app-card-focus-outline-offset: 2px;

  /* Skeleton */
  --app-card-skeleton-bg: rgba(0, 0, 0, 0.06);
  --app-card-skeleton-shine: rgba(255, 255, 255, 0.35);
}

/* No tema light, força “card sólido” como no print */
.light-style {
  --app-card-bg: #ffffff;
  --app-card-border-color: rgba(0, 0, 0, 0.10);
  --app-card-divider-color: rgba(0, 0, 0, 0.06);
  --app-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  --app-card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Base do componente */
.app-card,
.app-card * {
  box-sizing: border-box;
}

.app-card {
  position: relative;
  background: var(--app-card-bg);
  opacity: 1;
  border: var(--app-card-border-width) solid var(--app-card-border-color);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow);

  /* Altura FIXA para eliminar variação */
  min-height: var(--app-card-height);
  height: var(--app-card-height);

  padding: var(--app-card-padding-y) var(--app-card-padding-x);
  display: grid;
  grid-template-rows: var(--app-card-header-height) 1fr var(--app-card-footer-height);
  gap: var(--app-card-gap);
  overflow: hidden; /* conteúdo extra não pode expandir o card */

  /* Tipografia base com line-height explícito (herdável) */
  font-size: var(--app-card-font-size);
  line-height: var(--app-card-line-height);
}

/* Hover: só sombra (nunca mexer em borda) */
.app-card:hover {
  box-shadow: var(--app-card-shadow-hover);
}

/* Foco: outline + offset (não altera layout) */
.app-card:focus-within {
  outline: var(--app-card-focus-outline-width) solid var(--app-card-focus-outline-color);
  outline-offset: var(--app-card-focus-outline-offset);
}

/* Header / Body / Footer fixos */
.app-card__header,
.app-card__body,
.app-card__footer {
  min-width: 0; /* necessário para ellipsis funcionar em flex/grid */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-card__header {
  height: var(--app-card-header-height);
  min-height: var(--app-card-header-height);
  position: relative;
}

.app-card__body {
  /* Importante: o body deve ocupar o 1fr do grid (altura restante do card).
     Se fixarmos height aqui, o conteúdo "some" e as telas parecem quebradas. */
  min-height: 0;
  height: auto;
  align-items: stretch;
}

.app-card__footer {
  height: var(--app-card-footer-height);
  min-height: var(--app-card-footer-height);
  position: relative;
}

/* Divisórias internas (sem afetar layout): apenas para painéis */
.app-card--panel .app-card__header::after,
.app-card--panel-sm .app-card__header::after,
.app-card--panel-lg .app-card__header::after {
  content: "";
  position: absolute;
  left: calc(var(--app-card-padding-x) * -1);
  right: calc(var(--app-card-padding-x) * -1);
  bottom: calc(var(--app-card-gap) * -1);
  height: 1px;
  background: var(--app-card-divider-color);
  pointer-events: none;
}

.app-card--panel .app-card__footer::before,
.app-card--panel-sm .app-card__footer::before,
.app-card--panel-lg .app-card__footer::before {
  content: "";
  position: absolute;
  left: calc(var(--app-card-padding-x) * -1);
  right: calc(var(--app-card-padding-x) * -1);
  top: calc(var(--app-card-gap) * -1);
  height: 1px;
  background: var(--app-card-divider-color);
  pointer-events: none;
}

/* Tipografia explícita (evita variação por default do tema) */
.app-card__header,
.app-card__body,
.app-card__footer,
.app-card__text {
  font-size: var(--app-card-font-size);
  line-height: var(--app-card-line-height);
}

.app-card__title {
  min-width: 0;
  font-size: var(--app-card-title-font-size);
  line-height: var(--app-card-title-line-height);
  font-weight: 600;
  margin: 0;
}

.app-card__meta,
.app-card__footer-text {
  font-size: var(--app-card-meta-font-size);
  line-height: var(--app-card-meta-line-height);
  color: var(--bs-secondary-color, #6c757d);
}

/* Header e Footer: 1 linha + ellipsis */
.app-card__title,
.app-card__meta,
.app-card__footer-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Elementos alinhados à direita (header/footer) */
.app-card__spacer {
  flex: 1 1 auto;
}

.app-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: 0;
}

/* Conteúdo principal: por padrão 1 linha + ellipsis */
.app-card__body-main {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Conteúdo longo: manter altura fixa e rolar dentro do corpo */
.app-card__body-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/*
  Variações de altura (tokens)
  - use essas classes para migrar cards existentes sem mexer em valores soltos
*/
.app-card--kpi {
  --app-card-height: 124px;
  --app-card-header-height: 30px;
  --app-card-footer-height: 26px;
}

.app-card--panel {
  --app-card-height: 520px;
  --app-card-header-height: 44px;
  --app-card-footer-height: 34px;
}

.app-card--panel-sm {
  --app-card-height: 240px;
  --app-card-header-height: 44px;
  --app-card-footer-height: 34px;
}

.app-card--panel-lg {
  --app-card-height: 640px;
  --app-card-header-height: 44px;
  --app-card-footer-height: 34px;
}

/* Números: tabular-nums para evitar "dança" visual */
.app-card__value,
.app-card [data-card-value="true"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Estado loading: skeleton SEM mudar altura */
.app-card.is-loading {
  /* nada que altere border/height aqui */
}

.app-card.is-loading .app-card__header,
.app-card.is-loading .app-card__body,
.app-card.is-loading .app-card__footer {
  opacity: 0;
}

.app-card.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--app-card-skeleton-shine) 45%,
      transparent 55%
    );
  transform: translateX(-100%);
  animation: app-card-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}

.app-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(var(--app-card-skeleton-bg), var(--app-card-skeleton-bg)) calc(var(--app-card-padding-x)) calc(var(--app-card-padding-y) + 6px) / 55% 14px no-repeat,
    linear-gradient(var(--app-card-skeleton-bg), var(--app-card-skeleton-bg)) calc(var(--app-card-padding-x)) calc(var(--app-card-padding-y) + var(--app-card-header-height) + var(--app-card-gap) + 12px) / 75% 16px no-repeat,
    linear-gradient(var(--app-card-skeleton-bg), var(--app-card-skeleton-bg)) calc(var(--app-card-padding-x)) calc(var(--app-card-padding-y) + var(--app-card-header-height) + var(--app-card-gap) + var(--app-card-body-height) + var(--app-card-gap) + 8px) / 45% 12px no-repeat;
  pointer-events: none;
}

@keyframes app-card-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Padronização do filtro temporal (mês/ano) em todas as telas */
.month-select,
.year-select,
#monthSelect,
#yearSelect {
  font-weight: 400 !important;
}