body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background: #f4f8fb;
    color: #2b2b2b;
}

.account-balk {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: #2b5f8f;
    color: white;
    font-size: 0.9rem;
}

.account-balk-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    justify-content: flex-end;
    width: 100%;
}

.account-balk a,
.account-balk .link-knop {
    color: white;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.account-balk a:hover,
.account-balk .link-knop:hover {
    text-decoration: underline;
}

.hamburger-knop {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}

@media (max-width: 700px) {
    .hamburger-knop {
        display: block;
    }

    .account-balk-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #2b5f8f;
        padding: 0.5rem 1.5rem 1rem;
        z-index: 50;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .account-balk-nav.open {
        display: flex;
    }

    .account-balk-nav a,
    .account-balk-nav .link-knop {
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .account-balk-nav a:last-child,
    .account-balk-nav .link-knop:last-child {
        border-bottom: none;
    }
}

/* "Meer"-menu: op de computer een uitklapmenu rechtsboven */
.menu-meer {
    position: relative;
}

.menu-meer-lijst {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    min-width: 220px;
    flex-direction: column;
    background: #2b5f8f;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0;
    z-index: 60;
}

.menu-meer.open .menu-meer-lijst {
    display: flex;
}

.account-balk .menu-meer-lijst a,
.account-balk .menu-meer-lijst .link-knop {
    padding: 0.55rem 1rem;
    text-align: left;
}

.account-balk .menu-meer-lijst a:hover,
.account-balk .menu-meer-lijst .link-knop:hover {
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}

.menu-meer-achtergrond {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Telefoon: in het hamburgermenu gewoon onderaan de lijst, zonder uitklapknop */
@media (max-width: 700px) {
    .menu-meer-knop {
        display: none;
    }

    .menu-meer-lijst,
    .menu-meer.open .menu-meer-lijst {
        display: flex;
        position: static;
        min-width: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }

    .account-balk .menu-meer-lijst a,
    .account-balk .menu-meer-lijst .link-knop {
        padding: 0.6rem 0;
    }
}

.merk-balk {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1rem;
}

.merk-balk > a {
    font-weight: 700;
    font-size: 1.3rem;
    color: #2b5f8f;
    text-decoration: none;
}

.merk-balk > a:hover {
    text-decoration: underline;
}

.ingelogd-als {
    font-size: 0.85rem;
    color: #666;
}

@media (max-width: 600px) {
    .merk-balk {
        padding: 0.75rem 1rem 0;
    }
}

.pagina {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
}

h1 {
    color: #2b5f8f;
}

.gebruiker-kiezer {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    position: relative;
}

.gebruiker-kiezer-knop {
    padding: 0.5rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
    cursor: pointer;
    min-width: 16rem;
    max-width: 100%;
    text-align: left;
}

.gebruiker-kiezer-knop strong {
    color: #2b5f8f;
}

.gebruiker-lijst {
    position: absolute;
    z-index: 10;
    margin-top: 0.3rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    min-width: 18rem;
    max-width: min(28rem, 90vw);
    max-height: 16rem;
    overflow-y: auto;
}

.gebruiker-lijst label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    cursor: pointer;
}

.gebruiker-snelkeuze {
    display: flex;
    gap: 0.8rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid #eee;
}

.gebruiker-snelkeuze .link-knop {
    background: none;
    border: none;
    color: #2b5f8f;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0;
}

.gebruiker-naam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zoekbalk {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.filter-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: -1rem 0 1.5rem 0;
}

.filter-balk select,
.zoekbalk-klein {
    padding: 0.5rem 0.7rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
}

.link-knop-filter {
    background: none;
    border: none;
    color: #2b5f8f;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}

.verborgen-melding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.8rem;
    background: #fff6d6;
    border: 1px solid #e8cf7a;
    color: #6b5200;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.verborgen-melding button {
    background: white;
    border: 1px solid #d9b94f;
    color: #6b5200;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.verborgen-melding button:hover {
    background: #fdf0c2;
}

/* Filters + telling. Groot scherm: filters bovenaan, telling eronder. Telefoon (zie
   hieronder): eerst de knop "Filters" met de telling, het paneel klapt pas open na aantikken. */
.filters-blok {
    display: flex;
    flex-direction: column;
}

.filter-paneel {
    order: 1;
}

.filter-kop {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.filters-knop {
    display: none;
    background: white;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: #333;
}

.filters-knop.actief {
    border-color: #2b5f8f;
    background: #e3edf6;
    color: #2b5f8f;
    font-weight: 600;
}

.resultaat-telling {
    font-size: 0.85rem;
    color: #666;
}

@media (max-width: 700px) {
    .zoekbalk {
        margin-bottom: 0.75rem;
    }

    .filter-kop {
        order: 1;
        margin-bottom: 0.75rem;
    }

    .filter-paneel {
        order: 2;
        display: none;
    }

    .filter-paneel.open {
        display: block;
    }

    .filters-knop {
        display: inline-block;
    }

    .filter-balk {
        margin: 0 0 0.5rem 0;
    }

    .filter-balk select,
    .filter-balk .zoekbalk-klein {
        flex: 1 1 45%;
        min-width: 0;
    }
}

.recepten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.recept-kaart {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recept-kaart:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recept-kaart img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.recept-kaart .geen-foto {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: #e3edf6;
}

.recept-info {
    padding: 0.75rem 1rem;
}

.recept-info h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
}

/* Telefoon: compacte lijst met kleine foto links en naam rechts — ca. 6 recepten per
   scherm i.p.v. 1 à 2. (Staat bewust ná de gewone kaartregels, anders winnen die.) */
@media (max-width: 700px) {
    .recepten-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .recept-kaart {
        display: flex;
        align-items: center;
    }

    .recept-kaart img,
    .recept-kaart .geen-foto {
        width: 84px;
        height: 84px;
        flex-shrink: 0;
    }

    .recept-kaart .geen-foto {
        font-size: 1.8rem;
    }

    .recept-info {
        padding: 0.5rem 0.75rem;
        min-width: 0;
    }

    .recept-info h3 {
        font-size: 0.98rem;
    }
}

.tag {
    display: inline-block;
    background: #e3edf6;
    color: #2b5f8f;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-right: 0.35rem;
}

.tag-basis {
    background: #f3ecdf;
    color: #7a5a2a;
}

.opbrengst-velden {
    max-width: 420px;
    margin-top: 0.5rem;
}

.tag-dieet {
    background: #e4f2e4;
    color: #2e6b2e;
}

/* Diëten als aan/uit-knopjes (bewerkscherm + filter in het overzicht) */
.dieet-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.8rem 0;
}

.dieet-knoppen-label {
    font-size: 0.85rem;
    color: #666;
    margin-right: 0.2rem;
}

.dieet-knop {
    border: 1px solid #cfd8cf;
    background: white;
    color: #444;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.dieet-knop:hover {
    background: #f1f7f1;
}

.dieet-knop.aan {
    background: #e4f2e4;
    border-color: #5a9a5a;
    color: #2e6b2e;
    font-weight: 600;
}

.dieet-veld {
    margin: 1rem 0 0.5rem 0;
}

.dieet-veld .veld-titel {
    display: block;
}

.terug-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #2b5f8f;
    text-decoration: none;
}

.terug-link:hover {
    text-decoration: underline;
}

.pagina-actiebalk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.print-knop {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}

.print-knop:hover {
    background: #e3edf6;
    color: #2b5f8f;
}

.print-knop.actief {
    background: #2b5f8f;
    color: white;
    border-color: #2b5f8f;
}

.actiebalk-rechts {
    display: flex;
    gap: 0.6rem;
}

.recept-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.recept-hero {
    width: 320px;
    max-width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.beschrijving {
    font-size: 1.05rem;
    color: #555;
}

.metadata {
    margin-top: 0.5rem;
    /* Op de telefoon lopen de labels over twee of meer regels: met flex + gap komt er ook ruimte tussen de regels. */
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.metadata .tag {
    margin-right: 0;
}

.eigenaar-tag {
    color: #888;
    font-size: 0.55em;
    font-weight: 400;
    margin-left: 0.4rem;
}

.boodschappen-toevoeg-knop {
    display: inline-block;
    margin: 0 0 0.35rem 0;
    background: #fdead9;
    color: #b35900;
    border: none;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.boodschappen-toevoeg-knop:hover {
    background: #fbd9b8;
}

.boodschappen-toevoeg-knop.op-lijst {
    background: #e6f4ea;
    color: #2f7a3d;
}

.boodschappen-toevoeg-knop.op-lijst:hover {
    background: #d3ecd9;
}

.kopieer-knop {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: #2b5f8f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.kopieer-knop:disabled {
    opacity: 0.6;
    cursor: default;
}

.kopieer-knop:hover:not(:disabled) {
    background: #1e4665;
}

.login-hint {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #666;
}

.foutmelding {
    color: #b32121;
    font-size: 0.9rem;
}

.uitgebreide-beschrijving {
    white-space: pre-line;
    margin-bottom: 1.5rem;
}

.recept-inhoud {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
}

.recept-inhoud h2 {
    color: #2b5f8f;
    border-bottom: 2px solid #e3edf6;
    padding-bottom: 0.25rem;
}

.ingredienten ul {
    list-style: none;
    padding: 0;
}

.ingredienten li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #f2f2f2;
}

.ingredienten .hoeveelheid {
    display: inline-block;
    min-width: 6rem;
    font-weight: 600;
    color: #2b5f8f;
}

.ingredienten .note {
    color: #888;
    font-size: 0.9rem;
}

.bereiding ol {
    padding-left: 1.2rem;
}

.bereiding li {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.stap-tijd {
    color: #888;
    font-size: 0.9rem;
}

.tips {
    margin-top: 2rem;
}

@media (max-width: 700px) {
    .recept-inhoud {
        grid-template-columns: 1fr;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Bereken-balk (tijd/kcal) en hoofdbestanddelen */

.bereken-balk {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.hoofdbestanddelen {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

/* Eigenaar-acties op de detailpagina */

.recept-acties {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.recept-acties .kopieer-knop {
    margin-top: 0;
}

.eigenaar-acties {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.personen-kiezer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 0.75rem;
    color: #555;
}

.personen-kiezer button:not(.link-knop) {
    width: 2rem;
    height: 2rem;
    border: 1px solid #c8d6e5;
    border-radius: 50%;
    background: white;
    color: #2b5f8f;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.personen-kiezer button:disabled {
    opacity: 0.4;
    cursor: default;
}

.personen-kiezer strong {
    min-width: 1.5rem;
    text-align: center;
    color: #2b5f8f;
    font-size: 1.1rem;
}

/* Alleen op de telefoon (daar staan ingrediënten en bereiding onder elkaar): een balk die
   bovenin blijft plakken, zodat je tijdens het koken snel heen en weer kunt springen. */
.spring-balk {
    display: none;
}

@media (max-width: 700px) {
    .spring-balk {
        display: flex;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 15;
        background: #f4f8fb;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
    }

    .spring-balk button {
        flex: 1;
        padding: 0.55rem;
        border: 1px solid #c8d6e5;
        border-radius: 999px;
        background: white;
        color: #2b5f8f;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .recept-hero {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
}

.favoriet-knop {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #b3891f;
}

.favoriet-knop:hover {
    background: #fdf6e3;
}

.lijst-knop {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #b35900;
}

.lijst-knop:hover {
    background: #fdead9;
}

.lijst-knop.op-lijst {
    background: #e6f4ea;
    border-color: #8cc79a;
    color: #2f7a3d;
    font-weight: 600;
}

.scherm-aan-knop {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}

.scherm-aan-knop:hover {
    background: #f5f5f5;
}

.scherm-aan-melding {
    align-self: center;
    margin: 0;
}

.scherm-aan-knop.actief {
    background: #fff6d6;
    border-color: #e0b84a;
    color: #7a5a00;
    font-weight: 600;
}

a.kopieer-knop {
    display: inline-block;
    text-decoration: none;
}

.verwijder-recept-knop {
    padding: 0.5rem 1rem;
    background: white;
    color: #b32121;
    border: 1px solid #b32121;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.verwijder-recept-knop:hover:not(:disabled) {
    background: #fdecec;
}

.info-knop {
    padding: 0.5rem 1rem;
    background: white;
    color: #2b5f8f;
    border: 1px solid #2b5f8f;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.info-knop:hover:not(:disabled) {
    background: #e3edf6;
}

.bevestig-verwijderen {
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bevestig-verwijderen .link-knop {
    background: none;
    border: none;
    color: #2b5f8f;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

/* Recepteditor */

.bewerk-sectie {
    background: white;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.bewerk-sectie h2 {
    margin-top: 0;
    color: #2b5f8f;
}

.tekst-invoer {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
}

.klein-invoer {
    width: 6rem;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
}

.veld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.veld-grid select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.veld-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.snel-toevoeg-veld {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.snel-toevoeg-veld .tekst-invoer {
    width: auto;
    flex: 1 1 8rem;
}

.snel-toevoeg-veld .link-knop {
    background: none;
    border: none;
    color: #2b5f8f;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0;
    white-space: nowrap;
}

.snel-toevoeg-veld .link-knop:disabled {
    opacity: 0.6;
    cursor: default;
}

.foutmelding-klein {
    color: #b32121;
    font-size: 0.8rem;
}

.onderdeel-blok {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.onderdeel-kop {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.onderdeel-kop .tekst-invoer {
    flex: 1;
    font-weight: 600;
}

/* Telefoon: naast ▲ ▼ en "Onderdeel verwijderen" bleef er voor het naamveld bijna niets over (een
   paar pixels breed, niet in te typen). Daarom het naamveld op een eigen regel, knoppen eronder. */
@media (max-width: 600px) {
    .onderdeel-blok {
        padding: 0.75rem;
    }

    .onderdeel-kop {
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: flex-end;
    }

    .onderdeel-kop .tekst-invoer {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Bewust GEEN overflow-x:auto op brede schermen: een element met overflow-x op iets anders dan
   "visible" krijgt van de browser ook automatisch overflow-y:auto (CSS-spec-gedrag), waardoor de
   losstaande zoek-resultaten-lijst (.zoek-resultaten, position:absolute) hier verborgen/afgeknipt
   werd totdat je in deze tabel zelf omlaag scrolde. Alleen op smalle schermen, waar de tabel echt
   breder is dan het scherm, is horizontaal scrollen de moeite van dat compromis waard. */
.tabel-scroll {
    overflow: visible;
}

@media (max-width: 700px) {
    .tabel-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ingrediëntenregels op de telefoon als kaartjes i.p.v. een brede tabel: dan hoeft er niet
       horizontaal geschoven te worden, en wordt de zoek-resultatenlijst niet meer afgeknipt
       (overflow-x:auto knipte die af, waardoor zoeken alleen in liggende stand werkte). */
    .tabel-scroll.ingredienten-scroll {
        overflow: visible;
    }

    .ingredienten-tabel,
    .ingredienten-tabel tbody {
        display: block;
    }

    .ingredienten-tabel tr {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 0.4rem;
        padding: 0.6rem;
        margin-bottom: 0.6rem;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        background: #fafcfe;
    }

    .ingredienten-tabel td {
        display: block;
        padding: 0;
        min-width: 0;
    }

    .ingredienten-tabel td.zoeker-cel,
    .ingredienten-tabel td:nth-child(4) {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .ingredienten-tabel td.volgorde-cel {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        gap: 0.4rem;
    }

    .ingredienten-tabel .klein-invoer,
    .ingredienten-tabel select {
        width: 100%;
        box-sizing: border-box;
    }

    .ingredienten-tabel .zoek-resultaten {
        max-width: 100%;
    }
}

.regel-tabel {
    width: 100%;
    border-collapse: collapse;
}

.regel-tabel td {
    padding: 0.25rem;
    vertical-align: middle;
}

.regel-tabel select {
    padding: 0.4rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.stap-regel {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.stap-regel .tekst-invoer {
    flex: 1;
}

.tip-tekst {
    resize: vertical;
    min-height: 3rem;
}

/* Tekstvakken die meegroeien met wat je typt (notitie bij een ingrediënt, tips). Nieuwe browsers
   doen dat zelf via field-sizing; voor de rest (o.a. Safari op iPhone/iPad) doet app.js het. */
textarea.auto-groei {
    field-sizing: content;
    overflow: hidden;
    resize: none;
    box-sizing: border-box;
}

textarea.notitie-veld {
    min-height: 2.5rem;
    line-height: 1.35;
    font-family: inherit;
    font-size: inherit;
}

.stap-regel label {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}

.stap-nummer {
    font-weight: 600;
    color: #2b5f8f;
    padding-top: 0.5rem;
}

.stap-tekst-rij {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 260px;
    min-width: 0;
}

.stap-tekst-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.stap-tekst-wrapper .tekst-invoer {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding-right: 2rem;
    min-height: 3.2rem;
}

@media (min-width: 601px) {
    .stap-tekst-wrapper .tekst-invoer {
        min-height: 5.5rem;
    }
}

.uitvergroot-knop {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #2b5f8f;
    cursor: pointer;
    padding: 0;
}

.uitvergroot-knop:hover {
    background: #e3edf6;
    border-color: #2b5f8f;
}

.stap-acties {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stap-acties label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.stap-acties .klein-invoer {
    width: 2.6rem;
}

.tijd-invoer-groep {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.tijd-eenheid-select {
    width: 5.5rem;
    padding: 0.3rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.8rem;
}

.modal-groot-tekstvak {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 220px;
}

@media (max-width: 600px) {
    .stap-tekst-rij {
        flex-basis: 100%;
    }
}

.toevoeg-knop {
    background: #e3edf6;
    color: #2b5f8f;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.toevoeg-knop:hover {
    background: #d3e4f0;
}

.verwijder-knop {
    background: none;
    border: none;
    color: #b32121;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
}

.volgorde-knop {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #2b5f8f;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    line-height: 1;
}

.volgorde-knop:disabled {
    color: #ccc;
    border-color: #eee;
    cursor: default;
}

.volgorde-knop:hover:not(:disabled) {
    background: #e3edf6;
}

.volgorde-cel {
    white-space: nowrap;
}

.combobox-kiezer {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
    margin-bottom: 0.5rem;
}

.gekozen-lijst {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gekozen-lijst li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #f4f8fb;
    border: 1px solid #eee;
    border-radius: 6px;
}

/* Korte melding onderin na "+ Boodschappen" in het receptenoverzicht */
.lijst-melding {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 2rem));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #2f7a3d;
    color: white;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 90;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lijst-melding span {
    flex: 1;
}

.lijst-melding a {
    color: white;
    font-weight: 600;
    white-space: nowrap;
}

.lijst-melding button {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

/* Boodschappenlijstje: per recept naam, personenkiezer en ✕ op één regel (op de telefoon
   schuift de kiezer zo nodig onder de naam). */
.lijst-recepten li {
    flex-wrap: wrap;
}

.lijst-recept-naam {
    flex: 1 1 12rem;
    min-width: 0;
}

.lijst-basisrecepten {
    display: block;
    font-size: 0.8rem;
    color: #777;
    margin-top: 0.15rem;
}

.personen-kiezer.lijst-personen {
    margin: 0;
    font-size: 0.9rem;
}

.personen-kiezer.lijst-personen button:not(.link-knop) {
    width: 1.8rem;
    height: 1.8rem;
}

.opslaan-balk {
    position: sticky;
    bottom: 0;
    background: #f4f8fb;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.opslaan-balk .kopieer-knop,
.opslaan-balk .verwijder-recept-knop,
.opslaan-balk .info-knop {
    margin-top: 0;
    min-width: 180px;
    height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Foto-uploader (recepten/ingrediënten/gereedschap) */

.foto-uploader {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.foto-uploader .foto-preview {
    max-width: 260px;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.foto-uploader .geen-foto-klein {
    width: 260px;
    height: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3edf6;
    border-radius: 8px;
    color: #999;
    font-size: 0.85rem;
}

.foto-uploader-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 0.25rem;
    max-width: 100%;
    min-width: 0;
}

.foto-uploader-controls input[type="file"] {
    max-width: 100%;
}

.foto-uploader .upload-status {
    font-size: 0.85rem;
    color: #666;
}

/* Zoekbare ingrediënt-/hoofdbestanddeel-kiezer */

.zoeker {
    position: relative;
}

.zoeker-cel {
    min-width: 220px;
}

.zoek-regel {
    align-items: flex-start;
}

.zoek-resultaten {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 5;
    width: max-content;
    min-width: 100%;
    max-width: 320px;
}

.zoek-resultaten button {
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.zoek-resultaten button:hover {
    background: #e3edf6;
}

.geen-resultaten {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

.geen-resultaten a {
    color: #2b5f8f;
}

.sectie-hint {
    font-size: 0.8rem;
    color: #888;
    font-weight: normal;
}

/* Stamtabellen / ingrediënten / gereedschap beheer */

.stamtabel-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.stamtabel-link {
    display: block;
    background: white;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: #2b5f8f;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.stamtabel-link:hover {
    background: #e3edf6;
}

.stamtabel-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    align-items: start;
}

.stamtabel-lijst,
.stamtabel-form {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Ingrediënten-beheer heeft geen los "form"-paneel meer naast de lijst (dat is nu een
   popup, zie IngredientenBeheer.razor) — de lijst zelf blijft daardoor prettig leesbaar
   i.p.v. de volle 1100px van .pagina te vullen. */
.stamtabel-lijst-volle-breedte {
    max-width: 500px;
    margin-top: 1rem;
}

.stamtabel-items {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    max-height: 400px;
    overflow-y: auto;
}

.stamtabel-items li {
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}

.stamtabel-items li:hover {
    background: #e3edf6;
}

.stamtabel-items li.actief {
    background: #2b5f8f;
    color: white;
}

@media (max-width: 700px) {
    .stamtabel-body {
        grid-template-columns: 1fr;
    }
}

.beheer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.beheer-lijst-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.beheer-lijst-item.actief {
    outline: 2px solid #2b5f8f;
}

.beheer-lijst-item button {
    background: none;
    border: none;
    color: #2b5f8f;
    cursor: pointer;
    font-weight: 600;
}

/* Printen van een los recept — laat alleen de recept-inhoud over, geen navigatie/knoppen. */

@page {
    size: A4;
    margin: 2cm 1.5cm;
}

/* Print-only inhoud (bv. de compacte metaregels en de foto/ingrediënten-tabel hieronder):
   onzichtbaar op het scherm, alleen getoond op papier — zie de tegenhanger in @media print. */
.alleen-print {
    display: none;
}

@media print {
    .account-balk,
    .merk-balk,
    .pagina-actiebalk,
    .eigenaar-acties,
    .recept-acties,
    .spring-balk,
    .personen-kiezer,
    .login-hint,
    .foutmelding,
    .print-knop,
    .kopieer-knop,
    .verwijder-recept-knop,
    .favoriet-knop,
    .scherm-aan-knop,
    .scherm-aan-melding,
    .lijst-knop,
    .bevestig-verwijderen,
    #blazor-error-ui {
        display: none !important;
    }

    .alleen-print {
        display: block;
    }

    body {
        background: white;
        color: black;
    }

    .pagina {
        max-width: 100%;
        padding: 0;
    }

    /* Grid/flex-kolommen breken onvoorspelbaar over paginagrenzen (Chrome's printmotor
       fragmenteert ze niet netjes) — dat gaf eerder de grote lege witruimtes en door elkaar
       gehusselde ingrediënten/bereiding. Op papier daarom een layout die dichter bij de oude
       bureaubladapp zit: een echte <table> voor foto+ingrediënten (die splitst browsers wél
       netjes over paginagrenzen) en verder gewoon natuurlijke leesvolgorde. */
    .recept-header {
        display: block;
    }

    .recept-header .recept-hero,
    .eigenaar-tag,
    .metadata,
    .bereken-balk,
    .ingredienten h2,
    .ingredienten h3,
    .ingredienten ul {
        display: none;
    }

    .tag {
        background: none;
        border: 1px solid #999;
        color: black;
    }

    .print-meta {
        font-size: 0.85rem;
        color: #333;
        margin: 0 0 0.25rem 0;
    }

    .print-meta:last-of-type {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #ccc;
    }

    .print-foto-ingr-tabel {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-bottom: 1rem;
    }

    .print-foto-cel,
    .print-ingr-cel {
        vertical-align: top;
        padding: 0;
    }

    .print-foto-cel {
        width: 38%;
        padding-right: 1.5rem;
    }

    .print-foto-cel img {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        border-radius: 6px;
    }

    .print-ingr-cel h2 {
        margin-top: 0;
    }

    .print-ingr-cel ul {
        list-style: none;
        padding: 0;
        margin: 0 0 0.75rem 0;
    }

    .print-ingr-cel li {
        padding: 0.15rem 0;
        break-inside: avoid;
    }

    .print-note {
        color: #666;
        font-size: 0.85em;
        font-style: italic;
    }

    .print-gereedschap {
        margin: 0 0 1rem 0;
    }

    /* Een meegeprint gekoppeld basisrecept (bv. "Soezendeeg" binnen "Bossche Bollen") begint
       op een eigen pagina, net als de oude bureaubladapp deed. */
    .print-extra-recept {
        break-before: page;
    }

    .recept-inhoud {
        display: block;
    }

    .bereiding li {
        break-inside: avoid;
    }

    /* "Stap N:" zoals de oude app, i.p.v. de kale nummering van een <ol> op het scherm. */
    .bereiding ol {
        list-style: none;
        counter-reset: stap;
        padding-left: 0;
    }

    .bereiding ol li {
        counter-increment: stap;
    }

    .bereiding ol li::before {
        content: "Stap " counter(stap) ":  ";
        font-weight: 600;
    }

    h2,
    h3 {
        break-after: avoid;
    }

    a {
        color: black;
        text-decoration: none;
    }

    .zoeker,
    .snel-toevoeg-veld,
    .opslaan-balk {
        display: none !important;
    }

    .gekozen-lijst .verwijder-knop,
    .boodschappen-lijst .verwijder-knop {
        display: none !important;
    }
}

.beheer-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 0.5rem;
}

/* Boodschappenlijstje */

.boodschappen-lijst {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.boodschappen-lijst li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.boodschappen-lijst label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
}

.boodschappen-lijst .soort-kop {
    font-weight: 600;
    color: #2b5f8f;
    margin-top: 0.75rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e3edf6;
    justify-content: flex-start;
}

.boodschappen-lijst label.afgevinkt {
    color: #999;
    text-decoration: line-through;
}

/* Gereedschap/ingrediënten: foto tonen bij hover, in het receptoverzicht en de recepteditor */

.hover-foto {
    position: relative;
    cursor: default;
    border-bottom: 1px dotted #aaa;
}

.hover-foto-img {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 20;
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    margin-bottom: 4px;
}

/* Basisrecept in de ingrediëntenlijst: klikbaar, opent dat recept */
.basisrecept-link {
    color: #2b5f8f;
    text-decoration: none;
    border-bottom: 1px solid #b9cde0;
}

.basisrecept-link:hover {
    border-bottom-color: #2b5f8f;
}

/* Alleen bij een echte muis: op een touchscreen blijft :hover na een tik "plakken",
   waardoor de foto niet meer weg te krijgen is. Daar werkt het via tikken (.open). */
@media (hover: hover) {
    .hover-foto:hover .hover-foto-img {
        display: block;
    }
}

.hover-foto.open .hover-foto-img {
    display: block;
}

.hover-foto.heeft-foto {
    cursor: pointer;
}

/* Op telefoon/tablet een cameraatje achter namen met een foto, zodat je weet dat je kunt tikken. */
@media (hover: none) {
    .hover-foto.heeft-foto::after {
        content: " 📷";
        font-size: 0.75em;
    }
}

/* Popup: bv. "gebruikt in recepten" bij een ingrediënt */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-venster {
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: min(420px, calc(100vw - 2rem));
    width: 90%;
    max-height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.modal-venster h3 {
    margin-top: 0;
}

/* Grote pop-ups (bv. ingrediënt bewerken): breder en hoger dan de kleine meldingen, zodat je
   op computer en iPad het hele formulier ziet. Moet ná .modal-venster staan, anders wint die. */
.modal-venster.modal-venster-groot {
    max-width: min(960px, calc(100vw - 2rem));
    max-height: 92vh;
}

/* Ingrediënt-pop-up: op computer/iPad foto links en naam/specificatie/omschrijving ernaast;
   op de telefoon gewoon onder elkaar. */
.ingredient-kop {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 0.5rem;
}

.invoer-met-eenheid {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ingredient-kop-velden label {
    display: block;
    margin-bottom: 0.8rem;
}

@media (min-width: 760px) {
    .ingredient-kop {
        grid-template-columns: 270px 1fr;
    }

    .ingredient-kop .foto-uploader {
        flex-direction: column;
        gap: 0.6rem;
    }
}

/* Knoppenbalk in een pop-up: knoppen naast elkaar en niet breder dan nodig, als witte
   strook onderin het venster (i.p.v. drie brede knoppen die het formulier bedekken). */
.modal-venster .opslaan-balk {
    background: white;
    border-top: 1px solid #e5e5e5;
    margin: 1rem -1.5rem -1.5rem;
    padding: 0.75rem 1.5rem;
    /* Plakt tegen de echte onderrand (de binnenmarge van het venster telt bij "sticky" mee,
       anders schuift de balk 1,5rem over het formulier heen). */
    bottom: -1.5rem;
}

.modal-venster .opslaan-balk .kopieer-knop,
.modal-venster .opslaan-balk .verwijder-recept-knop,
.modal-venster .opslaan-balk .info-knop {
    min-width: 0;
}

/* Telefoon: de knoppen passen daar niet naast elkaar en zouden als vaste balk half het
   formulier bedekken — dan gewoon onderaan het formulier, na het scrollen. */
@media (max-width: 600px) {
    .modal-venster .opslaan-balk {
        position: static;
    }
}

.modal-sluit-knop {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #666;
}

.modal-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modal-lijst li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.modal-lijst li:last-child {
    border-bottom: none;
}

/* ── Identity-pagina's (inloggen, wachtwoord wijzigen, 2FA, etc.) — dit zijn de
   standaard gegenereerde Blazor Identity-componenten die Bootstrap-achtige
   klassen gebruiken. Deze app bevat geen Bootstrap, dus die klassen krijgen hier
   hun eigen stijl passend bij de rest van de app. ── */

.account-pagina {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.account-kaart {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.account-kaart h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.account-kaart h2,
.account-kaart h3 {
    font-size: 1.1rem;
    color: #2b5f8f;
}

.account-kaart hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 1rem 0;
}

.account-kaart .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.account-kaart [class^="col-md-"],
.account-kaart [class*=" col-md-"] {
    flex: 1 1 100%;
    min-width: 0;
}

.account-kaart .form-floating {
    margin-bottom: 1rem;
}

.account-kaart .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
}

.account-kaart .form-label {
    display: block;
    font-size: 0.9rem;
    color: #444;
    margin: 0 0 0.3rem 0;
}

.account-kaart .checkbox {
    margin-bottom: 1rem;
}

.account-kaart .checkbox .form-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.account-kaart .btn {
    display: inline-block;
    background: #2b5f8f;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.account-kaart .btn:hover {
    background: #234b73;
}

.account-kaart .btn-lg {
    padding: 0.75rem 1.2rem;
    font-size: 1rem;
}

.account-kaart .btn-danger {
    background: #b32121;
}

.account-kaart .btn-danger:hover {
    background: #8f1a1a;
}

.account-kaart .btn-link {
    background: none;
    color: #2b5f8f;
    text-decoration: underline;
    padding: 0;
}

.account-kaart .w-100 {
    width: 100%;
    box-sizing: border-box;
}

.account-kaart .text-danger {
    color: #b32121;
    font-size: 0.85rem;
}

.account-kaart .alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.account-kaart .alert-warning {
    background: #fdf3d6;
    color: #7a5c00;
}

.account-kaart .alert-info {
    background: #e3edf6;
    color: #2b5f8f;
}

.account-kaart .alert-danger {
    background: #fbe6e6;
    color: #8f1a1a;
}

.account-kaart .nav-pills {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.account-kaart .nav-link {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    color: #2b5f8f;
    text-decoration: none;
    font-size: 0.85rem;
    background: #f4f8fb;
}

.account-kaart .nav-link:hover {
    background: #e3edf6;
}

.account-kaart table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.account-kaart table td,
.account-kaart table th {
    padding: 0.4rem;
    border-bottom: 1px solid #eee;
    text-align: left;
}

/* Dashboard (startscherm) */

.dashboard-groet {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #2b5f8f, #3d7ab0);
    color: white;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.dashboard-groet h2 {
    margin: 0 0 0.2rem 0;
    font-size: 1.3rem;
}

.dashboard-groet p {
    margin: 0;
    color: #e3edf6;
    font-size: 0.9rem;
}

.dashboard-groet-tijd {
    text-align: right;
}

.dashboard-klok {
    font-size: 1.5rem;
    font-weight: 700;
}

.dashboard-datum {
    font-size: 0.85rem;
    color: #e3edf6;
    text-transform: capitalize;
}

.dashboard-knoppen-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.dashboard-knoppen-rij > * {
    flex: 1 1 260px;
}

.dashboard-overzicht-knop {
    display: block;
    background: #2b5f8f;
    border: 1px solid #2b5f8f;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
}

.dashboard-overzicht-knop:hover {
    background: #1e4665;
}

.dashboard-verras-knop {
    display: block;
    background: white;
    border: 1px dashed #2b5f8f;
    border-radius: 10px;
    color: #2b5f8f;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: center;
}

.dashboard-verras-knop:hover {
    background: #e3edf6;
}

.dashboard-sectiekop {
    margin: 0 0 0.6rem 0;
    color: #2b5f8f;
}

.dashboard-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dashboard-kaart h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: #2b5f8f;
}

.dashboard-mini-kaart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-mini-kaart:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-mini-kaart img,
.dashboard-mini-kaart .geen-foto {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: #e3edf6;
}

.dashboard-mini-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    min-width: 0;
}

.dashboard-mini-info strong {
    font-size: 0.95rem;
}

.dashboard-mini-info .sectie-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mini-link {
    font-size: 0.8rem;
    color: #2b5f8f;
    font-weight: 600;
}

.dashboard-grid-klein {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.dashboard-klein-kaart {
    display: block;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    text-align: center;
    font-size: 0.8rem;
}

.dashboard-klein-kaart img,
.dashboard-klein-kaart .geen-foto {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: #e3edf6;
}

.dashboard-klein-kaart span {
    display: block;
    padding: 0.4rem;
}

@media (max-width: 500px) {
    .dashboard-groet {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-groet-tijd {
        text-align: left;
    }
}

/* "Zet op startscherm"-uitleg */

.installatie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 1000;
}

.installatie-kaart {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 1.5rem 1.75rem 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.installatie-kaart h2 {
    margin: 0 0 0.3rem 0;
    color: #2b5f8f;
}

.installatie-kaart h3 {
    margin: 1.25rem 0 0.5rem 0;
    color: #2b5f8f;
    font-size: 1rem;
}

.installatie-kaart ol {
    margin: 0;
    padding-left: 1.3rem;
}

.installatie-kaart li {
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.installatie-sluiten {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
    padding: 0.25rem 0.5rem;
}

.installatie-sluiten:hover {
    color: #b32121;
}


/* ── Hulp ─────────────────────────────────────────────────────────────── */

.hulp-pagina {
    max-width: 800px;
}

.hulp-groep {
    font-size: 1.1rem;
    color: #2b5f8f;
    margin: 1.5rem 0 0.5rem 0;
}

.hulp-onderwerp {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.5rem;
}

/* De titel van een onderwerp (een <summary>: klapt zonder JavaScript open en dicht) */
.hulp-titel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    list-style: none;
    font-weight: 600;
    color: #2b2b2b;
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.hulp-titel::-webkit-details-marker {
    display: none;
}

.hulp-titel::after {
    content: "▾";
    color: #888;
}

.hulp-onderwerp[open] > .hulp-titel::after {
    content: "▴";
}

.hulp-titel:hover,
.hulp-onderwerp[open] > .hulp-titel {
    color: #2b5f8f;
}

.hulp-tekst {
    padding: 0 1rem 0.9rem 1rem;
    line-height: 1.5;
}

.hulp-tekst p {
    margin: 0 0 0.6rem 0;
}

.hulp-tekst p:last-child {
    margin-bottom: 0;
}

/* In de pop-up van een ❓-knopje staat de tekst al binnen de witte rand van het venster. */
.hulp-popup .hulp-tekst {
    padding: 0;
}

.hulp-meer {
    margin: 1rem 0 0 0;
    font-size: 0.9rem;
}

/* Het ronde ❓-knopje naast iets wat uitleg nodig heeft */
.hulp-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    margin-left: 0.35rem;
    border-radius: 50%;
    border: 1px solid #2b5f8f;
    background: white;
    color: #2b5f8f;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

.hulp-knop:hover {
    background: #e3edf6;
}

.hulp-knop-voorbeeld {
    cursor: default;
    margin: 0 0.1rem;
}

.welkomst-kaart p {
    line-height: 1.5;
}

.welkomst-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.welkomst-knoppen .kopieer-knop {
    margin-top: 0;
}

a.info-knop {
    display: inline-block;
    text-decoration: none;
}

@media print {
    .hulp-knop {
        display: none !important;
    }
}

.opslaan-boven {
    margin-top: 0;
}

/* Beheer: back-up terugzetten */
.backup-tabel td {
    vertical-align: middle;
}

.backup-tabel tr.gekozen td {
    background: #fff6d6;
}

.terugzet-bevestiging {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e0a0a0;
    background: #fdf2f2;
    border-radius: 8px;
    max-width: 640px;
}

.terugzet-gelukt {
    color: #2f7a3d;
    font-weight: 600;
}

/* Verplichte velden en "lijkt op"-waarschuwing */
td.veld-fout select,
td.veld-fout .stamtabel-dropdown select {
    border: 2px solid #c0392b;
    background: #fdf2f2;
}

.lijkt-op-melding {
    background: #fff6d6;
    border: 1px solid #e8cf7a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
}

.lijkt-op-melding p {
    margin: 0 0 0.6rem 0;
}

/* Recepten-check */
.controle-pagina {
    max-width: 900px;
}

.controle-blok {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.6rem;
    padding: 0 1rem;
}

.controle-blok > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.controle-blok > summary::-webkit-details-marker {
    display: none;
}

.controle-aantal {
    font-size: 0.85rem;
    background: #e3edf6;
    color: #2b5f8f;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.controle-blok.belangrijk .controle-aantal {
    background: #fdead9;
    color: #b35900;
}

.controle-blok.in-orde .controle-aantal {
    background: #e6f4ea;
    color: #2f7a3d;
}

.controle-lijst {
    margin: 0 0 1rem 0;
    padding-left: 1.2rem;
    line-height: 1.6;
}

/* Recept delen: melding op de computer */
.deel-melding {
    background: #e6f4ea;
    border: 1px solid #8cc79a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
}

.deel-melding p {
    margin: 0 0 0.5rem 0;
}

.deel-melding textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

@media print {
    .deel-melding {
        display: none !important;
    }
}

.deel-keuzes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.deel-keuzes .kopieer-knop,
.deel-keuzes .info-knop {
    margin-top: 0;
    padding: 0.7rem 1rem;
    font-size: 1rem;
}

.zip-terugzetten {
    margin-top: 1.25rem;
    border-top: 1px solid #e5e5e5;
    padding-top: 0.75rem;
}

.zip-terugzetten > summary {
    cursor: pointer;
    font-weight: 600;
    color: #7a3b3b;
}

.controle-recepten {
    margin: 0.15rem 0 0.4rem 0;
    font-size: 0.9rem;
}

.controle-recepten > summary {
    cursor: pointer;
    color: #2b5f8f;
}

.controle-recepten ul {
    margin: 0.2rem 0 0 0;
    padding-left: 1.2rem;
}

/* ── Afvinken tijdens het koken ── */
.afvink-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    padding: 0;
    border: 2px solid #9fb7cf;
    border-radius: 50%;
    background: white;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

.afvink-knop.aan {
    background: #2f7a3d;
    border-color: #2f7a3d;
}

li.afgevinkt {
    color: #999;
    text-decoration: line-through;
}

li.afgevinkt .hoeveelheid,
li.afgevinkt .stap-tijd {
    color: #aaa;
}

.alles-aan-knop {
    display: block;
    margin: -0.25rem 0 0.5rem 0;
    font-size: 0.85rem;
}

.proef-melding {
    background: #f3ecdf;
    border: 1px dashed #c9a86a;
    color: #6b5020;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.proef-optie {
    display: block;
    margin: 0.5rem 0;
}

/* ── Kookwekker ── */
.wekker-knoppen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.wekker-knop {
    border: 1px solid #c8d6e5;
    background: white;
    color: #2b5f8f;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
}

.wekker-knop:hover {
    background: #e3edf6;
}

.wekker-vak {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(360px, calc(100vw - 2rem));
}

.wekker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #2b5f8f;
    color: white;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
}

.wekker-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wekker-tijd {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wekker button {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.wekker.gepauzeerd {
    background: #6c7a89;
}

.wekker.klaar {
    background: #c0392b;
    animation: wekker-knipper 0.8s ease-in-out infinite alternate;
}

@keyframes wekker-knipper {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

@media print {
    .afvink-knop,
    .wekker-knoppen,
    .wekker-vak,
    .alles-aan-knop,
    .proef-melding {
        display: none !important;
    }

    li.afgevinkt {
        color: black;
        text-decoration: none;
    }
}

.kopie-melding {
    background: #eef4fa;
    border: 1px solid #c8d6e5;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.andere-eenheid-kiezer {
    margin-top: 0.5rem;
    max-width: 16rem;
}

.opzoek-link {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ── Kookboek maken ── */
.kookboek-hoofdstukken {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    gap: 0.6rem;
}

.kookboek-hoofdstukken li.uit {
    opacity: 0.55;
}

.kookboek-zin {
    display: block;
    margin: 0.25rem 0 0 1.6rem;
    width: calc(100% - 1.6rem);
    font-size: 0.9rem;
    font-style: italic;
}

.kookboek-knoppen {
    display: flex;
    gap: 1rem;
}

.kookboek-maken {
    flex-wrap: wrap;
}

.kookboek-maken .sectie-hint {
    flex-basis: 100%;
}

/* ── Menu's ── */
.menu-kaartjes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.menu-kaartje {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    background: white;
    border: 1px solid #e5d6c1;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.menu-kaartje:hover {
    border-color: #9c7a5b;
}

.menu-kaartje-gerechten {
    font-size: 0.85rem;
    color: #6b5a48;
}

.menu-gerechten {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.menu-gerechten li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee3d3;
}

.menu-gerecht-naam {
    flex: 1;
    min-width: 12rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-gerecht-naam img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
}

.menu-gang-kiezer {
    min-width: 8.5rem;
}

.menu-gerecht-knoppen {
    display: inline-flex;
    gap: 0.25rem;
}

.personen-kiezer strong.afwijkend {
    color: #a5402d;
}

.menu-toevoegen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.menu-toevoegen .zoeker {
    flex: 1;
    min-width: 14rem;
}

.menu-acties {
    flex-wrap: wrap;
}

.menu-melding {
    flex-basis: 100%;
}

/* ── Mijn aantekeningen ── */
.aantekeningen {
    margin-top: 1.5rem;
}

.aantekeningen textarea {
    width: 100%;
}

@media print {
    .aantekeningen.leeg,
    .aantekeningen .niet-printen {
        display: none !important;
    }
}

.aantekening-print {
    white-space: pre-line;
    font-style: italic;
}

/* ── Recept insturen ── */
.inzending-bedankt {
    background: #edf6ee;
    border: 1px solid #b9dcbf;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.inzending-bestanden,
.inzending-lijst {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.4rem;
}

.inzending-lijst li {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee3d3;
}

.inzending-status {
    font-size: 0.85rem;
    font-weight: 600;
}

.inzending-status.verwerkt { color: #2f7a3d; }
.inzending-status.afgewezen { color: #8a8a85; }
.inzending-status.nieuw { color: #a5402d; }

.bewerk-sectie.inzending.nieuw {
    border-left: 4px solid #a5402d;
}

.inzending-tekst {
    white-space: pre-wrap;
    font-family: inherit;
    background: #faf6ee;
    padding: 0.75rem;
    border-radius: 8px;
    max-height: 30rem;
    overflow: auto;
}

.functie-gebruikers {
    margin: 0.25rem 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.sleep-vak {
    position: relative;
    border: 2px dashed #c9b28f;
    border-radius: 10px;
    background: #fbf7f0;
    padding: 1.25rem 1rem;
    margin: 0.35rem 0 0.75rem;
    text-align: center;
    cursor: pointer;
}

.sleep-vak:hover,
.sleep-vak:focus-within {
    border-color: #8b5a2b;
    background: #f6eee1;
}

.sleep-vak.bezig {
    border-style: solid;
}

/* Het echte bestandsveld ligt onzichtbaar over het hele vak: klikken én slepen werken dan. */
.sleep-vak input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ===== Wat kan ik maken? (proef) ===== */
.wkim-invoer {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0;
}

.wkim-invoer .zoekbalk,
.wkim-invoer .zoekbalk-klein {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.wkim-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.5rem 0;
}

.wkim-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f3e7d3;
    border: 1px solid #c9b28f;
    color: #5a3e1b;
    border-radius: 999px;
    padding: 0.25rem 0.4rem 0.25rem 0.8rem;
    font-size: 0.9rem;
}

.wkim-chip.vast {
    background: #eef3ee;
    border-color: #b9cdb9;
    color: #2e4b2e;
}

.wkim-chip.onbekend {
    background: #fff4e0;
    border-color: #e0a84a;
}

.wkim-chip button {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.8rem;
    padding: 0 0.2rem;
}

.wkim-altijd {
    margin: 0.5rem 0 0.75rem;
}

.wkim-altijd > .link-knop {
    text-align: left;
}

.wkim-altijd-paneel {
    border: 1px solid #e3d6c2;
    background: #fbf7f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 0.4rem;
}

.wkim-suggestie-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.4rem;
}

.wkim-leeg {
    color: #777;
    margin: 1.5rem 0;
}

.wkim-status {
    font-size: 0.88rem;
    color: #8a5a1a;
    margin-bottom: 0.25rem;
}

.wkim-status.compleet {
    color: #2e6b2e;
    font-weight: 600;
}

.wkim-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: #777;
}

.wkim-meer {
    margin: 1rem 0;
}

@media (max-width: 600px) {
    .wkim-invoer .kopieer-knop {
        flex: 0 0 auto;
    }
}

/* Receptenoverzicht: blok onder de lijst dat de volgende reeks laat laden (oneindig scrollen). */
.meer-laden {
    text-align: center;
    padding: 1.5rem 0 2rem;
}

/* Menupagina: keuze van de menukaartstijl naast de knoppen. */
.menukaart-stijl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.menukaart-stijl select {
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
}

/* Receptenoverzicht, "Van: meerdere kiezen…": vinkjes per persoon onder de filters. */
.van-meerdere {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.van-meerdere label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}