/* De tijdkiezer van Jimani.
   ------------------------------------------------------------------------------------------------
   Gevraagd door Martijn, 08-09-2026 (N23): een eigen tijdkiezer op alle tijdvelden. Er stonden er
   twee door elkaar -- de kiezer van de browser (113 velden) en clockpicker (106 velden), en die
   laatste werd in 48 schermen van een CDN gehaald, dus zonder internet viel hij weg.

   De opmaak volgt de datumvelden: een veld met een min en een plus ertegenaan, en een paneel dat
   eronder openklapt met de uren links en de minuten rechts.
   ------------------------------------------------------------------------------------------------ */

/* De min en de plus zijn even hoog als het tijdvak ertussen.

   Gemeld door Martijn, 18-09-2026: "open van en open tot tijdsvak staat nog steeds een paar pixels
   te laat ten opzichte van de - en +." Gemeten op de openingstijden, 19-09-2026: de knoppen waren
   36 hoog en begonnen op 487, het vak 38 hoog op 489 -- het midden lag dus drie punten uit elkaar.

   De knoppen stonden op 36 door een regel in jimani-vensters.css met een uitroepteken; vandaar dat
   hij hier ook nadruk nodig heeft. Binnen een blok geldt de maat van de standaard (40) en die
   regel heeft meer gewicht, dus die blijft gewoon voorgaan. */
.jm-tijdveld .jm-tijdstap,
.jm-tijdveld .decTime,
.jm-tijdveld .incTime {
    /* Met nadruk in het midden: de knoppen bleven bovenaan hangen terwijl het vak ertussen wel
       gecentreerd werd. Gemeten: vak op 490, knoppen op 487, in een rij van 43 hoog. */
    align-self: center !important;
    /* En geen marge: de knoppen hadden er een onder zich, waardoor hun buitenmaat 43 was. Het
       midden van die buitenmaat kwam dan op de goede plek, maar de knop zelf stond bovenaan.
       Daar zaten die paar punten verschil in. */
    margin: 0 !important;

    /* De maat komt uit css/jimani-formulier.css, dezelfde plek waar de bladzijde Alle velden hem
       vandaan haalt. Hier stond 38 als los getal, en dat liep dus uit de pas met het voorbeeld.
       Gevraagd door Martijn, 19-09-2026: "de maat moet exact hetzelfde zijn als in Admin panel menu
       Layout - Alle velden. Koppel dus ALLES hier aan." */
    height: var(--knop-hoog, 40px) !important;
    min-height: var(--knop-hoog, 40px) !important;
    width: var(--knop-hoog, 40px) !important;
    min-width: var(--knop-hoog, 40px) !important;
}

.jm-tijdveld {
    display: inline-flex;
    align-items: center;
    gap: var(--stap-ruimte, 8px);
}

/* Het veld zelf houdt de opmaak die het scherm er al aan gaf; alleen de tekst komt in het midden
   te staan, want een tijd is vier tekens en die zwerven anders in een breed vak. */
.jm-tijdveld > input.jm-tijd,
.jm-tijdvak > input.jm-tijd {
    text-align: center;
}

/* Het vak om het klokje en de tijd heen.
   Gemeld door Martijn, 17-09-2026: "Zet het klokje in het tijdsvak en zet de - en + knop naast de
   tijd." Het klokje stond links van de min, dus je las klok, min, tijd, plus als vier losse dingen.
   Nu draagt dit vak de rand en zien het klokje en de tijd eruit als een ding. */
/* Even hoog als de min en de plus ernaast: allebei 38 inclusief rand, dus box-sizing erbij.
   Gemeld door Martijn, 17-09-2026: "de hoogte van het tijdsvak moet even hoog als de - en + knop." */
.jm-tijdvak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 6px;
    height: var(--veld-hoog, 40px);
    min-height: var(--veld-hoog, 40px);
    padding: 0 10px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
}

    .jm-tijdvak > input.jm-tijd {
        width: 58px;
        min-width: 0;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0;
        line-height: 1;
    }

    .jm-tijdvak > .jm-tijdklok {
        flex: 0 0 auto;
        color: var(--jm-accent, #0d3fd6);
        font-size: 15px;
    }

    .jm-tijdvak:focus-within {
        border-color: var(--jm-accent, #0d3fd6);
    }

/* De min en de plus dragen de kleur van de module waar je in werkt: horeca oranje, salon roze.
   Stond hier blauw, dan had elke module blauwe knoppen. (17-09-2026) */
.jm-tijdstap {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--knop-hoog, 40px);
    height: var(--knop-hoog, 40px);
    padding: 0;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
    color: var(--jm-accent, #0d3fd6);

    /* Dezelfde letter als op Alle velden. Stond hier 18 en daar 15: de min en de plus zagen er bij
       een tijd dus zwaarder uit dan bij een aantal. Gemeld door Martijn, 19-09-2026: "ik zie daar
       dat de - en + een dikkere tekstfont hebben dan bijvoorbeeld het vak van reserveerduur." */
    font-size: var(--stap-letter, 15px);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.jm-tijdstap:hover {
    background: var(--jm-accent-licht, #f2f6ff);
    border-color: var(--jm-accent, #0d3fd6);
}

.jm-tijdstap:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Het paneel hangt aan het scherm en niet aan het veld, zodat een venster met overflow hidden hem
   niet afknipt. */
.jm-tijdpaneel {
    position: absolute;
    z-index: 20000;
    display: none;
    box-sizing: border-box;
    width: 260px;
    padding: 10px;
    border: 1px solid #d0d0d0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.jm-tijdpaneel.open {
    display: block;
}

/* Het wiel (10-09-2026).
   ------------------------------------------------------------------------------------------------
   Gevraagd door Martijn: geen raster met knopjes meer, maar twee wielen die je langs draait, zoals
   op een telefoon. De keuze staat in het midden, achter een lichte band; wat erboven en eronder
   staat vervaagt.

   De regelhoogte staat ook in js/jimani-tijdkiezer.js (REGEL). Als je hem hier verandert, verander
   hem daar ook: het schuiven rekent ermee.
   ------------------------------------------------------------------------------------------------ */

.jm-tijdwiel {
    position: relative;
    display: flex;
    gap: 8px;
    height: 200px;
    overflow: hidden;

    /* Boven en onder vervagen, zodat het echt een wiel lijkt en niet een lijstje dat afgeknipt is. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}

/* De band waar de keuze in staat. */
.jm-tijdwiel-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    height: 40px;
    border-radius: 10px;
    background: #eef2fb;
    pointer-events: none;
}

.jm-tijdkolom {
    position: relative;
    z-index: 1;
    width: 50%;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Ruimte boven en onder, zodat ook de eerste en de laatste regel in het midden kunnen staan. */
    padding: 80px 0;
}

    .jm-tijdkolom::-webkit-scrollbar {
        display: none;
    }

.jm-tijdregel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    scroll-snap-align: center;
    color: #9aa3b2;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color .12s, font-weight .12s;
}

    .jm-tijdregel.gekozen {
        color: #111827;
        font-weight: 600;
    }

.jm-tijdpaneel-voet {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.jm-tijdpaneel-voet button {
    flex: 1 1 0;
    padding: 8px 0;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

.jm-tijdpaneel-voet .jm-tijd-klaar {
    border-color: var(--jm-accent, #0d3fd6);
    background: var(--jm-accent, #0d3fd6);
    color: #fff;
}

/* Op een handheld staat er weinig ruimte: het paneel vult dan de breedte van het scherm. */
@media (max-width: 600px) {
    .jm-tijdpaneel {
        width: calc(100vw - 24px);
        max-width: 320px;
    }

    .jm-tijdstap {
        width: 34px;
        height: 34px;
    }
}