/* 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. */
.btn-back:has(i)::after,
.prev-step:has(i)::after,
button#back:has(i)::after,
a#back:has(i)::after {
    content: 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;
}

/* ------------------------------------------------------------------------------------------------
   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."

   De kleur komt uit --jm-accent: de kleur van de module waar je in werkt, gezet op de bladzijde in
   _Layout.cshtml. Stond hier blauw, dan had horeca twee blauwe knoppen tussen de oranje. */
.jm-knop-import,
.jm-knop-export {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 42px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 16px !important;
    margin: 0 0 0 8px !important;
    border: 1px solid var(--jm-accent, #2563eb) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--jm-accent, #2563eb) !important;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

    .jm-knop-import:hover,
    .jm-knop-export:hover {
        background: var(--jm-accent-licht, #eff6ff) !important;
        color: var(--jm-accent-donker, #1d4ed8) !important;
    }

    .jm-knop-import i,
    .jm-knop-export i {
        font-size: 16px;
    }

/* 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;
}

/* --- 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;
    }