/* _content/KMS.Web/Components/Account/Shared/AccountLayout.razor.rz.scp.css */
.kms-auth-shell[b-k2ywsgs4ug] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(circle at top left, var(--kms-navy-700) 0%, var(--kms-navy-900) 45%, var(--kms-navy-900) 100%);
    position: relative;
    isolation: isolate;
}

/* Achtergrondafbeelding van een shop: schermvullend, licht vervaagd. De iets vergrote schaal verbergt de
   lichte randen die blur() anders langs de schermrand geeft; de donkere laag houdt de kaart leesbaar. */
.kms-auth-bg[b-k2ywsgs4ug] {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px);
    transform: scale(1.06);
}

.kms-auth-bg[b-k2ywsgs4ug]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 36, .35);
}

.kms-auth-shop[b-k2ywsgs4ug] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    /* De taalkiezer staat rechtsboven in de kaart: houd de shopnaam daar vandaan. */
    padding-top: 1.25rem;
}

.kms-auth-shop-logo[b-k2ywsgs4ug] {
    max-width: 12rem;
    max-height: 5rem;
    object-fit: contain;
}

.kms-auth-shop-name[b-k2ywsgs4ug] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kms-text);
}

.kms-auth-shop-welcome[b-k2ywsgs4ug] {
    font-size: .9rem;
    color: var(--kms-text-muted);
}

.kms-auth-card[b-k2ywsgs4ug] {
    width: 100%;
    max-width: 26rem;
    background: var(--kms-surface);
    border-radius: var(--kms-radius-lg);
    box-shadow: var(--kms-shadow-lg);
    padding: 2rem 2rem 2.25rem;
    position: relative;
}

.kms-auth-lang-switcher[b-k2ywsgs4ug] {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
}

.kms-auth-brand[b-k2ywsgs4ug] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* De gescaffolde Identity-pagina's zijn met een breed Bootstrap-grid (row/col-md-*)
   opgebouwd; in deze smalle kaart negeren we dat grid zodat alles netjes onder
   elkaar staat in plaats van op basis van de browserbreedte te versmallen. */
[b-k2ywsgs4ug] h1 {
    font-size: 1.35rem;
    text-align: center;
    margin-bottom: .25rem;
}

[b-k2ywsgs4ug] h2 {
    font-size: .95rem;
    font-weight: 500;
    color: var(--kms-text-muted);
    text-align: center;
    margin-bottom: 1rem;
}

[b-k2ywsgs4ug] hr {
    display: none;
}

[b-k2ywsgs4ug] .row {
    display: block;
    margin: 0;
}

[b-k2ywsgs4ug] [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

[b-k2ywsgs4ug] section + section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kms-border);
}

[b-k2ywsgs4ug] p {
    text-align: center;
    margin-bottom: .5rem;
}
/* _content/KMS.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.kms-app[b-xaajyiiy7r] {
    display: flex;
    min-height: 100vh;
    gap: 1rem;
    padding: 1rem;
    background: var(--kms-bg);
}

/* ---------- Sidebar ---------- */
.kms-sidebar[b-xaajyiiy7r] {
    width: 15.5rem;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--kms-navy-900), #0b1220);
    color: var(--kms-text-inverse);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    border-radius: var(--kms-radius-lg);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .28);
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    min-height: calc(100vh - 2rem);
}

.kms-nav-toggle[b-xaajyiiy7r],
.kms-nav-burger[b-xaajyiiy7r] {
    display: none;
}

.kms-sidebar-head[b-xaajyiiy7r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.kms-sidebar-brand[b-xaajyiiy7r] {
    color: #fff;
    padding: .25rem .5rem 1.75rem;
}

    .kms-sidebar-brand .kms-brand-mark-shop[b-xaajyiiy7r] {
        overflow: hidden;
    }

        .kms-sidebar-brand .kms-brand-mark-shop img[b-xaajyiiy7r] {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .kms-sidebar-brand .kms-brand-shop-name[b-xaajyiiy7r] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1.2;
    }

.kms-nav[b-xaajyiiy7r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* ---------- Sidebar footer (logout) ---------- */
.kms-sidebar-footer[b-xaajyiiy7r] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

    .kms-sidebar-footer form[b-xaajyiiy7r] {
        display: flex;
    }

.kms-logout-btn[b-xaajyiiy7r] {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .5rem .6rem;
    border-radius: var(--kms-radius-lg);
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: #cdd4e0;
    font-size: .88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .kms-logout-btn:hover[b-xaajyiiy7r] {
        background: rgba(255, 255, 255, .06);
        color: #fff;
        border-color: rgba(255, 255, 255, .24);
    }

    .kms-logout-btn .kms-nav-icon[b-xaajyiiy7r] {
        background: transparent;
    }

/* ---------- Main column ---------- */
.kms-main[b-xaajyiiy7r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--kms-surface);
    border-radius: var(--kms-radius-lg);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.kms-topbar[b-xaajyiiy7r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.75rem;
    background: var(--kms-surface);
    border-bottom: 1px solid var(--kms-border);
}

.kms-topbar-logo[b-xaajyiiy7r] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

    .kms-topbar-logo img[b-xaajyiiy7r] {
        max-width: 100%;
        max-height: 3rem;
        object-fit: contain;
    }

.kms-user-info[b-xaajyiiy7r] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.kms-user-name[b-xaajyiiy7r] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--kms-text);
}

.kms-user-role[b-xaajyiiy7r] {
    font-size: .7rem;
    color: var(--kms-text-muted);
}

.kms-content[b-xaajyiiy7r] {
    flex: 1;
    padding: 1.75rem;
}

@media (max-width: 768px) {
    .kms-app[b-xaajyiiy7r] {
        flex-direction: column;
        padding: .5rem;
        gap: .5rem;
    }

    /* Compacte balk bovenaan: merk + hamburger; het menu klapt eronder open. */
    .kms-sidebar[b-xaajyiiy7r] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        position: static;
        min-height: auto;
        padding: .6rem .85rem;
    }

    .kms-sidebar-head[b-xaajyiiy7r] {
        align-items: center;
    }

    .kms-sidebar-brand[b-xaajyiiy7r] {
        padding: 0;
        min-width: 0;
    }

    .kms-nav-burger[b-xaajyiiy7r] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: .5rem;
        border-radius: var(--kms-radius);
        color: #fff;
        cursor: pointer;
        user-select: none;
    }

        .kms-nav-burger:hover[b-xaajyiiy7r],
        .kms-nav-toggle:checked ~ .kms-sidebar-head .kms-nav-burger[b-xaajyiiy7r] {
            background: rgba(255, 255, 255, .1);
        }

        .kms-nav-burger:focus-visible[b-xaajyiiy7r] {
            outline: 2px solid var(--kms-accent);
            outline-offset: 2px;
        }

    .kms-nav[b-xaajyiiy7r],
    .kms-sidebar-footer[b-xaajyiiy7r] {
        display: none;
    }

    .kms-nav-toggle:checked ~ .kms-nav[b-xaajyiiy7r] {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        padding-top: .75rem;
    }

    .kms-nav-toggle:checked ~ .kms-sidebar-footer[b-xaajyiiy7r] {
        display: block;
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: none;
        padding-left: 0;
    }

    .kms-logout-btn[b-xaajyiiy7r] {
        width: 100%;
    }

    .kms-topbar[b-xaajyiiy7r] {
        padding: .65rem 1rem;
    }

    /* Op de telefoon staat het logo al in de balk met het menu. */
    .kms-topbar-logo[b-xaajyiiy7r] {
        display: none;
    }

    .kms-content[b-xaajyiiy7r] {
        padding: 1rem;
    }
}

#blazor-error-ui[b-xaajyiiy7r] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* ---------- "Ingelogd namens"-balk (beheerder) ---------- */
.kms-impersonation-banner[b-xaajyiiy7r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1.75rem;
    background: #b45309;
    color: #fff;
    font-size: .9rem;
}

    .kms-impersonation-banner form[b-xaajyiiy7r] {
        margin: 0;
    }
/* _content/KMS.Web/Components/Pages/Beheer/Reports.razor.rz.scp.css */
/* Kerncijfers bovenaan het rapport: dezelfde kaartjes als op het dashboard (die staan in Home.razor.css en zijn daar afgeschermd). */
.kms-pillars[b-fizyzfksre] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.kms-pillar-card[b-fizyzfksre] {
    background: var(--kms-surface);
    border: 1px solid var(--kms-border);
    border-radius: var(--kms-radius);
    box-shadow: var(--kms-shadow);
    padding: 1.1rem 1.25rem;
}

    .kms-pillar-card h2[b-fizyzfksre] {
        font-size: 1.5rem;
        margin-bottom: .2rem;
    }

    .kms-pillar-card p[b-fizyzfksre] {
        color: var(--kms-text-muted);
        font-size: .9rem;
    }
/* _content/KMS.Web/Components/Pages/Home.razor.rz.scp.css */
.kms-hero[b-9gm55pobbt] {
    margin-bottom: 1.75rem;
}

.kms-hero h1[b-9gm55pobbt] {
    margin-bottom: .35rem;
}

.kms-hero-subtitle[b-9gm55pobbt] {
    color: var(--kms-text-muted);
    max-width: 46rem;
}

.kms-pillars[b-9gm55pobbt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.kms-pillar-card[b-9gm55pobbt] {
    background: var(--kms-surface);
    border: 1px solid var(--kms-border);
    border-radius: var(--kms-radius);
    box-shadow: var(--kms-shadow);
    padding: 1.5rem;
}

.kms-pillar-icon[b-9gm55pobbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--kms-radius-sm);
    background: rgba(var(--kms-accent-rgb), .12);
    color: var(--kms-accent-dark);
    margin-bottom: .9rem;
}

    .kms-pillar-icon svg[b-9gm55pobbt] {
        width: 1.5rem;
        height: 1.5rem;
    }

.kms-pillar-card h2[b-9gm55pobbt] {
    font-size: 1.05rem;
    margin-bottom: .4rem;
}

.kms-pillar-card p[b-9gm55pobbt] {
    color: var(--kms-text-muted);
    font-size: .9rem;
    margin-bottom: 0;
}

.kms-roadmap[b-9gm55pobbt] {
    background: var(--kms-surface);
    border: 1px solid var(--kms-border);
    border-radius: var(--kms-radius);
    box-shadow: var(--kms-shadow);
    padding: 1.5rem 1.75rem;
    max-width: 40rem;
}

    .kms-roadmap h2[b-9gm55pobbt] {
        font-size: 1.05rem;
        margin-bottom: .35rem;
    }

.kms-roadmap-intro[b-9gm55pobbt] {
    color: var(--kms-text-muted);
    font-size: .9rem;
    margin-bottom: 1rem;
}

.kms-roadmap ul[b-9gm55pobbt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.kms-roadmap li[b-9gm55pobbt] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.kms-badge-done[b-9gm55pobbt] {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(23, 152, 76, .12);
    color: var(--kms-success);
    flex-shrink: 0;
}
/* _content/KMS.Web/Components/Shared/BarList.razor.rz.scp.css */
.kms-barlist[b-914ao1trtb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .kms-barlist li[b-914ao1trtb] {
        display: grid;
        grid-template-columns: minmax(6rem, 14rem) 1fr minmax(4rem, auto);
        align-items: center;
        gap: .75rem;
        font-size: .9rem;
    }

.kms-barlist-label[b-914ao1trtb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--kms-text);
}

.kms-barlist-track[b-914ao1trtb] {
    height: .9rem;
    border-radius: 4px;
    background: var(--kms-bg, #f1f4f8);
    overflow: hidden;
}

.kms-barlist-bar[b-914ao1trtb] {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--kms-accent, #f2670c);
}

.kms-barlist-negative[b-914ao1trtb] {
    background: var(--kms-danger, #d92d20);
}

.kms-barlist-value[b-914ao1trtb] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--kms-text);
}

@media (max-width: 575.98px) {
    .kms-barlist li[b-914ao1trtb] {
        grid-template-columns: 1fr auto;
    }

    .kms-barlist-track[b-914ao1trtb] {
        grid-column: 1 / -1;
        order: 3;
    }
}
/* _content/KMS.Web/Components/Shared/LineChart.razor.rz.scp.css */
/* Kleuren komen uit de huisstijl van de app (--kms-accent) en de tekstkleuren; het raster is bewust nauwelijks zichtbaar. */
.kms-linechart[b-jsh7k4ma4h] {
    width: 100%;
    height: auto;
    display: block;
}

    .kms-linechart .grid[b-jsh7k4ma4h] {
        stroke: var(--kms-border, #e2e8f0);
        stroke-width: 1;
    }

    /* ::deep is nodig omdat de <text>-elementen via MarkupString (SvgText) als rauwe HTML binnenkomen: Blazor's
       scoped-CSS-isolatie voegt daar nooit een scope-attribuut aan toe, dus zonder ::deep raakt deze regel niets
       (de as bleef daardoor op de browser-standaard 16px/zwart staan i.p.v. de bedoelde 9px/gedempte kleur). */
    .kms-linechart[b-jsh7k4ma4h]  .axis {
        fill: var(--kms-text-muted, #667085);
        font-size: 9px;
    }

    /* Datumlabels ("25 aug") zijn breder dan de getallen op de y-as en ogen al snel te dominant. */
    .kms-linechart[b-jsh7k4ma4h]  .axis-x {
        font-size: 7px;
    }

    .kms-linechart .line[b-jsh7k4ma4h] {
        fill: none;
        stroke: var(--kms-accent, #f97316);
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .kms-linechart .area[b-jsh7k4ma4h] {
        fill: var(--kms-accent, #f97316);
        opacity: .1;
    }

    .kms-linechart .guide[b-jsh7k4ma4h] {
        stroke: var(--kms-text-muted, #667085);
        stroke-width: 1;
        stroke-dasharray: 3 3;
        opacity: 0;
    }

    .kms-linechart .dot[b-jsh7k4ma4h] {
        fill: var(--kms-accent, #f97316);
        stroke: var(--kms-surface, #fff);
        stroke-width: 2;
        opacity: 0;
    }

    .kms-linechart .tip[b-jsh7k4ma4h] {
        opacity: 0;
        pointer-events: none;
    }

        .kms-linechart .tip rect[b-jsh7k4ma4h] {
            fill: var(--kms-surface, #fff);
            stroke: var(--kms-border, #e2e8f0);
        }

        /* Tekst in de tooltip blijft tekstkleur, niet de kleur van de reeks. Ook hier ::deep nodig (zie hierboven bij .axis). */
        .kms-linechart .tip[b-jsh7k4ma4h]  text {
            fill: var(--kms-text, #0f172a);
            font-size: 10px;
            font-weight: 600;
        }

    .kms-linechart .point:hover .guide[b-jsh7k4ma4h],
    .kms-linechart .point:hover .dot[b-jsh7k4ma4h],
    .kms-linechart .point:hover .tip[b-jsh7k4ma4h] {
        opacity: 1;
    }
/* _content/KMS.Web/Components/Shared/PasswordField.razor.rz.scp.css */
.kms-password-wrap[b-2jtdgt0evk] {
    position: relative;
}

/* ::deep is nodig omdat <InputText> een los kindcomponent is: het <input>-element dat het rendert krijgt
   nooit dit component's scope-attribuut, dus zonder ::deep raakt deze regel niets (zie ook de LineChart-as,
   die aan hetzelfde mankeerde omdat MarkupString-inhoud nooit scoped raakt - hier is de oorzaak een kindcomponent
   i.p.v. rauwe HTML, maar het gevolg is identiek: de regel lijkt te bestaan maar past nooit ergens op toe). */
.kms-password-wrap[b-2jtdgt0evk]  .form-control {
    padding-right: 2.75rem;
}

.kms-password-toggle[b-2jtdgt0evk] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--kms-text-muted, #667085);
    cursor: pointer;
}

    .kms-password-toggle:hover[b-2jtdgt0evk],
    .kms-password-toggle:focus-visible[b-2jtdgt0evk] {
        color: var(--kms-text, #0f172a);
    }