body {
    background-color: whitesmoke;
    font-family: "Noto Sans", sans-serif;
}

/*title*/
.title {
    display: flex;
    justify-content: center;
    color: black;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

/*the containers*/
.card,
section.card {
    background-color: #fff;
    border: 1.5px solid black;
    border-radius: 15px;
    box-shadow: -2px 3px 0.5px rgba(0, 0, 0, 0.25);
}

/*buttons*/
.button,
button,
#dietCreate-btn,
#diet-save-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: 1.5px solid black;
    background-color: #8babfb;
    color: black;
    box-shadow: -2px 3px 0.5px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    font-family: "Noto Sans", sans-serif;
    font-weight: 550;
    transition:
        transform 120ms ease,
        background-color 120ms ease;
}

.button:hover,
button:hover {
    cursor: pointer;
    background-color: #414080;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/*secondary buttons*/
.btn-secondary,
#diet-cancel-btn,
#diet-reset-filter {
    background-color: #f0f0f0 !important;
}

/*edit and delete button colors*/
.edit-btn {
    background-color: #8babfb !important;
}

.delete-btn,
.embDel {
    background-color: rgb(255, 205, 205) !important;
}

/*table styling*/
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background-color: #eee;
    border: 1.5px solid black;
    font-weight: 700;
    text-transform: uppercase;
}

.table td {
    border: 1.5px solid black;
    text-align: center;
}

/*inputs*/
input,
select,
textarea {
    border: 1.5px solid black;
    border-radius: 15px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif;
}

/*grid helpers*/
/* log date and meal */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* filter */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* total nutrients */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/*utility classes*/
.task-btns {
    display: flex;
    justify-content: center;
}

/* add entry bg */
.task-modal {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    z-index: 1050;
}

.task-modal-content {
    background: #fff;
    border: 1.5px solid black;
    border-radius: 15px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin: 0 auto 14px;
}

.task-modal-content h2 {
    font-weight: 800;
    text-transform: uppercase;
}

.task-input-area label {
    display: block;
    font-weight: 600;
}

.safe-row input[type="checkbox"] {
    cursor: pointer;
    width: auto;
    transform: scale(1.1);
}

.wrap-actions {
    flex-wrap: wrap;
}

.danger {
    background-color: rgb(255, 220, 220) !important;
}

.danger:hover {
    background-color: rgb(255, 200, 200) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.task-btns a.button.btn-secondary {
    background-color: #ffdbdb !important;
    color: black !important;
    border: 1.5px solid black !important;
}

.task-btns a.button.btn-secondary:hover {
    background-color: #ffc8c8 !important;
    transform: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.table-wrap {
    overflow-x: auto;
}


@media screen and (max-width: 600px) {
    .title {
        margin: 10vw 0 2.5vw;
    }

    .card {
        margin: 5vw;
        padding: 5vw;
    }

    .grid-4 {
        display: flex;
        flex-wrap: wrap;
        font-size: 15px;
    }

    .nutrition-total {
        width: 100%;
    }

    /*center labels and inputs*/
    label {
        display: block;
        padding: 0 5vw 5vw;
    }

    input:not([type="checkbox"]),
    select,
    textarea {
        padding: 0.5vw 2.5vw;
    }

    #diet-modal-title {
        margin-left: 5vw;
    }

    #diet-filter-title,
    #diet-tools-title {
        margin-left: 5vw;
    }

    .task-modal-content {
        margin: 5vw;
        max-width: 350px;
    }

    .task-btns button {
        margin: 0 2vw;
    }

    .task-btns {
        display: flex;
        flex-wrap: wrap;
        margin: 0 5vw 5vw;
    }

    #dietCreate-btn {
        width: 100%;
        padding: 1vw 2vw;
        margin-bottom: 5vw;
    }

    #dietFilter-open-btn,
    #dietTools-open-btn {
        width: 30%;
        margin: 1vw;
    }

    .btn-secondary {
        font-size: 15px;
        width: 30%;
        margin: 1vw;
    }

    /*stacked table logic*/
    .table,
    .table thead,
    .table tbody,
    .table th,
    .table td,
    .table tr {
        display: block;
    }

    .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1.5px solid black;
        border-radius: 15px;
        padding: 1vw;
    }

    .table td {
        border: none;
        position: relative;
        text-align: left !important;
        min-height: 20px;
        font-size: 12px;
        padding: 2.5vw 1vw 1vw 15vw;
    }

    /*full width main data*/
    .table td:nth-of-type(1),
    .table td:nth-of-type(3),
    .table td:nth-of-type(8),
    .table td:last-child {
        grid-column: span 2;
        border-top: 1px solid #f0f0f0;
    }

    /*mobile actions*/
    .table td:last-child {
        display: flex;
        justify-content: center;
        background: #fafafa;
        gap: 1vw;
        padding: 1vw;
    }

    /* ??? */
    .table td:last-child button {
        padding: 10px 25px;
    }

    .table td:before {
        position: absolute;
        left: 5px;
        width: 35px;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 12px;
        color: black;
    }

    /*inject cell labels*/
    .table td:nth-of-type(1):before {
        content: "date";
    }

    .table td:nth-of-type(2):before {
        content: "meal";
    }

    .table td:nth-of-type(3):before {
        content: "food";
    }

    .table td:nth-of-type(4):before {
        content: "cal";
    }

    .table td:nth-of-type(5):before {
        content: "p";
    }

    .table td:nth-of-type(6):before {
        content: "c";
    }

    .table td:nth-of-type(7):before {
        content: "f";
    }

    .table td:nth-of-type(8):before {
        content: "note";
    }

    .table td:nth-of-type(9):before {
        content: "safe";
    }

}

@media screen and (min-width: 768px) {
    .title {
        margin-top: 5vw;
    }

    /*the containers*/
    .card,
    section.card {
        padding: 1vw 2vw 2vw;
        margin: 0 5vw 1vw;
    }

    /*buttons*/
    .button,
    button,
    #dietCreate-btn,
    #diet-save-btn {
        padding: 0.5vw 1vw;
    }

    .table th {
        padding: 0.5vw 0;
    }

    input,
    select,
    textarea {
        padding: 0.5vw 1vw;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        gap: 1vw;
    }

    .task-btns {
        gap: 1vw;
        margin: 0 5vw 1vw;
    }

    .task-modal-content {
        padding: 2.5vw;
    }

    .task-input-area input,
    .task-input-area select,
    .task-input-area textarea {
        margin: 0.5vw 0 1vw;
    }
}