/* Eén linkerrand in de vensters.
 *
 * Waarom dit bestand bestaat
 * --------------------------
 * Gemeten op 08-09-2026 in het venster Product toevoegen: zestien koppen op vier verschillende
 * linkerposities, 253 tot 267 px. Dat is met het oog te zien -- de koppen staan niet op een lijn.
 *
 * De oorzaak is niet één scheve kop. Elke rij zet er zelf iets bij aan de linkerkant (niets, 8 of
 * 10 px), elke eerste kolom nog eens (10 of 16 px), de kop zelf nog 6 px, en de kop van het venster
 * gebruikt 24 px. Niemand hangt aan dezelfde rand.
 *
 * Hier staat die rand, één keer. De kop van het venster en de inhoud hangen er allebei aan, en
 * daarbinnen voegt geen rij en geen eerste kolom er nog iets aan toe. De maat is 24 px: dat is waar
 * de titel van het venster al stond, en dat is de positie die Martijn heeft aangewezen (08-09-2026).
 *
 * Waarom een apart bestand
 * ------------------------
 * Naast jimani-velden.css, om dezelfde reden: dezelfde opmaak staat verspreid over negen
 * modulebestanden en welke wordt geladen hangt af van de module. Dit bestand wordt in elke layout
 * als laatste geladen en wint dus van alle negen.
 *
 * Dit gaat over de rand van een venster. Zet er niets bij dat daar niet over gaat.
 */

.modal-content {
    --venster-rand: 24px;
}

/* De kop van het venster hangt aan de rand. */
.modal-content > .modal-header,
.modal-content > form > .modal-header {
    padding-left: var(--venster-rand) !important;
}

/* De inhoud hangt aan diezelfde rand. */
.modal-content > .modal-body,
.modal-content > form > .modal-body {
    padding-left: var(--venster-rand) !important;
}

/* En daarbinnen zet een rij er niets meer bij aan de linkerkant. Een rij is een kolom over de
   volle breedte; niet alleen die binnen een wizardstap, want lang niet elk venster heeft stappen. */
.modal-content .modal-body .row:not(.ms-auto):not(.mx-auto),
.modal-content .modal-body .col-12:not(.ms-auto):not(.mx-auto),
.modal-content .modal-body .col-md-12:not(.ms-auto):not(.mx-auto) {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ook de eerste kolom van een rij niet -- de kolommen rechts blijven waar ze staan.
   De marge telt hier net zo goed als de padding: bij Tafels stond de kop 4 px scheef door een
   ms-1, niet door een padding. */
.modal-content .modal-body [class*="col-"] > [class*="col-"]:first-child:not(.ms-auto):not(.mx-auto) {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* En de kop zelf ook niet. */
.modal-content .modal-body .header-label {
    padding-left: 0 !important;
}

/* ------------------------------------------------------------------------------------------------
   De apparaattegels in de kassaschermwizard: even groot, en op één regel.

   Gemeld door Martijn, 09-09-2026, met twee schermafbeeldingen: "de iconen kloppen niet meer, deze
   horen dezelfde grootte te hebben als de Pin bar-tegel. Tevens staat Geen pinterminal nu ONDER Pin
   bar, maar dit moet van links naar rechts op één regel komen met een horizontale scroll als er te
   veel apparaten zijn."

   Gevonden: de tegels heten .radio-item en staan in .carousel-slider. Die twee zijn opgemaakt in
   Appointment.css en activities.css, en die worden op de instellingenpagina niet geladen. Zonder die
   opmaak zijn het gewone blokken: dus onder elkaar, en elk zo groot als zijn eigen plaatje.

   Hier staat dezelfde opmaak, in een bestand dat elke layout wel laadt. De maat is die van de
   grootste tegel op de schermafbeelding -- de Pin bar -- zodat alle tegels daar gelijk aan zijn.
   ------------------------------------------------------------------------------------------------ */

.carousel-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}

    /* Elke tegel even groot en niet meekrimpen: liever schuiven dan proppen.
     *
     * De tegel is kleiner geworden en hij houdt geen vaste hoogte meer aan. Met een vaste hoogte
     * van 190 stond de foto in het midden van de tegel en bleef er boven en onder wit staan tussen
     * de foto en de rand. Gemeld door Martijn, 10-09-2026: "Zorg dat de border in de producten op
     * de afbeelding aansluit" en "wil je de categorie kies carousel iets kleiner maken, minder
     * spacing en kleinere tegels, zodat we de verticale scrolbar niet meer nodig hebben." */
    .carousel-slider .radio-item {
        flex: 0 0 auto;
        width: 132px;
        min-height: 0;

        /* De tegel is zo hoog als wat erin staat. In een raster rekt een vak zich anders uit tot
           de hoogte van de hoogste van de regel, en dan bleef er onder de naam een wit vlak staan.
           Gemeld door Martijn, 10-09-2026: "verwijder de onnodige witte vakken onder de
           productnaam". */
        align-self: start;
        height: -moz-fit-content;
        height: fit-content;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid #d7dce5;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        position: relative;
    }

        /* Bovenaan beginnen en niets eromheen: de foto raakt de rand, de naam staat eronder. Dit
           stond op "midden" met een hoogte van honderd procent en twaalf pixels rondom; daardoor
           bleef er boven en onder de foto wit staan en rekte de tegel zich uit tot de hoogte van
           de hoogste van de regel. Gemeld door Martijn, 10-09-2026. */
        .carousel-slider .radio-item label {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
        }

        /* Het plaatje even groot bij elke tegel; wat scheef staat wordt passend gemaakt in plaats
           van uitgerekt. */
        .carousel-slider .radio-item img {
            width: 104px;
            height: 104px;
            object-fit: contain;
            border-radius: 10px;
        }

        /* Gewone letters: een raster vol namen die allemaal vet zijn leest als schreeuwen, en er
           valt niets uit te lichten. Gevraagd door Martijn, 10-09-2026. */
        .carousel-slider .radio-item span {
            font-size: 12px;
            font-weight: 400;
            color: #2b2f38;
            line-height: 1.25;
        }

        /* Het prijsplaatje is kleiner dan de naam en houdt zijn eigen maat. (10-09-2026) */
        .carousel-slider .radio-item .carrousel-prijs {
            font-size: 9px;
        }

/* ------------------------------------------------------------------------------------------------
   Bundel AG -- de vorm van het venster van een product en van een categorie.

   Martijn stuurde op 09-09-2026 een ontwerp van het venster "Product -- Fanta Orange"; het staat in
   docs/product-ontwerp/product-fanta-orange.webp. Dat is de vorm die het bewerken van een product
   en van een categorie moet krijgen. Op 09-09-2026 bevestigde hij: "1 afbeelding zelfde idee en
   structuur" -- dus de categorie krijgt dezelfde vorm, afgeleid van datzelfde ontwerp.

   Wat er verandert ten opzichte van wat er stond: het venster kreeg een pictogram en twee regels
   uitleg in de kop, de inhoud staat in blokken met een eigen lichtblauwe kopstrook, elke regel
   staat in twee even brede kolommen, onder een tekstveld staat een teller, in een veld staat een
   pictogram waar dat helpt, en onderaan staat een vaste balk met knoppen die zeggen wat ze doen in
   plaats van drie losse plaatjes.

   Dit staat hier en niet in het venster zelf, omdat het product en de categorie er allebei aan
   hangen. Wat hier verandert, verandert in beide.
   ------------------------------------------------------------------------------------------------ */

/* De huiskleuren ook buiten een venster. (KA12/KA14/KA15, 14-09-2026)
 *
 * Ze stonden alleen op .modal-content, en dat klopte zolang de blokken alleen in een venster
 * stonden. Inmiddels staan ze ook op hele schermen: Cadeaukaarten, het kortingsoverzicht, het
 * urenoverzicht, het terugbetaaloverzicht. Daar kende niemand --jm-rand, en een regel met een
 * onbekende var telt als fout en wordt overgeslagen. Gevolg: `border: 1px solid var(--jm-rand)`
 * verdween helemaal, en een blok werd een stuk platte tekst zonder rand of kader. Dat is wat
 * Martijn zag op 14-09-2026: "de opmaak klopt niet".
 *
 * Hier staan ze op de buitenkant van de pagina. Een venster zet ze daarna op .modal-content
 * opnieuw -- dat is specifieker en wint -- dus een module houdt daar zijn eigen accentkleur.
 */
:root {
    --jm-accent: #2563eb;
    --jm-accent-licht: #eff5ff;
    --jm-accent-donker: #1d4ed8;

    --jm-blauw: var(--jm-accent);
    --jm-blauw-licht: var(--jm-accent-licht);
    --jm-rand: #e5e9f2;
    --jm-grijs: #6b7280;
    --jm-rood: #e5484d;
}

/* De kleuren staan op het hele venster en niet op de kop. Stonden ze op de kop, dan kenden de
   blokken in de inhoud ze niet: dan valt een achtergrond weg en een rand verdwijnt helemaal, want
   een regel met een onbekende var telt als fout en wordt overgeslagen. (09-09-2026) */
.modal-content {
    /* De accentkleur staat hier NIET meer, en dat is met opzet.

       Hij stond hier wel, en daardoor was elk venster blauw. Een kleur die een element zelf
       opschrijft wint altijd van een kleur die het van hogerop meekrijgt. De bladzijde zegt sinds
       17-09-2026 in welke module je werkt (jm-module-horeca en zo, zie _Layout.cshtml), maar elk
       venster zette dat hier meteen weer terug op blauw.

       Gemeld door Martijn, 17-09-2026: "Punt A1: nee hoor ik zie alles blauw...."

       Wat hier wel hoort zijn de kleuren die voor elke module hetzelfde zijn: de randlijn, het grijs
       en het rood. Die staan hier omdat een regel met een onbekende var als fout telt en wordt
       overgeslagen -- dan verdwijnt een rand helemaal. */
    --jm-rand: #e5e9f2;
    --jm-grijs: #6b7280;
    --jm-rood: #e5484d;
}

/* --- de kop: pictogram, titel, twee regels uitleg (AG1) --------------------------------------- */

.jm-venster.modal-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.jm-venster-pictogram {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--jm-blauw-licht);
    color: var(--jm-blauw);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.jm-venster .modal-title {
    flex: 1 1 auto;
}

    .jm-venster .modal-title h4 {
        margin: 0 0 6px 0;
        font-weight: 600;
    }

.jm-venster-uitleg {
    display: block;
    color: var(--jm-grijs);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

/* --- de blokken (AG2) ------------------------------------------------------------------------- */

.jm-blok {
    border: 1px solid var(--jm-rand);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
}

.jm-blok-kop {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--jm-blauw-licht);
    padding: 14px 18px;
}

.jm-blok-pictogram {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: var(--jm-blauw);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.jm-blok-kop h5 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
}

.jm-blok-kop .jm-blok-uitleg {
    display: block;
    color: var(--jm-grijs);
    font-size: 13px;
    line-height: 1.4;
}

.jm-blok-inhoud {
    padding: 18px;
}

/* --- twee kolommen per regel (AG3) ------------------------------------------------------------- */

/* Twee kolommen, en wat er niet in past gaat naar de volgende regel.

   Het was een flexrij waarin elk kind de helft kreeg. Staan er drie of meer dingen in een regel --
   en dat komt voor, bijvoorbeeld een naam met een veld en daarnaast nog "Beschikbaar vanaf" -- dan
   werd dat anderhalf keer de breedte en viel het laatste stuk buiten het venster.

   Gemeld door Martijn, 17-09-2026: "je ziet nu aan de rechterkant dat er iets volledig buiten beeld
   valt, dit moet gewoon op een nieuwe regel komen, er mag niks buiten beeld staan."

   Een raster van twee kolommen doet dat vanzelf: het derde kind begint aan een nieuwe regel. */
/* De maat van een regel: zeventig procent voor de kop met de uitleg, dertig voor het veld.

   Afgesproken met Martijn, 17-09-2026: "De breedte van de header en tekst is 70% en de velden zijn
   30%." Dat leest beter dan half om half: een uitleg is twee tot vier regels tekst en een veld is
   een naam, een bedrag of een keuze. De enige aanvulling die erbij hoort is dat het veld die dertig
   procent ook echt vult -- anders krimpt het tot een stompje rechts in beeld, en dat is wat er
   misging.

   minmax(0, ...) hoort erbij: zonder die nul weigert een kolom te krimpen als er een lange tekst in
   staat, en dan steekt de regel alsnog buiten het venster uit. */
.jm-blok-inhoud .jm-regel:not(.d-none) {
    display: grid;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
    margin-bottom: 18px;
    /* clear hoort erbij, en niet voor de sier. Boven zo'n regel staat vaak de teller "Maximaal
       aantal tekens", en die zweeft naar rechts (float-end). Een raster maakt een eigen kader op en
       gaat een zwevend ding uit de weg: dan schuift de hele regel naar rechts naast die teller en
       blijft er nul breedte over. Dat is de regel die Martijn op 17-09-2026 rechts buiten beeld zag
       staan, letter voor letter onder elkaar. */
    clear: both;
}

    .jm-blok-inhoud .jm-regel:last-child {
        margin-bottom: 0;
    }

    /* De bootstrapmaten van de kolommen zelf worden hier opzij gezet, want die liepen van col-md-2
       tot col-md-8 door elkaar heen. min-width 0 hoort erbij: zonder die regel weigert een vak in
       een raster te krimpen als er een lange tekst in staat, en steekt het alsnog uit. */
    .jm-blok-inhoud .jm-regel > * {
        min-width: 0;
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        justify-self: stretch;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }

/* Het veld vult zijn eigen dertig procent. Zonder deze regel houdt het de breedte die bootstrap er
   ooit aan gaf -- col-md-4 binnen een kolom die zelf al smal is -- en dan staat er een stompje van
   honderd pixels rechts in beeld. (17-09-2026) */
.jm-blok-inhoud .jm-regel > *:nth-child(2) .form-control,
.jm-blok-inhoud .jm-regel > *:nth-child(2) .form-select,
.jm-blok-inhoud .jm-regel > *:nth-child(2) input:not([type="radio"]):not([type="checkbox"]),
.jm-blok-inhoud .jm-regel > *:nth-child(2) select,
.jm-blok-inhoud .jm-regel > *:nth-child(2) textarea,
.jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(3) .form-control,
.jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(3) .form-select,
.jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(3) textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/* Op een smal scherm staan zeventig en dertig procent naast elkaar niet meer: dan is dat veld nog
   maar een paar centimeter. Daar komen ze onder elkaar. */
@media (max-width: 900px) {
    .jm-blok-inhoud .jm-regel:not(.d-none),
    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) {
        grid-template-columns: minmax(0, 1fr);
    }

        .jm-blok-inhoud .jm-regel > *,
        .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > * {
            grid-column: 1 !important;
            grid-row: auto !important;
        }
}

/* --- de oude vorm van een regel, in dezelfde twee kolommen (17-09-2026) ------------------------ */

/* In de vensters die nog niet zijn omgeschreven staat een regel als drie blokken onder elkaar: de
   naam, de uitleg, en dan het veld -- alledrie col-md-8. Naast elkaar gezet worden dat drie halve
   kolommen en valt de derde buiten beeld. Dat is wat Martijn zag op 17-09-2026: "Zorg dat alles in
   de kaders vallen en zorg dat ALLE vakken en velden kloppen met hoe wij dit in de admin layout van
   horeca hebben opgemaakt."

   Het gaat om ruim zeshonderd van die blokken, verdeeld over horeca, activiteiten, salon en
   ticketing. Ze een voor een omschrijven is veel werk en veel kans op een fout, en het eerstvolgende
   scherm dat erbij komt zou het weer op de oude manier doen. Daarom staat het hier: een regel met
   deze vorm wordt vanzelf in de vorm van het beheer gezet -- naam en uitleg links onder elkaar, het
   veld rechts ernaast.

   Herkennen doen we aan wat erin staat: een blok waarvan de kleinkinderen een header-label en een
   info-label zijn. Dat is precies deze vorm en niets anders. */
.jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) {
    display: grid;
    /* Dezelfde maat als een omgeschreven regel: zeventig om dertig. */
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    /* De eerste regel is precies zo hoog als de naam, de tweede vangt de rest op. Zonder die rem
       wordt de eerste regel zo hoog als het veld ernaast, en dan staat de uitleg een halve
       bladzijde onder de naam. Dat is wat Martijn zag op 17-09-2026: "Waarom is er spacing tussen
       de header en tekst? Zie Naam en dan veel wit en dan Vul een naam in voor de reserveersoort."
       De uitleg staat bovenaan zijn regel (align-items: start) en schuift dus tegen de naam aan. */
    grid-template-rows: min-content auto;
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
    margin-bottom: 18px;
    clear: both;
}

    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > * {
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Links de naam, daaronder de uitleg. Alles wat daarna komt -- het veld, de teller, een melding
       -- gaat naar de rechterkolom. */
    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Het veld staat rechts en loopt over allebei de regels; zo blijft de naam met zijn uitleg
       links netjes tegen elkaar aan staan. */
    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .jm-blok-inhoud .col-md-12:has(> div > .header-label):has(> div > .info-label) > *:nth-child(n+4) {
        grid-column: 2;
    }

.jm-blok-inhoud .jm-regel .header-label,
.jm-blok-inhoud .header-label {
    font-weight: 600;
    margin-bottom: 2px;
}

.jm-blok-inhoud .jm-regel .color-grey,
.jm-blok-inhoud .jm-regel .info-label,
.jm-blok-inhoud .color-grey,
.jm-blok-inhoud .info-label {
    font-size: 13px;
    line-height: 1.4;
    color: var(--jm-grijs);
}

/* --- de teller onder een tekstveld (AG4) -------------------------------------------------------- */

.jm-teller {
    display: block;
    text-align: right;
    color: var(--jm-grijs);
    font-size: 12px;
    margin-top: 4px;
}

/* --- een pictogram in het veld (AG5) ------------------------------------------------------------ */

.jm-veld {
    position: relative;
}

    .jm-veld > .jm-veld-pictogram {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #111827;
        pointer-events: none;
        z-index: 2;
    }

    .jm-veld > .form-control,
    .jm-veld > .form-select {
        padding-left: 38px;
    }

/* Het prijsveld had zijn eigen teken links; dat blijft, maar het staat nu zwart en op dezelfde
   plek als de andere pictogrammen. */
.jm-blok-inhoud .jimani-prijs-teken {
    color: #111827;
}

/* --- de vaste balk onderaan (AG7) --------------------------------------------------------------- */

.jm-voetbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid var(--jm-rand);
}

    .jm-voetbalk .jm-voetbalk-links {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.jm-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--jm-rand);
    color: #111827;
    /* Een knop krimpt niet tot onder zijn opschrift.
       In een aantal voetbalken staat "jm-voetbalk-links d-flex gap-2", en dan is elke knop een
       flexvak dat vanzelf mag krimpen. De knop Verwijderen werd daardoor een rood vierkantje met de
       tekst ernaast buiten het venster. Gemeten 17-09-2026 in het ticketingvenster. */
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
}

/* btn-danger van bootstrap maakt er een rood vlak met witte letters van, en dat is niet de vorm die
   wij voor Verwijderen hebben afgesproken: wit met een rode rand. Waar allebei de namen op een knop
   staan, wint die van ons. (17-09-2026) */
.jm-knop.btn-danger {
    background: #fff;
    border-color: var(--jm-rood);
    color: var(--jm-rood);
}

    .jm-knop.btn-danger:hover {
        background: #fef2f2;
        border-color: var(--jm-rood);
        color: var(--jm-rood);
    }

    .jm-knop:hover {
        background: #f7f9fc;
    }

.jm-knop-verwijderen {
    border-color: var(--jm-rood);
    color: var(--jm-rood);
}

    .jm-knop-verwijderen:hover {
        background: #fef2f2;
        color: var(--jm-rood);
    }

.jm-knop-opslaan {
    background: var(--jm-blauw);
    border-color: var(--jm-blauw);
    color: #fff;
}

    /* De kleur onder de muis volgt de module. Stond hier een vaste kleur, dan werd elke knop bij
       het aanwijzen weer blauw, in welke module je ook zat. Gemeld door Martijn, 11-09-2026. */
    .jm-knop-opslaan:hover {
        background: var(--jm-accent-donker);
        border-color: var(--jm-accent-donker);
        color: #fff;
    }

    .jm-knop-opslaan:disabled,
    .jm-knop:disabled {
        opacity: .5;
    }

/* De kop van het uploadvak zelf gaat weg binnen een blok: het blok zegt er al boven wat het is en
   waarom. Twee koppen boven elkaar is er een te veel. (AG6, 09-09-2026) */
.jm-blok-inhoud [class^="file-uploader-wrapper-"] > h3,
.jm-blok-inhoud [class^="file-uploader-wrapper-"] > p.form-text {
    display: none;
}

/* Het vak op de breedte van een veld, en rechts. Zo staat de foto recht onder de EAN-code en de
   btw-groep in plaats van als enige over de volle breedte van het blok. Gevraagd door Martijn,
   10-09-2026. */
/* De kolom om het vak heen heeft nog de marges van bootstrap; die zetten het vak vijf pixels
   naar links en dan loopt het niet meer gelijk met de velden erboven. */
.jm-blok-inhoud .uploader {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.jm-blok-inhoud .uploader > .w-50 {
    width: calc(50% - 12px) !important;
    margin-left: auto;
}


/* De foto in het vierkant links van de titel (10-09-2026).

   Het vierkant blijft even groot en even rond als met een pictogram; de foto vult het en wordt
   bijgesneden in plaats van vervormd. Zonder foto verandert er niets: het pictogram staat er dan
   gewoon, en dat is ook de terugval als de foto niet laadt. */
.jm-venster-pictogram {
    overflow: hidden;
}

    .jm-venster-pictogram img {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.jm-venster-pictogram-foto {
    background: #fff;
}

    .jm-venster-pictogram-foto img {
        display: block;
    }

    .jm-venster-pictogram-foto i {
        display: none;
    }


/* --- de carrousel binnen een blok (AG9, 10-09-2026) --------------------------------------------- */

/* De carrousel zet zelf een kop en een regel uitleg boven het raster. Binnen een blok staat dat al
   in de blauwe balk, dus twee koppen boven elkaar is er een te veel -- dezelfde afspraak als bij
   het uploadvak hierboven. Het zoekveld staat in dezelfde regel als die kop en blijft wel staan. */
.jm-blok-inhoud .products-selection .dynamic-label,
.jm-blok-inhoud .products-selection > .form-group > p.form-text {
    display: none;
}

/* Het lege vak voor de gekozen producten mag geen ruimte innemen zolang er niets in staat; de
   uitleg in de blauwe balk zegt dan al wat er komt. */
.jm-blok-inhoud > .carrousel-gekozen {
    margin: 0;
}

    .jm-blok-inhoud > .carrousel-gekozen.is-leeg {
        min-height: 0;
    }


/* Het zoekveld in de blauwe balk van het blok, rechts (10-09-2026). Wit vak op de blauwe balk,
   zodat het te zien is, en het duwt de kop niet weg: het staat er met margin-left aan de rand. */
.jm-blok-kop-zoeken {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}

    /* Een knop die bij de carrousel hoort staat links van het zoekveld, in dezelfde hoogte. */
    .jm-blok-kop-zoeken .jm-blok-kop-knop {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .jm-blok-kop-zoeken .searchFilterInput {
        width: 220px;
        background: #fff;
    }


/* --- schuiven in de carrousel (10-09-2026) ----------------------------------------------------- */

/* De twee pijlen stonden als gewone knoppen in de rij: links een van veertig pixels, rechts een van
   veertig pixels. Daardoor kwamen er aan weerskanten van het raster twee witte stroken bij en werd
   het raster smaller. Gemeld door Martijn, 10-09-2026: "wil je die gewoon transparant maken, alleen
   de links en rechts knop laten staan".
 *
 * Ze zweven nu over de carrousel: geen ruimte in de rij, geen achtergrond, alleen het pijltje. Het
 * raster loopt daardoor van rand tot rand. */
.jm-blok-inhoud .carousel-slider-wrapper {
    position: relative;
}

.jm-blok-inhoud .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.jm-blok-inhoud .carousel-arrow-left {
    left: 0;
}

.jm-blok-inhoud .carousel-arrow-right {
    right: 0;
}

/* Het pijltje zelf: een rond knopje in de kleur van de module. Het was een blauw plaatje, en een
   plaatje kleurt niet mee -- dus stond er in horeca een blauwe pijl tussen alles wat oranje is.
   Gemeld door Martijn, 17-09-2026. */
.carousel-arrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jm-accent, #2563eb);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.carousel-arrow:hover i {
    background: var(--jm-accent-donker, #1d4ed8);
}

/* Schuiven met het wiel of met je vinger, zonder balk eronder. De balk is er wel -- hij is alleen
   niet te zien -- want zonder overloop valt er niets te schuiven. */
.jm-blok-inhoud .carousel-slider {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

    .jm-blok-inhoud .carousel-slider::-webkit-scrollbar {
        display: none;
    }


/* --- gelijke marges en een streep minder (10-09-2026) ------------------------------------------ */

/* Gemeld door Martijn: onderaan liepen twee lichtgrijze strepen vlak boven elkaar, en links was er
   ongeveer een centimeter wit tegen een halve centimeter rechts.
 *
 * De streep: .modal-footer heeft er zelf een van bootstrap, en de balk erin heeft er ook een. Die
 * van bootstrap gaat weg -- de balk tekent zijn eigen lijn en weet waar hij hem wil hebben.
 *
 * De marges: de body van het venster had 24 pixels aan de linkerkant en niets aan de rechterkant,
 * en de kop had er 24 links en 16 rechts. Alles staat nu op dezelfde 24, zodat de blokken, de kop
 * en de balk onderaan op een lijn liggen. */
.modal-content:has(.jm-venster) .modal-body {
    padding-left: 24px;
    padding-right: 24px;
}

/* Het vangnet: in een venster mag niets naast de rand uitsteken.

   Gemeld door Martijn, 17-09-2026: "er mag niks buiten beeld staan." Wat te breed is wordt hier
   afgebroken of gaat naar de volgende regel; wat dan nog niet past wordt niet buiten het venster
   getekend maar schuift binnen zijn eigen vak. */
.jm-blok,
.jm-blok-inhoud,
.jm-blok-inhoud > *,
.jm-blok-inhoud .jm-regel > * {
    min-width: 0;
    max-width: 100%;
}

.jm-blok-inhoud .header-label,
.jm-blok-inhoud .info-label,
.jm-blok-inhoud .color-grey,
.jm-blok-inhoud label {
    overflow-wrap: anywhere;
}

/* De teller onder een veld zweefde naar rechts, en daar kwam de regel eronder mee in de knel.
   Hij hoort gewoon onder het veld te staan, rechts uitgelijnd -- precies zoals .jm-teller dat doet
   in de lay-out van het beheer. (17-09-2026) */
.jm-blok-inhoud .max-length-label,
.jm-blok-inhoud .float-end.max-length-label {
    float: none !important;
    display: block;
    width: 100%;
    text-align: right;
    font-size: 12px;
    color: var(--jm-grijs);
}

.modal-content:has(.jm-venster) .modal-body {
    overflow-x: hidden;
}

.modal-content:has(.jm-venster) .modal-header.jm-venster {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.modal-content:has(.jm-venster) .modal-footer {
    padding: 0;
    border-top: 0;
}

    /* Bootstrap zet een marge van een kwart rem om alles wat in de voet staat; dat duwt de balk
       vier pixels naar binnen en dan loopt hij niet meer gelijk met de rest. */
    .modal-content:has(.jm-venster) .modal-footer > .jm-voetbalk {
        margin: 0;
    }

.jm-voetbalk {
    padding-left: 24px;
    padding-right: 24px;
}


/* --- oude rijen binnen een blok (10-09-2026) --------------------------------------------------- */

/* Niet elke pagina van het productvenster is met de hand omgezet naar .jm-regel; daar staan nog de
   rijen van vroeger: een kolom van acht met het label en de uitleg, en een kolom van twee of drie
   met het veld. Binnen een blok liggen die nu in dezelfde twee helften als .jm-regel, zodat de
   velden op alle pagina's onder elkaar staan. Buiten een blok verandert er niets. */
/* Een rij die met d-none is weggezet blijft weg. Deze regel zette display met een uitroepteken
   en woog zwaarder dan .d-none van bootstrap; daardoor stonden vragen die bij een uitgezette
   integratie horen alsnog in beeld. Gemeld door Martijn, 10-09-2026. */
.jm-blok-inhoud .col-md-12.d-flex:not(.d-none),
.jm-blok-inhoud .d-flex.justify-content-between.w-100:not(.d-none) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
}

    .jm-blok-inhoud .col-md-12.d-flex > *,
    .jm-blok-inhoud .d-flex.justify-content-between.w-100 > * {
        flex: 1 1 0;
        width: auto !important;
        max-width: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* flex: 1 1 0 hierboven verdeelt de rij gelijk over de kinderen die er nog staan -- en de lege
       marge-kolom valt hieronder weg (display:none), dus blijven de naam en het veld over. Zonder
       vaste maat bepaalt dan de tekst hoe breed het veld wordt: een korte naam ("Weergavenaam")
       laat het veld te breed groeien, een lange naam met uitleg ("Aangesloten op kassalade? Is
       deze printer...") drukt het juist smal. Daardoor stonden twee velden op dezelfde bladzijde
       nooit even breed, en geen van beide op de bedoelde dertig procent. Nu een vaste 70/30-maat
       voor precies de kolommen die deze rijen al gebruiken (col-md-8 en col-md-3), zodat de
       breedte niet meer van de tekstlengte afhangt. Gemeld door Martijn, 23-09-2026. */
    .jm-blok-inhoud .col-md-12.d-flex > .col-md-8,
    .jm-blok-inhoud .d-flex.justify-content-between.w-100 > .col-md-8 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    .jm-blok-inhoud .col-md-12.d-flex > .col-md-3,
    .jm-blok-inhoud .d-flex.justify-content-between.w-100 > .col-md-3 {
        flex: 0 0 27% !important;
        max-width: 27% !important;
    }

    /* Er staat achter zo'n rij vaak nog een lege kolom om het uit te lijnen; die is nu overbodig
       en zou het veld anders naar het midden duwen. */
    .jm-blok-inhoud .col-md-12.d-flex > div:empty,
    .jm-blok-inhoud .d-flex.justify-content-between.w-100 > div:empty {
        display: none;
    }


/* --- de velden half zo breed, rechts uitgelijnd (10-09-2026) ----------------------------------- */

/* Gevraagd door Martijn: de brede velden -- naam, EAN-code, btw-groep, de foto -- zijn half zo
   breed geworden. Ze worden alleen aan de linkerkant korter: de rechterkant blijft waar hij was,
   zodat alle velden onder elkaar op dezelfde lijn eindigen.
 *
   Velden die uit zichzelf al smal zijn (de prijs, een aantal, een datum) blijven even breed; die
   schuiven alleen mee naar rechts, zodat ook zij rechts uitkomen. */
/* Binnen een jm-regel staat die maat inmiddels op de regel zelf: zeventig procent voor de kop met
   de uitleg, dertig voor het veld (afgesproken met Martijn, 17-09-2026). Zet je hier dan nog eens
   25% op het veld, dan is dat 25% van die dertig procent -- vijfenzeventig pixels, een stompje
   rechts in beeld. Daarom vult het veld hier gewoon zijn eigen kolom. */
.jm-blok-inhoud .jm-regel > *:last-child {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* De rijen die geen jm-regel zijn maar een flexrij: daar geldt de maat nog wel op het kind zelf. */
.jm-blok-inhoud .col-md-12.d-flex > *:last-child,
.jm-blok-inhoud .d-flex.justify-content-between.w-100 > *:last-child {
    flex: 0 0 auto !important;
    width: 30% !important;
    max-width: 30% !important;
    margin-left: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    /* Wat er zelf al smal is -- de prijs, een aantal, een tijd -- begint links in die kolom, op
       dezelfde lijn als de brede velden erboven. Gevraagd door Martijn, 10-09-2026: "Lijn de
       overige velden zoals tijd, bedrag en andere kleinere invulvelden ook links uit." */
    .jm-blok-inhoud .jm-regel > *:last-child > .jimani-prijs,
    .jm-blok-inhoud .jm-regel > *:last-child > .number,
    .jm-blok-inhoud .col-md-12.d-flex > *:last-child > .jimani-prijs,
    .jm-blok-inhoud .col-md-12.d-flex > *:last-child > .number {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Hetzelfde voor een Ja/Nee dat uit de tag-helper komt: daar staan de twee rondjes met hun
       tekst in een eigen vakje, en dat vakje moet de hele kolom vullen. (10-09-2026)

       flex-direction: row moet hier expliciet bij: jaNeeOmbouwen() in jimani-vormbrug.js haalt de
       klasse d-flex van dit vakje af zodra het een kale Bootstrap-rij (col-md-8/col-md-3) omzet
       naar .jm-janee. Zonder een eigen naam hierboven (geen "uitleg" onder het label) laat
       isOudeRij() zo'n rij met rust, en dan mist de regel hieronder (*:last-child.d-flex) haar
       doelwit en valt dit vakje terug op *:last-child zonder .d-flex, dat kolom afdwingt: Ja en Nee
       stonden dan onder elkaar in plaats van naast elkaar. Gemeld door Martijn, 23-09-2026
       (Zit deze printer met een USB-kabel aan de kassa? / Welke kassalade?). */
    .jm-blok-inhoud .jm-janee {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

        /* Het tweede rondje trekt de rest mee naar rechts: Ja links, Nee rechts. */
        .jm-blok-inhoud .jm-janee > input[value="false"] {
            margin-left: auto;
        }

        .jm-blok-inhoud .jm-janee > label {
            margin: 0 0 0 6px;
            padding: 0 !important;
        }

    /* Ja en Nee staan op een regel: Ja tegen de linkerrand van de kolom, Nee tegen de rechter. Zo
       staan ze overal op dezelfde plek, en niet de ene keer naast elkaar en de andere keer eronder. */
    .jm-blok-inhoud .jm-regel > *:last-child.d-flex,
    .jm-blok-inhoud .col-md-12.d-flex > *:last-child.d-flex,
    .jm-blok-inhoud .d-flex.justify-content-between.w-100 > *:last-child.d-flex {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important;
    }

/* Het label met de uitleg mag de ruimte hebben die overblijft. */
.jm-blok-inhoud .jm-regel > *:first-child,
.jm-blok-inhoud .col-md-12.d-flex > *:first-child,
.jm-blok-inhoud .d-flex.justify-content-between.w-100 > *:first-child {
    flex: 1 1 auto !important;
    max-width: none !important;
}

/* En het uploadvak even breed als de velden erboven. */
.jm-blok-inhoud .uploader > .w-50 {
    width: 25% !important;
}


/* --- gestapelde rijen binnen een blok (10-09-2026) --------------------------------------------- */

/* Een deel van de vensters heeft de rij van vroeger nog anders opgebouwd: niet twee kolommen naast
   elkaar, maar blokjes onder elkaar -- de kop, soms een regel uitleg, en daaronder het veld. Op
   zichzelf werkt dat, maar naast een blok met twee kolommen leest het als een ander scherm.
 *
 * Binnen een blok liggen die nu in dezelfde twee helften als de rest: links de kop met de uitleg
 * eronder, rechts het veld. Het veld is het laatste blokje van de rij; wat ervoor staat is tekst.
 *
 * Alleen binnen .jm-blok-inhoud, zodat er buiten een blok niets verandert. */
.jm-blok-inhoud .col-md-12.px-0:not(.d-none) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25%;

    /* De regels links zijn zo hoog als hun tekst; het veld rechts loopt er langs. Zonder dit
       bepaalt het veld de hoogte van de eerste regel en valt de uitleg te laag. */
    grid-auto-rows: min-content;
    gap: 0 24px;
    align-items: start;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
}

    /* Het veld: rechts, op de hoogte van de kop.

       Het liep eerst over alle regels tekst ernaast, maar dan bepaalt het veld de hoogte van de
       eerste regel en valt de uitleg een halve regel te laag. Nu staat het naast de kop en schuift
       de uitleg er gewoon onder. */
    .jm-blok-inhoud .col-md-12.px-0 > *:last-child {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
    }

    /* De tekst ernaast: onder elkaar in de linkerkolom. */
    .jm-blok-inhoud .col-md-12.px-0 > *:not(:last-child) {
        grid-column: 1;
    }

    /* Een verborgen waarde hoort niet in het raster; die neemt anders een regel in beslag. */
    .jm-blok-inhoud .col-md-12.px-0 > input[type="hidden"] {
        display: none;
    }

    /* De bootstrapmaten en de inspringingen van vroeger gaan eraf: het raster doet de indeling. */
    .jm-blok-inhoud .col-md-12.px-0 > * {
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;

        /* De marge onder een blokje maakte de eerste regel hoger dan hij is, en dan viel de uitleg
           een halve regel te laag. Het raster zet de afstanden zelf. */
        margin-bottom: 0 !important;
    }

/* De teller onder een veld ("Maximaal aantal tekens: 15") stond rechts uitgelijnd los te zweven. */
.jm-blok-inhoud .max-length-label {
    float: none !important;
    display: block;
    margin-top: 4px;
    color: var(--jm-grijs);
    font-size: 12px;
    text-align: right;
}

/* --- kiezen op categorie boven de carrousel (10-09-2026) --------------------------------------- */

/* Gevraagd door Martijn: "Links van het zoekveld een categorie dropdown maken, zodat de carousel
   filtert op alle producten in deze categorie." Hij staat in dezelfde blauwe balk als het zoekveld
   en heeft dezelfde maat. */
.jm-blok-kop-zoeken .jm-carrousel-categorie {
    width: 180px;
    background-color: #fff;
    flex: 0 0 auto;
}

/* --- de lucht tussen de kop en de eerste blauwe balk (10-09-2026) ------------------------------ */

/* Gevraagd door Martijn: "De spacing tussen de headertekst en de eerste blauwe balk header moet
   altijd 1 cm zijn. Zorg dat dit ALTIJD bij elke popup klopt."
 *
 * Gemeten voor deze regel: vier pixels bij de categorie, het supplement, de korting en de
 * parkeertafel, en twintig bij het product -- want dat venster zet er zelf nog een marge bij. Elk
 * venster kwam ergens anders uit.
 *
 * Hier staat het een keer: alles wat de kop en de inhoud er zelf bij zetten gaat eraf, en de kop
 * krijgt een marge van achtendertig pixels -- een centimeter op een gewoon scherm. Alleen in een
 * venster waar ook echt een blauw blok staat; daar gaat de regel over. */
.modal-content:has(.jm-blok) > .modal-header,
.modal-content:has(.jm-blok) > form > .modal-header {
    padding-bottom: 0 !important;
    margin-bottom: 38px !important;
}

.modal-content:has(.jm-blok) > .modal-body,
.modal-content:has(.jm-blok) > form > .modal-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

    /* En het eerste blok begint bovenaan de inhoud, zonder er zelf nog iets bij te zetten. */
    .modal-content:has(.jm-blok) .modal-body .jm-blok:first-child {
        margin-top: 0 !important;
    }

/* --- het uploadvak in de blauwe balk (10-09-2026) ---------------------------------------------- */

/* Gevraagd door Martijn: "verplaats dit nu in de blauwe header en maak het 30% kleiner. De
   afbeelding header is het enige vak waar je direct de afbeelding kan uploaden." En daarna: "maak
   de afbeelding qua breedte exact hetzelfde als de breedte van het Naam veld. Haal de header Voeg
   een foto toe weg."
 *
 * Het vak stond onder de balk in een strook wit die verder leeg was. Nu staat het in de balk zelf,
 * rechts, en het is even breed als een veld in de rijen eronder: een kwart van het blok. */
.jm-blok-kop .uploader-in-de-kop {
    flex: 0 0 auto;
    width: 25%;
    margin-left: auto;
}

    /* De kop en de uitleg van de uploader staan al in de balk; die hoeven er niet nog een keer bij. */
    .jm-blok-kop .uploader-in-de-kop h3,
    .jm-blok-kop .uploader-in-de-kop > .form-text,
    .jm-blok-kop .uploader-in-de-kop .file-uploader-wrapper > .form-text,
    .jm-blok-kop .uploader-in-de-kop [class^="file-uploader-wrapper"] > h3,
    .jm-blok-kop .uploader-in-de-kop [class^="file-uploader-wrapper"] > .form-text {
        display: none !important;
    }

    .jm-blok-kop .uploader-in-de-kop .drop-zone {
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        min-height: 0;
    }

    /* Zonder foto is er geen verhouding om aan te hangen; dan houdt het vak zijn eigen hoogte, maar
       wel dertig procent kleiner dan hij was. */
    .jm-blok-kop .uploader-in-de-kop .drop-zone:not(.heeft-afbeelding) {
        min-height: 175px;
    }

    /* De tekst in het lege vak schaalt mee, anders past hij niet meer. */
    .jm-blok-kop .uploader-in-de-kop .drop-zone .upload-sleep-kop {
        font-size: 13px;
    }

    .jm-blok-kop .uploader-in-de-kop .drop-zone .upload-blader {
        font-size: 11px;
    }

    .jm-blok-kop .uploader-in-de-kop .drop-zone i {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .jm-blok-kop .uploader-in-de-kop .drop-zone .browse-button {
        padding: 6px 14px;
        font-size: 12px;
    }

/* De balk wordt zo hoog als het vak; de kop en de uitleg staan ernaast. */
.jm-blok-kop:has(.uploader-in-de-kop) {
    align-items: center;
}

/* Staat het uploadvak in de blauwe balk, dan blijft er onder die balk een lege witte strook over.
   Weggooien kan niet -- er staan verborgen velden in die bij het opslaan meegaan -- dus klapt hij
   dicht. (10-09-2026) */
.jm-blok-inhoud.jm-blok-inhoud-leeg {
    padding: 0;
}

/* Een blok waarvan de inhoud naar de blauwe balk is verhuisd, houdt geen leeg wit vlak over.
 *
 * Het uploadvak verhuist zichzelf naar de kop. Staat er verder niets in het blok -- een pagina met
 * alleen een afbeelding -- dan bleef er een leeg vak onder de balk staan. Gezien bij het
 * voorbeeldvenster onder Lay-out. (10-09-2026) */
.jm-blok:has(.jm-blok-kop .uploader-in-de-kop) .jm-blok-inhoud:not(:has(*)) {
    display: none;
}

/* De schakelaar in een venster is blauw, niet oranje.
 *
 * In het beheer is de huisstijl oranje, en die kleurt elke schakelaar mee. In een venster
 * hoort hij de kleur van de vensters te hebben. Gemeld door Martijn, 10-09-2026: "Lijst in een
 * blok: Toggle switch is Oranje". */
.jm-blok-inhoud .form-check-input:checked,
.jm-schakelaar:checked {
    background-color: var(--jm-blauw, #2563eb) !important;
    border-color: var(--jm-blauw, #2563eb) !important;
}

/* Een veld dat je niet zelf typt maar met de min en de plus zet, blijft wit.
 *
 * Bootstrap geeft een readonly veld een grijze achtergrond, en dat leest als "hier kan niets".
 * Bij een teller kan er wel degelijk iets: met de knoppen ernaast. Gemeld door Martijn,
 * 10-09-2026: "Aantal heeft een grijze achtergrond, dit moet gewoon wit zijn." */
.jm-blok-inhoud .number input[readonly],
.jm-tellerveld[readonly] {
    background-color: #fff !important;
}

/* --- de kleur per module (LY4, LY5) ------------------------------------------------------------

   De vorm van een venster is overal dezelfde; alleen de kleur verschilt per module. Die kleur zit
   in twee waarden: de accentkleur zelf, en een lichte versie daarvan voor de vlakken erachter.
   Alles in dit bestand rekent daarmee, dus er is verder niets aan te passen.

   De klasse staat op de kop en op het lijf van het venster; dat zijn twee kinderen van hetzelfde
   vak, en de kleuren erven van de klasse die erop staat.

   De oude namen staan er nog een keer bij, met de kleur er letterlijk in. Dat moet: --jm-blauw
   wijst op de buitenkant naar --jm-accent, en zo n verwijzing wordt daar meteen uitgerekend. Zet
   je hier alleen --jm-accent, dan blijft --jm-blauw op het blauw staan dat er al uit kwam en
   verandert er niets. (Gemeten 11-09-2026: vier vensters met een oranje naam en een blauwe kop.)

   Gevraagd door Martijn, 11-09-2026: horeca oranje, ticketing paars, activiteiten groen, salon
   roze. De webwinkel houdt het blauw dat hij al had. */

.jm-module-webshop {
    --jm-accent: #2563eb;
    --jm-accent-licht: #eff5ff;
    --jm-accent-donker: #1d4ed8;

    --jm-blauw: #2563eb;
    --jm-blauw-licht: #eff5ff;
}

.jm-module-horeca {
    --jm-accent: #ea580c;
    --jm-accent-licht: #fff3ea;
    --jm-accent-donker: #c2410c;

    --jm-blauw: #ea580c;
    --jm-blauw-licht: #fff3ea;
}

.jm-module-activiteiten {
    --jm-accent: #059669;
    --jm-accent-licht: #e9f8f2;
    --jm-accent-donker: #047857;

    --jm-blauw: #059669;
    --jm-blauw-licht: #e9f8f2;
}

.jm-module-salon {
    --jm-accent: #db2777;
    --jm-accent-licht: #fdeef5;
    --jm-accent-donker: #be185d;

    --jm-blauw: #db2777;
    --jm-blauw-licht: #fdeef5;
}

.jm-module-ticketing {
    --jm-accent: #7c3aed;
    --jm-accent-licht: #f4efff;
    --jm-accent-donker: #6d28d9;

    --jm-blauw: #7c3aed;
    --jm-blauw-licht: #f4efff;
}

/* De tegel op het lay-outscherm draagt dezelfde kleur, zodat je voor het openen al ziet van welke
   module een venster is. */
.jm-moduletegel i {
    color: var(--jm-accent);
}

.jm-moduletegel .card-body {
    border-top: 3px solid var(--jm-accent);
    border-radius: 0 0 6px 6px;
}

/* Het kleurvlakje voor de kleurenlijst: zo zie je welke kleur je kiest zonder de lijst te openen. */
.jm-kleurvlak {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(16, 24, 40, .15);
    flex: 0 0 auto;
    margin-right: 8px;
}

/* --- de kleurenlijst ----------------------------------------------------------------------------

   De kleur zit in de lijst zelf en niet als los vlakje ernaast: elke regel draagt zijn kleur, en de
   lijst draagt de kleur die gekozen is. Gevraagd door Martijn, 11-09-2026. */
.jm-kleurlijst {
    font-weight: 600;
}

    .jm-kleurlijst option {
        background-color: #fff;
        font-weight: 400;
    }

/* --- de teller in een venster ------------------------------------------------------------------

   Het getal hoort in het midden tussen de min en de plus. Zonder dit duwt de browser de pijltjes
   ernaast en staat het getal uit het lood. Gemeld door Martijn, 11-09-2026. */
.jm-blok-inhoud .jm-tellerveld {
    text-align: center;
    max-width: 90px;

    /* De pijltjes van het invoerveld weg: daar staan de knoppen al voor. */
    -moz-appearance: textfield;
}

    .jm-blok-inhoud .jm-tellerveld::-webkit-outer-spin-button,
    .jm-blok-inhoud .jm-tellerveld::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* --- de dagen met hun tijdvak ------------------------------------------------------------------

   Vier kolommen: de dag, van, tot, en een knop die zegt of hij open of gesloten is. Een dag die
   dicht staat is grijs, zodat je het in een oogopslag ziet. */
.jm-dagenlijst td {
    vertical-align: middle;
}

.jm-dag-dicht td {
    color: #9aa3b0;
}

.jm-dagknop {
    min-width: 150px;
    justify-content: center;
}

.jm-dagknop-open {
    background: var(--jm-accent-licht);
    border-color: var(--jm-accent);
    color: var(--jm-accent);
    font-weight: 600;
}

/* --- tegels die aan of uit staan ---------------------------------------------------------------

   De ruimtes en de stoelen stonden als schakelaartjes naast elkaar; die liepen het blok uit en je
   zag niet wat aan of uit was. Een tegel zegt het zelf. Gevraagd door Martijn, 11-09-2026. */
.jm-tegels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jm-tegel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 170px;
    padding: 12px 16px;
    border: 1px solid var(--jm-rand);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

    .jm-tegel:hover {
        border-color: var(--jm-accent);
    }

    .jm-tegel.gekozen {
        border-color: var(--jm-accent);
        background: var(--jm-accent-licht);
    }

.jm-tegel-naam {
    font-weight: 600;
    color: #1d2430;
}

.jm-tegel-bij {
    font-size: 13px;
    color: var(--jm-grijs);
}

.jm-tegel-stand {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--jm-grijs);
}

    .jm-tegel.gekozen .jm-tegel-stand {
        color: var(--jm-accent);
    }

/* --- ja en nee ---------------------------------------------------------------------------------

   Ja links, nee rechts, over de breedte van het veld. Stonden ze tegen elkaar aan, dan lees je ze
   als een groepje in plaats van als twee kanten. Gevraagd door Martijn, 11-09-2026. */
.jm-janee {
    max-width: 200px;
}

/* --- een bedrag --------------------------------------------------------------------------------

   Smal en met het valutateken ervoor: een prijsveld over de volle breedte suggereert dat er een
   lange tekst in kan. */
.jm-bedrag {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 160px;
}

.jm-bedrag-teken {
    color: var(--jm-grijs);
    font-weight: 600;
}

.jm-module-hotel {
    --jm-accent: #0f766e;
    --jm-accent-licht: #eaf6f4;
    --jm-accent-donker: #115e59;

    --jm-blauw: #0f766e;
    --jm-blauw-licht: #eaf6f4;
}


/* --- het i-knopje op een tegel (17-09-2026) ---------------------------------------------------- */

/* Het was een blauw plaatje, en een plaatje kun je niet meekleuren met de module. Nu is het een
   pictogram in de kleur van de module waar je in werkt. De naam info-img blijft, want daar hangt de
   afhandeling aan die de uitleg opent (js/restaurant/*.form.js).
   Gemeld door Martijn, 17-09-2026: binnen horeca hoort alles oranje te zijn. Sinds 17-09-2026 geldt
   hetzelfde voor activiteiten, de salon en ticketing; daar heet het knopje op een paar schermen
   event-info-img. */
span.info-img,
span.event-info-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--jm-accent-licht, #eff5ff);
    color: var(--jm-accent, #2563eb);
    font-size: 11px;
    cursor: pointer;
}


/* --- een min en een plus zien er overal hetzelfde uit (17-09-2026) ----------------------------- */

/* Er stonden er drie naast elkaar met drie verschillende maten: 35 bij 32 bij een datum, 38 bij 38
   bij een tijd, 35 bij 35 bij een aantal -- en drie kleuren. Dat viel op zodra ze op een bladzijde
   bij elkaar kwamen te staan (Lay-out, Alle velden).

   Een knop is 36 bij 36, met dezelfde rand, dezelfde hoek en de kleur van de module. */
.jm-blok-inhoud .range-div,
.jm-blok-inhoud .rounded-div,
.jm-tijdstap {
    box-sizing: border-box;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid #d5d8dc !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--jm-accent, #2563eb) !important;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

    .jm-blok-inhoud .range-div:hover,
    .jm-blok-inhoud .rounded-div:hover,
    .jm-tijdstap:hover {
        background: var(--jm-accent-licht, #f2f6ff) !important;
        border-color: var(--jm-accent, #2563eb) !important;
    }

    .jm-blok-inhoud .range-div i,
    .jm-blok-inhoud .rounded-div i {
        color: inherit;
    }

/* Het vak met de tijd, de datum of het aantal ertussen is even hoog als die knoppen. */
.jm-blok-inhoud .jm-tijdvak,
.jm-blok-inhoud .number .jm-tellerveld,
.jm-blok-inhoud .jm-datumkiezer .input-group {
    height: 36px;
    min-height: 36px;
}