/* Eén vorm voor de terugknop.
 *
 * Waarom dit bestand bestaat
 * --------------------------
 * In de vensters en op de hoofdschermen stond overal een blauwe terugknop, terwijl de kassa een
 * grijze heeft. Twee kleuren voor dezelfde handeling. Gemeld door Martijn, 07-09-2026: alles grijs,
 * hetzelfde als in de kassa-app.
 *
 * De grijze vorm bestond al: .btn-back is 40 bij 40, hoek 6, achtergrond #969BA0. Alleen werd hij
 * op tientallen plekken overschreven met bg-white of bg-transparent, en dan zag je het blauwe
 * pictogram op een witte knop. Hier staat die vorm één keer, sterker dan die losse overschrijvingen.
 *
 * En: staat de knop op een pagina en niet in een venster, dan hoort hij linksonder in de hoek van
 * het scherm. Hij stond daar waar de inhoud toevallig ophield, en dat is per pagina ergens anders.
 *
 * Dit bestand wordt in elke layout als laatste geladen, net als jimani-velden.css. Dezelfde reden:
 * dezelfde opmaakregels staan negen keer in het systeem, één keer per module.
 */

/* --- de vorm --------------------------------------------------------------------------------- */
.btn-back,
.prev-step,
button#back,
a#back {
    background-color: #969BA0 !important;
    color: #fff !important;
    border: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    opacity: 1;
}

/* Het pijltje is een plaatje: een blauw vierkantje met een witte pijl erin. Dat plaatje wit maken
   levert een wit blokje op, want dan wordt alles wit. Het plaatje gaat dus weg en de pijl wordt hier
   getekend. Eén pijl, overal dezelfde. (07-09-2026) */
.btn-back img,
.prev-step img,
button#back img,
a#back img {
    display: none;
}

.btn-back::after,
.prev-step::after,
button#back::after,
a#back::after {
    /* De pijl is twee randlijnen die samen een punt vormen, een halve slag gedraaid. Geen plaatje
       en geen pictogramlettertype: dit werkt overal, ook op de kassa. */
    content: "";
    width: 9px;
    height: 9px;
    border-left: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    transform: rotate(45deg);
    margin-left: 3px;
}

/* Staat er al een pictogram uit het lettertype in de knop, dan hoeft er geen tweede pijl bij. Hetzelfde
   voor de pijl die de vormbrug als svg in de knop zet: anders stonden er twee pijlen in een vak ("<- <").
   Gemeld door Martijn, 24-09-2026, bij Bedrijfsgegevens. */
.btn-back:has(i)::after,
.prev-step:has(i)::after,
button#back:has(i)::after,
a#back:has(i)::after,
.btn-back:has(svg)::after,
.prev-step:has(svg)::after,
button#back:has(svg)::after,
a#back:has(svg)::after {
    content: none;
}

/* Volgende met tekst: geen plaatje met een pijl ervoor. Martijn, 24-09-2026: "knop Volgende heeft icoon +
   tekst -> icoon eruit". */
.next-step:has(.jm-knoptekst) img {
    display: none;
}

.btn-back i,
.prev-step i,
button#back i,
a#back i {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

/* Een uitgeschakelde terugknop buiten een venster: lichter grijs, zodat je ziet dat er niets
   achter zit. Binnen .jm-vorm gaat hij helemaal weg -- zie jimani-formulier.css, jm-knop-vorige --
   want op de eerste stap hoort er geen knop Vorige te staan. (18-09-2026, Martijn.) */
.prev-step.disabled,
.btn-back.disabled,
.prev-step:disabled,
.btn-back:disabled {
    background-color: #d7dce5 !important;
    cursor: default;
}

/* --- waar hij staat -------------------------------------------------------------------------- */
/* Op een pagina: linksonder in de hoek van het scherm. In een venster niet: daar hoort hij in de
   balk onderaan het venster, en die staat er al. */
.right_col button#back,
.right_col a#back {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 5;
    margin: 0 !important;
}

/* Op een tegelpagina (Aangesloten apparaten) lag de vaste pijl over de tegels linksonder. Daar staat hij onder de tegels,
   op zijn eigen plek (testronde horeca 04-10-2026, kleine ronde; op de telefoon deed T7 dit al overal). */
.right_col:has(.card-container) button#back,
.right_col:has(.card-container) a#back {
    position: static;
    margin: 16px 0 8px 12px !important;
}

/* ------------------------------------------------------------------------------------------------
   X38, gemeld door Martijn 08-09-2026: de zoekknop in het financieel overzicht staat uit het midden
   en is grijs.

   Twee dingen. De knoppen hingen aan mt-4 -- een gok die zeven pixels naast de velden ernaast
   uitkwam -- en het vergrootglas erin was grijs op een blauwe knop.
   ------------------------------------------------------------------------------------------------ */

.zoekknoppen-financieel {
    display: flex;
    align-items: center;
    justify-content: center;

    /* De kolom heeft nu net als de velden ernaast een label erboven staan; hier hoeft dus geen
       hoogte of marge geraden te worden. */
    margin-bottom: 0;
}

    .zoekknoppen-financieel .btn i {
        margin: 0 !important;
    }

    /* Wit op blauw. Het pictogram erfde een grijs uit de algemene opmaak. */
    .zoekknoppen-financieel .btn-blue i {
        color: #fff !important;
    }

/* ------------------------------------------------------------------------------------------------
   De knop Kassa koppelen naast de groene plus.

   Gevraagd door Martijn, 09-09-2026: "wil je van deze knop ook een nieuwe knop maken met afgeronde
   hoeken, zelfde hoogte als de groene plus knop."

   De plus is veertig bij veertig met hoek zes (.btn-add in custom.css). De blauwe knop ernaast was
   hoger en had scherpe hoeken, waardoor het twee losse dingen leken in plaats van een paar. Dezelfde
   hoogte en dezelfde hoek maken er een rij van.
   ------------------------------------------------------------------------------------------------ */

.btn.knopKoppelcode,
#knopKoppelcode,
#knopTapKoppelen {
    height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px !important;
    padding: 0 16px;
    line-height: 1;
}


/* --- de terugknop in de balk onderaan een venster (10-09-2026) --------------------------------- */

/* Hierboven wordt elke .prev-step een grijs vierkantje van 40 bij 40 met alleen een pijl. Dat klopt
   op een pagina en in de kassa, maar in de balk onderaan een venster staat er tekst naast de pijl
   -- "Vorige" -- en die puilde er dan uit: je las "Vorig" met de rest achter de rand van het
   venster. Gemeld door Martijn, 10-09-2026.
 *
 * Daar geldt dus de vorm van .jm-knop: even hoog als de andere knoppen in die balk, wit met een
 * randje, en zo breed als de tekst nodig heeft. Alleen binnen .jm-voetbalk, zodat de knop op elke
 * andere plek blijft zoals hij is. */
/* 18-09-2026: even breed en even hoog als de andere knoppen in de balk. Stond hier op auto met een
   hoogte van 42, en dan was Vorige honderd breed naast knoppen van honderdzestig, en twee punten
   hoger. Gevraagd door Martijn, 17-09-2026: "Maak vervolgens ALLE knoppen dezelfde breedte." */
.jm-voetbalk .prev-step.jm-knop {
    width: auto !important;
    min-width: var(--knop-breed, 160px);
    height: var(--knop-hoog, 40px) !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    white-space: nowrap;
}

/* Vorige is alleen een pijl: een vierkant knopje, even hoog als de andere knoppen. (21-09-2026) */
.jm-voetbalk .prev-step.jm-knop.jm-knop-icoon {
    width: var(--knop-hoog, 40px) !important;
    min-width: var(--knop-hoog, 40px) !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .jm-voetbalk .prev-step.jm-knop:hover {
        background-color: #f7f9fc !important;
    }

    .jm-voetbalk .prev-step.jm-knop i {
        color: inherit;
    }


/* --- de sluitknop rechtsboven in elk venster (10-09-2026) -------------------------------------- */

/* Gevraagd door Martijn: "Laten we ook in ELKE popup van het hele systeem de sluit knop rechts
   boven goed zetten. Dus met een grijze border, witte achtergrond, rood kruisje en afgeronde hoeken
   netjes in de rechter bovenhoek met gelijke spacing."
 *
 * Hij stond overal net ergens anders: soms in de kop mee in de rij, soms met een marge van twintig
 * pixels rechts en negen boven. Hij hangt nu vast in de hoek van het venster zelf, met dezelfde
 * afstand tot beide randen, en hij is een knop geworden in plaats van een los kruisje.
 *
 * Het kruisje is hier getekend en niet uit een lettertype gehaald: dat werkt ook op een scherm dat
 * het pictogramlettertype niet heeft geladen. */
.modal-content {
    position: relative;
}

    .modal-content > .btn-close,
    .modal-content .modal-header .btn-close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 5;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        background-color: #fff !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc2626'%3E%3Cpath d='M2.146 2.146a.75.75 0 0 1 1.061 0L8 6.939l4.793-4.793a.75.75 0 1 1 1.06 1.061L9.061 8l4.792 4.793a.75.75 0 0 1-1.06 1.06L8 9.061l-4.793 4.792a.75.75 0 0 1-1.06-1.06L6.939 8 2.146 3.207a.75.75 0 0 1 0-1.061z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        box-shadow: none !important;
    }

        .modal-content > .btn-close:hover,
        .modal-content .modal-header .btn-close:hover {
            background-color: #fef2f2 !important;
            border-color: #fca5a5 !important;
        }

/* De kop hoeft dan geen ruimte meer vrij te houden voor een knop die er niet meer in staat, maar
   de tekst mag er ook niet onder doorlopen. */
.modal-content .modal-header {
    padding-right: 64px;
}

    /* De kop is een flexrij met "ruimte ertussen". Toen het kruisje eruit werd getild bleven er in
       sommige koppen nog twee dingen over -- een plaatje en de titel -- en dan schoof die titel
       naar de rechterkant. De titel neemt de ruimte die overblijft, dus staat hij links waar hij
       hoort. Gemeld door Martijn, 10-09-2026: "De header aanpassen keukenprinter moet naar links,
       zoals dit was." */
    .modal-content .modal-header > .modal-title {
        margin-right: auto;
    }


/* --- importeren en exporteren (10-09-2026) ----------------------------------------------------- */

/* Twee knoppen met een randje en de naam erin, in plaats van een groen pijltje en een Excel-plaatje
   waarvan je moest raden wat ze deden. Zie js/jimani/import-export.js: dat maakt er knoppen van,
   hier staat hoe ze eruitzien.

   De breedte staat er met !important bij, en dat is nodig. Deze twee waren plaatjes, en op een
   aantal schermen staat in het scherm zelf nog de maat van dat plaatje -- .downloadLink is daar 45
   bij 40. Een knop met een opschrift past niet in 45 pixels, en dan loopt de tekst over de knop
   ernaast heen. Gemeld door Martijn, 17-09-2026 over de openingstijden van horeca: "Fix de knoppen
   import export."

   Sinds T74 (05-10-2026) grijs en neutraal in plaats van de modulekleur: het zijn bijknoppen, de modulekleur is
   voor de hoofdactie. */
/* De klasse twee keer: zwaarder dan losse paginaregels (.btn-excel, .page-title a) die rand en hoogte wegzetten. */
.jm-knop-import.jm-knop-import,
.jm-knop-export.jm-knop-export {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 12px !important;
    margin: 0 0 0 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

    .jm-knop-import:hover,
    .jm-knop-export:hover {
        background: #f3f4f6 !important;
        border-color: #9ca3af !important;
        color: #111827 !important;
    }

    .jm-knop-import i,
    .jm-knop-export i {
        font-size: 14px;
        color: inherit !important;
    }

/* T74 (Martijn 05-10-2026): Import en Export zijn rustige grijze randknoppen, kleiner dan de hoofdknoppen, en staan
   altijd op de regel van de titel, rechts; andere knoppen op die regel (Toevoegen, Wijzigen...) staan rechts ervan.
   import-export.js zet ze daar (.jm-titelregel / .jm-titelknoppen) als ze ergens anders in de pagina stonden.
   Telefoon: onder de titel, compact, met icoon en het korte woord. */
.jm-titelregel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

    .jm-titelregel > h1, .jm-titelregel > h2, .jm-titelregel > h3, .jm-titelregel > h4 {
        margin-bottom: 0;
    }

/* De .page-title waar de knoppen in gezet zijn: een regel, alles op een lijn. */
.jm-titelrij.jm-titelrij {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.jm-titelknoppen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

    /* Import/Export van een tabblad dat niet open is (import-export.js, data-jm-paneel). */
    .jm-titelknoppen .jm-paneel-dicht {
        display: none !important;
    }

    /* Titel met uitleg eronder in hetzelfde blok: de knoppen op de hoogte van de titel. */
    .jm-titelknoppen.jm-titelknoppen-boven {
        align-self: flex-start;
    }

    .jm-titelknoppen .jm-knop-import,
    .jm-titelknoppen .jm-knop-export,
    .jm-titelknoppen .jm-knop-toevoegen {
        margin: 0 !important;
    }

/* De knop Toevoegen: de vroegere losse blauwe plus (Multiple_add.png) met een plus en het woord (12-10-2026). Zelfde vorm als
   Import en Export (js/jimani/plusknop.js zet de klassen, import-export.js de plaats: rechts van Export). Hover, actief en
   toetsenbordfocus volgen de huisstijlkleur van de klant. */
.jm-knop-toevoegen.jm-knop-toevoegen {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 12px !important;
    margin: 0 0 0 8px;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

    .jm-knop-toevoegen.jm-knop-toevoegen:hover,
    .jm-knop-toevoegen.jm-knop-toevoegen:active,
    .jm-knop-toevoegen.jm-knop-toevoegen:focus-visible {
        background: var(--jm-klantaccent, #F37120) !important;
        border-color: var(--jm-klantaccent, #F37120) !important;
        color: var(--jm-tekst-op-accent, #1A1A1A) !important;
    }

    .jm-knop-toevoegen i {
        font-size: 14px;
        color: inherit !important;
    }

    /* De rij boven de tabbalk waar de plus uit weg is naar de rij van het tabblad: niets meer laten zweven. */
    .page-title.jm-plus-weg {
        display: none !important;
    }

    /* De tabbalk staat vast (Martijn 04-11-2026: "de tabbalk zakt een paar cm tijdens het laden en springt terug").
       De rij met Alleen verwijderde items en Toevoegen stond BOVEN de tabbalk. Zodra plusknop.js hem naar de kopregel van het
       open tabblad bracht (of er weer uit haalde) verdween of verscheen die rij en sprong de tabbalk 60 px op of neer, per tabblad
       anders, en nog eens als een tabblad zijn lijst later binnenkreeg. Nu staat de rij in de weergave ONDER de tabbalk (order, dus
       op dezelfde plek in de pagina, zonder verplaatsing door script): wat daarna verschijnt of verdwijnt duwt alleen de inhoud
       eronder, nooit de tabbalk. Geldt voor elk beheerscherm met deze opzet (Horeca, Activiteiten, Ticketing, Salon, Webshop, Hotel). */
    /* Spoed 05-11-2026 (live, Bestellingen NU en Verkoop): de regel hieronder pakte ook schermen waar de inhoud IN hetzelfde vak staat
       (Bestellingen: _Bestellingtabs met kop en tabbladen, daarna het bord of de lijst). De rest van het vak had order 0 en kwam zo BOVEN de
       tabbladen, de kop helemaal onderaan; en align-items: center (custom.css) maakte alles smal en gecentreerd (Zoek afgekapt). Nu: de
       pagina Bestellingen nooit (daar hoort kop, tabbladen, inhoud), elders komt alles wat geen kop of tabbalk is NA de kop, op volle breedte. */
    .modal-xpanel-reservation:has(> .page-title ~ ul.nav-tabs):not(:has(> .bestellingenkop)) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

        .modal-xpanel-reservation:has(> .page-title ~ ul.nav-tabs):not(:has(> .bestellingenkop)) > :not(.page-title):not(ul.nav-tabs) {
            order: 3;
        }

        .modal-xpanel-reservation:has(> .page-title ~ ul.nav-tabs):not(:has(> .bestellingenkop)) > .page-title {
            order: 2;
            margin-top: .5rem;
        }

        .modal-xpanel-reservation:has(> .page-title ~ ul.nav-tabs):not(:has(> .bestellingenkop)) > ul.nav-tabs {
            order: 1;
            align-self: stretch;
            margin-left: 0;
            margin-right: 0;
        }

        .modal-xpanel-reservation:has(> .page-title ~ ul.nav-tabs):not(:has(> .bestellingenkop)) > .clearfix {
            display: none;
        }

    /* Het plaatje is weg; een eventuele tekstkleur van het oude plaatjesvak hoeft er niet meer. */
    .jm-knop-toevoegen > span {
        display: inline !important;
    }

@media (max-width: 767.98px) {
    .jm-titelrij.jm-titelrij {
        flex-wrap: wrap;
    }

    .jm-titelregel {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .jm-titelknoppen {
        margin-left: 0;
    }

    .jm-knop-import.jm-knop-import,
    .jm-knop-export.jm-knop-export,
    .jm-knop-toevoegen.jm-knop-toevoegen {
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 13px;
    }

        .jm-knop-import > span,
        .jm-knop-export > span {
            display: inline !important;
        }
}

/* Het vak waar het label in stond houdt alleen de knop over: geen rand en geen vaste breedte meer. */
.jm-keuzevak-leeg {
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Het losse vak "Kies een bestand" en het label ervoor: de knop opent de kiezer nu zelf. */
.jm-verborgen-keuze {
    display: none !important;
}


/* --- de balk onderaan elk venster (10-09-2026) ------------------------------------------------- */

/* De vorm van .jm-voetbalk staat in jimani-vensters.css; die geldt alleen binnen de vensters die
   al omgeschreven zijn. js/jimani/vensterbalk.js zet elke andere balk in dezelfde vorm, en dan is
   die vorm hier ook nodig -- dit blad wordt in elke laag geladen.

   Alleen de dingen die anders zijn dan de standaardknop staan hier; de rest komt uit .jm-knop. */
.jm-voetbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #e5e9f2;
}

/* De voet van bootstrap trekt zelf ook een streep. Staat de balk erin, dan zag je er twee onder
   elkaar. Gemeld door Martijn, 10-09-2026, in het venster van een apparaat: "er staat een dubbele
   lijn/streep aan de onderkant". De balk trekt de streep, de voet eromheen niet meer. */
.modal-footer:has(> .jm-voetbalk) {
    border-top: 0;
    padding: 0;
}

    .modal-footer > .jm-voetbalk {
        margin: 0;
    }

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

    /* Het pictogram in een knop met tekst is klein en staat naast het woord, niet erin. */
    .jm-voetbalk .jm-knop i {
        font-size: 14px;
    }

    /* De float-jes van vroeger zetten de knoppen naast de balk in plaats van erin. */
    .jm-voetbalk .jm-knop {
        float: none !important;
    }

/* --- de plusknop "maak er hier meteen een aan" (10-09-2026) ------------------------------------ */

/* Er stond een knopje met alleen een plaatje, met ernaast een regel die uitlegde waar het over ging.
   De knop zegt het nu zelf; de regel ernaast is weg. */
.jm-knop-plus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jm-plusregel {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* In Restaurant beheer is de plusknop onder een lijst (Velden toevoegen, Reserveersoort toevoegen) zo breed als een regel
   van die lijst, met de plus op dezelfde regel als het woord en een blauwe rand zoals in de kassa. Het blok maakte er
   een kolom van (de laatste in een d-flex-regel): de plus stond boven het woord. (Martijn 04-10-2026, T8a/T10c) */
.jm-module-restaurant .modal .jm-plusregel,
.jm-module-horeca .modal .jm-plusregel {
    justify-content: stretch !important;
}

/* De lijst met velden hield rechts 24px vrij (px-4) en de knop eronder niet: dan was de knop breder dan een veld. */
.jm-module-restaurant .modal .jm-blok-inhoud .fields-selection,
.jm-module-horeca .modal .jm-blok-inhoud .fields-selection {
    padding-right: 0 !important;
}

.jm-module-restaurant .modal .jm-plusregel > .jm-knop-plus,
.jm-module-horeca .modal .jm-plusregel > .jm-knop-plus,
.jm-knop-toevoegen-breed {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 8px;
    border: 1px solid #2563eb !important;
    color: #2563eb !important;
    background: #fff !important;
}

.jm-module-restaurant .modal .jm-plusregel > .jm-knop-plus:hover,
.jm-module-horeca .modal .jm-plusregel > .jm-knop-plus:hover,
.jm-knop-toevoegen-breed:hover {
    background: #eff5ff !important;
}

/* --- Ja en Nee even groot in elk bevestigingsvenster (KO1, 12-09-2026) ------------------------- */

/* Gemeld door Martijn, 11-09-2026: in "Verwijder de korting" is Ja kleiner dan Nee. Dat komt
   doordat de knoppen alleen zo breed zijn als hun tekst, en "Nee" is nu eenmaal een letter langer.
   Twee knoppen van verschillende grootte naast elkaar lezen als een hoofdknop en een bijknop -- en
   bij verwijderen is dat precies de verkeerde suggestie.

   Het geldt voor elk bevestigingsvenster en niet alleen voor kortingen, dus het staat hier en niet
   bij een scherm. */
/* Ja stond op 8px 16px en Nee op 8px 48px, met een andere marge ernaast. Zelfde vulling, zelfde
   minimumbreedte, zelfde marge: dan zijn ze even groot, ook als er ooit een langer woord in komt. */
.sweet-alert .sa-button-container .confirm,
.sweet-alert .sa-button-container .cancel,
.sweet-alert button.confirm,
.sweet-alert button.cancel {
    min-width: 140px;
    padding: 8px 16px;
    margin: 16px 8px;
    text-align: center;
}

/* Een knop die bezig is, laat dat zien. Anders lijkt het alsof er niets gebeurt en gaat iemand
   juist harder drukken. (PS1, 12-09-2026) */
.jm-knop-bezig {
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}

/* Staat de terugknop in een balk onderaan een bladzijde, dan hoort hij in die balk en niet als
   zwevend grijs vierkantje linksonder in beeld. Hierboven staat hij vast op 40 bij 40 met
   position: fixed; binnen .jm-voetbalk geldt de vorm van de standaard. Gemeld door Martijn,
   18-09-2026: "Menu instellingen staat opeens weer de vorige en volgende iconen, dit moet weg en
   vervangen door onze vorige en volgende teksten." (18-09-2026) */
.jm-vorm .jm-voetbalk button#back.jm-knop,
.jm-vorm .jm-voetbalk a#back.jm-knop,
.right_col .jm-vorm .jm-voetbalk button#back.jm-knop,
.right_col .jm-vorm .jm-voetbalk a#back.jm-knop {
    position: static !important;
    width: auto !important;
    min-width: var(--knop-breed, 160px) !important;
    height: var(--knop-hoog, 40px) !important;
    padding: 0 16px !important;
    background-color: #fff !important;
    color: #111827 !important;
    border: 1px solid var(--jm-rand, #e5e9f2) !important;
    border-radius: 10px !important;
    font-size: 14px;
    font-weight: 500;
}

    /* Het pijltje dat hierboven met ::after wordt getekend, hoort daar dan niet meer bij. */
    .jm-vorm .jm-voetbalk button#back.jm-knop::after,
    .jm-vorm .jm-voetbalk a#back.jm-knop::after {
        content: none !important;
    }

/* --- de naam van een locatie of een combinatietafel als neutraal label (T12a/T13, 04-10-2026) ----------------

   Locaties stonden groen gestippeld en combinatietafels blauw gestippeld in de lijst; dat leest als een status
   (groen = goed) of een knop. Gevraagd door Martijn, 04-10-2026: "standaard zwart met wit", een neutrale tag. De
   oude regels staan per module in custom.css, pos.css enzovoort (met !important); hier, na die bestanden, een keer
   voor allemaal. */
body .location-tag,
body .horeca-tables tr td:nth-child(4) .location-tag,
body .horeca-locations tr td:first-child .location-tag,
body .combination-tables tr td:first-child .combination-table-name {
    display: inline-block;
    color: #fff !important;
    background-color: #111827 !important;
    border: 1px solid #111827 !important;
    border-radius: 6px !important;
    font-weight: 500;
    text-align: center;
    padding: 4px 12px;
    line-height: 20px;
    vertical-align: middle;
}

/* In de lijst Locaties was de tag 190 breed en 38 hoog; het i-knopje ernaast (22, zoals op elke tegel en in elke lijst)
   leek daardoor een mini-knopje. De tag is nu zo hoog als een gewone regel, en het knopje staat er recht naast (T12b). */
body .horeca-locations tr td:first-child .location-tag {
    width: auto !important;
    min-width: 120px;
}

.horeca-locations tr td:first-child .info-img {
    vertical-align: middle;
}

/* De tafelkeuze bij een combinatietafel over de hele breedte (T4, 04-10-2026): eerst de gekozen tafels, dan alle tafels. */
.jm-blok-inhoud .jm-tafelkeuze {
    display: block;
    width: 100%;
    max-width: 100%;
}

.jm-blok-inhoud .jm-tafelkeuze #selectedTablesPreview:not(:empty) {
    margin-bottom: 12px;
}

/* Tafels, bewerkstand: pijltjes links en rechts van de tafelafbeelding om door de afbeeldingen te bladeren (T2, 04-10-2026).
   Zelfde maat en rand als de min en de plus ernaast. */
.jm-tafelbeeld {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jm-tafelbeeld-pijl {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d5d8dc;
    border-radius: 10px;
    background: #fff;
    color: var(--jm-accent, #2563eb);
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.jm-tafelbeeld-pijl:hover {
    background: var(--jm-accent-licht, #eff5ff);
}

/* --- Tafels en banen direct bewerken in de lijst (Martijn 12-10-2026) ---------------------------------------------------
   De pijltjes bij de afbeelding staan bij elke regel klaar: zichtbaar bij het aanwijzen van de regel, na een klik op de
   afbeelding (tablet) en in de wijzigstand. Onzichtbaar in plaats van weg, zodat de kolom niet verspringt. */
.horeca-tables .jm-tafelbeeld-pijl {
    visibility: hidden;
}

.horeca-tables tr.dataRow:hover .jm-tafelbeeld-pijl,
.horeca-tables tr.dataRow.jm-beeld-open .jm-tafelbeeld-pijl,
.horeca-tables.jm-wijzig .jm-tafelbeeld-pijl {
    visibility: visible;
}

.horeca-tables .tafelbeeld-img,
.horeca-tables .tafelbeeld-leeg {
    cursor: pointer;
}

.horeca-tables .tafelbeeld-leeg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px dashed #d5d8dc;
    border-radius: 10px;
    color: #9ca3af;
    font-size: 20px;
}

    .horeca-tables .tafelbeeld-leeg[hidden] {
        display: none;
    }

/* Een getal dat je aanklikt om het te wijzigen: ziet eruit als tekst, met een lijntje bij het aanwijzen. */
.jm-lijst-klikwaarde {
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .jm-lijst-klikwaarde:hover,
    .jm-lijst-klikwaarde:focus-visible {
        border-color: var(--jm-rand, #e5e9f2);
        background: #fff;
    }

/* De min en de plus in een lijst: de stapper uit Alle velden (rand, hoek en modulekleur van .jm-stap), op de maat van de
   pijltjes bij de afbeelding. */
.jm-lijst-stapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

    .jm-lijst-stapper .jm-lijst-stap {
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--jm-rand, #e5e9f2);
        border-radius: 8px;
        background: #fff;
        color: var(--jm-accent, #2563eb);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }

        .jm-lijst-stapper .jm-lijst-stap:hover {
            background: var(--jm-accent-licht, #eff5ff);
            border-color: var(--jm-accent, #2563eb);
        }

    .jm-lijst-stapper input {
        box-sizing: border-box;
        width: 52px;
        height: 32px;
        margin: 0;
        padding: 0 4px;
        border: 1px solid var(--jm-rand, #e5e9f2);
        border-radius: 8px;
        background: #fff;
        text-align: center;
        font: inherit;
    }

/* De locatie als aanklikbaar label: een klik gaat naar de volgende locatie. */
button.location-tag.jm-locatie-wissel {
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

    button.location-tag.jm-locatie-wissel:hover,
    button.location-tag.jm-locatie-wissel:focus-visible {
        border-style: solid !important;
    }

/* De kolom met de knop Wijzigen: zo smal als de knop, rechts. */
th.jm-kol-wijzigen,
td.jm-kol-wijzigen {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

    td.jm-kol-wijzigen .jm-tafel-wijzigen {
        float: none !important;
        margin: 0 !important;
    }

/* Tafels, bewerkstand: het nummer en de plaatsen hielden een kwart van de kolom (w-25); met de kolom Hoofdgast en de pijltjes
   erbij bleef er voor het getal bijna niets over. Nu min, getal en plus op hun eigen maat. (T2/T5, 04-10-2026) */
.horeca-tables .table-number-edit-box .number,
.horeca-tables .seat-edit-input .number {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0;
}

.horeca-tables .table-number-edit-input,
.horeca-tables .seat-edit-input-value {
    width: 64px !important;
    min-width: 64px;
    flex: 0 0 64px;
}

/* Een knop in de kopbalk in de vorm van de menuknoppen ernaast (Zoek bestelling, + Kassa): pictogram en woord in het grijs van
   het menu, geen gekleurd vlak; onder 1280 punten alleen het pictogram (de kopbalk is daar vol; het menu zelf doet dat onder 992). Eerst voor
   Leveranciers van je dealer (Martijn 07-10-2026). */
#topbar-menu .kopknop-tekst { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 4px 4px; border: 0; border-radius: 6px; background: transparent; color: #555; font: inherit; font-size: 13px; line-height: 1.2; white-space: nowrap; box-shadow: none; cursor: pointer; }
    #topbar-menu .kopknop-tekst:hover, #topbar-menu .kopknop-tekst:focus-visible { color: #000; background: transparent; }
    #topbar-menu .kopknop-tekst > i { font-size: 18px; color: var(--jm-accent, #2563eb); }
@media (max-width: 1279.98px) {
    #topbar-menu .kopknop-tekst .kopknop-tekst-woord { display: none; }
}

/* --- de vaste voetbalk van Reserveringsinformatie (L12 punt 2, besluit Martijn 08-10-2026) --------------------------------
   Een vorm voor Restaurant, Activiteiten, Salon en Tickets, in de vorm van de voetbalk elders: links Annuleren (rood), in het
   midden de knoppen van de module, rechts de hoofdknop (oranje, de plek van Opslaan). Op de telefoon staan de moduleknoppen
   achter een knop "Meer" (een uitklapmenu); vanaf 576 breed staat dat menu gewoon open in de balk en is "Meer" weg.
   Opbouw:
     <div class="modal-footer jm-vorm jm-infobalk">
       <div class="jm-infobalk-links">  Annuleren                                   </div>
       <div class="jm-infobalk-midden dropdown"> <button class="jm-knop jm-infobalk-meer" data-bs-toggle="dropdown">Meer</button>
            <div class="dropdown-menu jm-infobalk-knoppen"> moduleknoppen </div> </div>
       <div class="jm-infobalk-rechts"> hoofdknop (jm-knop jm-knop-opslaan)          </div>
     </div> */
.modal-footer.jm-infobalk {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 18px;
}

    .modal-footer.jm-infobalk > * {
        margin: 0 !important;
    }

    .jm-infobalk .jm-infobalk-links,
    .jm-infobalk .jm-infobalk-rechts {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .jm-infobalk .jm-infobalk-midden {
        display: flex;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* (oude id-regels in custom.css/pos.css/salon.css: #OpenReservation over de hele breedte, #cancelReservation en #SendEmails 75x75) */
    .jm-infobalk .jm-knop,
    .modal-footer.jm-infobalk #OpenReservation,
    .modal-footer.jm-infobalk #cancelReservation,
    .modal-footer.jm-infobalk #SendEmails {
        min-width: 0 !important;
        width: auto !important;
        height: var(--knop-hoog, 40px) !important;
        padding: 0 14px;
        white-space: nowrap;
        float: none !important;
        margin: 0 !important;
    }

    .jm-infobalk .jm-infobalk-meer .fa-chevron-down {
        font-size: 11px;
    }

    .jm-infobalk .jm-infobalk-knoppen .jm-knop i {
        font-size: 14px;
    }

/* computer en tablet: het menu staat open als een rij knoppen, zonder "Meer" */
@media (min-width: 576px) {
    .jm-infobalk .jm-infobalk-meer {
        display: none !important;
    }

    .jm-infobalk .jm-infobalk-knoppen,
    .jm-infobalk .jm-infobalk-knoppen.show {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        float: none;
    }

        .jm-infobalk .jm-infobalk-knoppen:empty {
            display: none !important;
        }
}

/* telefoon: Annuleren, Meer en de hoofdknop op een regel; de moduleknoppen onder elkaar in het menu */
@media (max-width: 575.98px) {
    html body .modal .modal-footer.jm-infobalk {
        flex-wrap: nowrap !important;
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    html body .modal .jm-infobalk .jm-knop {
        padding: 0 10px !important;
        font-size: 14px;
    }

    html body .modal .jm-infobalk .jm-infobalk-rechts .jm-knop {
        flex: 1 1 auto;
    }

    html body .modal .jm-infobalk .jm-infobalk-rechts {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    html body .modal .jm-infobalk .jm-infobalk-midden {
        flex: 0 0 auto;
    }

    .jm-infobalk .jm-infobalk-knoppen {
        min-width: 220px;
        max-width: calc(100vw - 24px);
        padding: 6px;
    }

        .jm-infobalk .jm-infobalk-knoppen.show {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        html body .modal .jm-infobalk .jm-infobalk-knoppen .jm-knop,
        html body .modal .jm-infobalk .jm-infobalk-knoppen > span > .jm-knop,
        .modal-footer.jm-infobalk .jm-infobalk-knoppen #SendEmails,
        .modal-footer.jm-infobalk .jm-infobalk-knoppen #OpenReservation {
            width: 100% !important;
            justify-content: flex-start;
        }

        .jm-infobalk .jm-infobalk-knoppen > span {
            display: flex !important;
            flex-direction: column;
            gap: 6px;
        }

    .jm-infobalk .jm-infobalk-midden:not(:has(.jm-infobalk-knoppen > :not(.d-none))) {
        display: none !important;
    }
}

/* --- stappen binnen Reserveringsinformatie (Martijn 11/12-10-2026, js/jimani-infostap.js) ---------------------------------
   Geen tweede venster over het venster: een stap (E-mail versturen, Bijlage toevoegen, Betalen) neemt de plek van de inhoud
   en de voetbalk in, met onderin Vorige links en de hoofdknop rechts; een korte vraag (annuleren, no-show, statuswissel,
   printerkeuze) komt als balk op de plek van de voetbalk. */
.jm-infostap:not(.d-none) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.jm-infostap .jm-infostap-titel {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
}

.jm-infostap .jm-infostap-voet {
    justify-content: space-between;
    gap: 8px;
}

.jm-infostap-verborgen {
    display: none !important;
}

/* Een bestaand venster (Betalen) als stap: geen eigen rand, schaduw, kruisje of tweede achtergrond. */
.jm-vensterstap:not(.d-none) {
    overflow-y: auto;
}

html body .modal.jm-modal-als-stap:not(#jm-geen) {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    z-index: auto !important;
}

    html body .modal.jm-modal-als-stap:not(#jm-geen) .modal-dialog {
        max-width: none !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        display: block !important;
    }

    html body .modal.jm-modal-als-stap:not(#jm-geen) .modal-content {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .modal.jm-modal-als-stap .btn-close {
        display: none !important;
    }

    /* Heeft de stap zelf al Vorige en de hoofdknop (Contant, Overig), dan geen tweede Vorige eronder. */
    .modal.jm-modal-als-stap .modal-dialog:has(.jm-betaal-vorige) > .jm-vensterstap-voet {
        display: none !important;
    }

body.jm-vensterstap-open .modal-backdrop ~ .modal-backdrop {
    display: none !important;
}

.modal.jm-vensterstap-weg {
    visibility: hidden !important;
}

/* Een korte vraag op de plek van de voetbalk: de tekst, eventueel een veld, en Vorige / bevestigen. */
html body .modal .modal-footer.jm-infovraag {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 14px 18px !important;
    text-align: left;
    background: #fffaf3 !important;
}

    .modal-footer.jm-infovraag > * {
        margin: 0 !important;
        width: auto !important;
    }

    .jm-infovraag .jm-infovraag-veld {
        max-width: 420px;
    }

    .jm-infovraag .jm-knop i {
        color: inherit !important;
    }

.jm-infovraag .jm-infovraag-titel {
    font-weight: 600;
    font-size: 16px;
}

    .jm-infovraag .jm-infovraag-titel .fa-triangle-exclamation {
        color: #d97706;
    }

    .jm-infovraag .jm-infovraag-titel .fa-circle-question {
        color: var(--jm-klantaccent, #ff6700);
    }

.jm-infovraag .jm-infovraag-uitleg {
    color: #374151;
}

    .jm-infovraag .jm-infovraag-uitleg ul {
        margin: 4px 0;
        padding-left: 20px;
    }

    .jm-infovraag .jm-infovraag-uitleg p {
        margin: 0 0 4px;
    }

.jm-infovraag .jm-infovraag-veld .form-label {
    margin-bottom: 4px;
}

.jm-infovraag .jm-infovraag-fout {
    color: #dc2626;
    font-size: 14px;
}

.jm-infovraag .jm-infovraag-knoppen,
.jm-infovraag .jm-infovraag-rechts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jm-infovraag .jm-infovraag-knoppen {
    justify-content: space-between;
}

.jm-infovraag .jm-knop {
    height: var(--knop-hoog, 40px);
    padding: 0 14px;
    white-space: nowrap;
    margin: 0 !important;
}

/* Op de telefoon Vorige en de hoofdknop naast elkaar, even breed (de knoppenbalk stapelt daar anders). */
@media (max-width: 575.98px) {
    .jm-infostap .jm-infostap-voet {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

        .jm-infostap .jm-infostap-voet > .jm-knop {
            flex: 1 1 0;
            width: auto !important;
            min-width: 0;
            margin: 0 !important;
        }

    .jm-infovraag .jm-infovraag-knoppen > .jm-knop,
    .jm-infovraag .jm-infovraag-rechts {
        flex: 1 1 0;
        min-width: 0;
    }

        .jm-infovraag .jm-infovraag-rechts > .jm-knop {
            flex: 1 1 0;
            min-width: 0;
            padding: 0 8px;
        }
}

/* Tafels, buiten de bewerkstand: een klik op de afbeelding toont de pijltjes om direct te bladeren (Martijn 09-10-2026). */
.horeca-tables .tafelbeeld-img {
    cursor: pointer;
}
/* Beheer gebruikersgegevens (Martijn 09-10-2026): "Verstuur e-mail validatie opnieuw" en "Wachtwoord resetten" in de stijl
   van Import en Export, netjes naast elkaar. */
.jm-knoppenrij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .jm-knoppenrij > .jm-knop-import.jm-knop-import {
        margin: 0 !important;
    }

/* --- de knop Vorige, overal dezelfde (Martijn 10-10-2026) ------------------------------------------------------------
   "Elke dashboardpagina krijgt links onderin een knop Vorige met tekst, in de vorm die nu al bij Gastgroepen staat." Geen grijs
   vakje met een pijl meer. De knop komt uit <jm-vorige> (TagHelpers/VorigeknopTagHelper.cs); _Layout zet hem op elke pagina met
   een ouder vast linksonder (Services/Vorigeknop.cs bepaalt waarheen). De vorm is die van .jm-vorm .jm-knop (jimani-formulier.css),
   hier ook buiten een .jm-vorm, want de pagina's zelf hebben die klasse niet. */
.jm-knop.jm-vorigeknop {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 160px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #e5e9f2;
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

    .jm-knop.jm-vorigeknop:hover,
    .jm-knop.jm-vorigeknop:focus-visible {
        background: #f7f9fc;
        color: #111827;
        text-decoration: none;
    }

/* Een knop Vorige die ook prev-step heet (de stappen in een venster): de oude regel hierboven maakt van elke .prev-step een
   grijs vierkantje van 40 bij 40 met een getekende pijl, met !important. Hier wint de knop met tekst. */
.jm-knop.jm-vorigeknop.prev-step {
    width: auto !important;
    min-width: 160px;
    height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e9f2 !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #111827 !important;
    display: inline-flex !important;
}

    .jm-knop.jm-vorigeknop.prev-step::after {
        content: none !important;
    }

    .jm-knop.jm-vorigeknop.prev-step:hover {
        background-color: #f7f9fc !important;
    }

/* Op een pagina: vast linksonder in het scherm, waar de oude grijze pijl ook stond (right_col button#back hierboven). */
.jm-knop.jm-vorigeknop-vast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 6;
    margin: 0;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .08);
}

/* De inhoud loopt niet onder de knop door: onderaan blijft zoveel ruimte vrij als de knop hoog is, met lucht. */
/* 11-11-2026 (Aangesloten apparaten op 360 breed: Verwijderen bij een losse Tap viel deels achter Vorige): ruimer, en ook zonder de klasse
   jm-h-vorige die jimani-eenmaal.js pas na het laden zet; de laatste regel van elke lijst (ook een knop die onder een tegel hangt) blijft
   boven de vaste knop. */
.right_col.jm-h-vorige,
.right_col:has(> .jm-vorigeknop-vast) {
    padding-bottom: 128px !important;
}

/* Ook op een tegelpagina (Aangesloten apparaten, Widgets) vast linksonder: overal dezelfde plek. De ruimte onderaan hierboven
   houdt de laatste tegels vrij van de knop. (Martijn 10-10-2026: "links onderin", ook op de telefoon) */

/* Telefoon: ook linksonder, met 16 aan de rand. Rechtsonder staan de vaste knoppen (Vraag het Jim, de chat); de knop Vorige
   blijft links en smaller, zodat hij er nooit onder valt. */
@media (max-width: 767.98px) {
    .jm-knop.jm-vorigeknop-vast {
        left: 16px;
        bottom: 16px;
        min-width: 120px;
    }

    .right_col.jm-h-vorige,
    .right_col:has(> .jm-vorigeknop-vast) {
        padding-bottom: 120px !important;
    }
}

/* In een venster en in de kassa geen vaste knop: daar is het venster of de kassa zelf de weg terug. */
.modal .jm-vorigeknop-vast {
    position: static;
}

/* Een pagina met een eigen voetbalk met Vorige (Huisstijl, AI-tegoed): geen tweede, zwevende Vorige linksonder (Martijn
   11-10-2026). Een pagina geeft dat aan met data-eigen-vorige op zijn knop; een Vorige in een jm-vorm-voet of jm-voetbalk van de
   pagina zelf (niet in een venster) telt ook. */
.right_col:has([data-eigen-vorige]:not(.modal *)) > .jm-vorigeknop-vast,
.right_col:has(.jm-vorm-voet-links .fa-arrow-left:not(.modal *)) > .jm-vorigeknop-vast,
.right_col:has(.jm-voetbalk .fa-arrow-left:not(.modal *)) > .jm-vorigeknop-vast,
/* Reservering toevoegen/wijzigen (jimani-reserveerkaarten.js) heeft rechtsboven al "Terug naar reserveringen". (Saloncontrole 27-10-2026) */
.right_col:has(.jm-reskop-terug:not(.modal *)) > .jm-vorigeknop-vast {
    display: none !important;
}

/* --- Bevestiging en schakelaar volgen de accentkleur van de module (27-10-2026) --------------------------------
   Gemeld door Martijn, 27-10-2026 (salon, Werkstations): alles is roze, maar de Ja-knop van "Verwijder dit object" en de
   schakelaars op de tegels waren donkergroen. Dat groen kwam uit salon.css (#0C4B33) en dergelijke per-module bestanden.
   Hier, na die bestanden, een keer voor alle modules: --jm-accent staat op de body per module (jm-module-*). */
.sweet-alert .sa-confirm-button-container button.confirm,
.sweet-alert button.confirm {
    background-color: var(--jm-accent, #2563eb) !important;
    color: #fff !important;
}

    .sweet-alert .sa-confirm-button-container button.confirm:hover,
    .sweet-alert button.confirm:hover {
        background-color: var(--jm-accent-donker, var(--jm-accent, #2563eb)) !important;
    }

.jm-tegel-schakelaar .form-check-input:checked {
    background-color: var(--jm-accent, #2563eb) !important;
    border-color: var(--jm-accent, #2563eb) !important;
}

/* --- Alle accentelementen volgen de module (Martijn 27-10-2026) -----------------------------------------------
   In de salon stond nog veel groen: de schakelaars en vinkjes, de laad-draaier, de actieve tab, de paginering. Dat groen
   (#0C4B33) en het felgroen van activiteiten (#00DC1B) komen uit de modulebestanden (salon.css, activities.css,
   hotel.css, ticketing.css), die allemaal een kopie zijn van hetzelfde oude sjabloon. Die bestanden blijven staan; hier,
   na die bestanden, een keer de kleur voor alle modules uit --jm-accent (jm-module-* op de body, jimani-vensters.css). */

/* Vinkjes, keuzerondjes en (resterende) schakelaars. De modulebestanden hebben regels met een id ervoor (#extraFields,
   #trcheckbox ...) en !important; de twee :not(#jm-a) tellen als twee id-s, zodat deze regel daar altijd boven staat. */
html body .form-check-input:checked:not(#jm-a):not(#jm-b) {
    background-color: var(--jm-accent, #2563eb) !important;
    border-color: var(--jm-accent, #2563eb) !important;
}

html body .form-check-input:focus:not(#jm-a):not(#jm-b) {
    border-color: var(--jm-accent, #2563eb) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--jm-accent, #2563eb) 22%, transparent) !important;
}

#radioButtons .container-radio input:checked ~ .checkmark,
.check-container input:checked ~ .checkmark {
    background-color: var(--jm-accent, #2563eb) !important;
}

/* Laden: de draaier over de hele pagina (_Layout .cv-spinner .spinner), nprogress, de swal-lader en bootstrap-draaiers
   zonder eigen tekstkleur */
.cv-spinner .spinner,
.spinner {
    border-top-color: var(--jm-accent, #2563eb) !important;
}

#nprogress .bar {
    background: var(--jm-accent, #2563eb) !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--jm-accent, #2563eb), 0 0 5px var(--jm-accent, #2563eb) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--jm-accent, #2563eb) !important;
    border-left-color: var(--jm-accent, #2563eb) !important;
}

.swal2-loader {
    border-color: var(--jm-accent, #2563eb) transparent var(--jm-accent, #2563eb) transparent !important;
}

.spinner-border:not([class*="text-"]),
.spinner-border.text-primary,
.spinner-border.text-success {
    color: var(--jm-accent, #2563eb) !important;
}

/* Tabs en paginering */
.nav-tabs .nav-link.active,
.modal-body .nav-tabs .nav-link.active {
    border-bottom-color: var(--jm-accent, #2563eb) !important;
}

.page-link {
    color: var(--jm-accent, #2563eb) !important;
}

.page-item.active .page-link {
    background-color: var(--jm-accent, #2563eb) !important;
    border-color: var(--jm-accent, #2563eb) !important;
    color: #fff !important;
}

.pagination .page-item a {
    background-color: var(--jm-accent-licht, #eff5ff) !important;
}

/* Lichte tint: zweefregel in tabellen en de keuzelijst rechts in de titel */
.table-hover tbody tr:hover {
    background-color: var(--jm-accent-licht, #eff5ff);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--jm-accent-licht, #eff5ff) !important;
}

.title_right .form-select {
    background-color: var(--jm-accent-licht, #eff5ff) !important;
}

/* Datumkiezer en schuifregelaar */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active {
    background-color: var(--jm-accent, #2563eb) !important;
    background-image: none !important;
    border-color: var(--jm-accent, #2563eb) !important;
    color: #fff !important;
}

.irs--round .irs-handle {
    border-color: var(--jm-accent, #2563eb) !important;
}

.irs--round .irs-bar,
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    background-color: var(--jm-accent, #2563eb) !important;
}

/* Links met het oude oranje (.orange) volgen ook de module
   (salon-infovenster, Martijn 27-10-2026). */
a.btn-link.orange,
.btn-link.orange {
    color: var(--jm-accent, #2563eb) !important;
}

/* Het felgroene poppetje bij Aantal personen (activities-selected.png) in de modulekleur: het plaatje is de vorm, de kleur
   komt uit --jm-accent (Martijn 27-10-2026). */
.lanes-active {
    background: var(--jm-accent, #2563eb) !important;
    -webkit-mask: url(../images/activities-selected.png) center / 100% no-repeat;
    mask: url(../images/activities-selected.png) center / 100% no-repeat;
}

/* Lijstknoppen (Martijn 04-11-2026, Views/Shared/_Lijstknop.cshtml): Bewerken, Opslaan en Verwijderen met icoon en tekst, zelfde vorm
   en hoogte als Import, Export en Toevoegen; in plaats van de plaatjes Edit.png, Save.png en Delete.png. Verwijderen is de rode
   huisstijlknop. Grijs (aria-disabled) = niet te gebruiken, met de reden als title (lijstknoppen.js). */
.jm-lijstknop.jm-lijstknop {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 12px !important;
    margin: 0 0 0 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    float: none !important;
}
    .jm-lijstknop.jm-lijstknop:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; color: #111827 !important; }
    .jm-lijstknop.jm-lijstknop i { font-size: 14px; margin-right: 0 !important; color: inherit !important; }
    .jm-lijstknop.jm-lijstknop.d-none { display: none !important; }
    /* jQuery .hide() zet inline display:none; dat verliest van display:inline-flex !important, dus hier dezelfde kracht (oude scripts blijven werken). */
    .jm-lijstknop.jm-lijstknop[style*="display: none"], .jm-lijstknop.jm-lijstknop[style*="display:none"] { display: none !important; }
.jm-lijstknop.jm-lijstknop.jm-lijstknop-opslaan {
    background: var(--jm-klantaccent, #F37120) !important;
    border-color: var(--jm-klantaccent, #F37120) !important;
    color: #fff !important;
}
    .jm-lijstknop.jm-lijstknop.jm-lijstknop-opslaan:hover { filter: brightness(.95); color: #fff !important; background: var(--jm-klantaccent, #F37120) !important; }
.jm-lijstknop.jm-lijstknop.jm-lijstknop-verwijderen {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
    .jm-lijstknop.jm-lijstknop.jm-lijstknop-verwijderen:hover { background: #dc2626 !important; color: #fff !important; }
.jm-lijstknop.jm-lijstknop[aria-disabled="true"],
.jm-lijstknop.jm-lijstknop[aria-disabled="true"]:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    filter: none;
}

/* Het kruisje van het zijpaneel (tijdlijnzijbalk.js: reserveervenster, salon, activiteiten, tickets): rechtsboven, in dezelfde vorm als het
   kruisje van een venster hierboven (wit vak met rand, rood kruis). Martijn 05-11-2026: "kruisje rechtsboven in onze huisstijl" (het stond op
   de tijdlijn van Restaurant als klein vakje linksboven, omdat scheduler.css de knop niet kende). */
.jm-tp > button.jm-tp-sluit {
    position: absolute; top: 10px; right: 12px; left: auto; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #dc2626;
    font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none;
}
    .jm-tp > button.jm-tp-sluit:hover, .jm-tp > button.jm-tp-sluit:focus-visible { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }

/* Vinkjes in de lijsten (rijselectie, selecteer alles): lichte rand en afgeronde hoek in plaats van de zwarte rand van het toestel (Martijn 11-11-2026). */
html body table input.form-check-input[type="checkbox"]:not(:checked):not(#jm-a):not(#jm-b) { border: 1.5px solid #c3cad6 !important; border-radius: 5px !important; background-color: #fff !important; }