/**
 * Blocos/cards do menu principal (dashboard) — fundo sólido na cor do módulo.
 * Depende de variaveis.css (carregar antes).
 */

/* ── Grid — mobile-first ─────────────────────────────────────── */
.dashboard-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 10px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.dashboard-blocks > .dashboard-block {
    min-width: 0;
}

/* Tablet ≥ 576px: 3 colunas */
@media (min-width: 576px) {
    .dashboard-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px 12px;
    }
}

/* Tablet largo ≥ 768px: 4 colunas */
@media (min-width: 768px) {
    .dashboard-blocks {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 20px 16px;
    }
}

/* Desktop ≥ 992px: uma linha — colunas definidas via --blocks-cols (footer.js) */
@media (min-width: 992px) {
    .dashboard-blocks {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 16px;
        padding: 24px 16px;
    }

    /* Força N colunas = N blocos na mesma linha (ex.: 10 em Configurações) */
    .dashboard-blocks.blocks-counted {
        grid-template-columns: repeat(var(--blocks-cols), minmax(0, 1fr));
    }

    .dashboard-blocks.blocks-counted:has(> .dashboard-block:nth-child(8)) .dashboard-block {
        padding: 22px 10px;
    }

    .dashboard-blocks.blocks-counted:has(> .dashboard-block:nth-child(9)) .block-title {
        font-size: 15px;
    }
}

/* Desktop grande ≥ 1200px */
@media (min-width: 1200px) {
    .dashboard-blocks {
        gap: 20px;
        padding: 30px 20px;
    }
}

/* ── Card base (fundo = cor do grupo) ────────────────────────── */
/* IMPORTANTE: estilos base ANTES das media queries de card */
.dashboard-block {
    --card-color: var(--cor-dashboard);
    --card-fg: #ffffff;

    background: var(--card-color);
    border: none;
    border-radius: 10px;
    padding: 30px 20px;
    color: var(--card-fg);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    text-decoration: none;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dashboard-block:hover,
.dashboard-block:active,
.dashboard-block:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: var(--card-fg);
    text-decoration: none;
    filter: brightness(0.92);
}

.dashboard-block .block-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--card-fg);
    display: block;
    line-height: 1;
}

.dashboard-block .block-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--card-fg);
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    padding-inline: 4px;
    box-sizing: border-box;
}

/* ── Tamanho dos cards por breakpoint (APÓS o estilo base) ───── */

/* Mobile pequeno < 576px: cards compactos */
@media (max-width: 575.98px) {
    .dashboard-block {
        padding: 14px 6px;
        border-radius: 8px;
    }
    .dashboard-block .block-icon {
        font-size: 26px;
        margin-bottom: 6px;
    }
    .dashboard-block .block-title {
        font-size: 11px;
        font-weight: 600;
    }
}

/* Tablet 576px – 991px: cards médios */
@media (min-width: 576px) and (max-width: 991.98px) {
    .dashboard-block {
        padding: 20px 10px;
    }
    .dashboard-block .block-icon {
        font-size: 34px;
        margin-bottom: 10px;
    }
    .dashboard-block .block-title {
        font-size: 14px;
    }
}

/* ── Módulos (classes existentes no HTML) ────────────────────── */
.block-crm-1,
.block-crm-2,
.block-crm-3 {
    --card-color: var(--cor-crm);
}

.block-dashboard-gestao {
    --card-color: #0e7490;
}

.block-cliente,
.block-cliente-1,
.block-cliente-2,
.block-cliente-3,
.block-cliente-4 {
    --card-color: var(--cor-clientes);
}

.block-financeiro-1,
.block-financeiro-2,
.block-financeiro-3,
.block-financeiro-4,
.block-financeiro-5,
.block-financeiro-6,
.block-financeiro-7,
.block-financeiro-8 {
    --card-color: var(--cor-financeiro);
}

.block-relatorio-1,
.block-relatorio-2,
.block-relatorio-3,
.block-relatorio-4,
.block-relatorio-5,
.block-relatorio-6,
.block-relatorio-7,
.block-relatorio-8,
.block-relatorio-9 {
    --card-color: var(--cor-relatorios);
}

.block-vaga,
.block-cadastros,
.block-agenda,
.block-artes {
    --card-color: var(--cor-vagas);
}

.block-documento-1,
.block-documento-2,
.block-documento-3,
.block-documento-4,
.block-documento-5,
.block-documento-6,
.block-documento-6b,
.block-documento-7,
.block-documento-cadastro-1,
.block-documento-cadastro-2 {
    --card-color: var(--cor-documentos);
}

.block-academy-1,
.block-academy-2 {
    --card-color: var(--cor-academy);
}

.block-aiagentes-group,
.block-aiagentes-1,
.block-aiagentes-2,
.block-aiagentes-3,
.block-aiagentes-4 {
    --card-color: var(--cor-ai);
}

.block-config-1,
.block-config-2,
.block-config-3,
.block-config-4,
.block-config-5,
.block-config-6,
.block-config-7,
.block-config-8,
.block-config-9 {
    --card-color: var(--cor-config);
}

/* Alias utilitários */
.card-crm        { --card-color: var(--cor-crm); }
.card-financeiro { --card-color: var(--cor-financeiro); }
.card-ai         { --card-color: var(--cor-ai); }