/* Supplier portal - ERP-platform look (Stefaan, 2026-10-02: "zorg dat de layout ERP Platform getrouw is, niet zoals
   vroeger"). The first version had its own consumer face (gradient hero, 16px shadowed cards, one fat card per line);
   this one speaks the platform's language, taken from the Frontdoor launcher and Customer RM - the other host that
   faces an outside party - rather than invented:
   - white surfaces, 1px hairlines (#dfe6e7 / #e1e6ea), 9-10px corners, no shadows at rest, no gradients;
   - Segoe UI Light, no bold; ink #143b45 for names, #55666b for the quiet text;
   - a TABLE per section with tabular figures ("veel te vet" was Stefaan's word for a card per line in Customer RM);
   - grey (#f1f4f5) only for the past, the one use it is reserved for (2026-10-01/02), and the year in every date;
   - status in the same pills and colours as Customer RM's booking list.
   The one colour of its own is the app's tile hue (sea-green ~165 deg, brand/favicon-system.md), on the monogram
   square and the confirm button. On a phone each row folds into a compact block - still hairlines, no card. */

:root {
    --ink: #1f2933;
    --ink-name: #143b45;
    --ink-soft: #55666b;
    --surface: #ffffff;
    --app-bg: #f4f6f8;
    --line: #e1e6ea;
    --line-soft: #eef2f3;
    --tile-line: #dfe6e7;
    --past: #f1f4f5;
    --accent: #2f6f5e;
    --accent-ink: #245a4c;
    --accent-soft: #e4f1ec;
    --wait-ink: #8a5a1c;
    --wait-soft: #fdf0e3;
    --no-ink: #8f3a3a;
    --no-soft: #f6e9e9;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: "Segoe UI Light", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 300;
    color: var(--ink);
    background: var(--app-bg);
    line-height: 1.4;
}
h1, h2, h3, b, strong, th { font-weight: 300; }
a { color: var(--accent-ink); }
button { font: inherit; }

/* ---- the shell (same metrics as Customer RM's MainLayout.razor.css) ------------------------------------ */
.shell {
    display: flex; align-items: center; gap: 1rem;
    padding: .45rem clamp(.7rem, 2vw, 1.6rem);
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.shell__brand { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.shell__mark {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border-radius: 6px; background: var(--accent); color: #fff; font-size: .78rem; letter-spacing: .02em;
}
.shell__name { font-size: .95rem; color: #1f2933; }
.shell__right { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.shell__body { min-height: calc(100vh - 2.6rem); }

/* identity corner (SupplierMenu) - same position and weight as UserMenu / CustomerMenu */
.sm { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: #52606d; min-width: 0; }
.sm__user { color: #1f2933; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm__form { margin: 0; }
.sm__out {
    font-size: .8rem; padding: .18rem .55rem; cursor: pointer; white-space: nowrap;
    border: 1px solid #cfd6dc; border-radius: 6px; background: #fff; color: #52606d;
}
.sm__out:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---- page ------------------------------------------------------------------------------------------------ */
.pg { max-width: 1400px; margin: 0 auto; padding: .9rem clamp(.7rem, 2vw, 1.6rem) 2rem; }
.pg--narrow { max-width: 34rem; padding-top: 2.2rem; }
.pg--detail { max-width: 60rem; }
.pg__state { color: var(--ink-soft); }
.pg__head { margin-bottom: .4rem; }
.pg__head h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.pg__tag { margin: .15rem 0 0; font-size: .9rem; color: var(--accent-ink); }
.pg__for { margin: .3rem 0 0; font-size: .82rem; color: var(--ink-soft); }

.blk { margin-top: 1.1rem; }
.blk__title { margin: 0 0 .4rem; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.blk__n { font-size: .78rem; color: var(--ink-soft); }
.blk__empty {
    margin: 0; padding: .55rem .75rem; font-size: .88rem; color: var(--accent-ink);
    background: var(--surface); border: 1px solid var(--tile-line); border-radius: 9px;
}
.count {
    display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: 999px; background: var(--wait-soft); color: var(--wait-ink); font-size: .75rem;
}

/* ---- the table (Customer RM .nxt: white card, hairline rows, columns that shrink to their content) -------- */
.tbl {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    font-size: .82rem; line-height: 1.3;
}
.tbl thead th {
    text-align: left; padding: .3rem .5rem; white-space: nowrap;
    font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}
.tbl th.num { text-align: right; }
.tbl td { padding: .3rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.ln { cursor: pointer; }
.ln:hover { background: #f2f8f7; }
/* the past - grey is reserved for it; after the hover rule, with a hover of its own */
.ln--past { background: var(--past); color: var(--ink-soft); }
.ln--past:hover { background: #e8eef0; }

.ln__date, .ln__time, .ln__qty, .ln__state, .ln__act { width: 1%; white-space: nowrap; }
.ln__date, .ln__time, .ln__qty { font-variant-numeric: tabular-nums; }
.ln__date a { color: var(--ink-name); text-decoration: none; }
.ln__date a:hover, .ln__what a:hover { text-decoration: underline; }
.ln__qty { text-align: right; color: var(--ink-name); }
.ln__what a { color: var(--ink-name); text-decoration: none; }
.ln__menu { display: block; color: var(--ink-soft); font-size: .78rem; }
.ln__group { color: var(--ink-soft); }
.ln__diets { max-width: 18rem; }
.ln__act { text-align: right; }
.ln__act .btn + .btn { margin-left: .3rem; }
.ln__ask { color: var(--ink-soft); margin-right: .4rem; white-space: normal; }
.ln__more { margin-left: .6rem; color: var(--accent-ink); text-decoration: none; font-size: .78rem; white-space: nowrap; }
.ln__more:hover { text-decoration: underline; }
.ln__err { display: block; color: var(--no-ink); font-size: .75rem; margin-top: .2rem; }

/* chips + pills (Customer RM .tile__chip / .nx__pill) */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
    display: inline-block; margin: .05rem .2rem .05rem 0; padding: .02rem .4rem; white-space: nowrap;
    font-size: .72rem; border-radius: 3px; background: #eef2f2; color: #55666b;
}
.chip--warn { background: var(--wait-soft); color: var(--wait-ink); }
.pill {
    display: inline-block; font-size: .64rem; letter-spacing: .4px; text-transform: uppercase;
    padding: .05rem .35rem; border-radius: 3px; background: #eef2f2; color: #55666b; white-space: nowrap;
}
.pill--open { background: var(--wait-soft); color: var(--wait-ink); }
.pill--confirmed { background: var(--accent-soft); color: #1f6b53; }
.pill--refused { background: var(--no-soft); color: var(--no-ink); }

/* buttons (Customer RM .nxt__page-btn shape; the confirm button carries the app colour) */
.btn {
    display: inline-block; border: 1px solid var(--line); background: #fff; border-radius: 6px;
    padding: .2rem .65rem; font-size: .8rem; color: var(--accent-ink); cursor: pointer; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--accent-ink); }
.btn:disabled { color: #a9b6ba; cursor: default; }
.btn--yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--yes:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--yes:disabled { background: #9fbdb4; border-color: #9fbdb4; color: #fff; }
.btn--no { border-color: #d9b5b5; color: var(--no-ink); }
.btn--no:hover:not(:disabled) { border-color: var(--no-ink); }
.btn--big { padding: .45rem 1.1rem; font-size: .9rem; }
.btn--wide { display: block; width: 100%; text-align: center; padding: .55rem 1rem; font-size: .92rem; }

/* ---- welcome card (signed out) - the launcher's tile face, one card ------------------------------------- */
.welcome {
    background: var(--surface); border: 1px solid var(--tile-line); border-radius: 9px;
    padding: 1.4rem 1.4rem 1.1rem;
}
.welcome__mark {
    display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: .95rem; letter-spacing: -.5px;
}
.welcome h1 { margin: .7rem 0 0; font-size: 1.35rem; color: var(--ink-name); }
.welcome__tag { margin: .1rem 0 .7rem; font-size: .9rem; color: var(--accent-ink); }
.welcome__lead { margin: 0 0 1rem; color: var(--ink-soft); font-size: .92rem; }
.welcome__steps { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: .85rem; }
.welcome__steps li { margin: .25rem 0; }
.welcome__langs { display: flex; gap: .3rem; margin-top: 1rem; }
.lang {
    border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .1rem .5rem;
    font-size: .75rem; color: var(--ink-soft); cursor: pointer;
}
.lang--on { border-color: var(--accent); color: var(--accent-ink); }
.notice {
    margin: 0 0 1rem; padding: .5rem .7rem; border-radius: 6px; font-size: .85rem;
    background: var(--wait-soft); color: var(--wait-ink);
}

/* ---- one request (RequestPage) - Customer RM BookingDetail vocabulary ------------------------------------ */
.sp-back { display: inline-block; margin: 0 0 .6rem; font-size: .82rem; color: var(--accent-ink); text-decoration: none; }
.sp-back:hover { text-decoration: underline; }
.sp-skeleton { height: 4rem; border-radius: 9px; background: var(--surface); border: 1px solid var(--tile-line); }
.sp-skeleton--tall { height: 12rem; }
.sp-card, .sp-detail {
    background: var(--surface); border: 1px solid var(--tile-line); border-radius: 9px; padding: .8rem 1rem;
}
.sp-empty { color: var(--ink-soft); }
.sp-empty p { margin: 0; }
.sp-detail { border-left: 3px solid var(--tile-line); }
.sp-detail--open { border-left-color: #c98a1b; }
.sp-detail--confirmed { border-left-color: var(--accent); }
.sp-detail--refused { border-left-color: #b9a0a0; }
.sp-detail__band { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sp-detail__date { font-size: .85rem; color: var(--ink-soft); }
.sp-detail__title { margin: .5rem 0 0; font-size: 1.3rem; color: var(--ink-name); display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; }
.sp-detail__time { font-variant-numeric: tabular-nums; color: var(--ink); }
.qty { font-variant-numeric: tabular-nums; }
.sp-detail__menu { margin: .2rem 0 0; color: var(--ink); }
.sp-detail__note { margin: .15rem 0 0; color: var(--no-ink); font-size: .88rem; }
.sp-answer { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
.sp-answer .sp-line__ask { flex-basis: 100%; margin: 0; color: var(--ink-soft); font-size: .88rem; }
.sp-answered { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; font-size: .9rem; }
.sp-link { border: none; background: none; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.sp-ok { margin: .6rem 0 0; color: var(--accent-ink); font-size: .85rem; }
.sp-line__err { margin: .6rem 0 0; color: var(--no-ink); font-size: .85rem; }

.sp-grid { display: grid; gap: .6rem; margin-top: .6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sp-grid { grid-template-columns: 1fr 1fr; } .sp-card--wide { grid-column: 1 / -1; } }
.sp-card__title {
    margin: 0 0 .4rem; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
.sp-big { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink-name); }
.sp-facts { margin: 0; font-size: .85rem; }
.sp-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; padding: .12rem 0; }
.sp-facts dt { color: var(--ink-soft); }
.sp-facts dd { margin: 0; }
.sp-muted { margin: 0; color: var(--ink-soft); }
.sp-allergy { margin-top: .5rem; padding: .45rem .6rem; border-radius: 6px; background: var(--wait-soft); color: var(--wait-ink); font-size: .85rem; }
.sp-allergy__h { font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; }
.sp-allergy p { margin: .15rem 0 0; color: var(--ink); }
.sp-pre { margin: 0 0 .3rem; white-space: pre-wrap; font-size: .88rem; }
.sp-textarea {
    width: 100%; font: inherit; font-size: .88rem; padding: .4rem .5rem; resize: vertical;
    border: 1px solid #cfd6dc; border-radius: 6px; background: #fff; color: var(--ink);
}
.sp-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-row-end { display: flex; justify-content: flex-end; margin-top: .4rem; }
.sp-contact p { margin: 0; font-size: .88rem; line-height: 1.5; }

/* ---- phone: the row folds into a compact block (a kitchen opens the mail on a phone) --------------------- */
@media (max-width: 719px) {
    .tbl thead { display: none; }
    .tbl, .tbl tbody { display: block; }
    .ln {
        display: grid; grid-template-columns: auto auto 1fr auto; column-gap: .5rem; row-gap: .15rem;
        grid-template-areas: "date time . state" "what what what what" "group group group group" "diets diets diets diets" "act act act act";
        padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft);
    }
    .tbl tbody .ln:last-child { border-bottom: none; }
    .ln td { display: block; padding: 0; border: none; width: auto; }
    .ln__date { grid-area: date; } .ln__time { grid-area: time; } .ln__state { grid-area: state; }
    .ln td.ln__qty { display: none; }
    .ln__what { grid-area: what; font-size: .92rem; }
    .ln__what a::before { content: attr(data-qty); }
    .ln__group { grid-area: group; font-size: .78rem; }
    .ln__diets { grid-area: diets; max-width: none; }
    .ln__diets:empty { display: none; }
    .ln__act { grid-area: act; text-align: left; padding-top: .3rem; }
    .ln__act:empty { display: none; }
    .ln__act .btn { padding: .35rem .9rem; font-size: .85rem; }
    .sm__user { display: none; }   /* as Customer RM: on a phone the way out matters more than the name */
}

/* Blazor's default error toast - the koepel's shape, as in Customer RM. */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: #ffe08a; color: #3b2f00; padding: .6rem 1rem; box-shadow: 0 -1px 4px rgba(0,0,0,.2);
}
#blazor-error-ui .reload { color: #14607a; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }