/* /MainPage/Modules/HealthAndWellBeing/Food/Entrys/Entrys.css */

.EntrysContentArea {
    display: grid;
    gap: 16px;
    color: var(--textColor);

    & input,
    & button {
        min-height: 38px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 8px;
        color: var(--textColor);
        background: var(--mainPageButtonBgColor);
    }

    & input {
        padding: 0 10px;
    }

    & button {
        padding: 0 12px;
        cursor: pointer;

        &:hover,
        &.Active {
            background: var(--activeElementBgColor);
        }

        &:disabled {
            cursor: wait;
            opacity: 0.6;
        }
    }

    & .EntrysPanel {
        min-width: 0;
        padding: 16px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 8px;
        background: var(--mainPageCardBgColor);

        & .EntrysPanelHeader {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 14px;

            & > div {
                & h4,
                & p {
                    margin: 0;
                }

                & h4 {
                    font-size: 20px;
                }

                & p {
                    margin-top: 4px;
                    opacity: 0.72;
                }
            }

            & .EntrysSearchLabel {
                display: flex;
                flex-direction: column;
                gap: 5px;
                font-size: 0.82rem;
            }

            & .EntrysRangeButtons {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-end;
                gap: 8px;
            }
        }

        &.EntrysSavedFoods {
            & .EntrysSavedFoodList {
                display: grid;
                gap: 16px;

                & .EntrysFoodCategory {
                    & h5 { margin: 0 0 8px; font-size: 1rem; }
                    & .EntrysFoodCategoryList {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                        gap: 10px;
                    }
                }

                & .EntrysFoodButton {
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;
                    gap: 10px;
                    min-height: 58px;
                    text-align: left;

                    & > span {
                        & > span,
                        & small {
                            display: block;
                        }

                        & small {
                            margin-top: 3px;
                            opacity: 0.7;
                        }
                    }

                    & strong {
                        font-size: 1.25rem;
                    }
                }

                & .EntrysFoodListEmpty {
                    margin: 0;
                    padding: 24px 10px;
                    text-align: center;
                    opacity: 0.7;
                }
            }

            & .EntrysCustomFoodForm {
                display: grid;
                gap: 12px;
                margin-top: 18px;
                padding-top: 18px;
                border-top: 1px solid var(--mainPageBorderColor);

                & h5, & p { margin: 0; }
                & h5 { font-size: 1rem; }
                & .EntrysCustomFoodHeading p, & .EntrysCustomFoodHint { margin-top: 4px; opacity: 0.72; }
                & .EntrysCustomFoodControls {
                    display: grid;
                    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(210px, 1fr) auto;
                    align-items: end;
                    gap: 10px;

                    & label { display: grid; gap: 5px; min-width: 0; font-size: 0.82rem; }
                    & input[type="datetime-local"] { width: 100%; box-sizing: border-box; }
                    & .EntrysCustomFoodCombobox {
                        position: relative;
                        display: block;
                        & > input { width: 100%; box-sizing: border-box; }
                        & .EntrysCustomFoodOptions {
                            position: absolute;
                            top: calc(100% + 4px);
                            left: 0;
                            right: 0;
                            z-index: 20;
                            max-height: 280px;
                            overflow-y: auto;
                            padding: 5px;
                            border: 1px solid var(--mainPageBorderColor);
                            border-radius: 8px;
                            background: var(--mainPageCardBgColor);
                            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
                            &[hidden] { display: none; }
                            & .EntrysCustomFoodOption {
                                display: grid;
                                width: 100%;
                                height: auto;
                                min-height: 48px;
                                padding: 7px 9px;
                                border: 0;
                                text-align: left;
                                & strong, & small { display: block; }
                                & small { margin-top: 2px; opacity: 0.7; }
                                &:focus { outline: 2px solid var(--mainPageBorderColor); }
                            }
                            & .EntrysCustomFoodOptionEmpty {
                                display: block;
                                padding: 12px 9px;
                                opacity: 0.7;
                            }
                        }
                    }
                    & .EntrysQuantityInputWrap {
                        display: grid;
                        grid-template-columns: 1fr auto;
                        align-items: center;
                        gap: 8px;
                        & input { width: 100%; box-sizing: border-box; }
                    }
                }
                & .EntrysCustomFoodMacros,
                & .EntrysCustomFoodNutrients {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
                    gap: 8px;
                    & > div {
                        display: grid;
                        gap: 2px;
                        padding: 9px 10px;
                        border: 1px solid var(--mainPageBorderColor);
                        border-radius: 8px;
                        background: var(--mainPageBodyBgColor);
                        & span { font-size: 0.75rem; opacity: 0.7; }
                    }
                }
                & .EntrysCustomFoodMacros {
                    & label {
                        display: grid;
                        gap: 5px;
                        font-size: 0.75rem;
                        opacity: 0.85;
                        & input {
                            width: 100%;
                            box-sizing: border-box;
                            opacity: 1;
                            font-weight: 700;
                        }
                    }
                }
            }
        }

        &.EntrysHistory {
            & .EntrysCustomRange {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-end;
                gap: 8px;
                margin: 0 0 14px;

                &[hidden] {
                    display: none;
                }

                & label {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    font-size: 0.82rem;
                }
            }

            & .EntrysStats {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
                gap: 10px;
                margin-bottom: 14px;

                & > div {
                    min-width: 0;
                    padding: 10px 12px;
                    border: 1px solid var(--mainPageBorderColor);
                    border-radius: 8px;
                    background: var(--mainPageBodyBgColor);

                    & strong,
                    & > span {
                        display: block;
                    }

                    & strong {
                        font-size: 1.25rem;

                        & span {
                            display: inline;
                        }
                    }

                    & > span {
                        margin-top: 2px;
                        font-size: 0.78rem;
                        opacity: 0.7;
                    }
                }
            }

            & .EntrysTableWrap {
                position: relative;
                max-height: 620px;
                overflow: auto;
                border: 1px solid var(--mainPageBorderColor);
                border-radius: 8px;

                & .EntrysTable {
                    width: max-content;
                    min-width: 100%;
                    border-collapse: collapse;

                    & th,
                    & td {
                        padding: 10px;
                        border-bottom: 1px solid var(--mainPageBorderColor);
                        text-align: left;
                        white-space: nowrap;
                    }

                    & thead {
                        & th {
                            position: sticky;
                            top: 0;
                            z-index: 2;
                            background: var(--mainPageCardBgColor);
                            font-size: 0.78rem;
                        }
                    }

                    & tfoot {
                        position: sticky;
                        bottom: 0;
                        z-index: 2;
                        font-weight: 700;
                        background-color: var(--mainPageBodyBgColor);

                        & th,
                        & td {
                            border-top: 2px solid var(--mainPageBorderColor);
                            border-bottom: 0;
                        }

                    }

                    & tbody {
                        & tr {
                            &.EntrysScheduledRow {
                                --entry-meal-color: 72, 139, 202;
                                background: rgba(var(--entry-meal-color), 0.11);
                                box-shadow: inset 4px 0 rgba(var(--entry-meal-color), 0.72);

                                &:hover {
                                    background: rgba(var(--entry-meal-color), 0.18);
                                }
                            }

                            &.EntrysScheduledRowBreakfast { --entry-meal-color: 224, 166, 55; }
                            &.EntrysScheduledRowMorningSnack { --entry-meal-color: 72, 173, 116; }
                            &.EntrysScheduledRowLunch { --entry-meal-color: 64, 145, 210; }
                            &.EntrysScheduledRowAfternoonSnack { --entry-meal-color: 168, 111, 214; }
                            &.EntrysScheduledRowDinner { --entry-meal-color: 205, 92, 128; }

                            &:hover {
                                background: var(--mainPageBodyBgColor);
                            }

                            & td {
                                & .EntrysDeleteButton {
                                    min-height: 32px;
                                    border-color: #b43b3b;
                                    color: #d96a6a;
                                }
                            }
                        }
                    }
                }

                & .EntrysEmptyState {
                    margin: 0;
                    padding: 24px 10px;
                    text-align: center;
                    opacity: 0.7;
                }
            }

            & .EntrysExportActions {
                display: flex;
                justify-content: flex-end;
                margin-top: 12px;

                & button {
                    min-height: 38px;
                }
            }
        }

        &.EntrysJournal {
            .EntrysJournalComposer,
            .EntrysJournalReplyForm {
                display: grid;
                gap: 8px;

                textarea {
                    width: 100%;
                    box-sizing: border-box;
                    resize: vertical;
                    background-color: var(--mainPageCardBgColor);
                    color: var(--textColor);
                    border: 1px solid var(--mainPageBorderColor);
                    border-radius: 10px;
                }

                button {
                    justify-self: end;
                }
            }

            .EntrysJournalList {
                display: grid;
                gap: 12px;
                margin-top: 16px;
            }

            .EntrysJournalNote {
                padding: 14px;
                border: 1px solid var(--mainPageBorderColor);
                border-radius: 10px;
                background: var(--mainPageBodyBgColor);
            }

            .EntrysJournalNoteHeader {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px;
            }

            .EntrysJournalDeleteButton {
                min-height: 30px;
                color: #e07171;
                white-space: nowrap;
            }

            .EntrysJournalMessage {
                display: grid;
                gap: 7px;
            }

            .EntrysJournalEditButton {
                min-height: 28px;
                justify-self: start;
                font-size: .78rem;
            }

            .EntrysJournalEditForm {
                display: flex;
                flex-wrap: wrap;
                gap: 7px;
            }

            .EntrysJournalEditForm textarea {
                box-sizing: border-box;
                width: 100%;
                padding: 9px;
                border: 1px solid var(--mainPageBorderColor);
                border-radius: 8px;
                color: var(--textColor);
                background: var(--mainPageCardBgColor);
                font: inherit;
                resize: vertical;
            }

            .EntrysJournalMeta {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 8px;
                font-size: 0.78rem;
                opacity: 0.72;
            }

            .EntrysJournalContent,
            .EntrysJournalReplyContent {
                margin: 0;
                white-space: pre-wrap;
                overflow-wrap: anywhere;
            }

            .EntrysJournalReactions {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin: 12px 0;

                button.Active {
                    border-color: #488bca;
                    background: rgba(72, 139, 202, 0.16);
                }
            }

            .EntrysJournalReplies {
                display: grid;
                gap: 8px;
                margin: 12px 0;
                padding-left: 12px;
                border-left: 2px solid var(--mainPageBorderColor);
            }

            .EntrysJournalReply {
                padding: 9px;
                border-radius: 8px;
                background: var(--mainPageCardBgColor);
            }

            .EntrysJournalEmpty {
                margin: 0;
                padding: 18px;
                text-align: center;
                opacity: 0.7;
            }

            .EntrysJournalNoteInput{
                background-color: var(--mainPageCardBgColor);
                color: var(--textColor);
                border: 1px solid var(--mainPageBorderColor);
                border-radius: 10px;
            }
        }
    }
}

.EntrysAddStatus {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    box-sizing: border-box;
    max-width: min(380px, calc(100vw - 32px));
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #22c55e;
    border-radius: 10px;
    color: var(--textColor);
    background: var(--mainPageCardBgColor);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 600px) {
    .EntrysAddStatus {
        right: 12px;
        bottom: 12px;
        max-width: min(280px, calc(100vw - 24px));
        padding: 9px 12px;
        font-size: 0.82rem;
    }
}

/* Smartphones */
@media (max-width: 767px) {
    .EntrysContentArea {
        gap: 10px;

        & .EntrysPanel {
            padding: 12px;

            & .EntrysPanelHeader {
                flex-direction: column;

                & .EntrysSearchLabel {
                    width: 100%;

                    & input {
                        width: 100%;
                        box-sizing: border-box;
                    }
                }

                & .EntrysRangeButtons {
                    width: 100%;

                    & button {
                        flex: 1 1 calc(50% - 8px);
                    }
                }
            }

            &.EntrysHistory {
                & .EntrysStats {
                    grid-template-columns: 1fr 1fr;

                    & > div {
                        min-width: 0;
                    }
                }
            }

            &.EntrysSavedFoods .EntrysCustomFoodForm .EntrysCustomFoodControls {
                grid-template-columns: 1fr;
                & button { width: 100%; }
            }

        }
    }
}

@media (max-width: 520px) {
    .EntrysContentArea .EntrysPanel.EntrysHistory .EntrysStats {
        grid-template-columns: 1fr;
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .EntrysContentArea {
        & .EntrysPanel {
            & .EntrysPanelHeader {
                flex-wrap: wrap;
            }
        }
    }
}

/* Petits laptops */
@media (min-width: 1025px) and (max-width: 1919px) { }

/* Desktop */
@media (min-width: 1920px) { }