/* Een icoon dat alleen in een knopje staat, staat in het midden.
 *
 * Waarom dit bestand bestaat
 * --------------------------
 * Elk <i> krijgt in dit systeem standaard 5 px ruimte aan de rechterkant. Dat klopt als er tekst
 * naast staat -- "icoon, ruimte, woord" -- maar in een rond of vierkant knopje waar alleen het icoon
 * in zit duwt die 5 px het teken uit het midden. Gemeten 08-09-2026: 5 px scheef in elk knopje in
 * de productenlijst.
 *
 * Dit is dezelfde oorzaak als eerder bij het vinkje op het tafelscherm en bij het kruisje in het
 * uploadvak. Het komt telkens terug, dus staat het hier één keer.
 *
 * Hoe je het gebruikt
 * -------------------
 * Zet .jimani-icoonknop op een knop of vakje waar alleen een icoon in zit. Hieronder staat ook een
 * lijstje met plekken die per definitie alleen een icoon bevatten; daar hoeft niets aan de markup te
 * veranderen. Groeit dat lijstje, zet er dan een regel bij in plaats van de opmaak ter plekke te
 * repareren.
 *
 * Waarom geen regel voor alle knoppen ineens
 * ------------------------------------------
 * Een knop met een icoon én een woord erin ziet er in de opmaaktaal precies hetzelfde uit als een
 * knop met alleen een icoon: het verschil is een stukje tekst, en daar kun je in CSS niet op
 * kiezen. Een regel voor alle knoppen zou dus ook de ruimte tussen het icoon en het woord weghalen.
 */

.jimani-icoonknop > i,
.jimani-icoonknop > svg,

/* Plekken die per definitie alleen een icoon bevatten. */
.financieel-icoon > i,
.card-action-menu-btn > i,
.btn-close > i,
.rounded-div > i {
    margin: 0 !important;
}

/* Een icoonknop is vierkant en zet zijn icoon in het midden. */
.jimani-icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- de iconen rechtsboven in het menu ---------------------------------------------------------
 *
 * De bel, het tandwiel en het kruisje. Gemeld door Martijn, 08-09-2026.
 */

/* De bel knippert zodra er waarschuwingen zijn.
 *
 * Hij had de klasse blink al, maar de knipperregel in de modulebestanden mikt op .fa-bell-ring en
 * het icoon heet .fa-bell-on. Er knipperde dus nooit iets. Deze regel pakt elke bel. */
#warningCheckList.blink [class*="fa-bell"] {
    animation: jimani-knipperen 1.2s ease-in-out infinite;
    color: #e5352b;
}

@keyframes jimani-knipperen {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Het rondje met het aantal: wit met een randje.
 *
 * Het was blauw met rode cijfers en had een hoek van 4 px -- een blokje in plaats van een merkje.
 * Wit met een grijs randje leest rustiger en het getal blijft leesbaar. */
.notification-count {
    background-color: #fff !important;
    color: var(--veld-tekst, #2b2f38) !important;
    border: 1px solid var(--veld-rand, #d7dce5);
    border-radius: 999px !important;
    min-width: 20px;
    height: 20px;
    padding: 0 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Het kruisje even groot en even rond als de bel en het tandwiel.
 *
 * Het was 40 bij 30, en een hoek van 50% op een ovaal vakje levert een ovaal op.
 *
 * Met !important, en dat is hier geen luiheid: een blok in de pagina zelf zet
 * .btn-toggle { height: 30px !important }. Daar komt geen enkele gewone regel overheen, hoe
 * specifiek ook -- alleen een andere !important. Gemeten 08-09-2026. */
#closeSideMenu.jimani-icoonknop {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}