/* =====================================================
   HISTÓRICO
===================================================== */

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}


.history-header h1 {
    margin: 0 0 4px;

    font-size: 15px;
}


.history-header p {
    margin: 0;

    color: #858b97;

    font-size: 8px;
}


.back-orders-button {
    height: 32px;

    padding: 0 12px;

    border: 1px solid #dedfe5;

    border-radius: 6px;

    background: white;

    color: #5c626e;

    font-family: inherit;

    font-size: 8px;

    font-weight: 600;

    cursor: pointer;
}


.back-orders-button:hover {
    border-color: #6822c5;

    color: #6822c5;
}


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

.history-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 18px;
}


.history-stat-card {
    background: white;

    border: 1px solid #e4e6eb;

    border-radius: 8px;

    padding: 14px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.03);
}


.history-stat-card span {
    display: block;

    color: #7b818d;

    font-size: 7px;

    margin-bottom: 5px;
}


.history-stat-card strong {
    color: #272c37;

    font-size: 14px;
}


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

.history-filters {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr auto;

    align-items: end;

    gap: 10px;

    padding: 14px;

    margin-bottom: 18px;

    background: white;

    border: 1px solid #e4e6eb;

    border-radius: 8px;
}


.history-search,
.history-filter {
    min-width: 0;
}


.history-search label,
.history-filter label {
    display: block;

    margin-bottom: 5px;

    color: #595f6c;

    font-size: 7px;

    font-weight: 600;
}


.history-search input,
.history-filter input,
.history-filter select {
    width: 100%;

    height: 34px;

    border: 1px solid #dfe2e7;

    border-radius: 6px;

    padding: 0 9px;

    outline: none;

    background: white;

    font-family: inherit;

    font-size: 8px;

    color: #343943;
}


.history-search input:focus,
.history-filter input:focus,
.history-filter select:focus {
    border-color: #7431ca;

    box-shadow:
        0 0 0 3px rgba(116,49,202,.08);
}


.clear-filter-button {
    height: 34px;

    padding: 0 12px;

    border: 1px solid #dddfe5;

    border-radius: 6px;

    background: #f7f7f9;

    color: #696f7a;

    font-family: inherit;

    font-size: 7px;

    cursor: pointer;
}


.clear-filter-button:hover {
    background: #eeeaf4;

    color: #6822c5;
}


/* =====================================================
   LISTA
===================================================== */

.history-list-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;
}


.history-list-header h2 {
    margin: 0;

    font-size: 11px;
}


.history-list-header span {
    color: #858b97;

    font-size: 7px;
}


.history-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.history-order {
    display: grid;

    grid-template-columns:
        90px 1.3fr 1fr 110px 100px;

    gap: 10px;

    align-items: center;

    padding: 12px;

    background: white;

    border: 1px solid #e4e6eb;

    border-radius: 8px;

    transition: .2s;
}


.history-order:hover {
    border-color: #d1bfec;

    box-shadow:
        0 3px 12px rgba(89,35,160,.05);
}


.history-order-number strong {
    display: block;

    color: #6822c5;

    font-size: 9px;
}


.history-order-number span {
    display: block;

    margin-top: 3px;

    color: #90959f;

    font-size: 6px;
}


.history-customer strong {
    display: block;

    color: #333844;

    font-size: 8px;

    margin-bottom: 3px;
}


.history-customer span {
    display: block;

    color: #858b97;

    font-size: 6px;
}


.history-product {
    color: #606672;

    font-size: 7px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.history-total {
    font-size: 9px;

    font-weight: 700;

    color: #333844;
}


.history-status {
    justify-self: end;
}


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

.history-empty {
    padding: 45px 20px;

    background: white;

    border: 1px dashed #d9dce2;

    border-radius: 8px;

    text-align: center;
}


.history-empty strong {
    display: block;

    margin-bottom: 5px;

    color: #474d58;

    font-size: 10px;
}


.history-empty span {
    color: #9297a1;

    font-size: 7px;
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 900px) {

    .history-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


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


    .history-order {
        grid-template-columns:
            80px 1fr 90px;
    }


    .history-product {
        display: none;
    }


    .history-status {
        justify-self: end;
    }

}


@media (max-width: 600px) {

    .history-header {
        align-items: flex-start;

        flex-direction: column;
    }


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


    .history-order {
        grid-template-columns:
            1fr auto;

        gap: 7px;
    }


    .history-order-number {
        grid-column:
            1 / 2;
    }


    .history-status {
        grid-column:
            2 / 3;

        grid-row:
            1;
    }


    .history-customer {
        grid-column:
            1 / 3;
    }


    .history-total {
        grid-column:
            1 / 3;
    }

}