/* =========================
   RESPONSIVIDADE
========================= */


/* =========================
   TABLET
========================= */

@media (max-width: 980px) {

    .container {
        width: 92%;
    }


    /* Cards */

    #cards {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Formulário */

    #form-financeiro {
        grid-template-columns: repeat(2, 1fr);
    }

    #form-financeiro .btn-primary {
        width: 100%;
    }


    /* Filtros */

    .filters {
        grid-template-columns: 1fr 1fr;
    }

    .search-field {
        grid-column: 1 / -1;
    }


    /* Gráfico */

    .chart-area {
        grid-template-columns: 1fr;
    }

    .chart-box {
        margin: 0 auto;
    }

    .chart-info {
        width: 100%;
    }

}


/* =========================
   CELULAR
========================= */

@media (max-width: 650px) {

    .container {
        width: 94%;
    }


    /* =========================
       HEADER
    ========================== */

    .header {
        padding: 22px 0 65px;
    }

    .brand {
        align-items: flex-start;
        gap: 12px;
    }

    .brand-icon {
        width: 45px;
        height: 45px;
        flex: 0 0 45px;
    }

    .brand-icon svg {
        width: 23px;
        height: 23px;
    }

    .header h1 {
        font-size: 25px;
        letter-spacing: -0.4px;
    }

    .header p {
        font-size: 12px;
        line-height: 1.5;
    }


    /* =========================
       CARDS
    ========================== */

    #cards {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: -35px;

        margin-bottom: 20px;
    }

    .card {
        padding: 20px;
    }

    .card-top {
        margin-bottom: 14px;
    }

    .card strong {
        font-size: 27px;
    }


    /* =========================
       SEÇÕES
    ========================== */

    .section-card {
        padding: 20px;

        border-radius: 15px;

        margin-bottom: 18px;
    }

    .section-heading {
        gap: 10px;

        margin-bottom: 20px;
    }

    .heading-icon {
        width: 37px;
        height: 37px;

        flex: 0 0 37px;
    }

    .heading-icon svg {
        width: 19px;
        height: 19px;
    }

    .section-heading h2 {
        font-size: 18px;
    }

    .section-heading p {
        font-size: 12px;
    }


    /* =========================
       FORMULÁRIO
    ========================== */

    #form-financeiro {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    #form-financeiro .btn-primary {
        width: 100%;

        margin-top: 4px;
    }


    /* =========================
       FILTROS
    ========================== */

    .filters {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .search-field {
        grid-column: auto;
    }


    /* =========================
       TABELA
    ========================== */

    .table-wrapper {
        overflow-x: auto;

        margin: 0 -3px;
    }

    table {
        min-width: 680px;
    }

    th,
    td {
        padding: 13px 12px;

        font-size: 12px;
    }


    /* =========================
       GRÁFICO
    ========================== */

    .chart-area {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 20px;
    }

    .chart-box {
        width: 100%;

        height: 260px;
    }

    .chart-info {
        gap: 10px;
    }

    .info-item {
        padding: 14px;
    }


    /* =========================
       FOOTER
    ========================== */

    .footer {
        padding: 25px 15px 30px;

        font-size: 11px;
    }

}