#tracy-bs {
    z-index: 20000000;
}

:root {
    --hugo-dailymenu-day-1: #D10C0C;
    --hugo-dailymenu-day-2: #E67E22;
    --hugo-dailymenu-day-3: #F1C40F;
    --hugo-dailymenu-day-4: #28B463;
    --hugo-dailymenu-day-5: #2E86C1;
}

.hugo--daily-menu .meal-plan {
    width: 100%;
    margin-top: 2rem;
}

.hugo--daily-menu h1,
.hugo--daily-menu h2 {
    text-align: center;
    margin-bottom: 0;
}

.hugo--daily-menu h2 {
    font-size: 1rem;
}

/* Mobilní zobrazení - karty */
@media (max-width: 991px) {
    .hugo--daily-menu .meal-plan {
        display: block;
        padding: 0;
    }

    .hugo--daily-menu .day {
        margin-bottom: 1rem;
    }

    .hugo--daily-menu .day:last-child {
        border-bottom: none;
    }

    .hugo--daily-menu .day h3 {
        font-size: 1.2em;
        padding-bottom: 5px;
        border-bottom: 2px solid transparent;
    }

    .hugo--daily-menu .day:nth-child(1) h3 { border-color: var(--hugo-dailymenu-day-1); color: var(--hugo-dailymenu-day-1); }
    .hugo--daily-menu .day:nth-child(2) h3 { border-color: var(--hugo-dailymenu-day-2); color: var(--hugo-dailymenu-day-2); }
    .hugo--daily-menu .day:nth-child(3) h3 { border-color: var(--hugo-dailymenu-day-3); color: var(--hugo-dailymenu-day-3); }
    .hugo--daily-menu .day:nth-child(4) h3 { border-color: var(--hugo-dailymenu-day-4); color: var(--hugo-dailymenu-day-4); }
    .hugo--daily-menu .day:nth-child(5) h3 { border-color: var(--hugo-dailymenu-day-5); color: var(--hugo-dailymenu-day-5); }

    .hugo--daily-menu .meal {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: .5rem;
        position: relative;
    }

    .hugo--daily-menu .meal:last-child {
        margin-bottom: 0;
    }

    .hugo--daily-menu .meal::before {
        content: attr(data-meal);
        display: block;
        font-weight: bold;
        text-transform: capitalize;
        margin-bottom: 5px;
        font-size: 0.9em;
    }

    .hugo--daily-menu .allergens {
        color: #dc3545;
        font-size: 0.85em;
        font-style: italic;
    }

    .hugo--daily-menu .label {
        display: none;
    }
}

/* Desktop zobrazení - tabulka */
@media (min-width: 992px) {
    .hugo--daily-menu .meal-plan {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto repeat(4, 1fr);
        gap: 5px;
    }

    /* Každý den bude hlavička v prvním řádku */
    .hugo--daily-menu .day {
        display: contents; /* Rozpustí .day kontejner */
    }

    .hugo--daily-menu .day h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-row: 1;
        content: attr(data-short);
        padding: 1rem;
        color: white;
        font-size: 0;
        margin: 0;
        border: 1px solid #3333;
        border-right-width: 0;
    }

    .hugo--daily-menu .day h3:before {
        content: attr(data-short);
        font-size: 4rem;
    }

    .hugo--daily-menu .day:nth-child(1) h3 { background-color: var(--hugo-dailymenu-day-1); }
    .hugo--daily-menu .day:nth-child(2) h3 { background-color: var(--hugo-dailymenu-day-2); }
    .hugo--daily-menu .day:nth-child(3) h3 { background-color: var(--hugo-dailymenu-day-3); }
    .hugo--daily-menu .day:nth-child(4) h3 { background-color: var(--hugo-dailymenu-day-4); }
    .hugo--daily-menu .day:nth-child(5) h3 { background-color: var(--hugo-dailymenu-day-5); }

    .hugo--daily-menu .day:nth-child(1) .meal { border-color: var(--hugo-dailymenu-day-1); }
    .hugo--daily-menu .day:nth-child(2) .meal { border-color: var(--hugo-dailymenu-day-2); }
    .hugo--daily-menu .day:nth-child(3) .meal { border-color: var(--hugo-dailymenu-day-3); }
    .hugo--daily-menu .day:nth-child(4) .meal { border-color: var(--hugo-dailymenu-day-4); }
    .hugo--daily-menu .day:nth-child(5) .meal { border-color: var(--hugo-dailymenu-day-5); }

    .hugo--daily-menu .day .meal,
    .hugo--daily-menu .day h3 {
        border-radius: 10px;
    }

    .hugo--daily-menu .day.today .meal,
    .hugo--daily-menu .day.today h3 {
        /*box-shadow: 0px 0px 3px #888;*/
    }

    .hugo--daily-menu .meal {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid transparent;
        padding: .5rem;
        position: relative;
    }

    .hugo--daily-menu .meal::before {
        content: attr(data-meal);
        font-size: .75rem;
        opacity: .7;
        margin-bottom: 1rem;
    }

    .hugo--daily-menu .meal .allergens {
        color: #dc3545;
        font-size: 0.8rem;
        font-style: italic;
        margin-top: 4px;
    }
}