/*
 * Tema v2 (tki) - cartoes (.card do Bootstrap/template).
 * Card do tki: fundo da superficie, borda de 1px, cantos de 16px, sem sombra;
 * cabecalho sem faixa colorida, titulo 16px/600 e subtitulo cinza.
 */

html.tki-layout .card {
  --bs-card-bg: var(--tki-card);
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: var(--tki-border);
  --bs-card-border-radius: var(--tki-radius-card);
  --bs-card-inner-border-radius: calc(var(--tki-radius-card) - 1px);
  --bs-card-color: var(--tki-fg);
  --bs-card-title-color: var(--tki-fg);
  --bs-card-subtitle-color: var(--tki-muted);
  --bs-card-box-shadow: none;
  --bs-card-spacer-x: 24px;
  --bs-card-spacer-y: 24px;
  --bs-card-cap-padding-x: 24px;
  --bs-card-cap-padding-y: 20px;
  background-color: var(--tki-card);
  color: var(--tki-fg);
  border: 1px solid var(--tki-border) !important;
  border-radius: var(--tki-radius-card) !important;
  box-shadow: none !important;
}

/* Cartao com cor de fundo explicita (bg-primary, bg-success...) mantem a cor. */
html.tki-layout .card:is(.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-dark, .text-bg-primary, .text-bg-success, .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-dark) {
  border-color: transparent !important;
}

html.tki-layout .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--tki-border) !important;
  padding: 20px 24px !important;
  color: var(--tki-fg);
}

html.tki-layout .card .card-header:first-child {
  border-radius: calc(var(--tki-radius-card) - 1px) calc(var(--tki-radius-card) - 1px) 0 0;
}

html.tki-layout .card .card-header .card-title,
html.tki-layout .card .card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--tki-fg) !important;
}

html.tki-layout .card .card-subtitle,
html.tki-layout .card .card-header p {
  color: var(--tki-muted);
  font-size: 14px;
}

html.tki-layout .card .card-body {
  padding: 24px;
  color: inherit;
}

html.tki-layout .card .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--tki-border) !important;
  padding: 16px 24px !important;
  color: var(--tki-muted);
}

html.tki-layout .card .card-footer:last-child {
  border-radius: 0 0 calc(var(--tki-radius-card) - 1px) calc(var(--tki-radius-card) - 1px);
}

/* Cartao dentro de cartao: superficie suave (o tki usa zinc-50) */
html.tki-layout .card .card:not([class*='bg-']) {
  background-color: var(--tki-surface-2);
  --bs-card-bg: var(--tki-surface-2);
}

@media (max-width: 767.98px) {
  html.tki-layout .card .card-header { padding: 16px 18px !important; }
  html.tki-layout .card .card-body { padding: 18px; }
  html.tki-layout .card .card-footer { padding: 14px 18px !important; }
}

/* Placeholders de carregamento (placeholder-glow) no cinza do tki */
html.tki-layout .placeholder {
  background-color: var(--tki-border);
  opacity: 1;
  border-radius: 6px;
}
html.tki-layout .placeholder-glow .placeholder { animation-duration: 1.6s; }

/* Estado vazio no padrao EmptyState do tki */
html.tki-layout .tki-empty-state,
html.tki-layout .empty-state {
  color: var(--tki-muted);
}