/* ============================================================
   VISAO GERENCIAL DE COMISSOES
   ============================================================ */

.commission-view-switch {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 15px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;
    background: rgba(255,255,255,.02);
}

.commission-view-switch button {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #68737d;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.commission-view-switch button.active {
    background: #1b2229;
    color: #eef2f5;
    box-shadow:
        0 2px 10px
        rgba(0,0,0,.20);
}

.commission-manager-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.commission-manager-heading > div:first-child > span {
    color: #65717c;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.commission-manager-heading h2 {
    margin: 5px 0 4px;
    color: #edf1f4;
    font-size: 20px;
}

.commission-manager-heading p {
    margin: 0;
    color: #67717b;
    font-size: 9px;
}

.commission-manager-badge {
    padding: 6px 9px;
    border: 1px solid rgba(76,204,145,.15);
    border-radius: 6px;
    background: rgba(76,204,145,.05);
    color: #63d69c;
    font-size: 7px;
    font-weight: 900;
}

.commission-manager-filters {
    display: grid;
    grid-template-columns:
        140px
        80px
        repeat(
            4,
            minmax(125px,1fr)
        );
    gap: 7px;
    margin-bottom: 13px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    background: #101419;
}

.commission-manager-filter-title {
    grid-column: 1 / -1;
    margin-bottom: 3px;
}

.commission-manager-filter-title span,
.commission-manager-filter-title strong {
    display: block;
}

.commission-manager-filter-title span {
    color: #606b75;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.commission-manager-filter-title strong {
    margin-top: 3px;
    color: #ccd3d9;
    font-size: 10px;
}

.commission-manager-filters label > span {
    display: block;
    margin-bottom: 5px;
    color: #626d77;
    font-size: 7px;
    font-weight: 800;
}

.commission-manager-filters select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 7px;
    background: #0d1217;
    color: #ccd3d8;
    outline: none;
    font-size: 8px;
}

.commission-manager-filters select:focus {
    border-color: rgba(77,160,222,.40);
}

.commission-manager-print {
    align-self: end;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(93,160,224,.23);
    border-radius: 7px;
    background: rgba(93,160,224,.07);
    color: #95bde7;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.commission-manager-print:hover {
    background: rgba(93,160,224,.12);
}

.commission-manager-kpis {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(140px,1fr)
        );
    gap: 8px;
    margin-bottom: 12px;
}

.commission-manager-kpis > div {
    min-height: 84px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: #101419;
}

.commission-manager-kpis span,
.commission-manager-kpis strong,
.commission-manager-kpis small {
    display: block;
}

.commission-manager-kpis span {
    color: #626d77;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

.commission-manager-kpis strong {
    margin-top: 7px;
    color: #e5eaee;
    font-size: 16px;
}

.commission-manager-kpis small {
    margin-top: 4px;
    color: #59636d;
    font-size: 7px;
}

.commission-manager-kpis .positive strong {
    color: #69dca1;
}

.commission-manager-kpis .pending strong {
    color: #e0ba6b;
}

.commission-manager-kpis .danger strong {
    color: #e58484;
}

.commission-manager-kpis .warning strong {
    color: #dea963;
}

.commission-manager-kpis .reversal strong {
    color: #ec985d;
}

.commission-manager-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0,2fr)
        minmax(280px,1fr);
    gap: 9px;
    margin-bottom: 9px;
}

.commission-manager-rank-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 9px;
    margin-bottom: 9px;
}

.commission-manager-panel {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    background: #101419;
}

.commission-manager-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.commission-manager-panel-head span {
    display: block;
    color: #626d77;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.commission-manager-panel-head h3 {
    margin: 4px 0 0;
    color: #dce2e7;
    font-size: 11px;
}

.commission-manager-panel-head small {
    color: #5d6771;
    font-size: 7px;
}

.commission-manager-chart {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.commission-manager-chart-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 9px;
}

.commission-manager-chart-row .month strong {
    color: #89939c;
    font-size: 8px;
}

.commission-manager-chart-row .bars {
    min-width: 0;
}

.commission-manager-chart-row .main-bar {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 50px;
    background: rgba(255,255,255,.04);
}

.commission-manager-chart-row .main-bar .valid {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 50px;
    background: rgba(104,157,220,.28);
}

.commission-manager-chart-row .main-bar .received {
    height: 100%;
    background: rgba(72,207,145,.75);
}

.commission-manager-chart-row .chart-values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 4px;
    color: #5f6973;
    font-size: 7px;
}

.commission-manager-chart-row .chart-values strong {
    color: #aeb7bf;
}

.commission-manager-ranking {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.commission-rank-row {
    display: grid;
    grid-template-columns:
        24px
        minmax(0,1fr)
        auto;
    align-items: center;
    gap: 7px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.035);
}

.commission-rank-row:last-child {
    border-bottom: 0;
}

.commission-rank-row .position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,.035);
    color: #69747e;
    font-size: 7px;
    font-weight: 900;
}

.commission-rank-row .rank-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.commission-rank-row .rank-title strong {
    overflow: hidden;
    color: #bdc5cc;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commission-rank-row .rank-title span {
    color: #59636d;
    font-size: 7px;
    white-space: nowrap;
}

.commission-rank-row .rank-bar {
    height: 4px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,.035);
}

.commission-rank-row .rank-bar > div {
    height: 100%;
    border-radius: 20px;
    background: rgba(82,157,221,.55);
}

.commission-rank-row .rank-value {
    text-align: right;
}

.commission-rank-row .rank-value strong,
.commission-rank-row .rank-value small {
    display: block;
}

.commission-rank-row .rank-value strong {
    color: #71d9a3;
    font-size: 8px;
}

.commission-rank-row .rank-value small {
    margin-top: 2px;
    color: #56616b;
    font-size: 6px;
}

.commission-manager-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 8px;
}

.commission-manager-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.commission-manager-table th {
    padding: 8px;
    background: #151a20;
    color: #68737d;
    text-align: left;
    font-size: 7px;
    white-space: nowrap;
}

.commission-manager-table td {
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,.04);
    color: #aab3bb;
    font-size: 7px;
}

.commission-manager-table td.money {
    color: #d5dbe0;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.manager-status {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 6px;
    font-weight: 900;
    white-space: nowrap;
}

.manager-status.sale-ativa,
.manager-status.commission-pago {
    background: rgba(69,208,145,.07);
    color: #6bdca2;
}

.manager-status.commission-a_receber {
    background: rgba(225,181,88,.07);
    color: #ddb869;
}

.manager-status.sale-cancelada,
.manager-status.commission-cancelado {
    background: rgba(230,91,91,.07);
    color: #e48787;
}

.manager-status.sale-devolvida {
    background: rgba(224,165,82,.07);
    color: #dfa85f;
}

.manager-status.commission-estorno_pendente {
    background: rgba(234,135,77,.08);
    color: #e89a68;
}

.manager-status.commission-estornado {
    background: rgba(160,120,210,.08);
    color: #bb9bdd;
}

.commission-manager-loading,
.commission-manager-error,
.commission-manager-empty {
    padding: 30px 15px;
    color: #68727c;
    text-align: center;
    font-size: 8px;
}

.commission-manager-error strong,
.commission-manager-error span {
    display: block;
}

.commission-manager-error strong {
    color: #db8585;
}

.commission-manager-error span {
    margin-top: 5px;
}

@media (max-width: 1200px) {

    .commission-manager-filters {
        grid-template-columns:
            repeat(
                3,
                minmax(130px,1fr)
            );
    }

    .commission-manager-kpis {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}

@media (max-width: 900px) {

    .commission-manager-main-grid,
    .commission-manager-rank-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .commission-manager-filters,
    .commission-manager-kpis {
        grid-template-columns: 1fr;
    }

    .commission-manager-heading {
        flex-direction: column;
    }
}