/*
   AdminSys – de huisstijl die de webapp en de testtool delen: ontwerptokens, basis, kaarten en labels, statussen, knoppen,
   formulieren en meldingen, de editor en het sleepgebied van een Dropvak. De app zelf (indeling, menu, grids) staat in haar eigen app.css.
*/

/* ===== Ontwerptokens (AdminSys Icon Style Guide v2.0: blauw #2E5D90, groen #62B63C, oranje #FF9637) =====
   Kleuren met light-dark(licht, donker): het thema bepaalt alleen color-scheme, de waarden staan maar op één plek. */
:root {
    color-scheme: light;

    /* Huisstijl */
    --pk-nachtblauw: #0F2236;
    --pk-donkerblauw: #17324F;
    --pk-blauw: #2E5D90;
    --pk-groen: #62B63C;
    --pk-groen-hover: #55A031;
    --pk-oranje: #FF9637;
    --pk-signaal: #f7630c;
    --pk-licht: #f3f5f7;
    --op-kleur: #fff;

    /* Vlakken en tekst */
    --primair: light-dark(#2E5D90, #8FB3DE);
    --primair-hover: light-dark(#244A73, #B1CBEA);
    --primair-zacht: light-dark(#E7EEF6, #1C2F45);
    --achtergrond: light-dark(var(--pk-licht), #0e1419);
    --oppervlak: light-dark(#ffffff, #151d24);
    --oppervlak-2: light-dark(#f8fafb, #1b252d);
    --rij-om-en-om: light-dark(#f4f7fa, #19232b);
    --rand: light-dark(#e2e8ed, #26323b);
    --tekst: light-dark(#13202b, #e5edf3);
    --tekst-zacht: light-dark(#5b6b78, #93a4b2);
    --schaduw-kleur: light-dark(rgba(16, 24, 40, .06), rgba(0, 0, 0, .35));
    --schaduw: 0 1px 2px var(--schaduw-kleur), 0 2px 8px var(--schaduw-kleur);
    /* Klein (icoontegel), hover (klikbare kaart of tegel), zwevend (menu's, meldingen, dialoog) en hoog (accountkaart) */
    --schaduw-klein: 0 1px 3px rgb(0 0 0 / .2);
    --schaduw-hover: 0 4px 14px color-mix(in srgb, var(--pk-blauw) 16%, transparent);
    --schaduw-zwevend: 0 8px 24px rgb(16 24 40 / .16);
    --schaduw-hoog: 0 24px 60px rgb(0 0 0 / .35);
    /* De zwevende plusknop (ToevoegKnop) */
    --schaduw-knop: 0 6px 18px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .14);
    --schaduw-knop-hover: 0 10px 24px rgb(0 0 0 / .26), 0 3px 8px rgb(0 0 0 / .16);

    /* Zijbalk */
    --zijbalk: light-dark(var(--pk-donkerblauw), var(--pk-nachtblauw));
    --zijbalk-tekst: #D5E0EC;
    --zijbalk-tekst-zacht: #8EA6C0;
    --zijbalk-hover: rgba(255, 255, 255, .07);
    --zijbalk-actief: rgba(255, 255, 255, .12);

    /* Meldingen en labels */
    --fout-achtergrond: light-dark(#fdf3f4, #3a1418);
    --fout-rand: light-dark(#f0b9bf, #6e2a31);
    --fout-tekst: light-dark(#a4161a, #ffb3b8);
    --info-achtergrond: light-dark(#eaf5fc, #0f2b3d);
    --info-rand: light-dark(#b5dcf3, #1e4d6b);
    --info-tekst: light-dark(#0b4f78, #a9d8f5);
    --waarschuwing-achtergrond: light-dark(#fff4e5, #3a2a12);
    --waarschuwing-tekst: light-dark(#9a5b00, #ffc98a);
    --succes-achtergrond: color-mix(in srgb, var(--pk-groen) 16%, transparent);
    --succes-tekst: color-mix(in srgb, var(--pk-groen) 70%, var(--tekst));

    /* Maten */
    --straal: 10px;
    --dialoog-marge: 32px;
}

:root[data-thema="donker"] {
    color-scheme: dark;
}

:root[data-thema="systeem"] {
    color-scheme: light dark;
}

/* Syncfusion-componenten in de huisstijlkleur */
:root {
    --color-sf-primary: var(--primair);
    --color-sf-primary-bg-color: var(--primair);
    --color-sf-primary-bg-color-hover: var(--primair-hover);
    --color-sf-primary-bg-color-pressed: var(--primair-hover);
    --color-sf-primary-bg-color-focus: var(--primair-hover);
    --color-sf-primary-border-color: var(--primair);
    --color-sf-primary-border-color-hover: var(--primair-hover);
    --color-sf-primary-border-color-pressed: var(--primair-hover);
    --color-sf-primary-border-color-focus: var(--primair-hover);
    --color-sf-primary-lighter: var(--primair-zacht);
    --color-sf-primary-light: var(--primair-zacht);
}

/* ===== Basis ===== */
html, body {
    margin: 0;
    height: 100%;
    background: var(--achtergrond);
    color: var(--tekst);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    color: var(--tekst);
    letter-spacing: -.01em;
}

h1:focus {
    outline: none;
}

a {
    color: var(--primair);
}

.icoon {
    flex-shrink: 0;
}

/* Een wachtwoord of token van een ander (Geheimveld): stippen zonder wachtwoordveld, zodat wachtwoordmanagers niets invullen */
.geheim input {
    -webkit-text-security: disc;
}

.validation-message {
    color: var(--fout-tekst);
    font-size: .85rem;
}

.blazor-error-boundary {
    padding: 1rem;
    color: var(--op-kleur);
    background: var(--fout-tekst);
}

    .blazor-error-boundary::after {
        content: "Er is een fout opgetreden.";
    }


/* ===== Kaarten en labels ===== */
.kaart {
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw);
}

.kaart-inhoud {
    padding: 20px 24px;
}

.kaart-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kaart-titel {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
}

/* Een groep binnen een kaart (bv. Lopende acties / Totaal bij de uren) */
.kaart-subtitel {
    margin: 16px 0 8px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-zacht);
}

.kaart-link {
    display: inline-block;
    margin-top: 12px;
    font-size: .875rem;
}

    /* De titel krimpt (met …) in plaats van de knoppen uit de kaart te duwen */
    .kaart-kop .kaart-titel {
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* De knoppen rechts in de kop (bv. Nu synchroniseren en Bewerken) */
    .kaart-kop .kaart-acties {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 8px;
    }

    /* ⋯ staat in de kop rechts: het menu klapt naar links uit, binnen de kaart (Meermenu zet het bij AlleenSmal links) */
    @media (max-width: 760px) {
        .kaart-kop .meermenu.alleen-smal > .meermenu-paneel {
            left: auto;
            right: 0;
        }
    }

.kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

    /* Kaarten die samen de volle breedte vullen (bv. facturatie): naast elkaar zolang ze minstens 420px breed
       kunnen zijn, anders onder elkaar; de hoogte volgt de inhoud */
    .kaarten.kaarten-op-inhoud {
        grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
        align-items: start;
    }

        .kaarten.kaarten-op-inhoud .kaart-kop,
        .kaarten-kolommen .kaart-kop {
            gap: 24px;
        }

/* Kaarten van verschillende hoogte in kolommen (bv. de instellingen van een administratie): ze sluiten per kolom onder elkaar
   aan in plaats van per rij op de hoogste te wachten; minstens 420px breed, op een smal scherm één kolom */
.kaarten-kolommen {
    columns: 420px;
    column-gap: 20px;
}

    .kaarten-kolommen > * {
        break-inside: avoid;
        margin: 0 0 20px;
    }

.leeg {
    padding: 48px 24px;
    text-align: center;
    color: var(--tekst-zacht);
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--oppervlak-2);
    border: 1px solid var(--rand);
    color: var(--tekst-zacht);
    font-size: .78rem;
    font-weight: 600;
}

.label-primair {
    background: var(--primair-zacht);
    border-color: transparent;
    color: var(--primair);
}

.label-succes {
    background: var(--succes-achtergrond);
    border-color: transparent;
    color: var(--succes-tekst);
}

.label-waarschuwing {
    background: var(--waarschuwing-achtergrond);
    border-color: transparent;
    color: var(--waarschuwing-tekst);
}

/* Een label in een gridcel (bv. "Standaard" achter de naam): inline en compact, anders botst het met de celopmaak van Syncfusion */
.e-grid .e-rowcell .label {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    font-size: .72rem;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Status met icoon in de kleur van de status (zie Statusweergave en de …weergave per entiteit). De naam blijft gewone
   tekst (groen en oranje zijn als tekst slecht leesbaar), behalve grijs: dan is hij afgerond en mag alles vervagen. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .status svg {
        flex-shrink: 0;
    }

.status-groen svg {
    color: var(--pk-groen);
}

.status-blauw svg {
    color: var(--primair);
}

.status-oranje svg {
    color: var(--pk-oranje);
}

.status-rood svg {
    color: var(--fout-tekst);
}

.status-grijs {
    color: var(--tekst-zacht);
}

/* Deadline: rood als verlopen, oranje binnen een week (zolang het item loopt) */
.deadline-verlopen {
    color: var(--fout-tekst);
    font-weight: 600;
}

.deadline-bijna {
    color: var(--pk-oranje);
    font-weight: 600;
}


/* ===== Knoppen ===== */
/* Ronde knop met alleen een icoon (bv. "Openen in kaart", vCard, export) */
.icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--primair);
    cursor: pointer;
}

    .icoonknop:hover {
        background: var(--primair-zacht);
    }

    .icoonknop:focus-visible {
        outline: 2px solid var(--primair);
        outline-offset: 2px;
    }

    .icoonknop:disabled {
        opacity: .4;
        cursor: default;
    }

/* Vernieuwen: het icoon draait zolang de lijst wordt opgehaald */
.icoon.draait,
.e-btn .actieknop-spinner {
    animation: draaien .8s linear infinite;
}

/* Het icoon van Syncfusion is niet vierkant en staat met een marge iets verschoven: draaiend slingert het dan rond.
   Een vierkant vak met het teken in het midden laat het om zijn eigen middelpunt draaien. */
.e-btn .e-btn-icon.actieknop-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-top: 0;
    line-height: 1;
    vertical-align: middle;
    transform-origin: 50% 50%;
}

/* Rood klokje bij een actie waarvoor jouw timer loopt (Timerlabel), vóór de naam (die op een kaartje met … kan aflopen) */
.timerlabel {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--fout-tekst);
}

/* Een verstuurde knop op een accountpagina (formulierknop.js): de spinner op de plek van het eigen icoon, zoals Actieknop */
.e-btn.bezig > .icoon {
    display: none;
}

/* Een knop met een eigen icoon (Actieknop met Icoon): icoon en tekst netjes op één lijn, zoals de iconen van Syncfusion */
.e-btn:has(> .icoon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .e-btn.e-block:has(> .icoon) {
        display: flex;
    }

@keyframes draaien {
    to {
        transform: rotate(360deg);
    }
}

/* Knop die eruitziet als een link (bv. "Meer tonen", een bestandsnaam) */
.tekstknop {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primair);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Eigen iconen in Syncfusion-contextmenu's (IconCss), als masker zodat ze de tekstkleur volgen */
.e-menu-icon.icoon-telefoon,
.e-menu-icon.icoon-mail {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icoon) center / contain no-repeat;
    mask: var(--icoon) center / contain no-repeat;
}

.e-menu-icon.icoon-telefoon {
    --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.e-menu-icon.icoon-mail {
    --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Raster van schakelaars (bv. administraties of modules aan/uit) */
.schakelaars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 24px;
}


/* ===== Formulieren, gegevens en meldingen ===== */
/* Kolommen van minstens 260px, maar nooit breder dan het formulier zelf (smal scherm); de velden mogen krimpen
   (min-width: 0), anders duwt een invoer of een veld met knop (Zoek…) het formulier buiten beeld */
.formulier {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 16px 20px;
}

    .formulier > * {
        min-width: 0;
    }

    /* Het formulier in de bewerkdialoog is een fieldset, zodat het in één keer uit kan (alleen te bekijken) */
    fieldset.formulier {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

        /* Syncfusion-keuzelijsten en -knoppen reageren niet op een uitgeschakelde fieldset */
        fieldset.formulier:disabled .e-input-group,
        fieldset.formulier:disabled .e-control-wrapper,
        fieldset.formulier:disabled .e-btn {
            pointer-events: none;
            opacity: .7;
        }

    /* .veld: zelfde opmaak als een label, voor velden die geen label-element kunnen hebben (keuzelijsten, editor) */
    .formulier label,
    .formulier .veld {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-weight: 600;
        font-size: .85rem;
        color: var(--tekst-zacht);
    }

    .formulier .breed {
        grid-column: 1 / -1;
    }

    /* Twee velden samen op een eigen regel: het eerste kort (bv. Code een derde, Naam twee derde), of met .gelijk half om half
       (bv. Project en de relatie ervan); op een telefoon onder elkaar (zie Smalle schermen) */
    .formulier .veldpaar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 16px 20px;
    }

        .formulier .veldpaar.gelijk {
            grid-template-columns: 1fr 1fr;
        }

        /* Straat twee derde, huisnummer (klein) en toevoeging samen een derde */
        .formulier .veldpaar.adres {
            grid-template-columns: 4fr 0.8fr 1.2fr;
        }

        .formulier .veldpaar > * {
            grid-column: auto;
            min-width: 0;
        }

        /* Een schakelaar naast een veld (bv. Verloopt op met Verwijderen na downloaden): op de hoogte van de invoer, niet van het label */
        .formulier .veldpaar > .schakelaar {
            align-self: end;
            min-height: 32px;
        }

.formulier-kop {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--rand);
    font-weight: 700;
    color: var(--tekst);
}

    /* Uitleg en meldingen in een formulier: de ruimte komt van het raster, niet ook nog van eigen marges */
    .formulier > p,
    .formulier > .melding {
        margin: 0;
    }

    /* Uitleg direct onder de kop */
    .formulier > .formulier-kop + .lijst-sub {
        margin-top: -10px;
    }

.keuze-type {
    display: flex;
    gap: 24px;
}

.gegevens {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 24px;
    margin: 0;
}

    .gegevens dt {
        color: var(--tekst-zacht);
    }

    .gegevens dd {
        margin: 0;
        min-width: 0;
        font-weight: 500;
        /* Lange waarden (e-mailadres, IBAN) afbreken in plaats van buiten de kaart te vallen */
        overflow-wrap: anywhere;
    }

.lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lijst li {
        padding: 10px 0;
        border-bottom: 1px solid var(--rand);
    }

        .lijst li:last-child {
            border-bottom: none;
        }

.lijst-sub {
    display: block;
    color: var(--tekst-zacht);
    font-size: .85rem;
}

.melding {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
}

.melding-fout {
    background: var(--fout-achtergrond);
    border: 1px solid var(--fout-rand);
    color: var(--fout-tekst);
}

.melding-info {
    background: var(--info-achtergrond);
    border: 1px solid var(--info-rand);
    color: var(--info-tekst);
}

/* Een waarschuwing (opslaan of bevestigen mag wel), bv. regels die afwijken van de factuur */
.melding-waarschuwing {
    background: var(--waarschuwing-achtergrond);
    border: 1px solid color-mix(in srgb, var(--pk-oranje) 45%, transparent);
    color: var(--waarschuwing-tekst);
}

/* Een bevestiging dat iets klopt, bv. regels die kloppen met de factuur */
.melding-succes {
    background: var(--succes-achtergrond);
    border: 1px solid color-mix(in srgb, var(--pk-groen) 45%, transparent);
    color: var(--succes-tekst);
}


/* Editor (MarkdownEditor, SfRichTextEditor): in de hoogte groter en kleiner te maken, gewone letter in een formulier */
.markdown-editor.e-richtexteditor {
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
    min-height: 200px;
}

    .markdown-editor.e-richtexteditor .e-rte-container {
        flex: 1 1 auto;
        min-height: 0;
    }

.formulier .veld .markdown-editor {
    font-weight: 400;
    font-size: 1rem;
    color: var(--tekst);
}

/* Schermvullend: de editor groeit mee met de schermhoogte (ruimte voor kop, velden, schakelaar en knoppen eraf) */
.formulier.schermvullend .markdown-editor {
    height: calc(100dvh - 2 * var(--dialoog-marge) - 330px) !important;
    min-height: 220px;
    resize: none;
}


/* Sleepgebied van een Dropvak (zie sleepvak.js): tijdens het slepen van een bestand is het hele gebied (dialoog, assistent of
   overzicht) het sleepvak, met bovenin "Laat los om toe te voegen"; een verkeerd soort bestand geeft daar kort een melding.
   In het overzicht (dat scrollt) blijft de balk bovenin staan zonder de inhoud te verschuiven. */
.sleepgebied-actief {
    outline: 2px dashed var(--primair);
    outline-offset: -4px;
}

    .sleepgebied-actief .dropvak {
        border-color: var(--primair);
        background: var(--primair-zacht);
        color: var(--primair);
    }

.sleepgebied-actief::before,
.sleepgebied-melding::before {
    content: "Laat los om toe te voegen";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 50;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--primair);
    color: #fff;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.sleepgebied-melding::before {
    content: attr(data-sleepmelding);
    background: var(--fout-achtergrond);
    border: 1px solid var(--fout-rand);
    color: var(--fout-tekst);
}

main.sleepgebied-actief::before,
main.sleepgebied-melding::before {
    position: sticky;
    display: block;
    top: 0;
    height: 20px;
    margin-bottom: -40px;
}

/* De foutbalk van Blazor (#blazor-error-ui in de layout): onderaan in beeld als de app een onverwachte fout heeft */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Themakeuze: licht, donker of systeem (in het gebruikersmenu van de webapp en de kop van de testtool) */
.thema-keuze {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.thema-optie {
    padding: 6px 10px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--oppervlak-2);
    color: var(--tekst);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .thema-optie.actief {
        border-color: var(--primair);
        background: var(--primair-zacht);
        color: var(--primair);
        font-weight: 600;
    }

/* Placeholders (skelet) zolang een blok laadt, bv. op de startpagina: grijze vlakken met een zachte glans */
.skelet {
    position: relative;
    overflow: hidden;
}

.skelet-regel,
.skelet-grafiek,
div.skelet-regel {
    display: block;
    height: 14px;
    margin: 8px 0;
    border-radius: 6px;
    background: var(--oppervlak-2);
}

    .skelet-regel.kort {
        width: 45%;
    }

    .skelet-regel.groot {
        width: 35%;
        height: 30px;
    }

    .skelet-regel.breed {
        width: 100%;
        height: 36px;
    }

.skelet-grafiek {
    height: 220px;
}

.skelet::after,
.skelet-regel::after,
.skelet-grafiek::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oppervlak) 70%, transparent), transparent);
    transform: translateX(-100%);
    animation: skelet-glans 1.4s ease-in-out infinite;
}

.skelet-regel,
.skelet-grafiek {
    position: relative;
    overflow: hidden;
}

@keyframes skelet-glans {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skelet::after,
    .skelet-regel::after,
    .skelet-grafiek::after {
        animation: none;
    }
}

/* Het merk (Merk): het logo op een witte tegel met de woordmerk, "sys" in het groen (webapp en testtool) */
.merk-tegel {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--op-kleur);
    box-shadow: var(--schaduw-klein);
    flex-shrink: 0;
}

    .merk-tegel img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

.merk-naam-accent {
    color: var(--pk-groen);
}

.merk-naam {
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}