/* =====================================================
   FRETE+ - REPRESENTANTES
===================================================== */


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

.representantes-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 24px;
}


.representantes-card {
    min-height: 105px;

    padding: 20px;

    display: flex;
    align-items: center;

    gap: 15px;

    background: #15243a;

    border:
        1px solid #edf2f7;

    border-radius: 14px;

    box-shadow:
        0 2px 10px
        rgba(15, 23, 42, 0.05);
}


.representantes-card-icone {
    width: 54px;
    height: 54px;

    flex:
        0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(56,189,248,.13);

    border-radius: 12px;

    font-size: 24px;
}


.representantes-card span {
    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

    font-size: 13px;
}


.representantes-card strong {
    color: #f4f7fb;

    font-size: 25px;
}


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

.representantes-filtros {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        210px
        auto;

    gap: 12px;

    margin-bottom: 20px;
}


.representantes-busca {
    min-height: 46px;

    padding: 0 14px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: #15243a;

    border:
        1px solid #cbd5e1;

    border-radius: 10px;
}


.representantes-busca input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #f4f7fb;

    font-size: 14px;
}


.representantes-filtros select {
    min-height: 46px;

    padding: 0 12px;

    border:
        1px solid #cbd5e1;

    border-radius: 10px;

    background: #15243a;

    color: #f4f7fb;

    font-size: 14px;
}


/* =====================================================
   IDENTIDADE
===================================================== */

.representante-identidade {
    display: flex;
    align-items: center;

    gap: 11px;
}


.representante-avatar {
    width: 38px;
    height: 38px;

    flex:
        0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(56,189,248,.13);

    color: #0369a1;

    font-weight: 800;
}


.representante-identidade strong {
    color: #f4f7fb;

    font-size: 14px;
}


/* =====================================================
   STATUS
===================================================== */

.representante-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}


.representante-status.ativo {
    background: #dcfce7;

    color: #166534;
}


.representante-status.inativo {
    background: rgba(239,68,68,.13);

    color: #b91c1c;
}


/* =====================================================
   AÇÕES
===================================================== */

.representante-acoes {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.btn-representante-editar,
.btn-representante-status {
    border: none;

    padding: 8px 10px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.btn-representante-editar {
    background: rgba(56,189,248,.13);

    color: #0369a1;
}


.btn-representante-editar:hover {
    background: #bae6fd;
}


.btn-representante-status.desativar {
    background: rgba(239,68,68,.12);

    color: #be123c;
}


.btn-representante-status.ativar {
    background: rgba(34,197,94,.11);

    color: #15803d;
}


/* =====================================================
   MODAL
===================================================== */

.representante-modal {
    max-width: 650px;
}


.representante-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* =====================================================
   VAZIO
===================================================== */

.representantes-vazio {
    padding: 35px !important;

    text-align: center;

    color: #94a3b8;
}


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

@media
(max-width: 1000px) {

    .representantes-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .representantes-filtros {
        grid-template-columns:
            1fr 1fr;
    }

}


@media
(max-width: 700px) {

    .representantes-cards {
        grid-template-columns:
            1fr;
    }


    .representantes-filtros {
        grid-template-columns:
            1fr;
    }


    .representante-form-grid {
        grid-template-columns:
            1fr;
    }


    .representante-acoes {
        flex-direction: column;

        align-items: stretch;
    }


    .representante-acoes button {
        width: 100%;
    }

}