/* Inzoomen mag in het dashboard, en de toetsenbordfocus is te zien (F23, 02-11-2026).
 *
 * De layouts van het dashboard, het inloggen, de gastpagina's en het beheer hadden in de viewport
 * "maximum-scale=1, user-scalable=0": wie slecht ziet, kon de pagina op een telefoon niet groter maken.
 * Die beperking is eruit. De kassa (_POSLayout), de handheld (_HandheldLayout) en het keukenscherm
 * (_KitchenLayout) houden hem bewust: dat zijn aanraakschermen waar een veeg met twee vingers per ongeluk
 * inzoomt, en de kassa-app zet zoomen in de WebView zelf ook uit (CustomWebViewHandler, SetSupportZoom(false)).
 *
 * Waarschijnlijk stond maximum-scale=1 er voor iets anders: iPhone en iPad zoomen vanzelf in zodra je op een
 * invoerveld tikt waarvan de letters kleiner zijn dan 16 px, en zoomen daarna niet terug. Dat lossen we hier op
 * zonder het zoomen te verbieden: op iOS krijgen invoervelden minstens 16 px. Alleen op iOS
 * (-webkit-touch-callout bestaat alleen in Safari op iOS/iPadOS, ook onder Chrome op iOS), zodat de opmaak op
 * computers, Android en de kassa niet verschuift.
 */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
    select,
    textarea,
    [contenteditable="true"],
    .select2-search__field {
        font-size: 16px !important;
    }
}

/* Toetsenbord (F23/Q02, 02-11-2026). De proef met Tab op 1366 px (bewijs W04) liet zien dat de eerste vijftien
 * stappen in het dichte zijmenu vielen: links buiten beeld, je zag niet waar je was. Dicht = onzichtbaar en dus
 * buiten de tabvolgorde; open = zichtbaar. visibility wacht bij het dichtgaan tot het wegschuiven (0,3 s) klaar is. */
.animate-menu-left:not(.animate-menu-open) {
    visibility: hidden;
    transition: left 0.3s ease, visibility 0s linear 0.3s;
}

.animate-menu-left.animate-menu-open {
    visibility: visible;
    transition: left 0.3s ease, visibility 0s;
}

/* Knoppen en links lieten bij Tab vaak niets zien (bootstrap en eigen regels zetten de rand uit). Alleen bij
 * toetsenbordfocus (:focus-visible), dus met muis of vinger verandert er niets. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible {
    outline: 2px solid var(--jm-accent, #F37120) !important;
    outline-offset: 2px !important;
}

/* Na het sluiten bleven de menulinks nog 1 à 3 s met Tab bereikbaar (W04b, 02-11-2026). Het menu zelf wordt
 * onzichtbaar zodra het weggeschoven is, maar veel elementen erin hebben "transition: all 0.5s" uit de themabestanden
 * (.main_menu_side, ul.nav, li, ...). Een geërfde visibility loopt dan per laag nog eens 0,5 s achter, en tot dat
 * klaar is blijven de links in de tabvolgorde. Dicht: de nakomelingen krijgen geen overgang, dus zodra het menu
 * onzichtbaar is, zijn ze het ook. Open: de gewone overgangen blijven, en visibility springt bij het openen meteen
 * naar zichtbaar. */
.animate-menu-left:not(.animate-menu-open) *,
.animate-menu-left:not(.animate-menu-open) *::before,
.animate-menu-left:not(.animate-menu-open) *::after {
    transition: none !important;
}

/* Het veld "Scan de bon" had geen zichtbare focusrand (W04b, 02-11-2026): de invoer zelf heeft outline: 0 en zit in een
 * bleke afgeronde balk. De rand komt om de hele balk zodra het veld (of de camera-knop erin) toetsenbordfocus heeft. */
.bon-zoeken:has(:focus-visible) {
    outline: 2px solid var(--jm-accent, #F37120);
    outline-offset: 2px;
    border-color: var(--jm-accent, #F37120);
}

/* Contrast van grijze teksten (W04b punt 6, 02-11-2026; WCAG 2.2 1.4.3, 4,5 : 1 voor gewone tekst).
 * Gemeten op de proefpagina's (bewijs W04b). Wat in één bronbestand stond is daar aangepast (tabbladen bestellingen
 * #A7AFBA, "Geen bestellingen" en tijdstempel onderin het menu #9CA3AF, de winkelgrijs-variabele #6b7280 op de
 * lichte oranje balk): allemaal naar #6b7280 (4,8 : 1 op wit) of een tikje donkerder. Wat de themabestanden elk als eigen
 * kopie hebben, staat hieronder één keer erboven.
 *   menunamen en .text-muted  #969BA0 op wit 2,8 -> #6b7280
 *   Diversen/Overig/Opmerkingen  #C75D1A 4,2 -> #B4531A (5,0)
 *   plaatshouder Scan de bon  #757575 op #F7F7F8 4,3 -> #686868
 * De huidige pagina in het menu (witte tekst op oranje) en de hover houden hun eigen regels. */
.nav-sm .nav.side-menu li:not(.current-page):not(.active) a {
    color: #6b7280 !important;
}

.text-muted {
    color: #6b7280 !important;
}

.webshop-receipt-action-row .action-pill-btn:not(:hover):not(:active):not(.active) {
    color: #B4531A;
}

.bon-zoeken input::placeholder {
    color: #686868;
    opacity: 1;
}