/* ============================================================
   JustDoIt — card.css
   Superfícies de conteúdo: card padrão, card de estatística,
   card de atalho. Branco + hairline + sombra suave.
   ============================================================ */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; }
.card--pad { padding: var(--space-lg); }
.card__header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.card__title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--weight-medium); }
.card__subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.card__body { padding: var(--space-lg); }
.card__footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); }

/* Card de estatística (resumo do dashboard) */
.stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.stat__label { display: flex; align-items: center; gap: 7px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.stat__label svg { width: 16px; height: 16px; }
.stat__value { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--weight-medium); color: var(--color-text); line-height: 1.1; }
.stat__value small { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 400; }
.stat__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Barra de progresso */
.progress { display: flex; flex-direction: column; gap: 6px; }
.progress__head { display: flex; justify-content: space-between; align-items: baseline; }
.progress__label { font-size: var(--font-size-sm); color: var(--color-text-soft); }
.progress__value { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.progress__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); transition: width var(--duration-base) var(--ease-out); }
.progress__fill--success { background: var(--color-success); }

/* Card de atalho (quick links) */
.shortcut {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base);
}
.shortcut:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.shortcut__ic {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.shortcut__ic svg { width: 20px; height: 20px; }
.shortcut__title { font-weight: var(--weight-semibold); color: var(--color-text); }
.shortcut__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }