/* Invulformulieren: wat verplicht is, en wat er mis ging. */

/* Verplicht en optioneel, naast het label in plaats van tegen de rechtermarge.

   Voxel geeft `.is-required` een `margin-left:auto`, dus de markering schoot bij
   een breed veld tientallen pixels weg van het woord waar hij bij hoorde, in
   11px grijs dat 4,5:1 niet haalde. Twee kolommen die niets met elkaar te maken
   leken hebben. `margin-left:0` verslaat die auto; de rest is leesbaarheid.

   #5A5F73 op #FDF8F4 haalt 5,5:1, ruim boven de 4,5 die 1.4.3 vraagt. */
/* verslaat: forms.css `.ts-form .ts-form-group .is-required { margin-left:auto }`
   — drie klassen, dus `.ts-form-group label .is-required` (twee klassen plus een
   element) verloor en de ster bleef 246px naar rechts staan. */
.tb-app .ts-form .ts-form-group label .is-required{
  margin-left:6px;margin-right:auto;font-size:13px;font-weight:500;color:var(--tb-muted);
}
.tb-app .ts-form .ts-form-group label .tb-ster{
  margin-left:4px;color:var(--tb-accent-text);font-weight:700;font-size:15px;
  line-height:1;cursor:help;
}
.tb-app .ts-form .ts-form-group label .tb-optioneel{font-weight:400;}
/* Een echte foutmelding hoort juist wél op te vallen. */
.tb-app .ts-form .ts-form-group label .tb-veldfout{
  color:var(--tb-accent-text);font-weight:600;
}

.tb-form-melding{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 18px;padding:12px 14px;
  border-radius:var(--tb-r-img,10px);
  background:#FDECE6;border:1px solid var(--tb-accent-line);
  font-size:14.5px;line-height:1.5;color:var(--tb-ink);
}
.tb-form-melding::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:var(--tb-accent-text);
  /* uitroepteken in het rondje, zonder een icoonbestand te hoeven laden */
  mask:radial-gradient(circle at 50% 78%, #000 1.4px, transparent 1.5px),
       linear-gradient(#000,#000) 50% 22%/2px 7px no-repeat;
  -webkit-mask:radial-gradient(circle at 50% 78%, #000 1.4px, transparent 1.5px),
       linear-gradient(#000,#000) 50% 22%/2px 7px no-repeat;
}

/* Het veld waar het om gaat, zodat je na het scrollen ziet wélk veld. */
.ts-form-group.tb-veld-mist > label{color:var(--tb-accent-text);}
.ts-form-group.tb-veld-mist input,
.ts-form-group.tb-veld-mist textarea,
.ts-form-group.tb-veld-mist .ts-filter{
  border-color:var(--tb-accent-line)!important;
  box-shadow:0 0 0 3px rgba(224,123,57,.16);
}

/* "Stap 1 van 2" boven de stapnaam: je wilt weten hoe lang iets duurt vóór je
   begint, niet halverwege. */
.tb-stapteller{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tb-accent-text);margin-bottom:2px;
}

/* Aanraakvlakken van 44px.
   Gemeten op het bakkerijformulier: negen knoppen onder de 40px hoog, waaronder
   de opslaan- en stapknoppen rechtsboven. Deze doelgroep bedient de site met een
   duim op een telefoon; 44px is de ondergrens waaronder mikken werk wordt. */
.tb-app .ts-icon-btn,
.tb-app .ts-btn,
.tb-app .ts-form button,
.tb-app .ts-form .ts-filter{
  min-height:44px;
}
.tb-app .ts-icon-btn{min-width:44px;display:inline-flex;align-items:center;justify-content:center;}

/* ------------------------------------------------------------------ schakelaars

   Het raakvlak van 44px hoort op de RIJ, niet op de baan. Voxel's opmaak is:

       <div class="switcher-label">
         <label>                                      <- de rij
           <div class="switch-slider"><div class="onoffswitch">
             <input class="onoffswitch-checkbox">
             <label class="onoffswitch-label"></label> <- ook een <label>
           </div></div>{{ tekst }}
         </label>
       </div>

   Twee labels dus. Een selector zonder `>` matcht ze allebei, en dan krijgt de
   baan een min-height van 44px terwijl de knop op `top:4px` blijft staan: 42x44
   met de knop tegen de bovenrand. Dat leest als een half ingekleurd keuzerondje,
   niet als een schakelaar. Twee mensen hebben het zo gelezen. Vandaar de `>`. */
.tb-app .switcher-label > label{
  min-height:44px;display:flex;align-items:center;gap:12px;cursor:pointer;
}

/* De baan: pil van 44x26, nooit een min-height van buitenaf.
   Voxel's eigen uit-baan is #E4E4E6 en haalt 1,2:1 op ons papier (#FDF8F4).
   WCAG 1.4.11 vraagt 3:1 voor de omtrek van een bedieningselement; zonder rand
   ziet de bakker niet dat er iets te kiezen valt. De rand van #6B7089 haalt
   4,7:1 en is meteen ook het antwoord op 1.4.1: de stand is dan afleesbaar aan
   de knoppositie, niet alleen aan de kleur. */
.tb-app .onoffswitch{width:44px;min-width:44px;flex:0 0 auto;}
.tb-app .onoffswitch .onoffswitch-label{
  height:26px;min-height:0;border-radius:999px;
  background:var(--tb-sand,#EFEAE4);
  border:1px solid var(--tb-muted,#6B7089);
  box-sizing:border-box;
  transition:background-color .16s ease,border-color .16s ease;
}
/* Voxel schuift de knop met `right`, niet met transform. Twee stelsels naast
   elkaar vecht; we houden het zijne aan en zetten alleen de maten goed.
   44 baan - 20 knop - 2 lucht = 22px in de uit-stand, 2px in de aan-stand. */
.tb-app .onoffswitch .onoffswitch-label:before{
  width:20px;height:20px;top:2px;right:22px;
  box-shadow:0 1px 2px rgba(20,26,51,.28);
}
.tb-app .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label:before{right:2px;}
.tb-app .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label{
  background:var(--tb-action);border-color:var(--tb-action);
}

/* De ring hoort op de baan; het vinkje eronder is onzichtbaar (WCAG 2.4.7).
   Voxel verbergt het met opacity, niet met display:none, dus het blijft
   focusbaar - dat moet zo blijven. */
.tb-app .onoffswitch .onoffswitch-checkbox:focus-visible + .onoffswitch-label{
  outline:2px solid var(--tb-action);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .tb-app .onoffswitch .onoffswitch-label,
  .tb-app .onoffswitch .onoffswitch-label:before{transition:none;}
}

/* Het beschrijvingsveld nodigt uit tot schrijven. Op één regel hoog vraagt het
   om één zin, terwijl de eis honderd tekens is; op zes regels vraagt het om een
   verhaal.

   De selector is expres lang: `.tb-app .ts-form ...` in dit bestand zet al een
   min-height van 44px, en Voxel laat de textarea daarnaast met de inhoud
   meegroeien via een inline hoogte. De ondergrens moet die twee verslaan. */
.tb-app .ts-form .create-form-step .field-key-text textarea,
.tb-app .ts-form .create-form-step .field-key-texteditor textarea,
.tb-app .ts-form .create-form-step .vx-text-field textarea{
	min-height:168px;line-height:1.6;resize:vertical;
}


/* ------------------------------------------------- besteltijd en beschikbaarheid

   Een baksel erft zijn besteltijd van de thuisbakkerij. Op het bakselformulier
   staat daarom één regel die zegt wat er geldt, plus een schakelaar voor het
   geval dit baksel afwijkt. Op het bakkerijformulier zitten de instellingen
   achter een uitklap, want ze staan al goed. */

.tb-erfregel{
	grid-column:1/-1;
	margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--tb-muted);
}
.tb-beschikbaarheid{
	grid-column:1/-1;width:100%;box-sizing:border-box;
	margin:4px 0 18px;padding:14px 16px;
	border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
	background:var(--tb-surface);
}
.tb-beschikbaarheid > summary{
	cursor:pointer;min-height:44px;display:flex;align-items:center;
	font-size:14.5px;font-weight:600;color:var(--tb-accent-text);
}
.tb-beschikbaarheid > summary:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-beschikbaarheid[open] > summary{margin-bottom:8px;}
.tb-beschikbaarheid > .ts-form-group{margin-bottom:14px;}

/* Het accountadres op het profiel: een mededeling, geen invoerveld. */
.tb-profiel-email{
	grid-column:1/-1;width:100%;box-sizing:border-box;
	margin:6px 0 0;padding:14px 16px;
	border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
	background:var(--tb-surface);
}
.tb-profiel-email-kop{
	display:block;margin-bottom:2px;
	font-size:13.5px;font-weight:650;color:var(--tb-ink);
}
.tb-profiel-email strong{display:block;font-size:15px;color:var(--tb-body);font-weight:500;}
.tb-profiel-email .tb-veld-hulp{margin:6px 0 0;}
.tb-profiel-email a{color:var(--tb-accent-text);}

/* ------------------------------------------------------------- de voetbalk

   Er stonden drie manieren om verder te gaan op één scherm: drie naamloze
   rondjes rechtsboven, `Vorige stap`/`Volgende stap` onderaan, en `Publiceren`
   los daaronder over de volle breedte. De footer stond op `flex-wrap:wrap` en
   werd 132px hoog: de hoofdactie van het formulier zweefde onder het formulier.

   Eén rij, binnen de kaart:

       [ <- Vorige stap ]            [ Concept opslaan ]  [ Publiceren -> ]

   De rondjes vervallen — hun tooltips herhaalden deze knoppen woordelijk, en
   een tooltip is op touch geen naam. `tb-voet-af` komt pas op het formulier
   zodra tb-formulier.js de conceptknop beneden heeft gebouwd; lukt dat niet,
   dan blijven de rondjes staan en is opslaan-als-concept nog bereikbaar. */
.tb-app .create-post-form.tb-voet-af .step-nav{display:none;}

.tb-app .ts-form-footer{
  display:flex;flex-wrap:nowrap;align-items:center;gap:12px;
}
.tb-app .ts-form-footer > .ts-nextprev{display:contents;}
.tb-app .ts-form-footer > .ts-nextprev > li{margin:0;}
.tb-app .ts-form-footer > .ts-nextprev > li:first-child{margin-right:auto;}

/* De volgorde staat los van de DOM, want Voxel tekent `Publiceren` alleen op de
   laatste stap en `Volgende stap` alleen daarvoor. Zo staat de knop die je echt
   verder helpt altijd rechts, ook als er een andere naast valt weg te vallen.
   Zonder de expliciete breedte rekt `form-btn` de conceptknop tot 533px en is
   er geen vrije ruimte meer voor de auto-marge die `Vorige stap` links houdt. */
.tb-app .ts-form-footer .tb-concept{order:2;flex:0 0 auto;width:auto;}
.tb-app .ts-form-footer .ts-save-changes{order:3;flex:0 0 auto;width:auto;}
/* `display:contents` maakt de <li> het flex-item, niet de <a> erin: de order
   hoort dus op de <li>. Eerst stond hij op `.ts-next` en gebeurde er niets. */
.tb-app .ts-form-footer > .ts-nextprev > li:last-child{order:4;}
.tb-app .ts-form-footer .ts-next{flex:0 0 auto;width:auto;}

/* `Volgende stap` op de laatste stap leidde nergens heen: Voxel laat hem staan
   met alleen `pointer-events:none`, dus hij ziet eruit als de weg vooruit
   terwijl `Publiceren` ernaast de echte is. Hetzelfde geldt voor `Vorige stap`
   op stap 1. Een uitgeschakelde knop die er nog staat, is een dood spoor. */
.tb-app .ts-form-footer .ts-prev.disabled,
.tb-app .ts-form-footer .ts-next.disabled{display:none;}

/* Niets mag achter een vaste balk verdwijnen. Op staging is dat de rode strook
   van 32px; in productie doet de voettekst hetzelfde. De marge is dus geen
   staging-lapmiddel maar hoort er sowieso. */
.tb-app .tb-app-inhoud{padding-bottom:72px;}

@media (max-width:640px){
  .tb-app .ts-form-footer{flex-wrap:wrap;gap:10px;}
  .tb-app .ts-form-footer .tb-concept,
  .tb-app .ts-form-footer .ts-save-changes{flex:1 1 auto;justify-content:center;}
}

/* ------------------------------------------------------------- het prijsveld

   Het euroteken vóór het bedrag, niet `EUR` erachter, en eronder wat de klant
   straks werkelijk ziet. Zie tb-formulier.js: een `type="number"` laat zich
   niet naar `24,50` dwingen, dus de zekerheid komt uit de echo eronder. */
.tb-app .input-container.tb-heeft-euro{position:relative;}
.tb-app .tb-euro{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--tb-muted);pointer-events:none;
}
.tb-app .input-container.tb-heeft-euro input[type="number"]{padding-left:32px;}
.tb-app .input-container.tb-heeft-euro .input-suffix{display:none;}
.tb-app .tb-prijs-echo{
  margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--tb-muted);min-height:18px;
}

/* Het ⇄ in de eenheidchip van de bufferperiode wisselt tussen dagen en uren.
   Wij schrijven die eenheid zelf weg als `days` (zie TB_Simplify::erf_besteltijd),
   dus de knop belooft een keuze die meteen weer wordt overschreven. Hij staat
   bovendien in het ene veld wel en in het andere niet, zonder dat er verschil
   is. Weg dus — de chip blijft, als leesbare eenheid. */
.tb-app .input-suffix.suffix-action{pointer-events:none;}
.tb-app .input-suffix.suffix-action svg{display:none;}

/* De veldbeschrijving die uit het ⓘ-bolletje komt. Zie tb-formulier.js:
   een tooltip van 16x16 zonder naam is op touch onbereikbaar en voor een
   schermlezer leeg. #5A5F73 op #FDF8F4 haalt 5,5:1. */
.tb-app .tb-veldhulp{
  margin:2px 0 8px;font-size:13.5px;line-height:1.5;color:var(--tb-muted);
}
.tb-app .ts-form-group label .vx-dialog[hidden]{display:none;}

/* ------------------------------------------------- afwijkende tijden per dag

   Verschijnt onder "Andere tijden op sommige dagen". Zie simplify.php: die
   schakelaar bewaarde tot 2026-09-09 alleen een ja of nee en klapte niets uit,
   want er was nooit iets gebouwd om te tonen. */
.tb-app .tb-dagrooster{
  grid-column:1/-1;width:100%;box-sizing:border-box;
  margin:2px 0 16px;padding:14px 16px;
  border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
  background:var(--tb-ground-alt,#F7F3EE);
}
.tb-app .tb-dagrij{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:10px 0;border-top:1px solid var(--tb-line);
}
.tb-app .tb-dagrij:first-of-type{border-top:0;}
.tb-app .tb-dagnaam{
  flex:0 0 96px;font-size:14px;font-weight:600;color:var(--tb-ink);
}
/* Een raster, geen rij: op 390px paste er maar één blok naast elkaar en werden
   drie dagen achttien regels. `auto-fit` met een ondergrens van 118px geeft
   twee kolommen op een telefoon en zes op een breed scherm. */
.tb-app .tb-dagblokken{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;flex:1 1 auto;min-width:0;
}
.tb-app .tb-dagblok{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 12px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-pill);
  background:var(--tb-surface);font-size:13.5px;color:var(--tb-body);cursor:pointer;
}
.tb-app .tb-dagblok:hover{border-color:var(--tb-accent-line);}
/* verslaat: forms.css `.ts-form input { padding:16px; border:none }` — die
   blies het vinkje op tot 32x32 en haalde zijn randje weg, waardoor je een
   onzichtbaar blok zag in plaats van een aankruisvakje. */
.tb-app .tb-dagblok input{
  margin:0;padding:0;flex:0 0 auto;
  width:16px;height:16px;min-height:0;
  appearance:auto;-webkit-appearance:checkbox;
  accent-color:var(--tb-action);
}
.tb-app .tb-dagblok:has(input:checked){
  border-color:var(--tb-action);background:var(--tb-cream,#FBF0E4);color:var(--tb-ink);
}
.tb-app .tb-dagblok:focus-within{outline:2px solid var(--tb-action);outline-offset:2px;}

@media (max-width:640px){
  .tb-app .tb-dagnaam{flex:1 1 100%;}
  .tb-app .tb-dagblok{padding:0 10px;font-size:13px;}
}

/* Het telefoonblok op Accountgegevens leent de rij-opmaak van het blok op het
   bakselformulier; die stijl komt daar uit een inline <style> die alleen op dat
   formulier laadt. Hier dus opnieuw, kort. */
.tb-app .tb-profiel-tel .tb-tel-rij{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:8px;}
.tb-app .tb-profiel-tel .tb-tel-land{
  flex:0 0 auto;height:46px;padding:0 8px;font:inherit;font-size:15px;
  border:1px solid var(--tb-border);border-radius:12px;background:#fff;
  color:var(--tb-ink);cursor:pointer;
}
.tb-app .tb-profiel-tel input[type="tel"]{
  flex:1 1 160px;min-width:0;height:46px;padding:0 14px;font:inherit;font-size:15px;
  border:1px solid var(--tb-border);border-radius:12px;background:#fff;color:var(--tb-ink);
}
.tb-app .tb-profiel-tel button{
  flex:0 0 auto;min-height:46px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:650;background:var(--tb-action);color:#fff;
}
.tb-app .tb-profiel-tel button[disabled]{opacity:.6;cursor:default;}
.tb-app .tb-profiel-tel .tb-tel-melding{flex:1 1 100%;margin:2px 0 0;font-size:13.5px;line-height:1.5;}
.tb-app .tb-profiel-tel .tb-tel-fout{color:var(--tb-accent-text);font-weight:600;}
.tb-app .tb-profiel-tel .tb-tel-goed{color:var(--tb-muted);}

/* Het meldingenblok op Accountgegevens: browsermeldingen plus de toestemming
   voor activatieberichten. Leent de omlijsting van het telefoonblok ernaast. */
.tb-app .tb-melding-knop{
  min-height:46px;padding:0 18px;margin-top:8px;border:0;border-radius:12px;
  cursor:pointer;font:inherit;font-size:15px;font-weight:650;
  background:var(--tb-action);color:#fff;
}
.tb-app .tb-melding-knop[disabled]{opacity:.6;cursor:default;}
.tb-app .tb-toestemming{
  display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--tb-line);
  font-size:13.5px;line-height:1.5;color:var(--tb-muted);cursor:pointer;
}
.tb-app .tb-toestemming input{
  flex:0 0 auto;margin:2px 0 0;padding:0;width:16px;height:16px;min-height:0;
  appearance:auto;-webkit-appearance:checkbox;accent-color:var(--tb-action);
}