/* --- Layout da Tela de Relatórios --- */

.relatorios-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "large small"
        "full full";
    gap: 2rem;
}

.chart-card-large {
    grid-area: large;
}
.chart-card-small {
    grid-area: small;
}
.chart-card-full {
    grid-area: full;
}

.chart-container {
    position: relative;
    height: 350px; /* Altura padrão para os gráficos */
}

.chart-card-small .chart-container {
    height: 350px;
}

.chart-card-large .chart-container {
    height: 350px;
}

.chart-card-full .chart-container {
    height: 300px;
}

@media (max-width: 992px) {
    .relatorios-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "large"
            "small"
            "full";
    }
}

/* Container */
.custom-checkbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Esconde o input original */
.switch-clean {
    appearance: none;
    width: 42px;
    height: 22px;
    background: var(--gray-300, #d1d5db);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Bolinha */
.switch-clean::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Marcado */
.switch-clean:checked {
    background: #2563eb;
}

.switch-clean:checked::before {
    transform: translateX(20px);
}

/* Label */
.switch-label {
    font-size: 0.95rem;
    color: var(--gray-600, #444);
    cursor: pointer;
    user-select: none;
}


/* ... (seu CSS anterior) ... */

/* --- Layout da Tela de Relatórios (Atualizado) --- */

.relatorios-grid {
    display: grid;
    /* Duas colunas iguais */
    grid-template-columns: 1fr 1fr;
    /* Áreas nomeadas para organizar o layout */
    grid-template-areas:
        "timeline timeline"   /* Linha do tempo ocupa a largura total no topo */
        "users_done users_pass" /* Os dois gráficos de usuários lado a lado */
        "filial filial";      /* Filiais ocupa a largura total no fundo */
    gap: 2rem;
}

/* Atribuição das áreas */
.chart-timeline {
    grid-area: timeline;
}
.chart-users-done {
    grid-area: users_done;
}
.chart-users-pass {
    grid-area: users_pass;
}
.chart-filial {
    grid-area: filial;
}

/* Container dos gráficos */
.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

/* Responsividade para celulares */
@media (max-width: 992px) {
    .relatorios-grid {
        grid-template-columns: 1fr; /* Uma coluna */
        grid-template-areas:
            "timeline"
            "users_done"
            "users_pass"
            "filial";
    }
}