/* Huisstijl voor alle pagina's. De accentkleur en de achtergrondfoto komen per restaurant uit
   [huisstijl] in het restaurantbestand (zie templates/basis.html); de rest is voor elk restaurant gelijk. */
:root {
    --accent: #d9a441;
    --accent-tekst: #1a1306;
    --kaart: rgba(20, 16, 12, .88);
    --lijn: rgba(255, 255, 255, .12);
    --tekst: #f4ede2;
    --zacht: #c9bba6;
    --veld: rgba(255, 255, 255, .06);
    --rood: #e57373;
    --groen: #7bc47f;
    --kop-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; }
body {
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px; color: var(--tekst); background: #120d09;
    min-height: 100vh; position: relative; display: flex; flex-direction: column;
}
body.personeel { background: #100c09; }
a { color: var(--accent); }
.verborgen, [hidden] { display: none !important; }

/* Achtergrond: foto als die is ingesteld, anders een warme gloed. Altijd een donkere laag erover. */
.foto {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
    background:
        radial-gradient(ellipse at 20% 30%, #5a3a1c 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, #6b2f1a 0%, transparent 50%),
        #120d09;
    background-size: cover; background-position: center;
}
.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, .6), rgba(10, 8, 6, .88)); }

.wrap { position: relative; z-index: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 28px 16px 40px; flex: 1; }
.wrap.smal { max-width: 440px; }
.wrap.breed { max-width: 1180px; padding-top: 20px; }

/* Kop en voet */
header.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.kop-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.talen { display: flex; gap: 2px; font-size: 12px; }
.talen a { color: var(--zacht); text-decoration: none; padding: 4px 7px; border-radius: 6px; }
.talen a.aan { color: var(--accent); font-weight: 600; }
.logo { text-decoration: none; }
.logo h1 { font-family: var(--kop-font); font-size: 28px; font-weight: 700; color: var(--accent); }
.logo p { font-size: 13px; color: var(--zacht); margin-top: 4px; }
footer.voet { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--zacht); padding: 0 16px 28px; line-height: 1.7; }
footer.voet a { color: var(--tekst); }
nav.staf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
           padding-bottom: 18px; border-bottom: 1px solid var(--lijn); margin-bottom: 22px; }
nav.staf .logo h1 { font-size: 21px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs form { display: inline; }
/* Personeelsmenu: vanaf 700 px staat alles in een rij; op een telefoon alleen de twee hoofdpagina's, de rest onder Menu. */
/* nav.staf ervoor: .pil (verderop) zet display anders weer aan */
nav.staf .menuknop { display: none; cursor: pointer; }
.menu-lijst { display: contents; }

/* Bouwstenen */
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 18px; padding: 28px;
         backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
.sub { color: var(--zacht); margin-top: 6px; line-height: 1.55; }
.klein { font-size: 12.5px; color: var(--zacht); line-height: 1.6; }
.pil { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; color: var(--zacht);
       text-decoration: none; border: 1px solid var(--lijn); padding: 7px 12px; border-radius: 999px;
       background: transparent; cursor: pointer; white-space: nowrap; }
.pil:hover { color: var(--tekst); border-color: rgba(255, 255, 255, .3); }
.pil.aan { color: var(--accent-tekst); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.knop { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 16px;
        border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-tekst);
        font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.knop:hover { filter: brightness(1.07); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.rand { background: transparent; border: 1px solid var(--lijn); color: var(--tekst); font-weight: 500; }
.knop.rood { background: #c0473f; color: #fff; }
.knop.klein { min-height: 42px; font-size: 14px; }
.knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Formulieren */
.veld { margin-bottom: 14px; }
label { display: block; font-size: 12.5px; color: var(--zacht); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input[type=number], input[type=time], select, textarea {
    width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--veld);
    padding: 0 12px; font: inherit; font-size: 14px; color: var(--tekst); color-scheme: dark; }
input::placeholder { color: #8f8676; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--zacht); margin: 4px 0 16px; cursor: pointer; }
.akkoord input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.melding { border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 16px 0; }
.melding.fout { background: rgba(229, 115, 115, .12); border: 1px solid rgba(229, 115, 115, .45); color: #f2b8b8; }
.melding.ok { background: rgba(123, 196, 127, .12); border: 1px solid rgba(123, 196, 127, .45); color: #bfe3c1; }
.wachtwoord { position: relative; }
.wachtwoord button { position: absolute; right: 8px; top: 8px; height: 28px; border: 0; background: transparent; color: var(--zacht); font: inherit; font-size: 12px; cursor: pointer; }

/* Gegevensrijen (bevestiging, annuleren) */
.details { border: 1px solid var(--lijn); border-radius: 14px; padding: 4px 18px; margin: 22px 0; }
.details.goud { background: rgba(217, 164, 65, .08); border-color: rgba(217, 164, 65, .3); }
.rij { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--lijn); }
.rij:last-child { border-bottom: 0; }
.rij span:first-child { color: var(--zacht); }
.rij b { font-weight: 600; text-align: right; }
/* Wijzig of annuleer: wijzigen en annuleren als losse delen onder elkaar */
.deel { border-top: 1px solid var(--lijn); padding-top: 22px; margin-top: 22px; }
.deelkop { margin-bottom: 14px; }
.vink { width: 58px; height: 58px; border-radius: 50%; background: rgba(123, 196, 127, .15); border: 1px solid rgba(123, 196, 127, .5);
        display: grid; place-items: center; color: var(--groen); font-size: 28px; margin-bottom: 16px; }

/* Reserveringsformulier */
.info { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--zacht); margin: 8px 0 22px; }
.info b { color: var(--tekst); font-weight: 600; }
.stap { margin-bottom: 22px; border: 0; padding: 0; }
.stap legend, .stap h3 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; }
.stap .nr { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-tekst);
            display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.keuzes { display: grid; gap: 8px; }
.keuzes.personen { grid-template-columns: repeat(8, minmax(0, 56px)); }
.keuzes.dagen { grid-template-columns: repeat(7, 1fr); }
.keuzes.tijden { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.keuze { min-height: 44px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--veld); color: var(--tekst);
         font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column;
         align-items: center; justify-content: center; line-height: 1.25; padding: 4px 2px; }
.keuze:hover:not(:disabled) { border-color: rgba(255, 255, 255, .35); }
.keuze small { font-size: 10.5px; color: var(--zacht); font-weight: 400; }
.keuze b { font-size: 17px; }
.keuze[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); font-weight: 700; }
.keuze[aria-pressed=true] small { color: var(--accent-tekst); }
.keuze:disabled { opacity: .38; cursor: default; }
.keuze.bijna { border-color: rgba(217, 164, 65, .6); }
.keuze.bijna small { color: var(--accent); }
.groep { font-size: 11.5px; color: var(--zacht); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .6px; }
.leeg { color: var(--zacht); font-size: 13px; padding: 10px 0; }
.samenvatting { background: rgba(217, 164, 65, .1); border: 1px solid rgba(217, 164, 65, .35); border-radius: 12px;
                padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.samenvatting small { display: block; color: var(--zacht); font-size: 12px; margin-top: 2px; }

/* Privacy */
.tekst h3 { margin: 28px 0 8px; }
.tekst p, .tekst li { line-height: 1.7; color: #e3d9c9; }
.tekst ul { padding-left: 18px; }
.verwerkers { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.verwerkers th { text-align: left; color: var(--zacht); font-weight: 500; font-size: 12px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--lijn); }
.verwerkers td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }

/* Personeel: overzicht */
.dagnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.dagnav h2 { font-size: 24px; margin-right: 8px; }
.dagnav form { display: flex; gap: 8px; align-items: center; }
.dagnav input[type=date] { height: 34px; width: auto; border-radius: 999px; font-size: 12.5px; }
.dagnav form.zoek { margin-left: auto; }
.dagnav input[type=search] { height: 34px; width: 220px; border-radius: 999px; font-size: 12.5px; padding: 0 14px; }
.res.zoek { grid-template-columns: 44px 1fr; }
.tijdkop a { margin-left: auto; font-size: 12.5px; }
.datumkop { flex-wrap: wrap; row-gap: 2px; }
.datumkop span, .datumkop a { white-space: nowrap; }
.tellers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.teller { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; }
.teller small { color: var(--zacht); font-size: 12px; }
.teller b { display: block; font-size: 24px; margin-top: 4px; }
.teller.let b { color: var(--accent); }
.balk { height: 6px; border-radius: 3px; background: var(--veld); margin-top: 8px; overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--accent); }
.lijst { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 6px 18px 10px; }
.tijdkop { display: flex; align-items: baseline; gap: 12px; padding: 16px 0 8px; border-bottom: 1px solid var(--lijn); }
.tijdkop b { font-size: 18px; color: var(--accent); }
.tijdkop span { color: var(--zacht); font-size: 12.5px; }
.res { display: grid; grid-template-columns: 44px 1fr 160px auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.res:last-child { border-bottom: 0; }
.aantal { width: 40px; height: 40px; border-radius: 10px; background: var(--veld); border: 1px solid var(--lijn); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.wie b { font-weight: 600; font-size: 15px; }
.wie small { display: block; color: var(--zacht); font-size: 12.5px; margin-top: 3px; }
.wie small a { color: var(--zacht); }
.extra { margin-top: 14px; display: grid; gap: 12px; }
.extra-kop { font-size: 13px; color: var(--tekst); }
.extra-kop small { color: var(--zacht); }
textarea { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; font: inherit; line-height: 1.4; }
.extra .veld:has(select) { max-width: 180px; }
.notities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.notitie { font-size: 11.5px; color: var(--tekst); background: rgba(217, 164, 65, .12); border: 1px solid rgba(217, 164, 65, .35); border-radius: 999px; padding: 2px 9px; }
.notitie.allergie { background: rgba(224, 108, 92, .14); border-color: rgba(224, 108, 92, .5); }
.notitie.gewijzigd { background: rgba(110, 168, 230, .14); border-color: rgba(110, 168, 230, .5); }
.klein-akkoord { margin: 8px 0 0; font-size: 12px; }
.notitie.tekst { border-radius: 8px; white-space: normal; overflow-wrap: anywhere; }
.label { margin-left: 8px; font-size: 11px; color: var(--zacht); border: 1px solid var(--lijn); border-radius: 999px; padding: 2px 8px; }
.tafel { font-size: 13px; font-weight: 600; }
.tafel.leeg { color: var(--accent); font-weight: 500; text-decoration: none; border: 1px dashed rgba(217, 164, 65, .6); border-radius: 8px; padding: 6px 10px; justify-self: start; }
.acties { display: flex; gap: 6px; align-items: center; }
.acties > a, .acties summary, .acties .status button { font-size: 12px; color: var(--zacht); border: 1px solid var(--lijn); border-radius: 8px; padding: 6px 10px; text-decoration: none; cursor: pointer; list-style: none; }
.acties summary::-webkit-details-marker { display: none; }
.acties .status { display: flex; gap: 6px; }
.acties .status button { background: none; font-family: inherit; }
.acties .status button[value="gearriveerd"] { color: var(--groen); border-color: var(--groen); }
.res.aangekomen, .res.noshow { opacity: .55; }
.res.noshow .wie > b { text-decoration: line-through; }
.acties details { position: relative; }
.acties details[open] .menu { display: block; }
.menu { display: none; position: absolute; right: 0; top: 36px; z-index: 5; background: #1d1813; border: 1px solid var(--lijn); border-radius: 10px; padding: 6px; min-width: 180px; }
.menu button { width: 100%; text-align: left; background: transparent; border: 0; color: var(--rood); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: rgba(229, 115, 115, .1); }

/* Personeel: plattegrond */
.tijdbalk { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.tijdbalk > small { color: var(--zacht); margin-right: 6px; }
.tijdbalk .pil { padding: 6px 11px; }
.tijdbalk .nu { border-color: var(--groen); color: var(--groen); }
.indeling { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 18px; }
.vloer { overflow-x: auto; }
.vloer svg { width: 100%; min-width: 640px; display: block; }
.vloer .tafel { cursor: pointer; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--zacht); align-items: center; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1.5px solid rgba(255, 255, 255, .25); }
.legenda .bezet { background: rgba(217, 164, 65, .22); border-color: var(--accent); }
.legenda .straks { border: 1.5px dashed var(--accent); }
.legenda .keuze-kleur { background: var(--groen); border-color: var(--groen); }
.legenda .nog-niet { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 0; }
.niet-gekomen { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; margin-bottom: 4px; list-style: none; opacity: .55; }
.niet-gekomen b { font-size: 13.5px; font-weight: 600; text-decoration: line-through; }
.niet-gekomen small { color: var(--zacht); font-size: 12px; }
.niet-gekomen .p { font-size: 12.5px; color: var(--zacht); text-align: right; }
.legenda span:last-child { margin-left: auto; }
.paneel .kop { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--zacht); margin: 16px 0 6px; }
.reservering { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; margin-bottom: 4px; cursor: pointer; list-style: none; }
.reservering:hover { border-color: var(--lijn); }
.reservering b { font-size: 13.5px; font-weight: 600; }
.reservering small { color: var(--zacht); font-size: 12px; }
.reservering .p { font-size: 12.5px; color: var(--zacht); text-align: right; }
.reservering.nu-aan-tafel { background: rgba(217, 164, 65, .08); }
.reservering.actief { border-color: var(--groen); background: rgba(123, 196, 127, .08); }
.reservering.zonder-tafel small { color: var(--accent); }
#reserveringen { padding: 0; list-style: none; }

/* Personeel: accounts */
.paneel-smal { max-width: 460px; }
/* Cijfers (alleen beheerder) */
.indeling.cijfers { grid-template-columns: 1fr 360px; }
.cijfertabel { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 8px; }
.cijfertabel th { text-align: right; font-weight: 500; color: var(--zacht); font-size: 12px; padding: 6px 4px; }
.cijfertabel td { text-align: right; padding: 8px 4px; border-top: 1px solid var(--lijn); }
.cijfertabel th:first-child, .cijfertabel td:first-child { text-align: left; }
.cijfertabel tr.later td { color: var(--zacht); }
.cijfertabel tr.vandaag td:first-child a { color: var(--accent); }
.cijfertabel tfoot td { font-weight: 600; }
.tussenkop { margin-top: 22px; }
.staven { list-style: none; padding: 0; margin: 10px 0 0; }
.staven li { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.staven.smal li { grid-template-columns: 82px 1fr 36px; }
.staven li span { color: var(--zacht); }
.staven li.aan span { color: var(--accent); }
.staven li b { text-align: right; font-weight: 600; }
.staven .balk { margin-top: 0; }
.accountlijst { list-style: none; padding: 0; margin-top: 12px; }
.account { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.account:last-child { border-bottom: 0; }
.account.uit .wie b { color: var(--zacht); text-decoration: line-through; }
.account .wie small { display: block; color: var(--zacht); font-size: 12px; }
.account form { margin: 0; }
.account details { grid-column: 1 / -1; }
.account summary { font-size: 12px; color: var(--zacht); cursor: pointer; }
.account details form { display: flex; gap: 8px; margin-top: 8px; }
.account details input { flex: 1; min-width: 0; }

/* Reserveerformulier: compact, met een vaste balk onderaan */
.intro { color: var(--zacht); font-size: 13px; margin: 6px 0 22px; }
.kop-label { display: block; font-size: 13px; font-weight: 600; color: var(--tekst); margin-bottom: 8px; }
.kiezer-select { position: relative; }
.kiezer-select select { appearance: none; -webkit-appearance: none; padding-right: 38px; font-size: 15px; font-weight: 500; }
.kiezer-select::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
                        border-right: 2px solid var(--zacht); border-bottom: 2px solid var(--zacht); transform: rotate(45deg);
                        pointer-events: none; }
.hint { color: var(--zacht); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.hint a { color: var(--zacht); }
.fout-tekst { color: #f2b8b8; font-size: 12px; margin-top: 5px; }
input.ongeldig, textarea.ongeldig { border-color: var(--rood); }
details.meer { border-top: 1px solid var(--lijn); padding-top: 14px; }
details.meer > summary { cursor: pointer; list-style: none; color: var(--accent); font-size: 13.5px; font-weight: 500; }
details.meer > summary::-webkit-details-marker { display: none; }
details.meer > summary::before { content: "+ "; }
details.meer[open] > summary::before { content: "\2212  "; }
details.meer > summary small { color: var(--zacht); font-weight: 400; }
details.meer .extra { margin-top: 14px; }
.actiebalk { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; margin: 22px -28px 0; padding: 14px 28px;
             background: linear-gradient(to top, rgba(20, 16, 12, .98) 70%, rgba(20, 16, 12, 0)); }
.actiebalk .samen { flex: 1; min-width: 0; line-height: 1.3; }
.actiebalk .samen b { display: block; font-size: 14.5px; }
.actiebalk .samen small { color: var(--zacht); font-size: 12px; }
.actiebalk .knop { width: auto; flex: none; min-width: 130px; max-width: 46%; min-height: 52px; padding: 0 12px; font-size: 14.5px;
                   line-height: 1.2; text-align: center; }
footer.voet .personeel { opacity: .7; }
.juridisch { text-align: center; font-size: 12px; color: var(--zacht); line-height: 1.55; margin-top: 10px; }
fieldset.stap { min-width: 0; position: relative; }  /* min-width: anders rekt de fieldset mee met de dagstrook i.p.v. die te laten scrollen */
.dagrij { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: none; }
.dagrij::-webkit-scrollbar { display: none; }
.dagrij .keuze { flex: 1 0 56px; min-height: 66px; scroll-snap-align: start; }
.dagrij .keuze span { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.dagrij #andere svg { width: 20px; height: 20px; margin-bottom: 2px; }
.andere-wrap { position: relative; display: flex; flex: 1 0 56px; scroll-snap-align: start; }
.andere-wrap .keuze { flex: 1; min-width: 0; }
.andere-wrap .datumveld { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; z-index: 1; }
.andere-wrap:focus-within .keuze { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 480px) { .dagrij { margin: 0 -18px; padding: 2px 18px 8px; } .dagrij .keuze { flex: none; width: 66px; } .andere-wrap { flex: none; width: 66px; } }
@media (max-width: 480px) { .actiebalk { gap: 10px; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } }

@media (max-width: 700px) {
    nav.staf { gap: 10px; padding-bottom: 14px; margin-bottom: 16px; }
    nav.staf .logo { flex: 1; min-width: 0; }
    nav.staf .menuknop { display: inline-flex; min-height: 38px; padding: 0 14px; }
    nav.staf .tabs { flex-basis: 100%; }
    .menu-lijst { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 6px;
                  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--lijn); }
    .menu-lijst.open { display: flex; }
    .menu-lijst > .pil, .menu-lijst > form .pil { min-height: 44px; width: 100%; justify-content: flex-start; padding: 0 14px; font-size: 14px; }
    .menu-lijst > form { display: block; }
    .menu-lijst .talen { padding: 4px 0 2px; }
    .tellers { grid-template-columns: 1fr 1fr; }
    .res { grid-template-columns: 40px 1fr; row-gap: 8px; }
    .res .tafel, .res .acties { grid-column: 2; }
    .dagnav h2 { width: 100%; }
    .dagnav form.zoek { margin-left: 0; width: 100%; }
    .dagnav input[type=search] { flex: 1; width: auto; min-width: 0; }
    .indeling, .indeling.cijfers { grid-template-columns: 1fr; }
}
/* Formulier voor telefonische reserveringen: de zin over de ruimte */
.ruimte { margin: -4px 0 16px; font-size: 13px; }
.ruimte.let-op { color: var(--accent); }
.paneel details.meer { margin-bottom: 16px; }
.paneel .twee.naast { grid-template-columns: 1fr 1fr; }  /* personen en tijd blijven ook op een telefoon naast elkaar */

/* Plattegrond: het paneel om tafels toe te wijzen. Op een telefoon is het een vaste balk met tafelknoppen. */
.toewijzen { margin-top: 12px; border-top: 1px solid var(--lijn); padding-top: 12px; }
.toewijzen-keuze { margin-top: 4px; font-size: 13px; }
.toewijzen-melding { color: var(--rood); margin-top: 4px; font-size: 13px; }
.tafelkeuze { display: none; }
.tafelknop { flex: none; min-width: 52px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
             border-radius: 10px; border: 1px solid var(--lijn); background: var(--veld); color: var(--tekst); font: inherit; cursor: pointer; }
.tafelknop b { font-size: 15px; }
.tafelknop small { font-size: 10.5px; color: var(--zacht); }
.tafelknop[aria-pressed=true] { background: var(--groen); border-color: var(--groen); color: #0f1a10; }
.tafelknop[aria-pressed=true] small { color: #0f1a10; }
.tafelknop:disabled { opacity: .35; cursor: default; }

/* Personeel op een telefoon: de reserveringen eerst, niet de knoppen en tellers. Bellen kan met het nummer, mailen met Mail. */
@media (max-width: 700px) {
    .alleen-breed { display: none; }
    .dagnav { gap: 8px; margin-bottom: 12px; }
    .dagnav h2 { font-size: 22px; margin-right: 0; }
    .dagnav .pil, .dagnav input[type=date] { min-height: 36px; }
    .tellers { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
    .teller { padding: 8px 10px; border-radius: 12px; }
    .teller small { display: block; font-size: 11px; line-height: 1.25; }
    .teller b { font-size: 19px; margin-top: 2px; }
    .teller .balk { height: 4px; margin-top: 5px; }
    .lijst { padding: 0 12px 4px; }
    .tijdkop { padding: 12px 0 6px; }
    .res { grid-template-columns: 40px 1fr auto; column-gap: 10px; row-gap: 6px; padding: 10px 0; }
    .res .wie { grid-column: 2; grid-row: 1; }
    .res .tafel { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
    .res .acties { grid-column: 2 / -1; grid-row: 2; }
    .res .wie .mailtekst, .res .wie .scheiding, .acties .bel { display: none; }
    .res .wie .tel { display: inline-block; padding: 4px 0; font-size: 14px; color: var(--tekst); }
    .res .wie small { margin-top: 0; }

    /* Plattegrond: tijden in een strook, tafelknoppen in een vaste balk onderaan */
    .indeling > .paneel { min-width: 0; }  /* anders rekt de tekening (640 px) de hele pagina op in plaats van in de vloer te scrollen */
    .tijdbalk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px 6px; }
    .tijdbalk::-webkit-scrollbar { display: none; }
    .tijdbalk > * { flex: none; }
    .toewijzen { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 10px 14px 12px; max-height: 60vh; overflow-y: auto;
                 background: #1d1813; border-top: 1px solid var(--lijn); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
    .toewijzen p.klein { display: none; }  /* alleen de hintregel; de knoppen hebben ook de klasse klein */
    .tafelkeuze { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 6px; scrollbar-width: none; }
    .tafelkeuze::-webkit-scrollbar { display: none; }
    body.toewijzen-open { padding-bottom: 260px; }
}
@media (max-width: 480px) {
    .kaart { padding: 18px; }
    .logo h1 { font-size: 24px; }
    .twee { grid-template-columns: 1fr; }
    .keuzes.personen { grid-template-columns: repeat(8, 1fr); gap: 5px; }
    .keuzes.dagen { gap: 5px; }
    .keuzes.tijden { gap: 6px; }
    .keuze b { font-size: 15px; }
}

/* Overzicht van vandaag: groepen op urgentie in plaats van per begintijd, met de tijd op elke rij. */
.rijtijd { margin-right: 8px; font-weight: 700; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.tijdkop.laat b { color: var(--rood); }
.tijdkop.binnen b { color: var(--groen); }
.tijdkop.niet b { color: var(--zacht); }

/* De melding na een statuswijziging in het overzicht: onderaan in beeld, op elk schermformaat. */
.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px;
         width: max-content; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border-radius: 12px; font-size: 14px;
         background: #1f2a1f; border: 1px solid rgba(123, 196, 127, .55); color: #dff2e0; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.toast.fout { background: #2a1c1c; border-color: rgba(229, 115, 115, .55); color: #f2b8b8; }
.toast button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid currentColor; background: none; color: inherit;
                font: inherit; font-weight: 600; cursor: pointer; }

/* Personeel op een telefoon, tijdens de service: minder kop en meer rijen in beeld, de tellers als strook die
   blijft staan, en "Is er" groot en rechts (onder de duim). Mailen kan op de tablet of de pc. */
@media (max-width: 700px) {
    /* Menu: de twee hoofdpagina's en Menu op één regel; de naam van het restaurant staat al in de titel van het tabblad. */
    nav.staf { position: relative; padding-bottom: 12px; margin-bottom: 12px; }
    nav.staf .logo { display: none; }
    nav.staf .menuknop { position: absolute; top: 0; right: 0; }
    nav.staf .tabs > .pil { min-height: 38px; }

    /* Dag en knoppen: zoeken op dezelfde regel als de knoppen (zoeken start met de zoektoets van het toetsenbord). */
    .dagnav h2 { font-size: 18px; }
    .dagnav form.zoek { flex: 1; width: auto; min-width: 0; }
    .dagnav form.zoek button { display: none; }

    /* Tellers: één strook die bovenaan blijft staan; wat nu telt (nog niet binnen, nog zonder tafel) staat vooraan. */
    .tellers.strook { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 6;
                      margin: 0 -16px 6px; padding: 6px 16px; background: #100c09; }
    .tellers.strook::-webkit-scrollbar { display: none; }
    .strook .teller { flex: none; display: flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; }
    .strook .teller small { font-size: 12px; white-space: nowrap; }
    .strook .teller b { font-size: 15px; margin-top: 0; white-space: nowrap; }
    .strook .teller .balk { display: none; }
    .strook .teller:nth-child(n+4) { order: -1; }

    /* De tijd van de groep blijft onder de tellers staan terwijl je door de lijst gaat. */
    .lijst .tijdkop:not(.datumkop) { position: sticky; top: 44px; z-index: 4; background: #130f0c; }

    /* Rij: aantal links, de statusknop vast rechts, daartussen naam, telefoon en tafel. Wat niet naast elkaar past
       (een lang nummer, "Niet gekomen") schuift naar de volgende regel in plaats van te worden afgekapt. */
    .res:not(.zoek) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; position: relative;
                      min-height: 68px; padding: 10px 98px 10px 48px; }
    .res:not(.zoek):not(:has(.status)) { padding-right: 0; }  /* een dag in de toekomst heeft geen statusknop */
    .res:not(.zoek) > span:empty { display: none; }
    .res:not(.zoek) .aantal { position: absolute; left: 0; top: 10px; }
    .res:not(.zoek) .wie, .res:not(.zoek) .acties, .res:not(.zoek) .acties .status { display: contents; }
    .res:not(.zoek) .wie > b { flex: 1 0 100%; order: 1; font-size: 16px; overflow-wrap: anywhere; }
    /* Vandaag staat de tijd voor de naam, op dezelfde regel. */
    .res:not(.zoek) .rijtijd { flex: none; order: 1; align-self: flex-start; margin-right: 0; font-size: 16px; }
    .res:not(.zoek) .rijtijd + b { flex-basis: calc(100% - 56px); }
    .res:not(.zoek) .wie > small, .res:not(.zoek) .tafel { flex: none; order: 2; white-space: nowrap; }
    .res:not(.zoek) .acties .status button[value="no_show"], .res:not(.zoek) .acties details { order: 3; }
    /* De labels komen na telefoon en tafel en mogen onder de knop door: die is op die hoogte al voorbij. */
    .res:not(.zoek) .notities { flex: none; order: 4; width: calc(100% + 98px); margin: 2px -98px 0 0; }
    .res:not(.zoek):not(:has(.status)) .notities { width: 100%; margin-right: 0; }
    .res:not(.zoek) .tafel.leeg { padding: 5px 8px; }
    .res:not(.zoek) .acties .mail { display: none; }
    .res:not(.zoek) .acties .status button { min-height: 38px; padding: 0 12px; font-size: 13px; }
    .res:not(.zoek) .acties .status button[value="gearriveerd"],
    .res:not(.zoek) .acties .status button[value="verwacht"] { position: absolute; right: 0; top: 10px; width: 88px; min-height: 46px; padding: 4px 6px;
                                                               line-height: 1.15; white-space: normal; }
    .res:not(.zoek) .acties .status button[value="gearriveerd"] { font-size: 15px; font-weight: 700; background: rgba(123, 196, 127, .14); }
    .res:not(.zoek) .acties summary { display: flex; align-items: center; min-height: 38px; }
    .notitie { font-size: 13px; padding: 3px 10px; }
    .notitie.allergie { font-weight: 600; }
}