/**
 * WellDesk — Design system do painel administrativo.
 *
 * Centraliza o que hoje está espalhado e duplicado em <style> inline em
 * dezenas de páginas do admin (ver resources/views/admin/**): tamanho de
 * título copiado e colado, cores de card sem convenção, botões sem
 * hierarquia clara. Qualquer página nova do admin deve usar estas classes
 * em vez de reintroduzir style="..." inline.
 */

:root {
    /* Espaçamento — escala de 4px, para não depender de valores soltos */
    --wd-space-xs: 0.25rem;
    --wd-space-sm: 0.5rem;
    --wd-space-md: 1rem;
    --wd-space-lg: 1.5rem;
    --wd-space-xl: 2.5rem;

    /* Tipografia */
    --wd-title-size: 2.2rem;
    --wd-title-size-sm: 1.5rem;

    /*
     * Cores semânticas de card. Convenção fixa em todo o admin:
     *   neutral = informação/listagem geral
     *   success = criação, conteúdo publicado, indicador positivo
     *   warning = edição, atenção, indicador que precisa de revisão
     *   danger  = ação destrutiva ou indicador crítico
     *   info    = dados/estatísticas neutras (contagens, métricas)
     * Nunca usar a cor "porque sobrou" — se a seção não se encaixa em
     * nenhuma categoria acima, use neutral.
     */
    --wd-card-neutral-bg: #343a40;
    --wd-card-success-bg: #198754;
    --wd-card-warning-bg: #ffc107;
    --wd-card-warning-fg: #212529;
    --wd-card-danger-bg: #dc3545;
    --wd-card-info-bg: #0d6efd;
}

/* ---------- Título de página (substitui style="font-size:2.2rem") ---------- */

.wd-page-title {
    margin-bottom: 0;
    font-weight: 700;
    font-size: var(--wd-title-size);
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
}

.wd-page-title--sm {
    font-size: var(--wd-title-size-sm);
}

/* ---------- Cabeçalhos de card semânticos ---------- */

.wd-card-header {
    color: #fff;
    padding: var(--wd-space-md) var(--wd-space-lg);
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
}

.wd-card-header--neutral { background: var(--wd-card-neutral-bg); }
.wd-card-header--success { background: var(--wd-card-success-bg); }
.wd-card-header--warning { background: var(--wd-card-warning-bg); color: var(--wd-card-warning-fg); }
.wd-card-header--danger  { background: var(--wd-card-danger-bg); }
.wd-card-header--info    { background: var(--wd-card-info-bg); }

/* ---------- Hierarquia de botões ----------
 * Regra: uma única ação primária por tela (.wd-btn-primary, sólida e
 * maior); ações secundárias sempre outline; ações destrutivas sempre
 * outline vermelho (nunca sólidas, para não competir com a ação
 * principal da tela). Usa as classes utilitárias do Bootstrap por baixo,
 * só fixa o padrão de tamanho/peso para não variar de página em página.
 */

.wd-btn-primary {
    font-weight: 600;
    padding: 0.65rem 1.75rem;
}

.wd-btn-secondary {
    font-weight: 500;
}

.wd-btn-danger {
    font-weight: 500;
}

/* ---------- KPI (número grande de destaque, usado no dashboard) ---------- */

.wd-kpi {
    text-align: center;
    padding: var(--wd-space-lg) var(--wd-space-md);
}

.wd-kpi__value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.wd-kpi__label {
    color: #6c757d;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--wd-space-xs);
}