/**
 * Design System — Igreja Gestão
 * Tokens canônicos do ADMINIMC. Carregado ANTES de cards-modern.css, que os consome.
 *
 * Duas camadas de azul: navy institucional (títulos, marca) e índigo de acento
 * (links, ícones, estados ativos), com o azul do Bootstrap reservado só para
 * botão primário sólido.
 *
 * A marca continua configurável: --primary-color / --secondary-color vêm de
 * SiteConfig e sobrescrevem o papel de marca. Os valores aqui são o default.
 */

:root {
    /* --- Marca --- */
    --ds-navy:        #012970;  /* logotipo, H1/H2, título de card, header de modal */
    --ds-indigo:      #4154f1;  /* eyebrow, link, ícone de KPI, menu ativo */
    --ds-action:      #0d6efd;  /* botão primário sólido */
    --ds-action-dark: #0b5ed7;
    --ds-tint:        #eef1ff;  /* chip de ícone, pill ativa, hover de menu */

    /* --- Neutros --- */
    --ds-bg-tema:     #f6f9ff;
    --ds-bg:          #f5f7fb;
    --ds-superficie:  #ffffff;
    --ds-borda:       #e5e9f1;
    --ds-texto:       #444444;
    --ds-texto-2:     #667085;
    --ds-texto-3:     #899bbd;
    --ds-texto-corpo: #5b6478;

    /* --- Semânticas: cor cheia no ícone/texto, ~9% no fundo --- */
    --ds-sucesso:     #2eca6a;  --ds-sucesso-bg: #e0f8e9;
    --ds-alerta:      #ff771d;  --ds-alerta-bg:  #ffecdf;
    --ds-perigo:      #dc3545;  --ds-perigo-bg:  #fdeaec;
    --ds-roxo:        #7b5cf5;  --ds-roxo-bg:    #efeaff;
    --ds-info:        #4154f1;  --ds-info-bg:    #eef1ff;

    /* --- Raio: cresce com a importância do elemento --- */
    --ds-r-menu:   4px;
    --ds-r-input:  6px;
    --ds-r-pill:   9px;
    --ds-r-botao:  10px;
    --ds-r-chip:   12px;
    --ds-r-kpi:    14px;
    --ds-r-painel: 16px;

    /* --- Espaçamento --- */
    --ds-e-1: 4px;  --ds-e-2: 8px;  --ds-e-3: 12px;
    --ds-e-4: 16px; --ds-e-5: 19px; --ds-e-6: 24px; --ds-e-7: 30px;

    /* --- Elevação: sempre o navy a baixa opacidade, nunca preto puro --- */
    --ds-sombra-sm: 0 5px 18px rgba(1, 41, 112, .05);
    --ds-sombra-md: 0 7px 24px rgba(1, 41, 112, .06);
    --ds-sombra-lg: 0 2px 20px rgba(1, 41, 112, .11);

    /* --- Tipografia --- */
    --ds-fonte-titulo: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    --ds-fonte-corpo:  'Open Sans', 'Segoe UI', system-ui, sans-serif;

    --ds-transicao: all .25s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   TIPOGRAFIA
   Nunito carrega a hierarquia, Open Sans carrega a interface.
   ========================================================================== */

body {
    font-family: var(--ds-fonte-corpo);
    font-size: 15px;
    color: var(--ds-texto);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ds-fonte-titulo);
    font-weight: 800;
    color: var(--ds-navy);
    letter-spacing: -.01em;
}

a { color: var(--ds-indigo); }
a:hover { color: var(--ds-navy); }

/* ==========================================================================
   BOTÕES
   Primário sólido no azul de ação; contorno neutro mais fechado (6px) que o
   contorno de acento (10px), como no sistema de referência.
   ========================================================================== */

.btn {
    font-family: var(--ds-fonte-corpo);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--ds-r-botao);
}

.btn-primary {
    background: var(--ds-action);
    border-color: var(--ds-action);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--ds-action-dark);
    border-color: var(--ds-action-dark);
    color: #fff;
}

.btn-outline-secondary {
    border-radius: var(--ds-r-input);
    border-color: #6c757d;
    color: #6c757d;
}

/* Contorno de acento: a ação secundária "de sistema" (recarregar, filtrar). */
.btn-outline-acento {
    background: transparent;
    border: 1px solid var(--ds-indigo);
    color: var(--ds-indigo);
    border-radius: var(--ds-r-botao);
    font-size: 14px;
    font-weight: 700;
    padding: .45rem .95rem;
    transition: var(--ds-transicao);
}
.btn-outline-acento:hover { background: var(--ds-tint); color: var(--ds-navy); }

.btn-icone-ghost {
    background: transparent;
    border: none;
    color: var(--ds-texto-2);
    border-radius: var(--ds-r-botao);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--ds-transicao);
}
.btn-icone-ghost:hover { background: var(--ds-tint); color: var(--ds-navy); }

/* ==========================================================================
   GRADE DE CARTÕES — o lugar do row/col do Bootstrap dentro de .content.
   Ali `.content .row > div { flex: 1 1 220px }` (adminimc.css) vence qualquer
   .col-* por especificidade, e a quebra de linha sai onde ninguém pediu; aqui
   a largura mínima é do componente, não do framework.
   ========================================================================== */

.ds-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--ds-e-3);
    align-items: start;
}
.ds-grade.larga {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
}
.ds-grade > * { min-width: 0; }

/* ==========================================================================
   KPI — chip de ícone 48×48 + rótulo pequeno + número grande.
   Só a cor do chip muda por contexto.
   ========================================================================== */

.ds-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ds-e-3);
    margin-bottom: var(--ds-e-4);
}

.ds-kpi {
    display: flex;
    align-items: center;
    gap: var(--ds-e-3);
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borda);
    border-radius: var(--ds-r-kpi);
    box-shadow: var(--ds-sombra-sm);
    padding: var(--ds-e-4);
    transition: var(--ds-transicao);
}
.ds-kpi:hover { box-shadow: var(--ds-sombra-md); }

.ds-kpi .ds-kpi-chip {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--ds-r-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--ds-tint);
    color: var(--ds-indigo);
}
.ds-kpi.sucesso .ds-kpi-chip { background: var(--ds-sucesso-bg); color: var(--ds-sucesso); }
.ds-kpi.alerta  .ds-kpi-chip { background: var(--ds-alerta-bg);  color: var(--ds-alerta); }
.ds-kpi.perigo  .ds-kpi-chip { background: var(--ds-perigo-bg);  color: var(--ds-perigo); }
.ds-kpi.roxo    .ds-kpi-chip { background: var(--ds-roxo-bg);    color: var(--ds-roxo); }

.ds-kpi .ds-kpi-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-texto-2);
    line-height: 1.3;
}
.ds-kpi .ds-kpi-valor {
    font-family: var(--ds-fonte-titulo);
    font-size: 22px;
    font-weight: 800;
    color: var(--ds-navy);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CAMPOS
   ========================================================================== */

.form-label {
    font-family: var(--ds-fonte-corpo);
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-texto-2);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-radius: var(--ds-r-input);
    border-color: var(--ds-borda);
    font-size: 14px;
    color: var(--ds-texto);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ds-indigo);
    box-shadow: 0 0 0 3px rgba(65, 84, 241, .14);
}
.form-control::placeholder { color: var(--ds-texto-3); }

/* Busca com ícone dentro do campo. */
.ds-busca { position: relative; }
.ds-busca > i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-texto-3);
    font-size: .85rem;
    pointer-events: none;
}
/* !important necessário: `.content input:not([type=checkbox]):not([type=radio])`
   (adminimc.css) tem especificidade maior (3 classes + 1 tag contra 2 classes
   aqui) e usa o atalho `padding`, que reseta os 4 lados — sem isso, o ícone
   fica por baixo do texto/placeholder em vez de ao lado. */
.ds-busca > .form-control { padding-left: 2.2rem !important; }

/* ==========================================================================
   BADGES E STATUS
   ========================================================================== */

.ds-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    font-weight: 700;
}
.ds-status::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}
.ds-status.ativo   { color: var(--ds-sucesso); }
.ds-status.inativo { color: var(--ds-texto-3); }
.ds-status.perigo  { color: var(--ds-perigo); }

.ds-tag {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: var(--ds-r-menu);
    background: var(--ds-tint);
    color: var(--ds-indigo);
    font-size: 11px;
    font-weight: 700;
}

/* ==========================================================================
   MODAIS — ícone + eyebrow + título no cabeçalho, rodapé fixo com ações
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--ds-r-painel);
    box-shadow: var(--ds-sombra-md);
}
.modal-header {
    border-bottom: 1px solid var(--ds-borda);
    padding: var(--ds-e-5);
    align-items: flex-start;
}
.modal-title { font-family: var(--ds-fonte-titulo); font-weight: 800; color: var(--ds-navy); }
.modal-body { padding: var(--ds-e-5); }
.modal-footer { border-top: 1px solid var(--ds-borda); padding: var(--ds-e-3) var(--ds-e-5); }

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   PAGINAÇÃO — grupo de botões, no raio e nas cores do sistema
   ========================================================================== */

.pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-e-3);
    flex-wrap: wrap;
    margin-top: var(--ds-e-4);
}

.pag-grupo { display: inline-flex; }

.pag-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .6rem;
    border: 1px solid var(--ds-borda);
    background: var(--ds-superficie);
    color: var(--ds-texto-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: var(--ds-transicao);
}
.pag-botao + .pag-botao,
.pag-reticencias + .pag-botao { margin-left: -1px; }
.pag-grupo > :first-child { border-radius: var(--ds-r-botao) 0 0 var(--ds-r-botao); }
.pag-grupo > :last-child  { border-radius: 0 var(--ds-r-botao) var(--ds-r-botao) 0; }

.pag-botao:hover { background: var(--ds-bg); color: var(--ds-navy); }
.pag-botao:focus-visible { outline: 2px solid var(--ds-indigo); outline-offset: 1px; z-index: 2; }

/* A página atual fica no tint de índigo — o mesmo vocabulário do menu e das
   pills de filtro, para "onde estou" ser sempre a mesma cor no sistema. */
.pag-botao.ativo {
    background: var(--ds-tint);
    border-color: var(--ds-indigo);
    color: var(--ds-navy);
    z-index: 1;
}
.pag-botao.inativo { color: var(--ds-texto-3); cursor: default; background: var(--ds-bg); }

.pag-reticencias {
    display: inline-flex;
    align-items: center;
    padding: 0 .45rem;
    height: 2.25rem;
    border: 1px solid var(--ds-borda);
    background: var(--ds-superficie);
    color: var(--ds-texto-3);
    font-size: 13px;
}

.pag-resumo { font-size: 12px; color: var(--ds-texto-3); font-variant-numeric: tabular-nums; }