/* /Components/BotChallengeGuard.razor.rz.scp.css */
/*
    MLV20260813 Het honeypot-veld van de botcontrole (taak #1044).

    Bewust NIET display:none of hidden: een deel van de formulierinvullers slaat velden over die
    aantoonbaar onzichtbaar zijn. Het veld blijft dus "gewoon" in de DOM staan, maar buiten beeld en
    zonder ruimte in te nemen, en het is met tabindex="-1" uit de tabvolgorde gehaald. Een mens komt
    er niet bij, een script wel.
*/
.bot-challenge-guard[b-o0hmxk1rjx] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/CompanyLogoUpload.razor.rz.scp.css */
.company-logo-upload__preview[b-s4k4wh84lu] {
    max-width: 240px;
    max-height: 120px;
    border: 1px solid #ddd;
    padding: 4px;
    background: #fff;
}
/* /Components/ImpersonationBanner.razor.rz.scp.css */
/*
    MLV20260825 The impersonation bar. Deliberately loud: this is a warning, not decoration.
    Component scoped, so it cannot leak into the rest of SAAR (house rule: no <style> in a .razor).
*/

.vsi-impersonation-bar[b-3ojv0rkwbn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #7a0000;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.3;
    border-bottom: 3px solid #ffc107;
}

.vsi-impersonation-bar__icon[b-3ojv0rkwbn] {
    font-size: 1.35rem;
    line-height: 1;
}

.vsi-impersonation-bar__text[b-3ojv0rkwbn] {
    flex: 1 1 20rem;
}

.vsi-impersonation-bar__by[b-3ojv0rkwbn] {
    display: inline-block;
    opacity: 0.85;
}

.vsi-impersonation-bar__stop[b-3ojv0rkwbn] {
    /* An anchor-sized button is easy to miss and impossible to hit on a tablet; keep it a real
       48px touch target (house rule for every clickable thing in this application). */
    min-height: 48px;
    padding: 0.35rem 1rem;
    background-color: #ffc107;
    color: #241a00;
    border: 0;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.vsi-impersonation-bar__stop:hover[b-3ojv0rkwbn],
.vsi-impersonation-bar__stop:focus[b-3ojv0rkwbn] {
    background-color: #ffda6a;
}
/* /Components/MailTemplatePanel.razor.rz.scp.css */
.vsi-mail-panel[b-k6lxmv36n9] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vsi-mail-panel__actions[b-k6lxmv36n9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vsi-mail-panel__title[b-k6lxmv36n9] {
    padding: 4px 8px;
    background-color: #eef0f3;
    border: 1px solid #d7d9dc;
    border-bottom: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.vsi-mail-panel__frame[b-k6lxmv36n9] {
    width: 100%;
    height: calc(100vh - 420px);
    min-height: 380px;
    border: 1px solid #d7d9dc;
    background-color: #fff;
}
/* /Components/ReadOnlyValueDisplay.razor.rz.scp.css */
/* A read-only value is not an input (see ReadOnlyValueDisplay.razor), but it must still look like the
   disabled field it replaces. The sizing mirrors Bootstrap's .form-control so a form keeps its rhythm,
   and the minimum height keeps the box visible when the value is still empty. */
.vsi-readonly-value[b-bpexvbj20s] {
    background-color: #e9ecef;
    color: #495057;
    min-height: calc(1.5em + 0.75rem + 2px);
    word-break: break-word;
    cursor: default;
}
/* /Components/TagSelect.razor.rz.scp.css */
/* TagSelect Component Styles */
.tag-select-container[b-2slaaqxklv]
{
    width: 100%;
    margin-bottom: 16px;
}

.tag-buttons-wrapper[b-2slaaqxklv]
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tag-button[b-2slaaqxklv]
{
    margin: 2px;
    border-radius: 20px;
    font-size: 12px;
    padding: 6px 12px;
    min-height: 32px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tag-button-selected[b-2slaaqxklv]
{
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.tag-button-selected:hover[b-2slaaqxklv]
{
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4);
}

.tag-button-unselected[b-2slaaqxklv]
{
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

.tag-button-unselected:hover[b-2slaaqxklv]
{
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag-button:active[b-2slaaqxklv]
{
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.no-tags-message[b-2slaaqxklv]
{
    color: #6c757d;
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}

/* Responsive design */
@media (max-width: 768px)
{
    .tag-buttons-wrapper[b-2slaaqxklv]
    {
        gap: 6px;
    }

    .tag-button[b-2slaaqxklv]
    {
        font-size: 11px;
        padding: 4px 8px;
        min-height: 28px;
    }
}
/* /Components/Toast.razor.rz.scp.css */
/*Toast*/
.cs-toast[b-3l6l185jfq]
{
    display: none;
    padding: 1.5rem;
    color: #fff;
    z-index: 999;
    width: 25rem;
    top: 4rem;
    border-radius: 1rem;
    right: 2rem;
    /* MLV Changed */
    /* position: absolute; */
    position: fixed;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
}

.cs-toast-icon[b-3l6l185jfq]
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
    background-color: transparent;
}

.cs-toast-close[b-3l6l185jfq]
{
    color: white;
    background: none;
    border: none;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    cursor: pointer;
}

.cs-toast-body[b-3l6l185jfq]
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

.cs-toast-body p[b-3l6l185jfq]
{
    margin-bottom: 0;
}

.cs-toast-visible[b-3l6l185jfq]
{
    display: flex;
    flex-direction: row;
    animation: fadein-b-3l6l185jfq 1.5s;
}

@keyframes fadein-b-3l6l185jfq
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}

@media (max-width: 992px)
{
    .cs-toast[b-3l6l185jfq]
    {
        width: 90%; /* 85% of the window width */
        left: 50%; /* Center the toast horizontally */
        top: 50%; /* Center the toast vertically */
        transform: translate(-50%, -50%); /* Offset both horizontally and vertically */
        position: absolute; /* Ensure the element is positioned relative to the viewport */
        right: initial; /* Remove the right positioning */
    }

    .cs-toast-icon[b-3l6l185jfq]
    {
        font-size: 1.5rem; /* Smaller icon size */
    }

    .cs-toast-body[b-3l6l185jfq]
    {
        font-size: 0.9rem; /* Smaller font size for the toast body */
    }
}
/* /Components/VSIPdfViewer.razor.rz.scp.css */
.pdf-viewer-container[b-zc0pyrrlvp] {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #525659;
    /* When no explicit height is set via inline style, the container
       grows to fit the PDF page content (toolbar + page + padding).
       max-height prevents it from exceeding the viewport. */
    max-height: 100vh;
}

.pdf-viewer-toolbar[b-zc0pyrrlvp] {
    background-color: #f0f0f0;
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.pdf-viewer-nav[b-zc0pyrrlvp] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdf-nav-btn[b-zc0pyrrlvp] {
    background: none;
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    line-height: 1.2;
    min-width: 28px;
    text-align: center;
}

.pdf-nav-btn:hover:not(:disabled)[b-zc0pyrrlvp] {
    background-color: #e0e0e0;
}

.pdf-nav-btn:disabled[b-zc0pyrrlvp] {
    opacity: 0.4;
    cursor: default;
}

.pdf-nav-label[b-zc0pyrrlvp] {
    font-size: 0.875rem;
    color: #333;
    padding: 0 4px;
    white-space: nowrap;
}

.pdf-toolbar-item[b-zc0pyrrlvp] {
    font-size: 0.875rem;
    color: #555;
    white-space: nowrap;
}

.pdf-toolbar-separator[b-zc0pyrrlvp] {
    color: #ccc;
    font-size: 0.875rem;
    padding: 0 2px;
    user-select: none;
}

.pdf-viewer-pages[b-zc0pyrrlvp] {
    flex: 1 1 0%;
    /* Grid layout prevents the container from sizing itself based on
       its children's intrinsic width. Unlike flex or block layout,
       a grid container constrains children to its own column track,
       so a 2000px-wide PDF page scrolls inside instead of pushing
       the container (and the page) wider. */
    display: grid;
    /* Always show scrollbar gutter to prevent layout shifts when
       content size changes during zoom. */
    overflow: scroll;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    min-width: 0;
    min-height: 0;
}

.pdf-toolbar-protected[b-zc0pyrrlvp] {
    font-size: 0.8rem;
    color: #c0392b;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* Active state for the pan/select mode toggle buttons */
.pdf-mode-active[b-zc0pyrrlvp] {
    background-color: #4a90d9;
    color: #fff;
    border-color: #3a7bc8;
}

.pdf-mode-active:hover:not(:disabled)[b-zc0pyrrlvp] {
    background-color: #3a7bc8;
}

.pdf-nav-input[b-zc0pyrrlvp] {
    width: 3.5em;
    padding: 1px 4px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 0.875rem;
    color: #333;
    text-align: center;
    background: #fff;
    /* Remove the default number input spinner arrows for a cleaner look */
    -moz-appearance: textfield;
    appearance: textfield;
}

.pdf-nav-input[b-zc0pyrrlvp]::-webkit-inner-spin-button,
.pdf-nav-input[b-zc0pyrrlvp]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdf-nav-input:focus[b-zc0pyrrlvp] {
    outline: 2px solid #4a90d9;
    outline-offset: -1px;
    border-color: #4a90d9;
}

.pdf-zoom-btn[b-zc0pyrrlvp] {
    font-size: 0.9rem;
    padding: 1px 6px;
    min-width: 24px;
    font-weight: bold;
}

/* ── Mobile compact layout (< 768px) ── */
@media (max-width: 767.98px) {
    .pdf-viewer-toolbar[b-zc0pyrrlvp] {
        padding: 4px 6px;
        gap: 3px;
        min-height: 28px;
    }

    .pdf-nav-btn[b-zc0pyrrlvp] {
        padding: 1px 5px;
        font-size: 0.75rem;
        min-width: 22px;
    }

    .pdf-nav-label[b-zc0pyrrlvp] {
        font-size: 0.75rem;
        padding: 0 2px;
    }

    .pdf-nav-input[b-zc0pyrrlvp] {
        width: 2.8em;
        font-size: 0.75rem;
        padding: 0 2px;
    }

    .pdf-toolbar-item[b-zc0pyrrlvp] {
        font-size: 0.75rem;
    }

    .pdf-toolbar-separator[b-zc0pyrrlvp] {
        font-size: 0.75rem;
        padding: 0 1px;
    }

    .pdf-toolbar-protected[b-zc0pyrrlvp] {
        font-size: 0.7rem;
    }

    .pdf-zoom-btn[b-zc0pyrrlvp] {
        font-size: 0.75rem;
        padding: 1px 4px;
        min-width: 20px;
    }

    /* Hide orientation and display mode labels on mobile — the
       toolbar only shows nav + zoom + protection indicator */
    .pdf-viewer-toolbar .pdf-toolbar-item:nth-of-type(n+2)[b-zc0pyrrlvp] {
        display: none;
    }

    /* Hide separators that become orphaned when items are hidden */
    .pdf-viewer-toolbar .pdf-toolbar-separator:nth-of-type(n+2)[b-zc0pyrrlvp] {
        display: none;
    }
}
/* ── Loading spinner overlay (always-on, regardless of ShowToolbar) ──
   Floats centred above the PDF area while the document is fetching /
   parsing. pointer-events:none lets the user keep interacting (scroll,
   pinch) underneath if they want — though typically there's nothing to
   scroll yet. */
.pdf-viewer-loading-overlay[b-zc0pyrrlvp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.pdf-viewer-loading-spinner[b-zc0pyrrlvp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    border-radius: 24px;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.pdf-viewer-loading-spinner .fa-spinner[b-zc0pyrrlvp] {
    font-size: 1.1rem;
}

/* The container itself needs position:relative so the absolute overlay
   anchors against it instead of the viewport. */
.pdf-viewer-container[b-zc0pyrrlvp] {
    position: relative;
}
/* /Pages/Data/ArticleEditTabImages.razor.rz.scp.css */
/* MLV20260813 Online cropping of article images (job #1066).
   The picker shows the whole photo with a lit up band: that band is exactly what the daily mail
   keeps. Everything outside it is dimmed, because that is what disappears. */

.vsi-crop__picker[b-bxa2wpur35] {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    max-width: 100%;
}

    .vsi-crop__picker img[b-bxa2wpur35] {
        display: block;
        object-fit: fill;
        pointer-events: none;
    }

/* The parts that get cut off. pointer-events stay off so a click always reaches the picker. */
.vsi-crop__mask[b-bxa2wpur35] {
    position: absolute;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* The band that survives. */
.vsi-crop__window[b-bxa2wpur35] {
    position: absolute;
    left: 0;
    right: 0;
    border: 2px solid #cc3333;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85) inset;
    pointer-events: none;
}

/* MLV20260814 De bijsnij-editor van de foto zelf (taak #1080). Het heldere kader is wat overblijft,
   alles eromheen wordt gedimd met een enkele grote box-shadow op het kader. */

.vsi-cropprompt__image[b-bxa2wpur35] {
    max-width: 100%;
    max-height: 220px;
    border: 1px solid #ced4da;
}

.vsi-cropedit__stage[b-bxa2wpur35] {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    max-width: 100%;
    /* Zonder dit vecht de browser-gebaarherkenning op een touchscreen met het slepen. */
    touch-action: none;
    user-select: none;
}

    .vsi-cropedit__stage img[b-bxa2wpur35] {
        display: block;
        object-fit: fill;
        pointer-events: none;
        -webkit-user-drag: none;
    }

.vsi-cropedit__box[b-bxa2wpur35] {
    position: absolute;
    border: 2px solid #cc3333;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    box-sizing: border-box;
}

/* De grepen liggen binnen het kader in plaats van er half buiten. Zou de helft buiten steken, dan
   knipt de overflow:hidden van het speelveld ze weg zodra het kader tegen de rand van de foto ligt,
   en dan is er precies in de beginstand niets meer aan te klikken. */
.vsi-cropedit__handle[b-bxa2wpur35] {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 2px solid #cc3333;
    border-radius: 3px;
    box-sizing: border-box;
}

.vsi-cropedit__handle--tl[b-bxa2wpur35] {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.vsi-cropedit__handle--tr[b-bxa2wpur35] {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.vsi-cropedit__handle--bl[b-bxa2wpur35] {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.vsi-cropedit__handle--br[b-bxa2wpur35] {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
}

.vsi-crop__result[b-bxa2wpur35] {
    text-align: center;
}

.vsi-crop__result-frame[b-bxa2wpur35] {
    overflow: hidden;
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

    /* object-fit + object-position reproduce the server side crop one on one. */
    .vsi-crop__result-frame img[b-bxa2wpur35] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* /Pages/Data/ArticleList.razor.rz.scp.css */
/* MLV20260816 Article list header (job #1176).

   The action buttons, the search and the number of articles used to sit right on top of each
   other without any breathing room, and the number of articles had a row of its own. They now
   form two tidy lines: the action buttons, and one toolbar with the search on the left and the
   number of articles on the right. */

.article-list-actions[b-r7g7qi0hkx]
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.article-list-toolbar[b-r7g7qi0hkx]
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.article-list-toolbar__group[b-r7g7qi0hkx]
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0; /* a <form> carries a bottom margin of its own */
}

/* Pushes the number of articles to the right hand side of the toolbar. */
.article-list-toolbar__group--end[b-r7g7qi0hkx]
{
    margin-left: auto;
}

.article-list-toolbar__label[b-r7g7qi0hkx]
{
    margin-bottom: 0;
    white-space: nowrap;
}

.article-list-toolbar__info[b-r7g7qi0hkx]
{
    display: inline-flex;
    align-items: center;
    cursor: help;
}

/* ::deep because the search box is rendered by the InputText component, so it never carries the
   scope attribute of this page. Without a width of its own .form-control claims 100% and pushes
   the buttons onto a line of their own. */
.article-list-toolbar[b-r7g7qi0hkx]  .article-list-toolbar__search
{
    flex: 0 1 300px;
    width: 300px;
    min-width: 160px;
}

.article-list-toolbar__result[b-r7g7qi0hkx]
{
    margin-bottom: 0.75rem;
}

/* The buttons carry a global 3px right margin; inside these flex rows the gap already spaces
   them, so the extra margin would only make the last button of a group hang off centre. */
.article-list-actions[b-r7g7qi0hkx]  .vsi-btn,
.article-list-toolbar[b-r7g7qi0hkx]  .vsi-btn
{
    margin-right: 0;
}

/* MLV20260817 The buttons of the command column stay on one line (job #1187).

   Wijzig / Wijzig+ / AD.cw / Verwijder needed 241px of the 256px the cell offered, so the smallest
   difference in how a browser renders the labels pushed 'Verwijder' onto a second line. The cell no
   longer wraps, the last button loses the 3px right margin the global .vsi-btn adds and the other
   three keep only 2px, and the column itself is 300px wide. That leaves 40px to spare on a 235px
   row of buttons, which survives labels rendered 20% wider.

   The horizontal padding is left alone on purpose: .btn-primary-sm/.btn-info-sm/.btn-danger-sm set
   it with !important in app-v203.css, so squeezing it here would only work with a second !important
   while the width is not needed.

   ::deep because the grid rows are rendered by the Telerik Grid, so they never carry the scope
   attribute of this page. */
#ArticleList[b-r7g7qi0hkx]  .k-grid td.k-command-cell
{
    white-space: nowrap;
}

#ArticleList[b-r7g7qi0hkx]  .k-grid td.k-command-cell .k-button
{
    margin-right: 2px;
}

#ArticleList[b-r7g7qi0hkx]  .k-grid td.k-command-cell .k-button:last-child
{
    margin-right: 0;
}

/* Too narrow for both blocks on one line: the number of articles starts its own line instead of
   being squeezed against the search box. */
@media only screen and (max-width: 1199px)
{
    .article-list-toolbar__group--end[b-r7g7qi0hkx]
    {
        margin-left: 0;
    }
}

/* Phone: give the search box a line of its own so the two buttons stay together underneath it. */
@media only screen and (max-width: 575px)
{
    .article-list-toolbar[b-r7g7qi0hkx]  .article-list-toolbar__search
    {
        flex: 1 1 100%;
        width: 100%;
    }
}
/* /Pages/Data/PaperEdit.razor.rz.scp.css */
/* MLV20260819 Krant details (job #1332).

   Twee dingen waren mis met de knoppen op deze pagina:

   1. "Lees de krant" en "Download" waren zichtbaar kleiner dan de rest. Het zijn <a>-elementen en
      het globale .vsi-btn in custom-v203.css zet display:inline, waarmee de verticale opvulling
      van .btn niet meer meetelt voor de regelhoogte. Headless gemeten: 32px hoog tegen 38px voor
      de <input type=button>-knoppen ernaast, die de override negeren omdat een browser een
      formulierbesturing altijd als inline-block tekent. Als flex-item wordt een anker geblokkeerd,
      dus de flex-rij hieronder maakt ze vanzelf even hoog; de expliciete regel legt dat vast.
   2. De balk paste niet op een venster van 1280px. De rij is nu een flex-rij die netjes wrapt
      (gelijke tussenruimte, gelijke hoogte) in plaats van als losse woorden af te breken, en de
      labels van de drie langste knoppen zijn ingekort - de volledige tekst staat in de title.

   Bewaakt door PaperEditButtonBarTests. */

.paper-edit-actions[b-apetf1rqtt]
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

/* De knoppen dragen een globale marge van 3px rechts; binnen deze flex-rij doet de gap dat werk
   al, en die extra marge zou de laatste knop van een regel scheef laten hangen. */
.paper-edit-actions .vsi-btn[b-apetf1rqtt]
{
    margin-right: 0;
}

/* Een anker is als flex-item al geblokkeerd; expliciet vastgelegd zodat het niet stilletjes
   terugvalt op het globale display:inline en de knop weer 6px lager wordt dan de rest. */
.paper-edit-actions a.vsi-btn[b-apetf1rqtt]
{
    display: inline-flex;
    align-items: center;
}

/* De twee knoppen van de knoppenkolom blijven op een regel. Copy URL en Segmenteer hebben samen
   ongeveer 200px nodig; de kolom is 260px, de cel wrapt niet en de laatste knop verliest de
   globale marge van 3px rechts.

   ::deep omdat de rijen door de Telerik Grid gerenderd worden en dus nooit het scope-attribuut van
   deze pagina dragen. */
#PaperEdit[b-apetf1rqtt]  .k-grid td.k-command-cell
{
    white-space: nowrap;
}

#PaperEdit[b-apetf1rqtt]  .k-grid td.k-command-cell .k-button
{
    margin-right: 2px;
}

#PaperEdit[b-apetf1rqtt]  .k-grid td.k-command-cell .k-button:last-child
{
    margin-right: 0;
}

/* Zelfde verhaal als hierboven: de twee icoonknoppen in de PDF-kolom zijn ankers en werden door
   het globale display:inline lager dan de knoppen ernaast. */
#PaperEdit[b-apetf1rqtt]  .k-grid td a.vsi-btn
{
    display: inline-flex;
    align-items: center;
}
/* /Pages/Data/VacancyWizard.razor.rz.scp.css */
/* The Telerik Wizard root gets the "vsi-wizard" class, but its DOM is rendered by
   Telerik, so it must be reached with ::deep from our own scoped #VacancyWizard div. */
#VacancyWizard[b-k4zwlxp66n]  .k-wizard {
    max-width: 1000px;
    margin-top: 1rem;
}

/* ── Progress indicator ──────────────────────────────────────────────────
   The built-in Telerik/Kendo stepper renders its labels on top of the step
   circles and can't be reliably restyled, so we hide it and render our own
   custom, fully controlled progress bar (.vsi-stepper) in the markup. */
#VacancyWizard[b-k4zwlxp66n]  .k-stepper {
    display: none !important;
}

.vsi-stepper[b-k4zwlxp66n] {
    display: flex;
    align-items: flex-start;
    margin: 1rem 0 2rem;
    padding: 0;
    list-style: none;
}

/* One step = a centered circle with its label underneath; equal widths. */
.vsi-stepper__step[b-k4zwlxp66n] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: center;
}

/* Connector line, sitting at the vertical centre of the circles (circle = 42px). */
.vsi-stepper__step:not(:first-child)[b-k4zwlxp66n]::before {
    content: "";
    position: absolute;
    top: 21px;
    left: -50%;
    width: 100%;
    height: 4px;
    background-color: #cfe2ff;
    border-radius: 2px;
    z-index: 0;
}

/* The segment leading into a reached step is filled blue. */
.vsi-stepper__step.is-done[b-k4zwlxp66n]::before,
.vsi-stepper__step.is-current[b-k4zwlxp66n]::before {
    background-color: #0d6efd;
}

.vsi-stepper__circle[b-k4zwlxp66n] {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #0d6efd;
    background-color: #fff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    /* white halo masks the connector line where it passes behind the circle */
    box-shadow: 0 0 0 5px #fff;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vsi-stepper__step.is-done .vsi-stepper__circle[b-k4zwlxp66n],
.vsi-stepper__step.is-current .vsi-stepper__circle[b-k4zwlxp66n] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.vsi-stepper__step.is-current .vsi-stepper__circle[b-k4zwlxp66n] {
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px #9ec5fe;
}

/* Upcoming steps are muted so done/current stand out. */
.vsi-stepper__step.is-upcoming .vsi-stepper__circle[b-k4zwlxp66n] {
    border-color: #9ec5fe;
    color: #6ea8fe;
}

.vsi-stepper__label[b-k4zwlxp66n] {
    margin-top: 0.6rem;
    max-width: 12em;
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.vsi-stepper__step.is-current .vsi-stepper__label[b-k4zwlxp66n] {
    color: #0a58ca;
    font-weight: 700;
}

.vsi-stepper__step.is-upcoming .vsi-stepper__label[b-k4zwlxp66n] {
    color: #6c8fb8;
}

/* Reached steps are clickable to jump back; upcoming ones are not. */
.vsi-stepper__step.is-clickable[b-k4zwlxp66n] {
    cursor: pointer;
}

.vsi-stepper__step.is-clickable:hover .vsi-stepper__circle[b-k4zwlxp66n] {
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px #cfe2ff;
}

.vsi-stepper__step:focus-visible[b-k4zwlxp66n] {
    outline: none;
}

.vsi-stepper__step:focus-visible .vsi-stepper__circle[b-k4zwlxp66n] {
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px #0d6efd;
}

/* ── Layout ── */
.vsi-wizard__step[b-k4zwlxp66n] {
    padding: 1rem 0.5rem;
    min-height: 260px;
}

.vsi-wizard__buttons[b-k4zwlxp66n] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.vsi-wizard__actions[b-k4zwlxp66n] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.vsi-wizard__subwizard[b-k4zwlxp66n] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
}

.vsi-wizard__summary[b-k4zwlxp66n] {
    list-style: none;
    padding-left: 0;
}

.vsi-wizard__summary li[b-k4zwlxp66n] {
    padding: 0.15rem 0;
}

.vsi-wizard__thumb[b-k4zwlxp66n] {
    max-width: 300px;
    max-height: 200px;
    border: 1px solid #ddd;
    padding: 4px;
    background: #fff;
}

/* ── Clear "company selected" indication (red, larger font) ── */
.vsi-wizard__selected-company[b-k4zwlxp66n] {
    color: #dc3545;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.5rem;
}
/* /Pages/HtmlEditor/HtmlSourceEditor.razor.rz.scp.css */
.vsi-html-editor[b-kgb3hx3n09] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vsi-html-editor__actions[b-kgb3hx3n09] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vsi-html-editor__dirty[b-kgb3hx3n09] {
    margin-left: 8px;
    font-weight: 600;
    color: #b33;
}

.vsi-html-editor__toolbar[b-kgb3hx3n09] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background-color: #f3f4f6;
    border: 1px solid #d7d9dc;
    border-radius: 4px 4px 0 0;
}

.vsi-html-editor__separator[b-kgb3hx3n09] {
    display: inline-block;
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background-color: #c9ccd1;
}

.vsi-html-editor__warning[b-kgb3hx3n09] {
    padding: 6px 10px;
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
}

.vsi-html-editor__panes[b-kgb3hx3n09] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: calc(100vh - 260px);
    min-height: 420px;
}

.vsi-html-editor__pane[b-kgb3hx3n09] {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #d7d9dc;
    border-top: none;
    overflow: hidden;
}

.vsi-html-editor__pane-title[b-kgb3hx3n09] {
    padding: 4px 8px;
    background-color: #eef0f3;
    border-bottom: 1px solid #d7d9dc;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Fixed frame for the source editor: CodeMirror replaces the textarea with its own
   DOM, so both are absolutely positioned to fill this box. */
.vsi-html-editor__code[b-kgb3hx3n09] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.vsi-html-editor__textarea[b-kgb3hx3n09] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    border: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
}

.vsi-html-editor__preview[b-kgb3hx3n09] {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background-color: #fff;
}

/* CodeMirror builds its own DOM inside our pane, so it never carries the CSS
   isolation scope attribute - ::deep is required to reach it. */
[b-kgb3hx3n09] .CodeMirror {
    position: absolute;
    inset: 0;
    height: 100%;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
}
/* /Pages/HtmlEditor/HtmlSourcePreview.razor.rz.scp.css */
.vsi-html-preview[b-9iby3m5rn4] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vsi-html-preview__frame[b-9iby3m5rn4] {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 420px;
    border: 1px solid #d7d9dc;
    background-color: #fff;
}
/* /Pages/MailingCenter/MailingCenterTabNewsletter.razor.rz.scp.css */
/* MLV20260810 The newsletter tab of the Mailing center: the rendered preview next to the controls.
   Deliberately mirrors the look of MailTemplatePanel, which shows the raw template on the other tabs. */

.vsi-newsletter-preview[b-n9486dch5j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.vsi-newsletter-preview__actions[b-n9486dch5j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vsi-newsletter-preview__title[b-n9486dch5j] {
    font-weight: 600;
    color: #495057;
}

.vsi-newsletter-preview__frame[b-n9486dch5j] {
    width: 100%;
    min-height: 700px;
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

.vsi-newsletter__facts[b-n9486dch5j] {
    line-height: 1.6;
}

.vsi-newsletter__warning[b-n9486dch5j] {
    color: #a82a2a;
    line-height: 1.6;
}
/* /Pages/Miscellaneous/EnvironmentSwitch.razor.rz.scp.css */
/* MLV20260804 Styling of the environment screen. Component scoped, so nothing here can leak into
   another page — see the CSS rule in CLAUDE.md (never a <style> block inside a .razor file).

   The colour of the panel is the point: at a glance it has to be obvious whether you are looking at
   production, at the test environment or at your own machine. */

.environment-panel[b-qj3795qptg] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: 0.375rem;
    border-left: 8px solid #6c757d;
    background-color: #f8f9fa;
}

.environment-panel--production[b-qj3795qptg] {
    border-left-color: #dc3545;
    background-color: #fdf2f3;
}

.environment-panel--staging[b-qj3795qptg] {
    border-left-color: #fd7e14;
    background-color: #fff8f1;
}

.environment-panel--localhost[b-qj3795qptg] {
    border-left-color: #198754;
    background-color: #f2f9f5;
}

.environment-panel--unknown[b-qj3795qptg] {
    border-left-color: #6c757d;
}

.environment-panel__item[b-qj3795qptg] {
    display: flex;
    flex-direction: column;
}

.environment-panel__label[b-qj3795qptg] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
}

.environment-panel__value[b-qj3795qptg] {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Touch: the confirmation field and its button stay on one line but keep a 48px target height. */
.environment-confirm[b-qj3795qptg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
}

.environment-status[b-qj3795qptg] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.environment-status--changed[b-qj3795qptg] {
    background-color: #cfe2ff;
    color: #084298;
}

.environment-status--unchanged[b-qj3795qptg] {
    background-color: #e2e3e5;
    color: #41464b;
}

.environment-status--skipped[b-qj3795qptg] {
    background-color: #fff3cd;
    color: #664d03;
}
/* /Pages/Start/Start.razor.rz.scp.css */
/* SAAR dashboard — tile based landing page */

.vsi-dashboard[b-v86ib3i8j6] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Header with AD logo ── */
.vsi-dashboard-header[b-v86ib3i8j6] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 3px solid #cc3333;
}

.vsi-dashboard-logo[b-v86ib3i8j6] {
    height: 64px;
    width: auto;
    flex: 0 0 auto;
}

.vsi-dashboard-heading[b-v86ib3i8j6] {
    display: flex;
    flex-direction: column;
}

.vsi-dashboard-title[b-v86ib3i8j6] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #cc3333;
    margin: 0;
    line-height: 1.1;
}

.vsi-dashboard-subtitle[b-v86ib3i8j6] {
    margin: 0.2rem 0 0;
    color: #6c757d;
    font-size: 0.95rem;
}

/* ── Prominente inlog-knop (alleen zichtbaar wanneer niet ingelogd) ── */
.vsi-login-section[b-v86ib3i8j6] {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.vsi-login-button[b-v86ib3i8j6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 480px;
    padding: 1.4rem 2rem;
    background: #cc3333;
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(204, 51, 51, 0.3);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vsi-login-button:hover[b-v86ib3i8j6],
.vsi-login-button:focus-visible[b-v86ib3i8j6] {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(204, 51, 51, 0.4);
    background: #b82d2d;
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.vsi-login-button-icon[b-v86ib3i8j6] {
    font-size: 1.6rem;
}

/* ── Sections ── */
.vsi-tile-section[b-v86ib3i8j6] {
    margin-bottom: 2rem;
}

.vsi-tile-section-title[b-v86ib3i8j6] {
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #495057;
    margin: 0 0 0.9rem;
    text-align: center;
}

/* ── Tile grid ── */
.vsi-tile-grid[b-v86ib3i8j6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.vsi-tile[b-v86ib3i8j6] {
    display: flex;
    flex: 0 0 190px;
    width: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.8rem;
    min-height: 140px;
    padding: 1.4rem 1rem;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: #343a40;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vsi-tile:hover[b-v86ib3i8j6],
.vsi-tile:focus-visible[b-v86ib3i8j6] {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    border-color: #cc3333;
    color: #cc3333;
    text-decoration: none;
    outline: none;
}

/* ── Icon badge ── */
.vsi-tile-icon[b-v86ib3i8j6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 1.55rem;
    background: #f8d7da;
    color: #cc3333;
    transition: transform 0.15s ease;
}

.vsi-tile:hover .vsi-tile-icon[b-v86ib3i8j6],
.vsi-tile:focus-visible .vsi-tile-icon[b-v86ib3i8j6] {
    transform: scale(1.06);
}

/* Per-group icon accent colours */
.vsi-tile-general .vsi-tile-icon[b-v86ib3i8j6] {
    background: #e7f1ff;
    color: #0d6efd;
}

.vsi-tile-admin .vsi-tile-icon[b-v86ib3i8j6] {
    background: #f8d7da;
    color: #cc3333;
}

.vsi-tile-editorial .vsi-tile-icon[b-v86ib3i8j6] {
    background: #d1e7dd;
    color: #198754;
}

.vsi-tile-admin2 .vsi-tile-icon[b-v86ib3i8j6] {
    background: #fff3cd;
    color: #997404;
}

/* ── Labels ── */
.vsi-tile-label[b-v86ib3i8j6] {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.25;
}

.vsi-tile-sub[b-v86ib3i8j6] {
    font-weight: 400;
    font-size: 0.8rem;
    color: #6c757d;
}

.vsi-tile:hover .vsi-tile-sub[b-v86ib3i8j6],
.vsi-tile:focus-visible .vsi-tile-sub[b-v86ib3i8j6] {
    color: inherit;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .vsi-dashboard-header[b-v86ib3i8j6] {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
    }

    .vsi-tile[b-v86ib3i8j6] {
        flex: 0 0 140px;
        width: 140px;
        min-height: 120px;
        padding: 1.1rem 0.75rem;
    }
}
/* /Pages/Statistics/StatisticsDashboard.razor.rz.scp.css */
/* MLV20260728 Statistiekendashboard (prompt 13).
   Component-scoped CSS naast de component, volgens de huisregel: nooit een <style>-blok in een
   .razor-bestand. Aanraakbaar: tegels en knoppen zijn minimaal 48 px hoog, want SAAR wordt ook op
   telefoon en iPad gebruikt. */

.statistics-dashboard[b-1m97f2n962] {
    padding-bottom: 2rem;
}

.stat-period[b-1m97f2n962] {
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.stat-period-buttons[b-1m97f2n962] {
    display: flex;
    align-items: flex-end;
    min-height: 48px;
}

.stat-period-description[b-1m97f2n962] {
    margin: 0.25rem 0 1rem 0;
}

.stat-period-days[b-1m97f2n962] {
    color: #6c757d;
    font-size: 0.85rem;
}

.stat-warnings ul[b-1m97f2n962] {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
}

.stat-warnings li[b-1m97f2n962] {
    margin-bottom: 0.25rem;
}

/* ─────────── Tabbladen ───────────
   MLV20260821 De onderdelen staan in een TelerikTabStrip in plaats van onder elkaar. De tabkoppen
   krijgen een aanraakbare hoogte (48 px is het minimum op telefoon en iPad). De selectors staan
   achter ::deep omdat Telerik deze elementen zelf rendert; ze dragen het scope-attribuut niet. */

.stat-tabs[b-1m97f2n962] {
    margin-top: 0.5rem;
}

.stat-tabs[b-1m97f2n962]  .k-tabstrip-items .k-link {
    min-height: 48px;
    align-items: center;
    font-weight: 600;
}

.stat-tabs[b-1m97f2n962]  .k-tabstrip-content {
    padding-top: 0.5rem;
}

/* Het eerste kopje in een tabblad hoeft geen extra ruimte boven zich: de tabkop staat er al. */
.stat-tabs[b-1m97f2n962]  .k-tabstrip-content > .stat-section-title:first-child {
    margin-top: 0.25rem;
}

/* ─────────── Kerncijfers ─────────── */

.stat-tile-grid[b-1m97f2n962] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-tile[b-1m97f2n962] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #ffffff;
}

.stat-tile-empty[b-1m97f2n962] {
    background-color: #f8f9fa;
    color: #6c757d;
}

.stat-tile-label[b-1m97f2n962] {
    font-size: 0.9rem;
    font-weight: 600;
}

.stat-tile-source[b-1m97f2n962] {
    font-size: 0.75rem;
    color: #6c757d;
}

.stat-tile-value[b-1m97f2n962] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-tile-change[b-1m97f2n962] {
    font-size: 0.75rem;
}

.stat-up[b-1m97f2n962] {
    color: #2e7d32;
}

.stat-down[b-1m97f2n962] {
    color: #c62828;
}

.stat-none[b-1m97f2n962] {
    color: #6c757d;
}

/* ─────────── Secties ─────────── */

.stat-section-title[b-1m97f2n962] {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.stat-section-intro[b-1m97f2n962] {
    margin-bottom: 0.75rem;
    color: #495057;
}

.stat-empty[b-1m97f2n962] {
    padding: 0.75rem 0;
    color: #6c757d;
    font-style: italic;
}

.stat-chart[b-1m97f2n962] {
    margin-bottom: 1rem;
}

/* ─────────── Koppen in de top 10 ─────────── */

.stat-grid[b-1m97f2n962] {
    margin-bottom: 1rem;
}

.stat-headline[b-1m97f2n962] {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    white-space: normal;
}

.stat-subheadline[b-1m97f2n962] {
    display: block;
    font-size: 0.85rem;
    color: #495057;
    white-space: normal;
}

.stat-headline-changed[b-1m97f2n962] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #b8860b;
    white-space: normal;
}

.stat-summary[b-1m97f2n962] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #6c757d;
    white-space: normal;
}

/* De kop mag over meerdere regels; standaard kapt Kendo een cel af op één regel.
   Op td gericht in plaats van op een Kendo-klassenaam, zodat een themawijziging dit niet breekt. */
.stat-grid-articles[b-1m97f2n962]  td {
    white-space: normal;
    vertical-align: top;
}

/* ─────────── Beheer ─────────── */

.stat-admin-buttons[b-1m97f2n962] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stat-admin-buttons[b-1m97f2n962]  .vsi-btn {
    min-height: 48px;
}

.stat-result[b-1m97f2n962] {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    font-size: 0.8rem;
    white-space: pre-wrap;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-ukrxkf4cg8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ukrxkf4cg8] {
    flex: 1;
}

.sidebar[b-ukrxkf4cg8] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ukrxkf4cg8] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ukrxkf4cg8]  a, .top-row[b-ukrxkf4cg8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ukrxkf4cg8]  a:hover, .top-row[b-ukrxkf4cg8]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ukrxkf4cg8]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ukrxkf4cg8] {
        display: none;
    }

    .top-row.auth[b-ukrxkf4cg8] {
        justify-content: space-between;
    }

    .top-row[b-ukrxkf4cg8]  a, .top-row[b-ukrxkf4cg8]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ukrxkf4cg8] {
        flex-direction: row;
    }

    .sidebar[b-ukrxkf4cg8] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ukrxkf4cg8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ukrxkf4cg8]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ukrxkf4cg8] {
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }

    article[b-ukrxkf4cg8]
    {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-dark .navbar-nav .nav-link[b-otrq8bq1u8]
{
    color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover[b-otrq8bq1u8]
{
    color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.active[b-otrq8bq1u8]
{
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-toggle[b-otrq8bq1u8]::after
{
    display: none;
}

.dropdown-menu[b-otrq8bq1u8]
{
    background-color: rgba(0,0,0,0.4);
    border: none;
}

.dropdown-item[b-otrq8bq1u8]
{
    font-size: 0.9rem;
}

.dropdown-item:hover[b-otrq8bq1u8]
{
    background-color: rgba(255,255,255,0.1);
}

.dropdown-item.active[b-otrq8bq1u8],
.dropdown-item:active[b-otrq8bq1u8]
{
    background-color: rgba(255,255,255,0.1);
}

/* Square white "AD" brand logo — first item in the navbar, links to the dashboard */
.vsi-navbar-logo[b-otrq8bq1u8]
{
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.75rem;
    line-height: 0;
}

.vsi-navbar-logo img[b-otrq8bq1u8]
{
    height: 34px;
    width: auto;
    display: block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.vsi-navbar-logo:hover img[b-otrq8bq1u8],
.vsi-navbar-logo:focus-visible img[b-otrq8bq1u8]
{
    transform: scale(1.06);
    opacity: 0.9;
}

@media (max-width: 992px)
{
    .navbar[b-otrq8bq1u8]
    {
        width: 80%;
    }

    .navbar-dark .navbar-toggler-icon[b-otrq8bq1u8]
    {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu[b-otrq8bq1u8]
    {
        position: absolute;
        z-index: 1000;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item[b-otrq8bq1u8]
    {
        color: rgba(255, 255, 255, 0.5);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover[b-otrq8bq1u8]
    {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item.active[b-otrq8bq1u8],
    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:active[b-otrq8bq1u8]
    {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse[b-otrq8bq1u8]
    {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        background-color: #cc3333;
    }

    .nav-item[b-otrq8bq1u8]
    {
        padding-left: 10px;
    }
}