/* ========================================
   TEXAS LEGACIES — ADMIN FINANCEIRO
======================================== */


/* ========================================
   7 REPARTIÇÕES INTERNAS
======================================== */

.admin-finance-section-navigation {
    margin:
        28px 0;

    display:
        grid;

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

    border:
        1px solid rgba(223, 192, 155, .16);

    background:
        rgba(7, 27, 33, .28);
}


.admin-finance-section-tab {
    position:
        relative;

    min-height:
        104px;

    padding:
        18px 20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;

    border:
        0;

    border-right:
        1px solid rgba(223, 192, 155, .14);

    border-bottom:
        1px solid rgba(223, 192, 155, .14);

    background:
        transparent;

    color:
        rgba(241, 221, 194, .58);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.admin-finance-section-tab:nth-child(4) {
    border-right:
        0;
}


.admin-finance-section-tab:nth-child(n+5) {
    border-bottom:
        0;
}


.admin-finance-section-tab:nth-child(7) {
    grid-column:
        span 2;

    border-right:
        0;
}


.admin-finance-section-tab:hover {
    background:
        rgba(180, 71, 36, .07);

    color:
        var(--cream);
}


.admin-finance-section-tab.active {
    background:
        var(--terracotta);

    color:
        var(--cream);
}


.admin-finance-section-tab.active::after {
    content:
        "";

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    bottom:
        0;

    height:
        2px;

    background:
        var(--sand);
}


.admin-finance-section-tab > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.admin-finance-section-tab > strong {
    color:
        inherit;

    font-size:
        20px;

    font-weight:
        normal;
}


.admin-finance-section-tab > small {
    color:
        rgba(241, 221, 194, .42);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    line-height:
        1.45;
}


.admin-finance-section-tab.active > small {
    color:
        rgba(255, 245, 232, .72);
}


/* ========================================
   CABEÇALHO DA ÁREA ATIVA
======================================== */

.admin-finance-active-heading {
    margin:
        0 0 18px;

    padding:
        17px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-left:
        3px solid var(--rust);

    background:
        rgba(180, 71, 36, .07);
}


.admin-finance-active-heading > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-finance-active-heading h3 {
    margin-top:
        6px;

    color:
        var(--cream);

    font-size:
        27px;

    font-weight:
        normal;
}


.admin-finance-active-heading p {
    max-width:
        620px;

    margin-top:
        5px;

    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.admin-finance-active-heading > strong {
    color:
        rgba(241, 221, 194, .18);

    font-size:
        clamp(38px, 5vw, 62px);

    font-weight:
        normal;
}


.admin-finance-section-panel[hidden] {
    display:
        none !important;
}


.admin-finance-section-panel {
    animation:
        adminFinancePanelIn .18s ease;
}


@keyframes adminFinancePanelIn {

    from {
        opacity:
            0;
        transform:
            translateY(5px);
    }

    to {
        opacity:
            1;
        transform:
            translateY(0);
    }

}


#adminFinanceActionMessage.admin-finance-action-global {
    margin:
        0 0 18px;
}


.admin-finance-section-panel > .admin-weekly-payroll,
.admin-finance-section-panel > .admin-weekly-food,
.admin-finance-section-panel > .admin-weekly-housing {
    margin-top:
        0;
}


/* ========================================
   BÔNUS DOS HERDEIROS — SALÁRIOS
======================================== */

#adminRancherSalaryFinanceHolder {
    margin-top:
        24px;
}


.admin-rancher-salary-finance-card {
    padding:
        24px;

    border:
        1px solid rgba(223, 160, 108, .28);

    background:
        rgba(7, 27, 33, .42);
}


.admin-rancher-salary-finance-heading {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        24px;

    align-items:
        flex-start;
}


.admin-rancher-salary-finance-heading > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-rancher-salary-finance-heading h3 {
    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        30px;

    font-weight:
        normal;
}


.admin-rancher-salary-finance-heading p {
    max-width:
        660px;

    margin-top:
        8px;

    color:
        rgba(241, 221, 194, .48);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.7;
}


.admin-rancher-salary-auto {
    padding:
        8px 10px;

    border:
        1px solid rgba(223, 160, 108, .3);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.4px;
}


.admin-rancher-salary-finance-calculation {
    margin-top:
        20px;

    display:
        grid;

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

    border-top:
        1px solid rgba(223, 192, 155, .14);

    border-left:
        1px solid rgba(223, 192, 155, .14);
}


.admin-rancher-salary-finance-calculation article {
    min-height:
        100px;

    padding:
        16px;

    border-right:
        1px solid rgba(223, 192, 155, .14);

    border-bottom:
        1px solid rgba(223, 192, 155, .14);
}


.admin-rancher-salary-finance-calculation article.total {
    background:
        rgba(180, 71, 36, .08);
}


.admin-rancher-salary-finance-calculation span,
.admin-rancher-salary-finance-editor label > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.admin-rancher-salary-finance-calculation strong {
    display:
        block;

    margin-top:
        12px;

    color:
        var(--cream);

    font-size:
        24px;

    font-weight:
        normal;
}


.admin-rancher-salary-finance-editor {
    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        12px;

    align-items:
        end;
}


.admin-rancher-salary-finance-editor label {
    display:
        grid;

    gap:
        8px;
}


.admin-rancher-salary-finance-editor label > div {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.admin-rancher-salary-finance-editor small {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


.admin-rancher-salary-finance-editor input {
    width:
        100%;

    min-height:
        46px;

    padding:
        0 12px;

    border:
        1px solid rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .7);

    color:
        var(--cream);
}


.admin-rancher-salary-finance-editor button {
    min-height:
        46px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    border:
        1px solid var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.admin-finance-bonus-message {
    margin-top:
        12px;

    padding:
        12px 14px;

    border:
        1px solid rgba(223, 160, 108, .22);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-finance-bonus-message.error {
    border-color:
        rgba(183, 55, 38, .65);
}


.admin-finance-bonus-message.success {
    background:
        rgba(180, 71, 36, .07);
}


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

@media (max-width: 900px) {

    .admin-finance-section-navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-finance-section-tab,
    .admin-finance-section-tab:nth-child(4),
    .admin-finance-section-tab:nth-child(n+5),
    .admin-finance-section-tab:nth-child(7) {
        grid-column:
            auto;

        border-right:
            1px solid rgba(223, 192, 155, .14);

        border-bottom:
            1px solid rgba(223, 192, 155, .14);
    }


    .admin-finance-section-tab:nth-child(2n) {
        border-right:
            0;
    }


    .admin-finance-section-tab:last-child {
        grid-column:
            1 / -1;

        border-right:
            0;

        border-bottom:
            0;
    }


    .admin-rancher-salary-finance-calculation {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .admin-finance-section-navigation,
    .admin-rancher-salary-finance-editor {
        grid-template-columns:
            1fr;
    }


    .admin-finance-section-tab,
    .admin-finance-section-tab:nth-child(2n),
    .admin-finance-section-tab:last-child {
        grid-column:
            auto;

        min-height:
            82px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(223, 192, 155, .14);
    }


    .admin-finance-section-tab:last-child {
        border-bottom:
            0;
    }


    .admin-finance-active-heading,
    .admin-rancher-salary-finance-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-finance-active-heading > strong {
        display:
            none;
    }

}