/* ========================================
   PLAYER NAV — 11 SISTEMAS
   6 NA PRIMEIRA LINHA + 5 NA SEGUNDA
======================================== */

@media (min-width: 651px) {

    .dashboard-system-navigation-buttons {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }


    .dashboard-system-tab:nth-child(-n+6) {
        border-bottom:
            1px solid rgba(241, 221, 194, .13);
    }


    /*
    A Roda da Fortuna usava anteriormente um layout 5 + 5.
    Restauramos as bordas dos itens 05 e 10 e encerramos
    cada nova linha nos itens 06 e 11.
    */

    .dashboard-system-tab:nth-child(5),
    .dashboard-system-tab:nth-child(10) {
        border-right:
            1px solid rgba(241, 221, 194, .13);
    }


    .dashboard-system-tab:nth-child(6),
    .dashboard-system-tab:nth-child(11) {
        border-right:
            0;
    }

}


/* ========================================
   ALIMENTAÇÃO — VIEW PRINCIPAL
======================================== */

.dashboard-food-system.dashboard-view-food {
    width:
        100%;

    margin:
        0;

    padding:
        72px clamp(22px, 5vw, 78px) 90px;

    border:
        0;

    border-top:
        1px solid rgba(241, 221, 194, .08);

    background:
        var(--ink);
}


.dashboard-food-system.dashboard-view-food .dashboard-food-heading {
    padding-bottom:
        38px;

    border-bottom:
        1px solid rgba(241, 221, 194, .12);
}


.dashboard-food-system.dashboard-view-food .dashboard-food-heading h3 {
    font-size:
        clamp(46px, 7vw, 84px);

    line-height:
        .94;
}


.dashboard-food-system.dashboard-view-food .dashboard-food-heading p {
    max-width:
        680px;

    font-size:
        11px;
}


.dashboard-food-system.dashboard-view-food .dashboard-food-current {
    margin-top:
        32px;
}


.dashboard-food-system.dashboard-view-food .dashboard-food-plan-grid {
    margin-top:
        30px;
}


@media (max-width: 680px) {

    .dashboard-food-system.dashboard-view-food {
        padding:
            48px 18px 70px;
    }

}


/* ========================================
   TEXAS LEGACIES — SISTEMA DE ALIMENTAÇÃO
======================================== */


/* ========================================
   DASHBOARD — ALIMENTAÇÃO
======================================== */

.dashboard-food-system {
    grid-column:
        1 / -1;

    margin:
        36px 0 44px;

    padding:
        34px;

    border:
        1px solid rgba(241, 221, 194, .14);

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

    color:
        var(--cream);
}


.dashboard-food-heading {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        28px;
}


.dashboard-food-heading > div {
    max-width:
        740px;
}


.dashboard-food-heading > div > span,
.dashboard-food-character-selector > span,
.dashboard-food-restrictions-heading > span,
.dashboard-food-custom-restriction > span,
.dashboard-food-change-preview > div > span,
.dashboard-food-current-card > div > span,
.dashboard-food-current-unselected span,
.dashboard-food-alert-top > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2.5px;
}


.dashboard-food-heading h3 {
    margin-top:
        10px;

    color:
        var(--cream);

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

    font-weight:
        normal;

    line-height:
        1;
}


.dashboard-food-heading p,
.dashboard-food-current-card p,
.dashboard-food-current-unselected p,
.dashboard-food-alert > p {
    margin-top:
        10px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.75;
}


.dashboard-food-character-selector {
    width:
        min(300px, 100%);

    display:
        grid;

    gap:
        8px;
}


.dashboard-food-character-selector select {
    min-height:
        48px;

    padding:
        0 13px;

    border:
        1px solid rgba(241, 221, 194, .16);

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

    color:
        var(--cream);
}


.dashboard-food-message {
    margin-top:
        22px;

    padding:
        14px 16px;

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

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


.dashboard-food-message.error {
    border-color:
        rgba(180, 71, 36, .75);
}


.dashboard-food-message.success {
    background:
        rgba(180, 71, 36, .08);
}


.dashboard-food-current {
    margin-top:
        24px;
}


.dashboard-food-current-card,
.dashboard-food-current-unselected {
    padding:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        20px;

    align-items:
        center;

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

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


.dashboard-food-current-card h4,
.dashboard-food-current-unselected strong {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        27px;

    font-weight:
        normal;
}


.dashboard-food-current-card > strong {
    color:
        var(--cream);

    font-size:
        30px;

    font-weight:
        normal;
}


.dashboard-food-current-card > strong small {
    color:
        rgba(241, 221, 194, .48);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        normal;
}


.dashboard-food-current-restrictions {
    grid-column:
        1 / -1;

    padding-top:
        15px;

    border-top:
        1px solid rgba(241, 221, 194, .12);
}


.dashboard-food-current-restrictions span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.dashboard-food-current-restrictions p {
    margin-top:
        7px;
}


.dashboard-food-plan-grid {
    margin-top:
        24px;

    display:
        grid;

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

    gap:
        12px;
}


.dashboard-food-plan-card {
    min-height:
        315px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid rgba(241, 221, 194, .14);

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


.dashboard-food-plan-card.current {
    border-color:
        rgba(223, 160, 108, .6);
}


.dashboard-food-plan-card.selected {
    background:
        rgba(180, 71, 36, .12);

    border-color:
        var(--rust);
}


.dashboard-food-plan-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.8px;
}


.dashboard-food-plan-card h4 {
    margin-top:
        18px;

    color:
        var(--cream);

    font-size:
        26px;

    font-weight:
        normal;
}


.dashboard-food-plan-card > strong {
    display:
        block;

    margin-top:
        10px;

    color:
        var(--cream);

    font-size:
        29px;

    font-weight:
        normal;
}


.dashboard-food-plan-card > strong small {
    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        normal;
}


.dashboard-food-plan-card > p {
    margin:
        14px 0 20px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.7;

    flex:
        1;
}


.dashboard-food-plan-card button,
.dashboard-food-alert button,
.dashboard-food-change-preview > button {
    min-height:
        44px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

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

    background:
        transparent;

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.dashboard-food-plan-card.selected button,
.dashboard-food-change-preview > button {
    background:
        var(--rust);
}


.dashboard-food-plan-card button:disabled,
.dashboard-food-change-preview > button:disabled {
    opacity:
        .42;

    cursor:
        not-allowed;
}


.dashboard-food-restrictions {
    margin-top:
        20px;

    padding:
        22px;

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

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


.dashboard-food-restrictions-heading h4 {
    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        27px;

    font-weight:
        normal;
}


.dashboard-food-restriction-options {
    margin-top:
        18px;

    display:
        grid;

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

    gap:
        8px;
}


.dashboard-food-restriction-options label {
    min-height:
        47px;

    padding:
        11px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid rgba(241, 221, 194, .13);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    cursor:
        pointer;
}


.dashboard-food-custom-restriction {
    margin-top:
        14px;

    display:
        grid;

    gap:
        8px;
}


.dashboard-food-custom-restriction textarea {
    min-height:
        90px;

    padding:
        12px;

    resize:
        vertical;

    border:
        1px solid rgba(241, 221, 194, .14);

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

    color:
        var(--cream);
}


.dashboard-food-change-preview {
    margin-top:
        20px;

    padding:
        20px;

    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    gap:
        20px;

    align-items:
        center;

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

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


.dashboard-food-change-preview h4 {
    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        24px;

    font-weight:
        normal;
}


.dashboard-food-change-preview p,
.dashboard-food-change-preview small {
    display:
        block;

    margin-top:
        6px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.dashboard-food-change-value span {
    color:
        rgba(241, 221, 194, .44);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.3px;
}


.dashboard-food-change-value strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--cream);

    font-size:
        26px;

    font-weight:
        normal;
}


/* ========================================
   CONSEQUÊNCIA / NOTIFICAÇÃO
======================================== */

.dashboard-food-alerts {
    margin-top:
        22px;
}


.dashboard-food-alert {
    padding:
        22px;

    border:
        1px solid rgba(180, 71, 36, .5);

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


.dashboard-food-alert.completed {
    border-color:
        rgba(241, 221, 194, .15);

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


.dashboard-food-alert-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        14px;
}


.dashboard-food-alert-top small {
    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.dashboard-food-alert h4 {
    margin-top:
        12px;

    color:
        var(--cream);

    font-size:
        31px;

    font-weight:
        normal;
}


.dashboard-food-alert-tasks {
    margin-top:
        18px;

    display:
        grid;

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

    gap:
        8px;
}


.dashboard-food-alert-tasks > div {
    min-height:
        60px;

    padding:
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid rgba(241, 221, 194, .13);
}


.dashboard-food-alert-tasks > div.done {
    border-color:
        rgba(223, 160, 108, .35);
}


.dashboard-food-alert-tasks > div > span {
    color:
        var(--sand);

    font-size:
        18px;
}


.dashboard-food-alert-tasks p {
    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.5;
}


.dashboard-food-alert button {
    margin-top:
        16px;
}


/* ========================================
   ADMIN — ALIMENTAÇÃO
======================================== */

.admin-weekly-food-settings {
    display:
        none !important;
}


.admin-food-system-info {
    margin:
        25px 0;

    padding:
        22px;

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

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


.admin-food-system-heading > span,
.admin-food-consequences-heading span,
.admin-food-plan-status > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-food-system-heading h4,
.admin-food-consequences-heading h4 {
    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        28px;

    font-weight:
        normal;
}


.admin-food-system-heading p,
.admin-food-consequences-heading p,
.admin-food-plan-status p {
    margin-top:
        8px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.7;
}


.admin-food-plan-legend {
    margin-top:
        18px;

    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-food-plan-legend article {
    min-height:
        88px;

    padding:
        14px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

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


.admin-food-plan-legend span {
    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.2px;
}


.admin-food-plan-legend strong {
    color:
        var(--cream);

    font-size:
        22px;

    font-weight:
        normal;
}


.admin-food-plan-legend small {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;
}


.admin-food-plan-status {
    margin-top:
        16px;

    padding:
        15px;

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

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


.admin-food-plan-status > strong {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--cream);

    font-size:
        28px;

    font-weight:
        normal;
}


.admin-food-consequences {
    margin-top:
        26px;

    padding-top:
        22px;

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


.admin-food-consequences-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        24px;
}


.admin-food-consequences-heading > p {
    max-width:
        430px;
}


.admin-food-consequence-grid {
    margin-top:
        18px;

    display:
        grid;

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

    gap:
        12px;
}


.admin-food-consequence-card {
    padding:
        20px;

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

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


.admin-food-consequence-card.pending {
    border-color:
        rgba(180, 71, 36, .45);
}


.admin-food-consequence-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.3px;
}


.admin-food-consequence-card h5 {
    margin-top:
        14px;

    color:
        var(--cream);

    font-size:
        26px;

    font-weight:
        normal;
}


.admin-food-consequence-card > p {
    margin-top:
        8px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.admin-food-consequence-tasks {
    margin-top:
        16px;

    display:
        grid;

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

    gap:
        7px;
}


.admin-food-consequence-tasks > div {
    padding:
        11px;

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


.admin-food-consequence-tasks > div.done {
    border-color:
        rgba(223, 160, 108, .3);
}


.admin-food-consequence-tasks span {
    color:
        rgba(241, 221, 194, .42);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        1px;
}


.admin-food-consequence-tasks strong {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--cream);

    font-size:
        13px;

    font-weight:
        normal;
}


.admin-food-consequence-card > small {
    display:
        block;

    margin-top:
        13px;

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;
}


.admin-food-consequence-card > button {
    width:
        100%;

    min-height:
        42px;

    margin-top:
        15px;

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.admin-food-consequence-empty {
    margin-top:
        18px;

    padding:
        30px;

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

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

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    text-align:
        center;
}


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

@media (max-width: 980px) {

    .dashboard-food-plan-grid,
    .dashboard-food-restriction-options,
    .admin-food-plan-legend {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-food-change-preview {
        grid-template-columns:
            1fr auto;
    }


    .dashboard-food-change-preview > button {
        grid-column:
            1 / -1;
    }


    .admin-food-consequence-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 680px) {

    .dashboard-food-system {
        padding:
            22px;
    }


    .dashboard-food-heading,
    .admin-food-consequences-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .dashboard-food-plan-grid,
    .dashboard-food-restriction-options,
    .dashboard-food-change-preview,
    .dashboard-food-alert-tasks,
    .admin-food-plan-legend,
    .admin-food-consequence-tasks {
        grid-template-columns:
            1fr;
    }


    .dashboard-food-current-card,
    .dashboard-food-current-unselected {
        grid-template-columns:
            1fr;
    }

}