@import '_content/Nalplac/Nalplac.esawrcwv93.bundle.scp.css';
@import '_content/PIDPLUS_Components/PIDPLUS_Components.k144d9mxyc.bundle.scp.css';

/* /Components/Admin/Migration.razor.rz.scp.css */
.migration-page[b-0dtr7edevd] {
    --done: #1e8f4e;
    --partial: #e0a106;
    --todo: #c9ced6;
    --decide: #8a6fbf;
    --new: #2f7fd1;
    max-width: 1100px;
    padding: 0 .75rem 3rem;
}

/* ---------- header ---------- */

.mig-header[b-0dtr7edevd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.mig-sub[b-0dtr7edevd] {
    color: #6c757d;
    font-size: .82rem;
}

.mig-score[b-0dtr7edevd] {
    text-align: right;
    line-height: 1;
}

.mig-score-value[b-0dtr7edevd] {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--done);
}

    .mig-score-value span[b-0dtr7edevd] {
        font-size: 1.1rem;
        font-weight: 600;
    }

.mig-score-label[b-0dtr7edevd] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
}

/* ---------- progress bars ---------- */

.mig-bar[b-0dtr7edevd] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--todo);
}

.mig-bar-lg[b-0dtr7edevd] {
    height: 14px;
    border-radius: 7px;
    margin-bottom: 1.25rem;
}

.seg-done[b-0dtr7edevd] {
    background: var(--done);
}

.seg-partial[b-0dtr7edevd] {
    background: repeating-linear-gradient(45deg, var(--partial), var(--partial) 4px, #f3c34a 4px, #f3c34a 8px);
}

.seg-decide[b-0dtr7edevd] {
    background: var(--decide);
}

/* ---------- filters ---------- */

.mig-filters[b-0dtr7edevd] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mig-chip[b-0dtr7edevd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 999px;
    padding: .2rem .7rem .2rem .35rem;
    font-size: .8rem;
    color: #495057;
}

    .mig-chip:hover[b-0dtr7edevd] {
        border-color: #adb5bd;
    }

    .mig-chip.on[b-0dtr7edevd] {
        border-color: #212529;
        background: #f1f3f5;
        color: #212529;
        font-weight: 600;
    }

.chip-count[b-0dtr7edevd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .3rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
}

.chip-done .chip-count[b-0dtr7edevd] {
    background: var(--done);
}

.chip-partial .chip-count[b-0dtr7edevd] {
    background: var(--partial);
}

.chip-todo .chip-count[b-0dtr7edevd] {
    background: #7b8593;
}

.chip-decide .chip-count[b-0dtr7edevd] {
    background: var(--decide);
}

.chip-new .chip-count[b-0dtr7edevd] {
    background: var(--new);
}

.mig-search[b-0dtr7edevd] {
    width: 210px;
    margin-left: auto;
}

/* ---------- area ---------- */

.mig-area[b-0dtr7edevd] {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: .85rem 1rem 1rem;
    margin-bottom: 1.1rem;
    background: #fff;
}

.mig-area-head[b-0dtr7edevd] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mig-area-title[b-0dtr7edevd] {
    display: flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

    .mig-area-title i[b-0dtr7edevd] {
        color: #6c757d;
    }

.mig-area-count[b-0dtr7edevd] {
    font-size: .78rem;
    color: #6c757d;
}

.mig-area-head .mig-bar[b-0dtr7edevd] {
    flex: 1;
    min-width: 80px;
}

.mig-area-summary[b-0dtr7edevd] {
    font-size: .82rem;
    color: #6c757d;
    margin: .4rem 0 .6rem;
}

/* ---------- table ---------- */

.mig-table[b-0dtr7edevd] {
    width: 100%;
    border-collapse: collapse;
}

    .mig-table td[b-0dtr7edevd] {
        border-top: 1px solid #f1f3f5;
        padding: .45rem .4rem;
        vertical-align: top;
        font-size: .87rem;
    }

.c-old[b-0dtr7edevd] {
    width: 34%;
}

.c-arrow[b-0dtr7edevd] {
    width: 1.6rem;
    color: #ced4da;
    text-align: center;
}

.c-state[b-0dtr7edevd] {
    width: 6.5rem;
    text-align: right;
    white-space: nowrap;
}

.old-name[b-0dtr7edevd] {
    font-weight: 600;
    color: #212529;
}

.old-meta[b-0dtr7edevd] {
    font-size: .74rem;
    color: #adb5bd;
    display: flex;
    gap: .4rem;
}

.refs[b-0dtr7edevd] {
    color: #ced4da;
}

.new-name a[b-0dtr7edevd] {
    text-decoration: none;
}

    .new-name a:hover[b-0dtr7edevd] {
        text-decoration: underline;
    }

.new-none[b-0dtr7edevd] {
    color: #adb5bd;
    font-style: italic;
}

.app-badge[b-0dtr7edevd] {
    margin-left: .35rem;
    padding: .05rem .35rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.note[b-0dtr7edevd] {
    font-size: .76rem;
    color: #868e96;
    margin-top: .1rem;
}

/* ---------- state pills ---------- */

.pill[b-0dtr7edevd] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
}

.pill-done[b-0dtr7edevd] {
    background: var(--done);
}

.pill-partial[b-0dtr7edevd] {
    background: var(--partial);
}

.pill-todo[b-0dtr7edevd] {
    background: #fff;
    color: #7b8593;
    border: 1px solid #ced4da;
}

.pill-decide[b-0dtr7edevd] {
    background: var(--decide);
}

.pill-new[b-0dtr7edevd] {
    background: var(--new);
}

/* ---------- footer ---------- */

.mig-empty[b-0dtr7edevd] {
    color: #6c757d;
    padding: 2rem 0;
    text-align: center;
}

.mig-foot[b-0dtr7edevd] {
    font-size: .76rem;
    color: #adb5bd;
    margin-top: 1rem;
}

/* ---------- small screens ---------- */

@media (max-width: 700px) {
    .mig-area-head[b-0dtr7edevd] {
        flex-wrap: wrap;
    }

    .mig-table td[b-0dtr7edevd] {
        display: block;
        border-top: none;
        padding: .1rem .2rem;
    }

    .mig-table tr[b-0dtr7edevd] {
        display: block;
        border-top: 1px solid #f1f3f5;
        padding: .5rem 0;
    }

    .c-arrow[b-0dtr7edevd] {
        display: none !important;
    }

    .c-state[b-0dtr7edevd] {
        text-align: left;
        margin-top: .2rem;
    }

    .mig-search[b-0dtr7edevd] {
        width: 100%;
        margin-left: 0;
    }
}
/* /Components/Layout/ClientLayout.razor.rz.scp.css */
/* The client area's palette. Custom properties inherit past Blazor's scoped-CSS attributes, so every
   component of the client area can use these without repeating the values.

   The brand green is bright, which decides how it may be used: white on it reaches only ~2.4:1, so it
   is a *fill* with dark text on top, never a background for white text. Green *text* on white uses
   --pid-green-dark, which clears 4.6:1. Keep that split when adding anything. */
.client-page[b-n07whhrnbj] {
    --pid-green: #7eb935;
    --pid-green-dark: #55801f;
    --pid-green-deep: #3f6117;
    --pid-green-soft: #f1f8e7;
    --pid-on-green: #16240a;
    --pid-ink: #1f1f1f;
    --pid-muted: #6b6b6b;
    --pid-line: #dcdcdc;
    --pid-surface: #ffffff;
    --pid-canvas: #f4f4f4;
    --pid-tile: #ececec;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--pid-canvas);
    color: var(--pid-ink);
}

/*
    The header and the footer are lifted onto their own layer so that a page can paint a full-height
    background behind its content without painting over them.

    Unpositioned block elements paint *earlier* than any positioned one, so a page's own positioned layer
    - the green field on the home page, .home::before - would otherwise come out on top of the logo and the
    copyright line. Giving these two a z-index of 1 puts them back above it. They are opaque, so nothing
    else changes: no page can reach through them, and one that paints nothing behind them looks the same as
    it did.
*/
.client-header[b-n07whhrnbj],
.client-footer[b-n07whhrnbj] {
    position: relative;
    z-index: 1;
}

.client-header[b-n07whhrnbj] {
    background-color: var(--pid-surface);
    border-bottom: 3px solid var(--pid-green);
}

.client-header-inner[b-n07whhrnbj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

.client-logo[b-n07whhrnbj] {
    width: 170px;
    max-width: 45vw;
    height: auto;
}

/* The wordmark is a link to the start page. It carries no link styling of its own - no underline, no
   link colour - because the header is a brand mark and should not read as a sentence with a hyperlink in
   it. The colour comes from .client-wordmark below, which already picks the accessible green. */
/* No underline and no link colour, in every state. app.css paints every anchor #006bb7 and Bootstrap's
   reboot underlines them, and both would turn the brand mark into what looks like a hyperlink dropped in
   a sentence. The colour is written out rather than left to inherit so this holds on its own, without
   depending on the span inside it. */
.client-wordmark-link[b-n07whhrnbj],
.client-wordmark-link:link[b-n07whhrnbj],
.client-wordmark-link:visited[b-n07whhrnbj],
.client-wordmark-link:hover[b-n07whhrnbj],
.client-wordmark-link:active[b-n07whhrnbj],
.client-wordmark-link:focus[b-n07whhrnbj] {
    text-decoration: none;
    color: var(--pid-green-dark, #55801f);
}

/* Keyboard focus still has to be visible - it is the first thing Tab reaches on the page - but as an
   outline rather than an underline, so nothing about the wordmark changes shape. */
.client-wordmark-link:focus-visible[b-n07whhrnbj] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The logo links into the application (see ClientLayout.razor). inline-flex removes the descender gap an
   inline image leaves under itself, which otherwise shows up as a stray underline segment; the
   text-decoration reset is for the underline app.css puts on every anchor. */
.client-logo-link[b-n07whhrnbj] {
    display: inline-flex;
    text-decoration: none;
}

.client-logo-link:focus-visible[b-n07whhrnbj] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
}

/* The site's wordmark: bold "PID", lighter "plus". Darker green, because this is text on white. */
.client-wordmark[b-n07whhrnbj] {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--pid-green-dark);
    white-space: nowrap;
}

.client-wordmark-strong[b-n07whhrnbj] {
    font-weight: 700;
}

/*
    The one action in the header. It sits after the wordmark, which .client-header-inner already pushes to
    the far side with space-between - so on a phone the row is logo / wordmark / button and the button is
    under the thumb.

    Its label goes away below 30rem and the bell carries it alone; the aria-label is on the link either way,
    so nothing is lost to a screen reader when the words are.
*/
.client-header-action[b-n07whhrnbj],
.client-header-action:link[b-n07whhrnbj],
.client-header-action:visited[b-n07whhrnbj] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pid-green-dark);
    background: var(--pid-green-soft);
    border: 1px solid var(--pid-green);
    text-decoration: none;
}

.client-header-action:hover[b-n07whhrnbj],
.client-header-action:active[b-n07whhrnbj] {
    background: var(--pid-green);
    color: var(--pid-on-green);
    text-decoration: none;
}

.client-header-action:focus-visible[b-n07whhrnbj] {
    outline: 2px solid var(--pid-green-dark);
    outline-offset: 3px;
}

.client-header-action i[b-n07whhrnbj] { font-size: 1rem; }

@media (max-width: 30rem) {
    .client-header-action-text[b-n07whhrnbj] { display: none; }
    .client-header-action[b-n07whhrnbj] { padding: 0.45rem 0.6rem; }
}

.client-main[b-n07whhrnbj] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.client-footer[b-n07whhrnbj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 1.5rem 1rem;
    background-color: var(--pid-surface);
    border-top: 1px solid var(--pid-line);
}

.client-footer-brand[b-n07whhrnbj] {
    font-weight: 600;
    color: var(--pid-ink);
}

.client-footer-note[b-n07whhrnbj] {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pid-muted);
}

.client-footer-copyright[b-n07whhrnbj] {
    font-size: 0.75rem;
    color: var(--pid-muted);
}

/* app.css paints every anchor #006bb7 and reboot underlines it, which in a green footer reads as a stray
   hyperlink. It keeps the underline on hover, because it is a link in a row of plain text and needs to
   look like one when reached for. */
.client-footer-link[b-n07whhrnbj],
.client-footer-link:link[b-n07whhrnbj],
.client-footer-link:visited[b-n07whhrnbj] {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--pid-green-dark);
    text-decoration: none;
}

.client-footer-link:hover[b-n07whhrnbj],
.client-footer-link:active[b-n07whhrnbj] {
    color: var(--pid-green-deep);
    text-decoration: underline;
}

.client-footer-link:focus-visible[b-n07whhrnbj] {
    outline: 2px solid var(--pid-green-dark);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .client-main[b-n07whhrnbj] {
        padding: 2.5rem 1.5rem 4rem;
    }
}

/* The framework's unhandled-error bar. It must be styled here and not only in MainLayout.razor.css:
   scoped CSS only matches the component that rendered the element, so the copy of this div in
   ClientLayout gets none of MainLayout's rules - including "display: none", which is what keeps it out
   of sight until Blazor decides to show it. Without this block it sits on the client page permanently. */
#blazor-error-ui[b-n07whhrnbj] {
    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-n07whhrnbj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-0qyn52yt6a] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-0qyn52yt6a] {
    flex: 1;
}

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

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

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

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

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

@media (max-width: 640.98px) {
    .top-row[b-0qyn52yt6a] {
        /*justify-content: space-between;*/
    }

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

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

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

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

    .top-row[b-0qyn52yt6a], article[b-0qyn52yt6a] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 800px) {

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

#blazor-error-ui[b-0qyn52yt6a] {
    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-0qyn52yt6a] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-q1wyzc8vpa] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: #222;
    position: absolute;
    top: 1.4rem;
    right: 1rem;
    border: 1px solid #bbb;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34,34,34,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem #fff;
    transition: background 0.2s, border-color 0.2s;
}

    .navbar-toggler:hover[b-q1wyzc8vpa],
    .navbar-toggler:focus[b-q1wyzc8vpa] {
        background-color: #f3f3f3;
        border-color: #888;
    }

    .navbar-toggler:checked[b-q1wyzc8vpa] {
        background-color: #e9ecef;
    }

.top-row[b-q1wyzc8vpa] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-q1wyzc8vpa] {
    font-size: 1.1rem;
}

.bi[b-q1wyzc8vpa] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-q1wyzc8vpa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-q1wyzc8vpa] {
    font-size: 0.9rem;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
}

    .nav-item:first-of-type[b-q1wyzc8vpa] {
        padding-top: 10px;
    }

    .nav-item:last-of-type[b-q1wyzc8vpa] {
        padding-bottom: 10px;
    }

    .nav-item[b-q1wyzc8vpa]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-q1wyzc8vpa]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-q1wyzc8vpa]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-q1wyzc8vpa] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-q1wyzc8vpa] {
    display: block;
}

/* Główne menu boczne */
.sidebar[b-q1wyzc8vpa] {
    position: fixed;
    top: 0;
    left: -100%;
    width: 250px;
    height: 100vh;
    background: whitesmoke;
    transition: left 0.3s ease;
    padding-top: 60px;
    overflow-y: auto;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 2000; /* Sidebar zawsze na wierzchu */
}

    .sidebar.open[b-q1wyzc8vpa] {
        left: 0;
    }

/* Przycisk zamykający menu */
.close-btn[b-q1wyzc8vpa] {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #2e7d32;
    cursor: pointer;
}

/* Tło pod menu */
.sidebar-overlay[b-q1wyzc8vpa] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1999;
}

    .sidebar-overlay.active[b-q1wyzc8vpa] {
        opacity: 1;
        visibility: visible;
    }

/* Styl dla nawigacji */
nav ul[b-q1wyzc8vpa] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    nav ul li[b-q1wyzc8vpa] {
        margin: 5px 0;
    }

        nav ul li button[b-q1wyzc8vpa] {
            width: 100%;
            background: none;
            border: none;
            color: #2e7d32;
            font-size: 18px;
            text-align: left;
            padding: 10px 20px;
            cursor: pointer;
        }

            nav ul li button:hover[b-q1wyzc8vpa] {
                background: #c8e6c9;
            }

/* Styl dla submenu */
.submenu[b-q1wyzc8vpa] {
    list-style: none;
    padding-left: 20px;
    display: none;
}

    .submenu li .nav-item[b-q1wyzc8vpa] {
        display: block;
        color: #1b5e20;
        text-decoration: none;
        padding: 8px 10px;
    }

        .submenu li .nav-item:hover[b-q1wyzc8vpa] {
            background: #a5d6a7;
        }

/* Podświetlenie aktywnego linku */
.nav-item.active[b-q1wyzc8vpa] {
    font-weight: bold;
    color: #ffffff;
    background: #2e7d32;
}

/* Przycisk otwierający menu */
.menu-btn[b-q1wyzc8vpa] {
    position: fixed;
    top: 10px;
    left: 15px;
    background: #2e7d32;
    color: white;
    font-size: 1.3rem;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    cursor: pointer;
    z-index: 2001;
    border-radius: 5px;
}

    .menu-btn:hover[b-q1wyzc8vpa] {
        background: #1b5e20;
    }

/* Responsywność */
@media (max-width: 768px) {
    .sidebar[b-q1wyzc8vpa] {
        width: 100%;
    }
}


a[b-q1wyzc8vpa] {
    display: block;
    color: #2e7d32;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 18px;
    transition: background 0.2s ease, color 0.2s ease;
}

    /* Efekt hover */
    a:hover[b-q1wyzc8vpa] {
        background: #c8e6c9;
    }

    /* Styl dla aktywnego linku */
    a.active[b-q1wyzc8vpa] {
        font-weight: bold;
        background: #2e7d32;
        color: white;
    }

.hover-none:hover[b-q1wyzc8vpa] {
    background: none !important;
    color: #2e7d32 !important;
}

.accordion-button[b-q1wyzc8vpa] {
    --bs-accordion-btn-bg: rgba(0, 0, 0, 0.2) !important;
    --bs-accordion-btn-color: white !important;
    font-size: medium;
}
    .accordion-button:not(.collapsed)[b-q1wyzc8vpa] {
        background-color: rgba(0,0,0, 0.3);
        color: white !important;
    }

    .accordion-item[b-q1wyzc8vpa] {
        background-color: transparent;
    }


@media (min-width: 800px) {
    .navbar-toggler[b-q1wyzc8vpa] {
        display: none;
    }

    .nav-scrollable[b-q1wyzc8vpa] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);*/
        overflow-y: auto;
    }
}
/* /Components/Pages/ClientPortal/Conversation.razor.rz.scp.css */
/*
    The conversation page. A thread, so the two sides have to be told apart at a glance and without colour
    alone doing the work: ours sit left on a white card, theirs sit right on the soft green, and each
    carries the name of who wrote it.

    Palette from .client-page in ClientLayout.razor.css; every var() carries a fallback.
*/
.talk[b-b8mqhlkws6] {
    max-width: 44rem;
    margin: 0 auto;
}

.talk-loading[b-b8mqhlkws6] {
    color: var(--pid-muted, #6b6b6b);
}

.talk-title[b-b8mqhlkws6] {
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--pid-ink, #1f1f1f);
}

.talk-lead[b-b8mqhlkws6] {
    color: var(--pid-muted, #6b6b6b);
    margin: 0 0 1.75rem;
}

.talk-dot[b-b8mqhlkws6] { margin: 0 0.35rem; }

/* What they first sent. The top of the thread rather than a message in it, so it is set apart. */
.talk-original[b-b8mqhlkws6] {
    padding: 1rem 1.1rem;
    background: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-left: 4px solid var(--pid-green, #7eb935);
}

.talk-problems[b-b8mqhlkws6] {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pid-green-dark, #55801f);
}

.talk-original-text[b-b8mqhlkws6] {
    margin: 0;
    line-height: 1.6;
    color: var(--pid-ink, #1f1f1f);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.talk-thread[b-b8mqhlkws6] {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.talk-message[b-b8mqhlkws6] {
    max-width: 85%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--pid-line, #dcdcdc);
}

/* Ours on the left, plain. Theirs on the right, tinted - the side of the page is the first signal, the
   label is the one that still works when the two are read out in order. */
.talk-theirs[b-b8mqhlkws6] {
    align-self: flex-start;
    background: var(--pid-surface, #ffffff);
}

.talk-mine[b-b8mqhlkws6] {
    align-self: flex-end;
    background: var(--pid-green-soft, #f1f8e7);
    border-color: var(--pid-green, #7eb935);
}

.talk-who[b-b8mqhlkws6] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    margin-bottom: 0.3rem;
}

.talk-body[b-b8mqhlkws6] {
    margin: 0;
    line-height: 1.6;
    color: var(--pid-ink, #1f1f1f);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.talk-when[b-b8mqhlkws6] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--pid-muted, #6b6b6b);
}

.talk-compose[b-b8mqhlkws6] {
    margin-top: 1.75rem;
    padding: 1.1rem;
    background: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-line, #dcdcdc);
}

.talk-label[b-b8mqhlkws6] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    margin-bottom: 0.4rem;
}

.talk-input[b-b8mqhlkws6] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font: inherit;
    color: var(--pid-ink, #1f1f1f);
    border: 1px solid var(--pid-line, #dcdcdc);
    background: var(--pid-surface, #ffffff);
    resize: vertical;
}

.talk-input:focus-visible[b-b8mqhlkws6] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 1px;
}

/* Brand green is a fill with dark text on it, never a background for white text - it reaches ~2.4:1. */
.talk-send[b-b8mqhlkws6] {
    margin-top: 0.75rem;
    padding: 0.55rem 1.35rem;
    font-weight: 700;
    color: var(--pid-on-green, #16240a);
    background: var(--pid-green, #7eb935);
    border: 2px solid var(--pid-green, #7eb935);
    cursor: pointer;
}

.talk-send:hover:enabled[b-b8mqhlkws6] { background: #96d34a; border-color: #96d34a; }
.talk-send:disabled[b-b8mqhlkws6] { cursor: default; opacity: 0.7; }

.talk-send:focus-visible[b-b8mqhlkws6] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
}

.talk-message-line[b-b8mqhlkws6] {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

.talk-ok[b-b8mqhlkws6] { color: var(--pid-green-deep, #3f6117); }
.talk-error[b-b8mqhlkws6] { color: #b3261e; }

/* A finished conversation. Muted, because it is a statement rather than something to act on. */
.talk-closed[b-b8mqhlkws6] {
    margin-top: 1.75rem;
    padding: 1rem 1.1rem;
    background: var(--pid-tile, #ececec);
    color: var(--pid-muted, #6b6b6b);
    line-height: 1.6;
}
/* /Components/Pages/ClientPortal/MyRequests.razor.rz.scp.css */
/*
    "Mijn meldingen". A list of cards on the client area's canvas, held to a reading measure - the longest
    thing on a row is the customer's own sentence, and a full-width line of it is hard to come back to.

    Palette from .client-page in ClientLayout.razor.css; every var() carries a fallback.
*/
.mine[b-8e7kkqpppo] {
    max-width: 46rem;
    margin: 0 auto;
}

.mine-title[b-8e7kkqpppo] {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: var(--pid-ink, #1f1f1f);
}

.mine-lead[b-8e7kkqpppo] {
    color: var(--pid-muted, #6b6b6b);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.mine-empty[b-8e7kkqpppo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.35rem;
    background: var(--pid-surface, #ffffff);
    border: 1px dashed var(--pid-line, #dcdcdc);
    color: var(--pid-muted, #6b6b6b);
}

.mine-empty i[b-8e7kkqpppo] {
    font-size: 1.4rem;
    color: var(--pid-green-dark, #55801f);
}

.mine-list[b-8e7kkqpppo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mine-item[b-8e7kkqpppo] {
    padding: 1.25rem 1.35rem 1.35rem;
    background: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-left: 4px solid var(--pid-green, #7eb935);
}

.mine-item-head[b-8e7kkqpppo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.mine-window[b-8e7kkqpppo] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pid-ink, #1f1f1f);
}

/*
    The status chip. Brand green is a fill with dark text on it, never a background for white text - it
    reaches about 2.4:1 - so every one of these puts dark ink on a light ground.
*/
.mine-status[b-8e7kkqpppo] {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

.mine-status-wachten[b-8e7kkqpppo] {
    background: var(--pid-tile, #ececec);
    color: var(--pid-ink, #1f1f1f);
}

.mine-status-bezig[b-8e7kkqpppo] {
    background: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
}

.mine-status-klaar[b-8e7kkqpppo] {
    background: var(--pid-green-soft, #f1f8e7);
    color: var(--pid-green-deep, #3f6117);
}

.mine-meta[b-8e7kkqpppo] {
    font-size: 0.85rem;
    color: var(--pid-muted, #6b6b6b);
}

.mine-dot[b-8e7kkqpppo] { margin: 0 0.35rem; }

/* The ticked problems arrive as codes - "[GLASBREUK] [SLEEPT]" - so they are set apart from the sentence
   below them rather than run into it. */
.mine-problems[b-8e7kkqpppo] {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pid-green-dark, #55801f);
}

.mine-comment[b-8e7kkqpppo] {
    margin: 0.5rem 0 0;
    line-height: 1.6;
    color: var(--pid-ink, #1f1f1f);
    /* Their own words, and somebody else's line breaks: a long unbroken string must not push the card
       wider than the column. */
    overflow-wrap: anywhere;
}


/* The row the dossier link sits on. It exists to be a block: the link and the photo button above it are
   both inline-flex and would otherwise share a line with nothing between them. */
.mine-link-row[b-8e7kkqpppo] {
    margin-top: 1rem;
}

/* app.css paints every anchor #006bb7 and reboot underlines it; both are wrong inside a green card. */
.mine-link[b-8e7kkqpppo],
.mine-link:link[b-8e7kkqpppo],
.mine-link:visited[b-8e7kkqpppo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pid-green-dark, #55801f);
    text-decoration: none;
}

.mine-link:hover[b-8e7kkqpppo],
.mine-link:active[b-8e7kkqpppo] {
    color: var(--pid-green-deep, #3f6117);
    text-decoration: underline;
}

.mine-link:focus-visible[b-8e7kkqpppo] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
}

/* Our reply. Set apart from their own message above it - a soft green panel rather than more running
   text - because it is the one thing in the card the reader did not write. */
.mine-answer[b-8e7kkqpppo] {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: var(--pid-green-soft, #f1f8e7);
    border-left: 3px solid var(--pid-green, #7eb935);
}

.mine-answer-label[b-8e7kkqpppo] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    margin-bottom: 0.3rem;
}

.mine-answer-text[b-8e7kkqpppo] {
    margin: 0;
    line-height: 1.6;
    color: var(--pid-ink, #1f1f1f);
    /* Somebody else's line breaks again - and this one is typed in a textarea, so it really can be one
       long unbroken string. */
    overflow-wrap: anywhere;
}

/* The line under an ending that carries no answer. Quieter than their own message and than ours, because
   it is not a reply - it explains where the reply went. */
.mine-note[b-8e7kkqpppo] {
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--pid-muted, #6b6b6b);
    font-style: italic;
}
/* /Components/Pages/ClientPortal/Privacy.razor.rz.scp.css */
/*
    A page of prose, which the client area otherwise has none of. Held to a reading measure and set on the
    white surface, so it reads like a document rather than like another panel of the application.

    Palette from .client-page in ClientLayout.razor.css; every var() carries a fallback.
*/
.legal[b-ctgzd0ma0n] {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2rem 1.75rem 2.5rem;
    background-color: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-line, #dcdcdc);
    color: var(--pid-ink, #1f1f1f);
    line-height: 1.7;
}

.legal-title[b-ctgzd0ma0n] {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--pid-ink, #1f1f1f);
}

.legal-lead[b-ctgzd0ma0n] {
    font-size: 1.05rem;
    margin: 0 0 2rem;
    padding-left: 1rem;
    border-left: 4px solid var(--pid-green, #7eb935);
}

.legal h2[b-ctgzd0ma0n] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--pid-green-dark, #55801f);
    margin: 2rem 0 0.6rem;
}

.legal p[b-ctgzd0ma0n] {
    margin: 0 0 1rem;
}

.legal ul[b-ctgzd0ma0n] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.legal li[b-ctgzd0ma0n] {
    margin-bottom: 0.5rem;
}

/* app.css paints every anchor #006bb7, which is the one blue on an otherwise green page. These are real
   links in running text, so they keep the underline - only the colour is brought back into the palette. */
.legal a[b-ctgzd0ma0n],
.legal a:link[b-ctgzd0ma0n],
.legal a:visited[b-ctgzd0ma0n] {
    color: var(--pid-green-dark, #55801f);
}

.legal a:hover[b-ctgzd0ma0n],
.legal a:active[b-ctgzd0ma0n] {
    color: var(--pid-green-deep, #3f6117);
}

@media (max-width: 40rem) {
    .legal[b-ctgzd0ma0n] { padding: 1.5rem 1.25rem 2rem; }
}

/* Hostnames read as data rather than as prose, and they must not be broken across a line. */
.legal-host[b-ctgzd0ma0n] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    white-space: nowrap;
}
/* /Components/Pages/ClientPortal/WindowNotFound.razor.rz.scp.css */
.not-found-card[b-dop77dz98h] {
    background-color: var(--pid-surface, #fff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-top: 3px solid var(--pid-green, #7eb935);
    padding: 3rem 1.5rem;
    text-align: center;
}

.not-found-icon[b-dop77dz98h] {
    font-size: 3.5rem;
    color: var(--pid-green-dark, #55801f);
}

.not-found-title[b-dop77dz98h] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.25rem 0;
}

.not-found-text[b-dop77dz98h] {
    max-width: 46ch;
    margin: 0 auto 0.85rem;
    color: #4a4a4a;
    line-height: 1.65;
}
/* /Components/Pages/ClientPortal/WindowPassport.razor.rz.scp.css */
/* The window's identity, as the green band the PIDplus site opens with. */
.passport-hero[b-y4l3d2mqk5] {
    background-color: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1rem;
}

.passport-eyebrow[b-y4l3d2mqk5] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(22, 36, 10, 0.7);
}

.passport-name[b-y4l3d2mqk5] {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0.35rem 0 1rem;
    word-break: break-word;
}

.passport-project[b-y4l3d2mqk5] {
    margin: 0;
    font-size: 1.05rem;
    word-break: break-word;
}

.passport-project-label[b-y4l3d2mqk5] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(22, 36, 10, 0.7);
}

.passport-status-row[b-y4l3d2mqk5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.passport-status[b-y4l3d2mqk5] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: #ffffff;
}

/* 0 preparing, 1 in production, 2 ready to leave, 3 delivered or placed,
   4 detailed and waiting for the control, 5 controlled and waiting for the client, 6 accepted.
   Steps 4 and 5 are the ones where something is expected of somebody, so they carry more colour. */
.status-0[b-y4l3d2mqk5] { color: #4a4a4a; }
.status-1[b-y4l3d2mqk5] { color: #7a5b00; }
.status-2[b-y4l3d2mqk5] { color: #084298; }
.status-3[b-y4l3d2mqk5] { color: #084298; }
.status-4[b-y4l3d2mqk5] { color: #432874; }
.status-5[b-y4l3d2mqk5] { background-color: #f6a623; color: #3d2600; }
.status-6[b-y4l3d2mqk5] { background-color: #55801f; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.status-refused[b-y4l3d2mqk5] { background-color: #b02a2a; color: #ffffff; }

.passport-account[b-y4l3d2mqk5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    background-color: var(--pid-surface, #fff);
    border-left: 3px solid var(--pid-green, #7eb935);
    font-size: 0.9rem;
    color: var(--pid-muted, #6b6b6b);
}

.passport-account i[b-y4l3d2mqk5] {
    color: var(--pid-green-dark, #55801f);
}

.passport-intro[b-y4l3d2mqk5] {
    max-width: 62ch;
    margin: 0 0 1.75rem;
    color: #4a4a4a;
    line-height: 1.65;
}

/* The four sections, as the site's tile row: square, uppercase green titles, a rule under each. */
.passport-sections[b-y4l3d2mqk5] {
    margin-bottom: 2rem;
    border-radius: 0;
}

.passport-sections[b-y4l3d2mqk5]  .accordion-item {
    border: none;
    border-radius: 0;
    margin-bottom: 0.75rem;
    background-color: transparent;
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
    padding: 1rem 1.25rem;
    background-color: var(--pid-tile, #ececec);
    border-radius: 0;
    box-shadow: none;
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button:not(.collapsed) {
    background-color: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: -2px;
}

.passport-sections[b-y4l3d2mqk5]  .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    color: var(--pid-green-dark, #55801f);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button:not(.collapsed) .section-icon {
    color: var(--pid-on-green, #16240a);
}

.passport-sections[b-y4l3d2mqk5]  .section-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button:not(.collapsed) .section-title {
    color: var(--pid-on-green, #16240a);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button::after {
    filter: grayscale(1) brightness(0.4);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-button:not(.collapsed)::after {
    filter: brightness(0);
}

.passport-sections[b-y4l3d2mqk5]  .accordion-body {
    padding: 1.25rem;
    background-color: var(--pid-surface, #fff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-top: none;
}

/* One downloadable document. Square, quiet, with the green mark on the right. */
.passport-document[b-y4l3d2mqk5],
.passport-sections[b-y4l3d2mqk5]  .passport-document {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--pid-surface, #fff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-left: 3px solid var(--pid-green, #7eb935);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.passport-document:hover[b-y4l3d2mqk5],
.passport-sections[b-y4l3d2mqk5]  .passport-document:hover {
    background-color: var(--pid-green-soft, #f1f8e7);
}

.passport-document i:last-child[b-y4l3d2mqk5],
.passport-sections[b-y4l3d2mqk5]  .passport-document i:last-child {
    color: var(--pid-green-dark, #55801f);
    font-size: 1.15rem;
}

.passport-document-name[b-y4l3d2mqk5],
.passport-sections[b-y4l3d2mqk5]  .passport-document-name {
    word-break: break-word;
}

.passport-video[b-y4l3d2mqk5] {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 1rem;
    background-color: #000000;
    overflow: hidden;
}

.passport-video iframe[b-y4l3d2mqk5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The site's "READ MORE >" link, in the same green. */
.passport-professional[b-y4l3d2mqk5] {
    text-align: center;
    padding-top: 0.5rem;
}

.passport-professional a[b-y4l3d2mqk5] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    text-decoration: none;
}

.passport-professional a:hover[b-y4l3d2mqk5] {
    color: var(--pid-green-dark, #55801f);
    text-decoration: underline;
}

@media (min-width: 768px) {
    .passport-hero[b-y4l3d2mqk5] {
        padding: 2.5rem 2.25rem;
    }

    .passport-name[b-y4l3d2mqk5] {
        font-size: 3rem;
    }
}
/* /Components/Pages/CostSummaries/ByGeneralProject.razor.rz.scp.css */
.cost-summaries-gp .table[b-2jh8anvew0] {
    font-size: 0.95rem;
}

/* Amounts stay readable and aligned when they change */
.cost-summaries-gp .table td.text-end[b-2jh8anvew0],
.cost-summaries-gp .table th.text-end[b-2jh8anvew0] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cost-summaries-gp .table thead th[b-2jh8anvew0] {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

.cost-summaries-gp .table tfoot td[b-2jh8anvew0] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cost-summaries-gp .table-responsive[b-2jh8anvew0] {
    max-height: max(320px, calc(100vh - 340px));
}
/* /Components/Pages/CostSummaries/CostSummaryTypes.razor.rz.scp.css */
.cost-summary-types .table[b-9ez4h25b3b] {
    font-size: 0.95rem;
}

.cost-summary-types .table thead th[b-9ez4h25b3b] {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

.cost-summary-types .table-responsive[b-9ez4h25b3b] {
    max-height: max(320px, calc(100vh - 340px));
}

/* The remove button sits inside the labour cost type badge */
.cost-summary-types .badge .btn-link[b-9ez4h25b3b] {
    text-decoration: none;
    vertical-align: baseline;
}
/* /Components/Pages/GP_Phase/Edit.razor.rz.scp.css */
.container[b-bos3h6q86j] {
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title[b-bos3h6q86j] {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.form-group[b-bos3h6q86j] {
    margin-bottom: 1.5rem;
}

.form-label[b-bos3h6q86j] {
    font-weight: 500;
    margin-bottom: 0px !important;
    display: block;
    color: #555;
}

.bg-LightGreen[b-bos3h6q86j] {
    background-color: darkseagreen !important;
}


.form-control[b-bos3h6q86j] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    width: 100%;
}

.btn[b-bos3h6q86j] {
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.btn-primary[b-bos3h6q86j] {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn-secondary[b-bos3h6q86j] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn:hover[b-bos3h6q86j] {
    opacity: 0.9;
}

.editable[b-bos3h6q86j] {
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    border: 1px dashed transparent;
}

    .editable:hover[b-bos3h6q86j] {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

.card[b-bos3h6q86j] {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header[b-bos3h6q86j] {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #444;
}

.field[b-bos3h6q86j] {
    /* margin-bottom: 1.25rem; */
    border-bottom: solid 1px;
}

.btn-100[b-bos3h6q86j] {
    width: 100%;
}

.field-value[b-bos3h6q86j] {
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

@media (min-width: 2300px) {
    .layout-xl[b-bos3h6q86j] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }

    .layout-left[b-bos3h6q86j] {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .layout-right[b-bos3h6q86j] {
        height: 100%;
    }

        .layout-right .card[b-bos3h6q86j] {
            height: 100%;
        }
}

.cell-clickable[b-bos3h6q86j] {
    cursor: pointer;
}

    .cell-clickable:hover[b-bos3h6q86j] {
        opacity: 0.8;
        outline: 2px solid #0d6efd;
        outline-offset: -2px;
    }

.modal-backdrop-custom[b-bos3h6q86j] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal-custom[b-bos3h6q86j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    min-width: 400px;
    max-width: 90vw;
}

.modal-custom-header[b-bos3h6q86j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

    .modal-custom-header h5[b-bos3h6q86j] {
        margin: 0;
    }

.modal-custom-body[b-bos3h6q86j] {
    padding: 1.25rem;
}

.modal-custom-footer[b-bos3h6q86j] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #dee2e6;
    flex-wrap: wrap;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*
    Two moving pictures carry this page: the production line, and the scan.

    Both run on one shared 12-second cycle so they read as the same story told twice - the window is made,
    then the code it carries is read. Per-element timing comes from a --i (stage) or --r (row) custom
    property multiplied into animation-delay, which is what lets seven stages share one keyframe set.

    Each picture ends in a held state rather than looping straight back: the line stands finished for a
    quarter of the cycle, the passport stays filled for two thirds of it. A drawing that never arrives
    anywhere gives the eye no permission to leave.

    Palette from .client-page in ClientLayout.razor.css; custom properties inherit past Blazor's scoped
    CSS attributes, and every var() carries a fallback. Brand green is a fill, never text on white - it
    reaches about 2.4:1 there. Green words use --pid-green-dark.

    One colour is deliberately not in that palette: amber. It is the only warm thing on the page and it
    means exactly one thing - the code. It rings the sticker riding the line and edges the one being read
    in the scan band, which are the same object drawn in two pictures. Do not spend it on anything else;
    the moment it marks a second idea it stops marking the first.

    Everything stops under prefers-reduced-motion at the bottom, left in its finished state.
*/

/* ---------- the green field behind the page ---------- */

/*
    The old PID's signature: everything left of the centred container is solid #437532
    (`.slide .container:after { background: #437532; width: 100%; left: -100% }`). There it covered the
    hero alone; here it covers the whole page.

    It is a *fixed* box filling the left half of the viewport, and everything about that is deliberate:

      - fixed, so its height is the screen and not the element. Two earlier versions bounded it to .home
        and both left a strip of canvas above the footer, because .home is not as tall as the area it sits
        in: .client-main pads it by 1.5-2.5rem at the top and 3-4rem at the bottom, and being flex: 1 1
        auto it also swallows the leftover height whenever the page is shorter than the screen. Bleeding
        100vh past .home to cover those did not hold either. A viewport-sized box has no such gaps to
        chase, and a flat colour that does not scroll is indistinguishable from one that does.

      - `right: 50%` on a fixed box is measured against the viewport itself, excluding the scrollbar, so
        the seam lands on the true visual centre. This is why no 50vw arithmetic appears here any more:
        50vw counts the scrollbar and would put the seam a few pixels off.

      - z-index: 0 on .home, which does nothing visible and cannot be removed. A negative-z-index box is
        painted before the in-flow block backgrounds of the *stacking context it belongs to*, and without
        this line that context is the root - so the field would be painted before .client-page's own
        background and buried under it. Making .home a stacking context puts the field above that
        background and still below everything in the column.

      - the header and the footer carry z-index: 1 (see ClientLayout.razor.css). Without it a positioned
        field paints over both of them, because unpositioned blocks paint earlier than positioned ones.
        With it, the field runs edge to edge and they sit on top of the ends of it.

    It only works while the column is opaque all the way down, which is why every band in it carries a
    background and why they are flush against each other: a transparent gap would let the field cut a
    green bar across the middle of the page, and dark ink on #437532 is unreadable.

    Below about 900px there are no gutters and none of this is visible - the old page behaved the same
    way, and it is why the colour is decoration here and never carries meaning.
*/
.home[b-jn1vhx2ui9] {
    position: relative;
    z-index: 0;
}

.home[b-jn1vhx2ui9]::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background: #437532;
    z-index: -1;
    pointer-events: none;
}

/* ---------- the band the line lives in ---------- */

/*
    The line is the first thing on the page and the reason to be here, so it gets the whole opening band
    and nothing competes with it: one line of heading, then the drawing, then the caption. Everything
    that used to sit above - the dark hero, the lead paragraph, the two buttons, the eyebrow - was delay.

    The band is white on the page's grey, not grey on grey. It used to be --pid-canvas, which is exactly
    the colour .client-page paints behind it, so there was no band at all - and the resting tiles
    (--pid-tile, #ececec) sat on #f4f4f4 at almost no contrast. A white sheet gives the drawing somewhere
    to be and gives the unlit stations an edge.

    The negative top margin pulls it under the header's green rule, so the sheet starts where the brand
    ends. The faint grid is a drawing sheet, and the only texture on the page.
*/
.home-flowband[b-jn1vhx2ui9] {
    margin: -1.5rem -1.25rem 0;
    padding: 2.75rem 1.75rem 2.8rem;
    background-color: var(--pid-surface, #ffffff);
    background-image:
        repeating-linear-gradient(0deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px);
    text-align: center;
}

/* The same sheet, continued. No top padding and no top border, so stacked under the band above it the
   two are one surface and the split is invisible; the 1900px block gives it its own padding when it
   stops being underneath and moves beside the scan instead. */
.home-pitchband[b-jn1vhx2ui9] {
    margin: 0 -1.25rem;
    padding: 0 1.75rem 3rem;
    background-color: var(--pid-surface, #ffffff);
    background-image:
        repeating-linear-gradient(0deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px);
    border-bottom: 1px solid var(--pid-line, #dcdcdc);
}

/* A sentence, not a headline: it used to be three words and is now a full line of prose, so it is set a
   size down from what it was and held to a measure that breaks it into two or three balanced lines
   instead of one very wide one. */
.home-flow-title[b-jn1vhx2ui9] {
    max-width: 36rem;
    margin: 0 auto 3rem;
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pid-ink, #1f1f1f);
    text-wrap: balance;
}


/* ---------- buttons ---------- */

.home-button[b-jn1vhx2ui9] {
    display: inline-block;
    padding: 0.75rem 1.7rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.home-button:hover[b-jn1vhx2ui9] { transform: translateY(-2px); }

.home-button-primary[b-jn1vhx2ui9] {
    background: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
    border-color: var(--pid-green, #7eb935);
}

.home-button-primary:hover[b-jn1vhx2ui9],
.home-button-primary:focus-visible[b-jn1vhx2ui9] { background: #96d34a; border-color: #96d34a; }

.home-button-ghost[b-jn1vhx2ui9] {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}

.home-button-ghost:hover[b-jn1vhx2ui9],
.home-button-ghost:focus-visible[b-jn1vhx2ui9] { background: rgba(255, 255, 255, 0.12); }

.home-button:focus-visible[b-jn1vhx2ui9] { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---------- sections ---------- */

/* Bleeds to the column edge and carries a background like every other band, because the green field
   behind the page shows through anything transparent - see .home above. */
.home-section[b-jn1vhx2ui9] {
    margin: 0 -1.25rem;
    padding: 3rem 1.75rem;
    background-color: var(--pid-canvas, #f4f4f4);
}

.home-label[b-jn1vhx2ui9] {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
}

.home-label-onDark[b-jn1vhx2ui9] { color: #cfe8a6; }

.home-section-title[b-jn1vhx2ui9] {
    font-size: clamp(1.4rem, 3.6vw, 2rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--pid-ink, #1f1f1f);
    margin: 0.6rem 0 0.75rem;
    text-wrap: balance;
}

.home-section-lead[b-jn1vhx2ui9] {
    color: var(--pid-muted, #6b6b6b);
    max-width: 38rem;
    margin: 0 0 2.5rem;
    line-height: 1.6;
}

/* ============================================================
   THE PRODUCTION LINE
   ============================================================ */

/*
    One window crosses the line every 12 seconds, and it *steps*: it sits at a station while that station
    works on it, then indexes forward. That is the whole difference between this drawing and a progress
    bar - the earlier version slid a dot across at constant speed past seven lamps, which is not what a
    line looks like from the floor.

    What travels is the sticker, not the window: the code is on the glass from the start (see the comment
    on .flow-marker). The seven stations are the seven steps ClientPortalRepository.DescribeStatus
    reports, in its order - change that ladder and this drawing has to change with it.

    The timing is one clock shared by every moving part, so it has to be read as one table:

        station i is reached at   i * 10%      (0%, 10%, 20% ... 60%)
        a move between stations takes 3%, the dwell at a station 7%
        60% - 86%   the finished beat: the whole line green, the sticker at rest, nothing moving
        86% - 100%  it clears, and the next window enters

    Seven stations across seven equal columns put station centres at (i + 0.5)/7 of the row. The rail is
    inset to 7% either side so that its own 0% and 100% land on the first and last of those centres,
    which is why every keyframe below can talk in sixths.

    Per-station timing is animation-delay: calc(var(--i) * 1.2s) - 1.2s being 10% of 12s. That single
    stagger drives the tile, its label and its ripple, so they cannot drift apart.

    ease-in-out is set on the elements, so it applies between every pair of keyframes: each 3% move
    accelerates and settles instead of jerking. linear here reads as machinery with no mass.
*/

/*
    A station lights when the window reaches it and stays lit past the arrival of the last one, so that
    around 60%-74% the whole line is green at once - the finished beat. They then go dark in the order
    they lit, which is the previous window clearing as the next one enters.
*/
@keyframes flow-dot-on-b-jn1vhx2ui9 {
    0%        { background: var(--pid-tile, #ececec); color: var(--pid-muted, #6b6b6b); transform: scale(1); }
    1%        { background: var(--pid-green, #7eb935); color: var(--pid-on-green, #16240a); transform: scale(1.14); }
    6%        { transform: scale(1); }
    74%       { background: var(--pid-green, #7eb935); color: var(--pid-on-green, #16240a); transform: scale(1); }
    82%, 100% { background: var(--pid-tile, #ececec); color: var(--pid-muted, #6b6b6b); transform: scale(1); }
}


@keyframes flow-name-on-b-jn1vhx2ui9 {
    0%        { color: var(--pid-muted, #6b6b6b); font-weight: 500; }
    3%        { color: var(--pid-green-deep, #3f6117); font-weight: 700; }
    74%       { color: var(--pid-green-deep, #3f6117); font-weight: 700; }
    82%, 100% { color: var(--pid-muted, #6b6b6b); font-weight: 500; }
}

/* The ripple a station gives off as the window lands on it. */
@keyframes flow-ring-b-jn1vhx2ui9 {
    0%        { opacity: 0; transform: scale(0.75); }
    1%        { opacity: 0.6; transform: scale(0.9); }
    16%, 100% { opacity: 0; transform: scale(2.2); }
}

/* The belt filling in behind the window. Same plateaus as the travel, or the fill would keep running
   under a window that is standing still. */
@keyframes flow-fill-b-jn1vhx2ui9 {
    0%, 7%   { transform: scaleX(0); opacity: 1; }
    10%, 17% { transform: scaleX(0.16667); }
    20%, 27% { transform: scaleX(0.33333); }
    30%, 37% { transform: scaleX(0.5); }
    40%, 47% { transform: scaleX(0.66667); }
    50%, 57% { transform: scaleX(0.83333); }
    60%, 86% { transform: scaleX(1); opacity: 1; }
    92%      { transform: scaleX(1); opacity: 0; }
    100%     { transform: scaleX(0); opacity: 0; }
}

/*
    What rides the belt: the code, standing for the window it names. It is the subject of the drawing -
    one thing moving through the works, rather than seven lamps blinking in turn - and it is the mark the
    customer will actually hold a phone up to.

    It is a glyph, not a picture of a sticker, and that distinction is the whole reason it is allowed to
    travel. The page says nothing about when the physical sticker is applied, because it is not applied at
    the start of production and a landing page has no business dating it; what the icon says is only
    *which window this is*. Keep any copy nearby to the same rule - see the comment at the top of
    Home.razor.

    White tile, dark glyph - a code is dark on light or it does not scan, and the amber ring plus the drop
    shadow are what lift it off the white band. A dark green tile was tried and reads as one more piece of
    machinery; this reads as the thing you point a phone at.
*/
@keyframes flow-travel-b-jn1vhx2ui9 {
    0%        { left: 0%; opacity: 0; transform: scale(0.5); }
    2%        { left: 0%; opacity: 1; transform: scale(1.16); }
    5%        { transform: scale(1); }
    7%        { left: 0%; }
    10%       { left: 16.667%; transform: scale(1.16); }
    13%       { transform: scale(1); }
    17%       { left: 16.667%; }
    20%       { left: 33.333%; transform: scale(1.16); }
    23%       { transform: scale(1); }
    27%       { left: 33.333%; }
    30%       { left: 50%; transform: scale(1.16); }
    33%       { transform: scale(1); }
    37%       { left: 50%; }
    40%       { left: 66.667%; transform: scale(1.16); }
    43%       { transform: scale(1); }
    47%       { left: 66.667%; }
    50%       { left: 83.333%; transform: scale(1.16); }
    53%       { transform: scale(1); }
    57%       { left: 83.333%; }
    60%       { left: 100%; opacity: 1; transform: scale(1.16); }
    64%       { transform: scale(1); }
    86%       { left: 100%; opacity: 1; }
    92%, 100% { left: 100%; opacity: 0; transform: scale(1); }
}

.flow[b-jn1vhx2ui9] {
    position: relative;
    padding: 0.5rem 0 3.2rem;
}

.flow-stages[b-jn1vhx2ui9] {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.flow-stage[b-jn1vhx2ui9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}

.flow-dot[b-jn1vhx2ui9] {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    font-size: 1.55rem;
    background: var(--pid-tile, #ececec);
    color: var(--pid-muted, #6b6b6b);
    border: 4px solid var(--pid-surface, #ffffff);
    animation: flow-dot-on-b-jn1vhx2ui9 12s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}

.flow-dot[b-jn1vhx2ui9]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid var(--pid-green, #7eb935);
    opacity: 0;
    animation: flow-ring-b-jn1vhx2ui9 12s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}

.flow-name[b-jn1vhx2ui9] {
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--pid-muted, #6b6b6b);
    animation: flow-name-on-b-jn1vhx2ui9 12s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}

/*
    The belt runs underneath the stations, not through them. It used to run across their middles with the
    window on top at z-index 2, which meant the window covered the icon of the station it had just
    reached - it hid the one thing it was drawing attention to.
*/
.flow-rail[b-jn1vhx2ui9] {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 1.6rem;
    height: 4px;
    background-color: var(--pid-line, #dcdcdc);
    background-image: repeating-linear-gradient(90deg, rgba(31, 31, 31, 0.16) 0 2px, transparent 2px 10px);
}

.flow-rail-fill[b-jn1vhx2ui9] {
    display: block;
    height: 100%;
    background: var(--pid-green, #7eb935);
    transform-origin: left center;
    animation: flow-fill-b-jn1vhx2ui9 12s ease-in-out infinite;
}

/*
    What rides the belt: the code, standing for the window it names. It is the subject of the drawing -
    one thing moving through the works, rather than seven lamps blinking in turn - and it is the mark the
    customer will actually hold a phone up to.

    It is a glyph, not a picture of a sticker, and that distinction is the whole reason it is allowed to
    travel. The page says nothing about when the physical sticker is applied, because it is not applied at
    the start of production and a landing page has no business dating it; what the icon says is only
    *which window this is*. Keep any copy nearby to the same rule - see the comment at the top of
    Home.razor.

    White tile, dark glyph - a code is dark on light or it does not scan, and the amber ring plus the drop
    shadow are what lift it off the white band. A dark green tile was tried here and reads as one more
    piece of machinery; this reads as the thing you point a phone at.
*/
.flow-marker[b-jn1vhx2ui9] {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: -1.1rem 0 0 -1.1rem;
    background: var(--pid-surface, #ffffff);
    color: var(--pid-ink, #1f1f1f);
    font-size: 1.05rem;
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.9), 0 6px 14px rgba(31, 31, 31, 0.3);
    animation: flow-travel-b-jn1vhx2ui9 12s ease-in-out infinite;
    z-index: 2;
}

/* The lead line of that block, and the only paragraph in it that is not muted body copy. */
.home-flow-note[b-jn1vhx2ui9] {
    margin: 0;
    color: var(--pid-ink, #1f1f1f);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* ---------- the old home page's words, under the drawing ---------- */

/*
    The band's heading and drawing are centred; this is body copy, so it is left-aligned in a centred
    column at a readable measure. Centred paragraphs of this length are a poster, not something anybody
    reads to the end.

    The copy is the old PID home page's, reproduced rather than rewritten - it is the authoritative
    description of the product. Corrected on the way in: "fiche's" -> "fiches" (Dutch plural takes no
    apostrophe), "garantie voorwaarden" -> "garantievoorwaarden", "melding systeem" -> "meldingssysteem",
    "interventie aanvraag" -> "interventieaanvraag" (all compounds), "Éénvoudig" -> "Eenvoudig" (the
    accents belong to één meaning *one*, not to eenvoudig meaning *simple*), "Pid plus" -> "PIDplus" (the
    wordmark in the header two centimetres above it), and "bv" -> "bv.". Everything else is verbatim,
    including "héél", which is emphasis and is meant to be there.
*/
.home-pitch[b-jn1vhx2ui9] {
    max-width: 46rem;
    margin: 0 auto;
    text-align: left;
}

.home-pitch-list[b-jn1vhx2ui9] {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.home-pitch-list li[b-jn1vhx2ui9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
    color: var(--pid-ink, #1f1f1f);
}

/* Green on white, so the dark green: the brand green is a fill and reaches only ~2.4:1 as a mark. */
.home-pitch-list i[b-jn1vhx2ui9] {
    flex: none;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--pid-green-dark, #55801f);
}

/*
    "Lees meer" is a <details>, so the disclosure needs no JavaScript and no interactive render mode - see
    the comment beside it in Home.razor. Both markers are removed (::marker for standards browsers,
    ::-webkit-details-marker for Safari) and replaced by a chevron that turns a quarter when it opens.
*/
.home-pitch-more[b-jn1vhx2ui9] { margin-top: 1.75rem; }

.home-pitch-more summary[b-jn1vhx2ui9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    list-style: none;
}

.home-pitch-more summary[b-jn1vhx2ui9]::marker { content: ""; }
.home-pitch-more summary[b-jn1vhx2ui9]::-webkit-details-marker { display: none; }

.home-pitch-more summary:hover[b-jn1vhx2ui9] { color: var(--pid-green-deep, #3f6117); }

.home-pitch-more summary:focus-visible[b-jn1vhx2ui9] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 4px;
}

.home-pitch-more summary i[b-jn1vhx2ui9] {
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.home-pitch-more[open] summary i[b-jn1vhx2ui9] { transform: rotate(90deg); }

/*
    Opening slides rather than snaps.

    A <details> normally jumps, because height cannot be transitioned to `auto` and the content is hidden
    outright while it is closed. Three modern pieces fix that without giving up the native element:

      - interpolate-size: allow-keywords  lets height animate to `auto`. It is inherited, so it is set
        here rather than on :root - a Blazor scoped stylesheet cannot reach :root, since every selector
        gets the component's [b-...] attribute appended and :root never carries one.
      - ::details-content  is the box the browser wraps the content in. It is the only thing that can be
        animated; the children cannot, because it is the wrapper that is being hidden.
      - transition-behavior: allow-discrete  carries content-visibility along with the height. Without it
        the content blinks out at frame one and the height animates over nothing.

    Where these are not supported the pseudo-element does not match at all, so the whole block is skipped
    and the disclosure opens the way it always did. Nothing to detect and nothing to fall back to.
*/
.home-pitch-more[b-jn1vhx2ui9] {
    interpolate-size: allow-keywords;
}

.home-pitch-more[b-jn1vhx2ui9]::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.34s ease, content-visibility 0.34s ease;
    transition-behavior: allow-discrete;
}

.home-pitch-more[open][b-jn1vhx2ui9]::details-content {
    block-size: auto;
}

.home-pitch-body[b-jn1vhx2ui9] { margin-top: 1.2rem; }

.home-pitch-body p[b-jn1vhx2ui9] {
    color: var(--pid-muted, #6b6b6b);
    line-height: 1.7;
    margin: 0 0 1.05rem;
}

.home-pitch-body p:last-child[b-jn1vhx2ui9] { margin: 0; }

/* ============================================================
   THE SCAN
   ============================================================ */

/*
    The old PID's hero, brought over. Two things made that picture: `img-slide.jpg` behind everything,
    and a solid green block covering the whole gutter to the left of the centred container
    (`.slide .container:after { background: #437532; width: 100%; left: -100% }`). Text on green, photo
    beside it.

    Here the same split is done with one gradient over the photo rather than a pseudo-element, because
    this band has no gutter to fill - it is a two-column grid, and the seam belongs between the columns.
    Solid green at the left edge, where it meets the field behind the page and the two become one shape,
    thinning to a 0.32 veil across the copy and clearing entirely by 68% so the glass is simply there
    behind the sticker and the phone.

    #437532 is the old page's own green, kept rather than mapped onto --pid-green-deep (#3f6117): it is
    the colour that was asked for, and the two are close enough that swapping it would look like a
    mistake rather than a decision.

    The photo carries no meaning - it is a glass facade, and the page says nothing about it - so it needs
    no alt text and belongs in CSS rather than in an <img>. background-color repeats the green underneath
    for the moment before it loads, or if it never does.
*/
.home-scan[b-jn1vhx2ui9] {
    margin: 0 -1.25rem;
    padding: 3.25rem 1.75rem;
    background-color: #437532;
    background-image:
        linear-gradient(90deg,
            #437532 0%,
            rgba(67, 117, 50, 0.32) 46%,
            rgba(67, 117, 50, 0.32) 57%,
            rgba(67, 117, 50, 0) 68%,
            rgba(67, 117, 50, 0) 100%),
        url('/images/img-slide.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    color: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.home-scan-title[b-jn1vhx2ui9] {
    font-size: clamp(1.4rem, 3.6vw, 2rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0.6rem 0 0.9rem;
    text-wrap: balance;
}

.home-scan-copy p[b-jn1vhx2ui9] {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.62;
    margin: 0 0 1.5rem;
    max-width: 30rem;
}

.home-scan-list[b-jn1vhx2ui9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.home-scan-list li[b-jn1vhx2ui9] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 600;
}

.home-scan-list i[b-jn1vhx2ui9] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    background: rgba(255, 255, 255, 0.14);
    color: #cfe8a6;
}

/*
    The sticker and the phone, side by side, on the *same 12s clock as the line above*: the beam passes,
    the sticker flashes, the passport fills in - and then it stays filled for the rest of the cycle. The
    two bands are too far apart to be seen at once, so the shared clock is not about watching them
    together; it is so that neither drifts and so that this one comes to rest rather than looping busily
    under the eye of somebody trying to read it. All of the movement is over by 34%.
*/
.scan-stage[b-jn1vhx2ui9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

@keyframes scan-beam-run-b-jn1vhx2ui9 {
    0%, 2%    { top: 6%; opacity: 0; }
    5%        { opacity: 1; }
    18%       { opacity: 1; }
    22%, 100% { top: 88%; opacity: 0; }
}

@keyframes scan-sticker-flash-b-jn1vhx2ui9 {
    0%, 19%   { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
    23%       { box-shadow: 0 0 0 6px rgba(150, 211, 74, 0.6), 0 12px 30px rgba(0, 0, 0, 0.35); }
    30%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
}

.scan-sticker[b-jn1vhx2ui9] {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex: none;
    background: #ffffff;
    background-image:
        repeating-linear-gradient(90deg, #1f1f1f 0 8px, transparent 8px 16px),
        repeating-linear-gradient(0deg, #1f1f1f 0 8px, transparent 8px 16px);
    background-size: 16px 16px;
    background-position: 12px 12px;
    background-clip: content-box;
    padding: 0.6rem;
    overflow: hidden;
    /* The one warm accent on the page. A real sticker has an edge; this is also what separates a white
       square from the white phone beside it against the dark band. */
    outline: 3px solid rgba(232, 163, 23, 0.9);
    outline-offset: 0;
    animation: scan-sticker-flash-b-jn1vhx2ui9 12s linear infinite;
}

.qr-finder[b-jn1vhx2ui9] {
    position: absolute;
    width: 1.9rem;
    height: 1.9rem;
    border: 0.38rem solid #1f1f1f;
    background: #ffffff;
    box-shadow: inset 0 0 0 0.2rem #ffffff;
}

.qr-finder-tl[b-jn1vhx2ui9] { top: 0.6rem; left: 0.6rem; }
.qr-finder-tr[b-jn1vhx2ui9] { top: 0.6rem; right: 0.6rem; }
.qr-finder-bl[b-jn1vhx2ui9] { bottom: 0.6rem; left: 0.6rem; }

.scan-beam[b-jn1vhx2ui9] {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.6rem;
    background: linear-gradient(180deg,
        rgba(150, 211, 74, 0) 0%,
        rgba(150, 211, 74, 0.6) 50%,
        rgba(150, 211, 74, 0) 100%);
    border-top: 2px solid rgba(180, 235, 110, 0.95);
    animation: scan-beam-run-b-jn1vhx2ui9 12s linear infinite;
}

/* The phone fills in after the beam has passed - the passport arriving, one section at a time. */
@keyframes scan-row-in-b-jn1vhx2ui9 {
    0%, 26%  { opacity: 0; transform: translateY(8px); }
    34%, 94% { opacity: 1; transform: none; }
    100%     { opacity: 0; transform: translateY(8px); }
}

@keyframes scan-head-in-b-jn1vhx2ui9 {
    0%, 22%  { opacity: 0; }
    28%, 94% { opacity: 1; }
    100%     { opacity: 0; }
}

.scan-phone[b-jn1vhx2ui9] {
    width: 9.5rem;
    flex: none;
    aspect-ratio: 9 / 17.5;
    background: #101010;
    padding: 0.55rem 0.45rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.scan-screen[b-jn1vhx2ui9] {
    height: 100%;
    background: #ffffff;
    padding: 0.7rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: hidden;
}

.phone-brand[b-jn1vhx2ui9] {
    font-size: 0.66rem;
    color: var(--pid-green-dark, #55801f);
    animation: scan-head-in-b-jn1vhx2ui9 12s linear infinite;
}

.phone-eyebrow[b-jn1vhx2ui9] {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
    animation: scan-head-in-b-jn1vhx2ui9 12s linear infinite;
}

.phone-name[b-jn1vhx2ui9] {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--pid-ink, #1f1f1f);
    line-height: 1.1;
    animation: scan-head-in-b-jn1vhx2ui9 12s linear infinite;
}

.phone-chip[b-jn1vhx2ui9] {
    align-self: flex-start;
    font-size: 0.48rem;
    font-weight: 700;
    background: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.25rem;
    animation: scan-head-in-b-jn1vhx2ui9 12s linear infinite;
}

.phone-row[b-jn1vhx2ui9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.58rem;
    color: var(--pid-ink, #1f1f1f);
    border: 1px solid var(--pid-line, #dcdcdc);
    padding: 0.35rem 0.4rem;
    animation: scan-row-in-b-jn1vhx2ui9 12s linear infinite;
    animation-delay: calc(var(--r) * 0.4s);
}

.phone-row i[b-jn1vhx2ui9] { color: var(--pid-green-dark, #55801f); }


/* ============================================================
   ONDERHOUD & BEDIENING
   ============================================================ */

/* A white sheet like the bands at the top, so the page alternates sheet / colour / sheet down its length
   and this one does not merge into the canvas band under it. Opaque, like every band, because the green
   field passes behind it. */
.home-care[b-jn1vhx2ui9] {
    margin: 0 -1.25rem;
    padding: 3rem 1.75rem;
    background-color: var(--pid-surface, #ffffff);
    background-image:
        repeating-linear-gradient(0deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(63, 97, 23, 0.05) 0 1px, transparent 1px 32px);
    border-bottom: 1px solid var(--pid-line, #dcdcdc);
}

.home-care-lead[b-jn1vhx2ui9] {
    color: var(--pid-muted, #6b6b6b);
    line-height: 1.6;
    max-width: 42rem;
    margin: 0 0 2rem;
}

.home-care-grid[b-jn1vhx2ui9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

/*
    The cards are links, so every link state is written out: app.css paints anchors #006bb7 and reboot
    underlines them, which on a card turns the title into what looks like a hyperlink inside a panel.
    Soft green rather than white, because the band behind them is already white.
*/
.care-card[b-jn1vhx2ui9],
.care-card:link[b-jn1vhx2ui9],
.care-card:visited[b-jn1vhx2ui9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.35rem 1.35rem 1.5rem;
    background: var(--pid-green-soft, #f1f8e7);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-top: 4px solid var(--pid-green, #7eb935);
    color: var(--pid-ink, #1f1f1f);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.care-card:hover[b-jn1vhx2ui9],
.care-card:focus-visible[b-jn1vhx2ui9] {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(31, 31, 31, 0.12);
    color: var(--pid-ink, #1f1f1f);
    text-decoration: none;
}

.care-card:focus-visible[b-jn1vhx2ui9] {
    outline: 3px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
}

.care-icon[b-jn1vhx2ui9] {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.5rem;
    background: var(--pid-surface, #ffffff);
    color: var(--pid-green-deep, #3f6117);
    font-size: 1.25rem;
}

/* The one filled mark on the card, because a play triangle that is not obviously a button is the thing
   people hunt for. Brand green is a fill with dark text on it, never white text - it reaches ~2.4:1. */
.care-icon-play[b-jn1vhx2ui9] {
    background: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
    font-size: 1.5rem;
}

.care-kind[b-jn1vhx2ui9] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pid-green-dark, #55801f);
}

.care-title[b-jn1vhx2ui9] {
    font-weight: 700;
    line-height: 1.35;
}

.care-meta[b-jn1vhx2ui9] {
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--pid-muted, #6b6b6b);
}

.care-meta i[b-jn1vhx2ui9] { font-size: 0.75rem; }

/* ---------- the video dialog ---------- */

/*
    A real <dialog>, so the backdrop, the focus trap, Escape and the inert page behind it are the
    browser's job rather than mine. It is styled square and dark to match the scan band, and sized to the
    viewport rather than to the video, so a 16:9 frame fits on a phone held either way.
*/
.video-dialog[b-jn1vhx2ui9] {
    width: min(64rem, 92vw);
    max-width: none;
    padding: 0;
    border: 0;
    background: #101010;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.video-dialog[b-jn1vhx2ui9]::backdrop {
    background: rgba(16, 24, 8, 0.78);
}

.video-dialog-bar[b-jn1vhx2ui9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem 0.75rem 1.1rem;
}

.video-dialog-title[b-jn1vhx2ui9] {
    font-size: 0.92rem;
    font-weight: 600;
}

.video-dialog-close[b-jn1vhx2ui9] {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 0;
    font-size: 1rem;
    cursor: pointer;
}

.video-dialog-close:hover[b-jn1vhx2ui9] { background: rgba(255, 255, 255, 0.24); }

.video-dialog-close:focus-visible[b-jn1vhx2ui9] {
    outline: 3px solid var(--pid-green, #7eb935);
    outline-offset: 2px;
}

.video-dialog-frame[b-jn1vhx2ui9] {
    aspect-ratio: 16 / 9;
    background: #000000;
}

.video-dialog-frame iframe[b-jn1vhx2ui9] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ---------- audiences ---------- */

.home-audience[b-jn1vhx2ui9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.home-audience-card[b-jn1vhx2ui9] {
    background: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-top: 4px solid var(--pid-green, #7eb935);
    padding: 1.5rem 1.35rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-audience-card:hover[b-jn1vhx2ui9] {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(31, 31, 31, 0.1);
}

.home-audience-icon[b-jn1vhx2ui9] {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--pid-green-soft, #f1f8e7);
    color: var(--pid-green-deep, #3f6117);
    font-size: 1.2rem;
    margin-bottom: 0.9rem;
}

.home-audience-card h3[b-jn1vhx2ui9] {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pid-green-dark, #55801f);
    margin: 0 0 0.45rem;
}

.home-audience-card p[b-jn1vhx2ui9] {
    color: var(--pid-muted, #6b6b6b);
    line-height: 1.6;
    margin: 0;
    font-size: 0.94rem;
}

/* ---------- closing ---------- */

/* Flush against the section above it rather than 3rem below: a gap between two bands is a gap in the
   opaque column, and the green field would draw a bar straight across the page there. The green rule on
   top is what separates them now. */
.home-cta[b-jn1vhx2ui9] {
    margin: 0 -1.25rem;
    padding: 3.25rem 1.9rem 3rem;
    background: var(--pid-canvas, #f4f4f4);
    border-top: 4px solid var(--pid-green, #7eb935);
    text-align: center;
}

.home-cta h2[b-jn1vhx2ui9] {
    font-size: clamp(1.35rem, 3.4vw, 1.85rem);
    font-weight: 800;
    color: var(--pid-ink, #1f1f1f);
    margin: 0 0 0.6rem;
}

.home-cta p[b-jn1vhx2ui9] {
    color: var(--pid-muted, #6b6b6b);
    margin: 0 auto 1.5rem;
    max-width: 32rem;
}

/* ---------- narrow screens ---------- */

/*
    On a phone the line becomes a carousel that runs itself: seven stations will not fit across the screen,
    and the column they used to stack into made each one a small tile beside a word - a list, with nothing
    left of the picture.

    One station fills the screen and the strip slides to the next, in step with the same 12s clock
    everything else on the page runs on. It is one more animation on that clock rather than a mechanism of
    its own: the strip sits on station i for exactly as long as station i is lit, because both are driven
    by the same i * 10%.

    Still no JavaScript, and no scrolling either. The strip is a flex row inside .flow, which clips it -
    there is nothing to swipe and nothing to leave half way between two cards.

    The rail stays horizontal here, which is what brings the sticker back. Stacked vertically the belt ran
    down the page and the travelling code had to be hidden - the subject of the whole drawing, gone on the
    screens most people are holding. Under a horizontal strip it works exactly as it does on a desktop.
*/

/*
    The strip. Plateaus, not a constant glide: it holds on a station while that station is worked on and
    moves between them in 3% of the cycle, which is the same shape as flow-travel and flow-fill.

    The return is the awkward part of any looping carousel - going from the last station back to the first
    means crossing all seven backwards. So it does not: the strip fades out where the sticker does (91%),
    jumps back while nothing is on screen, and fades in again by 100%.
*/
@keyframes flow-carousel-b-jn1vhx2ui9 {
    0%, 7%   { transform: translateX(0); opacity: 1; }
    10%, 17% { transform: translateX(-100%); }
    20%, 27% { transform: translateX(-200%); }
    30%, 37% { transform: translateX(-300%); }
    40%, 47% { transform: translateX(-400%); }
    50%, 57% { transform: translateX(-500%); }
    60%, 86% { transform: translateX(-600%); opacity: 1; }
    91%      { transform: translateX(-600%); opacity: 0; }
    92%      { transform: translateX(0); opacity: 0; }
    100%     { transform: translateX(0); opacity: 1; }
}

@media (max-width: 52rem) {
    /* Clips the strip, and leaves the belt the same room below it as the desktop line has. */
    .flow[b-jn1vhx2ui9] {
        padding: 0.5rem 0 3.2rem;
        overflow: hidden;
    }

    .flow-stages[b-jn1vhx2ui9] {
        display: flex;
        grid-template-columns: none;
        /* No gap: the strip moves exactly one card per step, and a gap would put it out by that much
           more every time. The breathing room is inside the card instead. */
        gap: 0;
        animation: flow-carousel-b-jn1vhx2ui9 12s ease-in-out infinite;
    }

    .flow-stage[b-jn1vhx2ui9] {
        flex: 0 0 100%;
        gap: 1rem;
        padding: 0.5rem 1rem 1.5rem;
    }

    /* The whole point of the change: big enough to be a picture rather than a bullet. */
    .flow-dot[b-jn1vhx2ui9] {
        width: 6rem;
        height: 6rem;
        font-size: 2.6rem;
        border-width: 0;
    }

    .flow-name[b-jn1vhx2ui9] { font-size: 1.1rem; }

    /* No ripple. It scales the tile to 2.2x - over 13rem here - which reaches past the edges of a screen
       this size. Across a row of seven there is space for it; alone in the middle there is not. */
    .flow-dot[b-jn1vhx2ui9]::after { animation: none; opacity: 0; }

    /* Under the strip and full width of the band: there are no seven columns to line up with any more, so
       the 7% insets that matched their centres mean nothing here. */
    .flow-rail[b-jn1vhx2ui9] {
        left: 0;
        right: 0;
        top: auto;
        bottom: 1.6rem;
        width: auto;
        height: 4px;
    }

    .home-scan[b-jn1vhx2ui9] {
        grid-template-columns: 1fr;
        background-image:
            linear-gradient(180deg, rgba(67, 117, 50, 0.95) 0%, rgba(67, 117, 50, 0.88) 100%),
            url('/images/img-slide.jpg');
    }

    .scan-stage[b-jn1vhx2ui9] { flex-wrap: wrap; }
}

@media (max-width: 40rem) {
    .scan-phone[b-jn1vhx2ui9] { display: none; }
}

/* ---------- motion off ---------- */

/*
    Somebody who has asked for less motion gets the finished state of both pictures: every stage lit, the
    rail full, the beam parked, and the passport filled in. The page still says what it means - it just
    says it all at once.
*/
@media (prefers-reduced-motion: reduce) {
    .flow-rail-fill[b-jn1vhx2ui9] {
        animation: none;
        transform: scaleX(1);
    }

    .flow-dot[b-jn1vhx2ui9] {
        animation: none;
        background: var(--pid-green, #7eb935);
        color: var(--pid-on-green, #16240a);
    }

    .flow-dot[b-jn1vhx2ui9]::after { animation: none; opacity: 0; }

    /* Parked at the end of the line, where the window finishes. */
    .flow-marker[b-jn1vhx2ui9] {
        animation: none;
        left: 100%;
        opacity: 1;
    }

    .flow-name[b-jn1vhx2ui9] {
        animation: none;
        color: var(--pid-green-deep, #3f6117);
        font-weight: 700;
    }

    .scan-sticker[b-jn1vhx2ui9] { animation: none; }

    .scan-beam[b-jn1vhx2ui9] {
        animation: none;
        top: 45%;
        opacity: 0.7;
    }

    .phone-brand[b-jn1vhx2ui9],
    .phone-eyebrow[b-jn1vhx2ui9],
    .phone-name[b-jn1vhx2ui9],
    .phone-chip[b-jn1vhx2ui9],
    .phone-row[b-jn1vhx2ui9] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-button[b-jn1vhx2ui9],
    .home-audience-card[b-jn1vhx2ui9],
    .home-pitch-more summary i[b-jn1vhx2ui9] { transition: none; }

    /* The fold still opens and closes - it just does it at once, which is what was asked for. */
    .home-pitch-more[b-jn1vhx2ui9]::details-content { transition: none; }

    .home-button:hover[b-jn1vhx2ui9],
    .home-audience-card:hover[b-jn1vhx2ui9] { transform: none; }
}

/*
    A carousel cannot simply be frozen: stopped, it is one station and six the reader never sees. So under
    reduced motion the phone layout goes back to a stacked list - every station on screen at once, nothing
    moving, which is the same bargain the rest of the page makes.

    The belt goes with it. A horizontal rail under a vertical list marks nothing, and the sticker that
    rides it has nowhere to ride.
*/
@media (prefers-reduced-motion: reduce) and (max-width: 52rem) {
    .flow[b-jn1vhx2ui9] { overflow: visible; padding-bottom: 0; }

    .flow-stages[b-jn1vhx2ui9] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        animation: none;
        transform: none;
        opacity: 1;
    }

    .flow-stage[b-jn1vhx2ui9] { padding: 0; }

    .flow-rail[b-jn1vhx2ui9] { display: none; }
}

/* ---------- very wide screens ---------- */

/*
    Past 1900px the 900px column is a ribbon down the middle of a wide monitor. Here the page breaks out
    of it and pairs two of its bands.

    One number drives all of it: --home-w, the width the page breaks out to. It is capped at 1800px and
    otherwise leaves 22rem of gutter, because the gutter is where the green field is seen and at 1900px a
    flat 1800px would leave 50px of it either side - a sliver rather than a field. Everything else is
    derived from --home-w, so moving the cap or the gutter moves the layout and the field together.

    Breaking out: .client-main is 900px and centred, so .home's centre is already the viewport's centre.
    `margin-inline: calc(50% - var(--home-w) / 2)` is negative on both sides and leaves the block exactly
    --home-w wide whatever the parent's own padding happens to be - parentW - 2 x (0.5 x parentW - W/2) is
    W for every parentW - and centred, because both sides moved by the same amount. No width, no
    transform, nothing to keep in step with the layout.

    Only one pair. An earlier version put the scan beside the audience cards, which was two blocks that
    have nothing to say to each other with a hard seam between them, and left the band above holding a
    1200px drawing and a 46rem paragraph adrift in 1800px of white. So:

      - the line keeps the full width, which is the one thing on the page that actually wants it;
      - the scan takes the left column so its green runs into the field behind the page, and the pitch
        takes the right;
      - the audiences keep the full width, because three cards spread across 1800px is what that band is
        for and halving it would stack them;
      - the closing call keeps it too, being one sentence and a button.

    Three details are not decoration:

      - no column gap. A gap is a transparent strip and the field behind the page would show through it.
        The bands already sit flush when stacked; they sit flush here too.
      - no align-items: start. Stretching keeps both columns the full height of the row, so neither leaves
        a transparent shortfall under it for the field to show through.
      - the sections' own -1.25rem side margins are dropped. They exist to bleed a band to the edge of the
        column; inside a grid track they would bleed each band a quarter-inch into its neighbour.
*/
@media (min-width: 1900px) {
    .home[b-jn1vhx2ui9] {
        --home-w: min(1800px, 100vw - 22rem);
        margin-inline: calc(50% - var(--home-w) / 2);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0;
    }

    .home > section[b-jn1vhx2ui9] { margin-inline: 0; }

    .home-flowband[b-jn1vhx2ui9],
    .home-cta[b-jn1vhx2ui9] { grid-column: 1 / -1; }

    /*
        The scan takes the left column so its photo lands beside the green field, and the words take the
        right. Source order stays as it is - the scan is written after the pitch, because stacked (every
        screen under 1900px) the words belong under the drawing they describe.
    */
    .home-scan[b-jn1vhx2ui9] { grid-column: 1; grid-row: 2; }
    .home-pitchband[b-jn1vhx2ui9] { grid-column: 2; grid-row: 2; }

    /*
        And the second pair: the guidelines beside the audiences. Both are lists of cards rather than
        running prose, so neither loses anything at half the width - auto-fit simply drops each from three
        cards across to two. The care band gives up its bottom rule here, because it is now the left half
        of a row rather than a full-width band and the rule would stop halfway across the page; the green
        rule on the closing call is what separates the row from what follows.
    */
    .home-care[b-jn1vhx2ui9] { grid-column: 1; grid-row: 3; border-bottom: 0; }
    .home-section[b-jn1vhx2ui9] { grid-column: 2; grid-row: 3; }

    /*
        And the field moves its edge to meet the band's own green, rather than the band being changed to
        meet the field.

        The gradient stays exactly as it is on every other screen - solid at the left edge, thinning to a
        veil across the copy, clear over the sticker and the phone. What changes is where the field stops.
        At normal widths the two already agree by accident: the column is 900px, the gradient's solid run
        ends about 414px into it, and the field ends at the viewport's centre - 36px apart, which reads as
        a single edge. Breaking out to --home-w pulls them a quarter of that width apart, and that gap is
        the step.

        So the field ends at the centre of the left column instead of the centre of the screen. The left
        column is --home-w / 2, its centre is --home-w / 4 left of the middle, and that is where the scan
        band's green gives way to the glass. Same colour, ending together, so the join reads as one shape
        with one straight edge from the header to the footer.

        Derived rather than written out, so it follows --home-w when the breakout width changes with the
        viewport - which it now does, below about 2150px.
    */
    .home[b-jn1vhx2ui9]::before { right: calc(50% + var(--home-w) / 4); }

    /* It is a column of its own now rather than the foot of the sheet above, so it takes the padding and
       the reading measure back, and the text fills the column instead of sitting centred in it. */
    .home-pitchband[b-jn1vhx2ui9] {
        padding: 3.25rem 3rem;
        border-bottom: 0;
        display: flex;
        align-items: center;
    }

    .home-pitch[b-jn1vhx2ui9] { max-width: 44rem; margin: 0; }

    /* The drawing stops growing before the band does. Seven stations across 1800px stand a foot apart and
       stop reading as one line; this keeps their spacing close to what it is on a laptop while the band
       itself still fills the screen. */
    .flow[b-jn1vhx2ui9] {
        max-width: 1200px;
        margin-inline: auto;
    }
}
/* /Components/Pages/Notifications/InterventionRequests.razor.rz.scp.css */
.request-card[b-7g9uzvwcyp] {
    border-left: 4px solid var(--bs-success);
}

/* A request nobody signed in for. Marked in the border as well as in the badge, so a page full of cards
   still shows at a glance which ones came from a stranger. */
.request-anonymous[b-7g9uzvwcyp] {
    border-left-color: var(--bs-warning);
}

/* The client's own words, kept as they typed them - line breaks and all - and visibly set apart from the
   page's own text. It is already sanitised; this only makes clear where it starts and stops. */
.request-message[b-7g9uzvwcyp] {
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--bs-gray-100, #f8f9fa);
    border-left: 3px solid var(--bs-gray-400, #ced4da);
    padding: 0.75rem 1rem;
}


/* What was written back on the notification, and the one block on a card that is ours rather than theirs -
   green rather than grey so the two are not read as one long message. This is also what the customer sees
   on "Mijn meldingen", so it is worth being able to check it from here. */
.request-answer[b-7g9uzvwcyp] {
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
    border-left: 3px solid var(--bs-success, #198754);
    padding: 0.75rem 1rem;
}
.request-picture[b-7g9uzvwcyp] {
    max-height: 12rem;
    max-width: 100%;
    border: 1px solid var(--bs-gray-300, #dee2e6);
}

/* The conversation on a request. Ours and theirs have to be told apart at a glance, and by more than
   colour - each line carries who wrote it. */
.request-thread[b-7g9uzvwcyp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-line[b-7g9uzvwcyp] {
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--bs-gray-400, #ced4da);
    background-color: var(--bs-gray-100, #f8f9fa);
}

/* Theirs picks up the same warning tint an anonymous request has: it came from outside the building. */
.request-line-client[b-7g9uzvwcyp] {
    border-left-color: var(--bs-warning, #ffc107);
}

.request-line-us[b-7g9uzvwcyp] {
    border-left-color: var(--bs-primary, #0d6efd);
}

.request-line-who[b-7g9uzvwcyp] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.request-line-body[b-7g9uzvwcyp] {
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Reports/WorkVSDrive.razor.rz.scp.css */
.shift-table[b-5h3sifbjr2] {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

    .shift-table th[b-5h3sifbjr2],
    .shift-table td[b-5h3sifbjr2] {
        border: 1px solid #ccc;
        padding: 4px 6px;
        text-align: center;
    }

    .shift-table thead[b-5h3sifbjr2] {
        background-color: #e0f0ff;
    }

.diff-green[b-5h3sifbjr2] {
    background-color: #b6fcb6;
}

.diff-yellow[b-5h3sifbjr2] {
    background-color: #fff7b2;
}

.diff-orange[b-5h3sifbjr2] {
    background-color: #ffd59b;
}

.diff-red[b-5h3sifbjr2] {
    background-color: #f89a9a;
}

.diff-red-alert[b-5h3sifbjr2] {
    background-color: red;
}


.equal-cell[b-5h3sifbjr2] {
    width: 25%;
    min-height: 1.5rem;
    text-align: center;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-equal[b-5h3sifbjr2] {
    display: flex;
}

    .row-equal + .row-equal[b-5h3sifbjr2] {
        border-top: none;
    }

.table-summary[b-5h3sifbjr2] {
    background: #f8f9fa;
    font-weight: bold;
}

/* Ensure consistent column widths and vertical alignment for both tables */
.shift-table th[b-5h3sifbjr2], .shift-table td[b-5h3sifbjr2], .table-summary th[b-5h3sifbjr2], .table-summary td[b-5h3sifbjr2] {
    width: 170px; /* Set a consistent width for all columns */
    text-align: center; /* Center-align text */
    vertical-align: middle; /* Vertically align content */
    padding: 5px; /* Add padding for better readability */
    box-sizing: border-box; /* Ensure padding and borders are included in width */
}

.blurred[b-5h3sifbjr2] {
    filter: blur(5px);
    pointer-events: none;
    opacity: 0.6;
}

.loader-overlay[b-5h3sifbjr2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(255, 255, 255, 0.8);*/
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
/* /Components/Pages/Tools/Survey.razor.rz.scp.css */
.survey-modal-shell[b-sgtd5t2ozk] {
    z-index: 1040;
    background: radial-gradient(circle at top left, rgba(52, 211, 153, 0.24), transparent 30%), linear-gradient(135deg, #577d7d 0%, #8a838d 48%, #000000 140%);
}

.survey-modal-content[b-sgtd5t2ozk] {
    height: 100dvh;
    color: #e5eefc;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.survey-toolbar[b-sgtd5t2ozk] {
    min-height: clamp(3.75rem, 5.4vw, 6.7rem);
    padding: clamp(0.5rem, 0.95vw, 1.1rem) clamp(0.9rem, 2vw, 1.75rem);
    border: 0;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.survey-eyebrow[b-sgtd5t2ozk] {
    color: #93c5fd;
    font-size: clamp(0.64rem, 1vmin, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.survey-title[b-sgtd5t2ozk] {
    margin: 0;
    font-size: clamp(1.25rem, 3.2vw, 3.7rem);
    font-weight: 800;
    line-height: 0.95;
}

.survey-toolbar-actions[b-sgtd5t2ozk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.45rem, 1.2vmin, 1rem);
    min-width: 0;
}

.survey-stat[b-sgtd5t2ozk],
.survey-updated[b-sgtd5t2ozk],
.survey-refresh[b-sgtd5t2ozk] {
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #e5eefc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.survey-stat[b-sgtd5t2ozk] {
    display: grid;
    place-items: center;
    min-width: clamp(4.5rem, 7vmin, 6.5rem);
    padding: clamp(0.35rem, 0.9vmin, 0.65rem) clamp(0.65rem, 1.2vmin, 1rem);
    font-size: clamp(0.58rem, 0.85vmin, 0.78rem);
    line-height: 1.05;
    text-transform: uppercase;
}

    .survey-stat span[b-sgtd5t2ozk] {
        font-size: clamp(1rem, 2.2vmin, 2rem);
        font-weight: 800;
    }

.survey-updated[b-sgtd5t2ozk] {
    padding: clamp(0.45rem, 1vmin, 0.8rem) clamp(0.7rem, 1.4vmin, 1.1rem);
    font-size: clamp(0.7rem, 1.1vmin, 0.9rem);
    white-space: nowrap;
}

.survey-refresh[b-sgtd5t2ozk] {
    padding-inline: clamp(0.65rem, 1.3vmin, 1.1rem);
}

.survey-modal-body[b-sgtd5t2ozk] {
    height: calc(100dvh - clamp(3.75rem, 5.4vw, 6.7rem));
    padding: clamp(0.55rem, 1.2vmin, 1.2rem);
    overflow: hidden;
}

.survey-board[b-sgtd5t2ozk] {
    --safe-departments: max(var(--department-count), 1);
    --safe-users: max(var(--total-users), 1);
    --safe-largest-department-users: max(var(--largest-department-users), 1);
    height: 100%;
    display: grid;
    gap: clamp(0.45rem, 1.1vmin, 1rem);
    font-size: clamp(0.52rem, calc(1.1rem - (var(--safe-users) * 0.018rem)), 1rem);
}

.survey-board-landscape[b-sgtd5t2ozk] {
    display: none;
}

.survey-department[b-sgtd5t2ozk] {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: clamp(0.75rem, 1.8vmin, 1.5rem);
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.16), rgba(148, 163, 184, 0.08));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.survey-empty-panel[b-sgtd5t2ozk] {
    min-height: 0;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(226, 232, 240, 0.28);
    border-radius: clamp(0.65rem, 1.4vmin, 1.1rem);
    color: rgba(226, 232, 240, 0.62);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.survey-department-header[b-sgtd5t2ozk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: clamp(0.45rem, 1vmin, 0.95rem) clamp(0.65rem, 1.25vmin, 1.1rem);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(30, 64, 175, 0.35));
}

.survey-department-badge[b-sgtd5t2ozk] {
    position: absolute;
    right: clamp(0.3rem, 0.75vmin, 0.65rem);
    bottom: clamp(0.3rem, 0.75vmin, 0.65rem);
    max-width: 72%;
    padding: clamp(0.12rem, 0.3vmin, 0.22rem) clamp(0.35rem, 0.7vmin, 0.6rem);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #e0f2fe;
    font-size: clamp(0.45rem, 0.72vmin, 0.62rem);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}

.survey-department-label[b-sgtd5t2ozk] {
    color: #bfdbfe;
    font-size: clamp(0.5rem, 0.8vmin, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.survey-department h2[b-sgtd5t2ozk] {
    margin: 0;
    font-size: clamp(0.9rem, 2.1vmin, 1.75rem);
    font-weight: 800;
    line-height: 1;
}

.survey-department-count[b-sgtd5t2ozk] {
    width: clamp(1.8rem, 3.6vmin, 3rem);
    height: clamp(1.8rem, 3.6vmin, 3rem);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    font-size: clamp(0.8rem, 1.9vmin, 1.45rem);
    font-weight: 800;
}

.survey-users[b-sgtd5t2ozk] {
    --safe-group-users: max(var(--group-users), 1);
    min-height: 0;
    display: grid;
    gap: clamp(0.35rem, 0.8vmin, 0.8rem);
    padding: clamp(0.45rem, 1vmin, 1rem);
}

.survey-user-card[b-sgtd5t2ozk] {
    position: relative;
    width: 100%;
    max-width: clamp(9.5rem, 16vw, 18rem);
    height: 100%;
    max-height: clamp(8.5rem, 15vw, 16.5rem);
    justify-self: center;
    align-self: center;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 0.8fr) minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: clamp(0.6rem, 1.3vmin, 1.1rem);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.22);
}

    .survey-user-card.border-success[b-sgtd5t2ozk] {
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.42), 0 12px 35px rgba(15, 23, 42, 0.22);
    }

    .survey-user-card.border-warning[b-sgtd5t2ozk] {
        box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 12px 35px rgba(15, 23, 42, 0.22);
    }

    .survey-user-card.border-danger[b-sgtd5t2ozk] {
        box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.46), 0 12px 35px rgba(15, 23, 42, 0.22);
    }

.survey-user-header[b-sgtd5t2ozk] {
    min-height: fit-content;
    display: grid;
    place-items: center;
    padding: clamp(0.35rem, 0.9vmin, 0.8rem);
    text-align: center;
    font-weight: 800;
    line-height: 1.08;
}

.survey-user-name[b-sgtd5t2ozk] {
    font-size: clamp(0.72rem, 1.55vmin, 1.35rem);
    letter-spacing: -0.02em;
}

.survey-user-body[b-sgtd5t2ozk] {
    min-height: 0;
    display: grid;
    align-content: center;
    gap: clamp(0.18rem, 0.45vmin, 0.4rem);
    padding: clamp(0.35rem, 0.85vmin, 0.8rem);
    font-size: clamp(0.52rem, 1.1vmin, 0.9rem);
    line-height: 1.12;
}

.survey-line[b-sgtd5t2ozk] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    padding: clamp(0.12rem, 0.28vmin, 0.25rem) clamp(0.25rem, 0.5vmin, 0.45rem);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.055);
}

    .survey-line span[b-sgtd5t2ozk],
    .survey-line strong[b-sgtd5t2ozk] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .survey-line span[b-sgtd5t2ozk] {
        color: #64748b;
        font-weight: 700;
    }

    .survey-line strong[b-sgtd5t2ozk] {
        color: #0f172a;
        text-align: right;
    }

    .survey-line a[b-sgtd5t2ozk] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #0f172a;
        text-decoration: none;
    }

        .survey-line a:hover[b-sgtd5t2ozk] {
            color: #2563eb;
            text-decoration: underline;
        }

.survey-user-header.out[b-sgtd5t2ozk] {
    color: #fff;
    background-image: linear-gradient(135deg, #7f1d1d, #dc2626, #991b1b);
}

.survey-user-header.pause[b-sgtd5t2ozk] {
    color: #fff;
    background-image: linear-gradient(135deg, #92400e, #f59e0b, #b45309);
}

.survey-user-header.in[b-sgtd5t2ozk] {
    color: #052e16;
    background-image: linear-gradient(135deg, #16a34a, #86efac, #22c55e);
}

.survey-status-dot[b-sgtd5t2ozk] {
    position: absolute;
    top: clamp(0.35rem, 0.8vmin, 0.7rem);
    left: clamp(0.35rem, 0.8vmin, 0.7rem);
    width: clamp(0.45rem, 1vmin, 0.8rem);
    height: clamp(0.45rem, 1vmin, 0.8rem);
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 clamp(0.12rem, 0.3vmin, 0.22rem) rgba(255, 255, 255, 0.32);
}

.absence-indicator[b-sgtd5t2ozk] {
    position: absolute;
    top: clamp(0.3rem, 0.75vmin, 0.65rem);
    right: clamp(0.3rem, 0.75vmin, 0.65rem);
    width: clamp(1.35rem, 3vmin, 2.4rem);
    height: clamp(1.35rem, 3vmin, 2.4rem);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.65rem, 1.35vmin, 1.05rem);
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    z-index: 1;
}

.survey-message[b-sgtd5t2ozk] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    font-size: clamp(1rem, 2vmin, 1.5rem);
}

@media (orientation: landscape) {
    .survey-modal-body[b-sgtd5t2ozk] {
        padding: clamp(0.35rem, 0.75vw, 1rem);
    }

    .survey-board-portrait[b-sgtd5t2ozk] {
        display: none;
    }

    .survey-board-landscape[b-sgtd5t2ozk] {
        --left-column-width: clamp(42%, calc(50% + ((var(--landscape-left-ratio) - var(--landscape-right-ratio)) * 13%)), 64%);
        display: grid;
        grid-template-columns: minmax(0, var(--left-column-width)) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "left-top right-top"
            "left-bottom right-bottom";
        gap: clamp(0.35rem, 0.75vw, 1rem);
        font-size: clamp(0.48rem, calc(0.34vw + 0.2rem), 0.96rem);
    }

    .landscape-left-top[b-sgtd5t2ozk] {
        grid-area: left-top;
    }

    .landscape-left-bottom[b-sgtd5t2ozk] {
        grid-area: left-bottom;
    }

    .landscape-right-top[b-sgtd5t2ozk] {
        grid-area: right-top;
    }

    .landscape-right-bottom[b-sgtd5t2ozk] {
        grid-area: right-bottom;
    }

    .survey-landscape-panel .survey-department-header[b-sgtd5t2ozk] {
        padding: clamp(0.28rem, 0.55vw, 0.72rem) clamp(0.45rem, 0.8vw, 1rem);
    }

    .survey-landscape-panel .survey-department-label[b-sgtd5t2ozk] {
        font-size: clamp(0.42rem, 0.45vw, 0.72rem);
    }

    .survey-landscape-panel h2[b-sgtd5t2ozk] {
        font-size: clamp(0.82rem, 1.25vw, 1.8rem);
    }

    .survey-landscape-panel .survey-department-count[b-sgtd5t2ozk] {
        width: clamp(1.5rem, 2.2vw, 3rem);
        height: clamp(1.5rem, 2.2vw, 3rem);
        font-size: clamp(0.75rem, 1.25vw, 1.55rem);
    }

    .survey-landscape-panel .survey-users[b-sgtd5t2ozk] {
        grid-template-columns: repeat(auto-fit, minmax(clamp(6rem, 8.8vw, 13rem), max-content));
        grid-auto-rows: minmax(0, 1fr);
        justify-content: center;
        align-content: center;
        gap: clamp(0.22rem, 0.48vw, 0.7rem);
        padding: clamp(0.3rem, 0.58vw, 0.8rem);
    }

    .survey-landscape-panel .survey-user-card[b-sgtd5t2ozk] {
        border-radius: clamp(0.45rem, 0.85vw, 1rem);
        grid-template-rows: minmax(0, 0.72fr) minmax(0, 1fr);
        max-width: clamp(8.5rem, 12vw, 15.5rem);
        max-height: clamp(7.8rem, 11vw, 14rem);
    }

    .survey-landscape-panel .survey-user-header[b-sgtd5t2ozk] {
        padding: clamp(0.2rem, 0.45vw, 0.6rem);
    }

    .survey-landscape-panel .survey-user-name[b-sgtd5t2ozk] {
        font-size: clamp(0.6rem, 0.92vw, 1.35rem);
    }

    .survey-landscape-panel .survey-user-body[b-sgtd5t2ozk] {
        gap: clamp(0.1rem, 0.2vw, 0.32rem);
        padding: clamp(0.22rem, 0.45vw, 0.65rem);
        font-size: clamp(0.44rem, 0.58vw, 0.82rem);
    }

    .survey-landscape-panel .survey-line[b-sgtd5t2ozk] {
        padding: clamp(0.08rem, 0.16vw, 0.2rem) clamp(0.18rem, 0.32vw, 0.42rem);
    }

    .survey-landscape-panel .absence-indicator[b-sgtd5t2ozk] {
        width: clamp(1.05rem, 1.7vw, 2.1rem);
        height: clamp(1.05rem, 1.7vw, 2.1rem);
        font-size: clamp(0.5rem, 0.82vw, 1rem);
        border-radius: clamp(0.35rem, 0.55vw, 0.7rem);
    }

    .survey-two-rows .survey-users[b-sgtd5t2ozk] {
        grid-template-columns: repeat(var(--row-columns), 1fr);
        grid-template-rows: 1fr 1fr;
    }

    .survey-two-rows .survey-user-card[b-sgtd5t2ozk] {
        max-width: none;
    }
}

@media (orientation: portrait) {
    .survey-toolbar[b-sgtd5t2ozk] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        min-height: clamp(7rem, 14vmax, 10rem);
    }

    .survey-toolbar-actions[b-sgtd5t2ozk] {
        justify-content: space-between;
    }

    .survey-updated[b-sgtd5t2ozk] {
        display: none;
    }

    .survey-modal-body[b-sgtd5t2ozk] {
        height: calc(100dvh - clamp(7rem, 14vmax, 10rem));
    }

    .survey-board[b-sgtd5t2ozk] {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        overflow-y: auto;
    }

    .survey-department[b-sgtd5t2ozk] {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .survey-department .survey-department-header[b-sgtd5t2ozk] {
        cursor: pointer;
        user-select: none;
    }

    .survey-department.survey-collapsed[b-sgtd5t2ozk] {
        grid-template-rows: auto 0fr;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(30, 64, 175, 0.35));
    }

    .survey-department.survey-collapsed .survey-users[b-sgtd5t2ozk] {
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    .survey-department.survey-collapsed .survey-department-header[b-sgtd5t2ozk] {
        padding: clamp(0.25rem, 0.6vmin, 0.5rem) clamp(0.5rem, 1.2vmin, 1rem);
    }

    .survey-department.survey-collapsed .survey-department-label[b-sgtd5t2ozk] {
        display: none;
    }

    .survey-department.survey-collapsed h2[b-sgtd5t2ozk] {
        font-size: clamp(0.75rem, 1.6vmin, 1.2rem);
    }

    .survey-department.survey-collapsed .survey-department-count[b-sgtd5t2ozk] {
        width: clamp(1.4rem, 2.8vmin, 2.2rem);
        height: clamp(1.4rem, 2.8vmin, 2.2rem);
        font-size: clamp(0.65rem, 1.4vmin, 1.1rem);
    }

    .survey-users[b-sgtd5t2ozk] {
        grid-template-columns: repeat(auto-fit, minmax(clamp(6.2rem, 28vw, 11rem), 1fr));
        grid-auto-rows: minmax(0, 1fr);
    }

    .survey-user-card[b-sgtd5t2ozk] {
        grid-template-rows: minmax(0, 0.75fr) minmax(0, 1fr);
    }
}
/* /Components/Shared/ClientPortal/KClientDecisionButtons.razor.rz.scp.css */
/* The client's verdict. The one place on the page where something is asked of them, so it carries the
   green edge and sits above the sections. */
.decision[b-1wfbj4y8n5] {
    background-color: var(--pid-surface, #fff);
    border: 1px solid var(--pid-line, #dcdcdc);
    border-top: 3px solid var(--pid-green, #7eb935);
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.75rem;
}

.decision-note[b-1wfbj4y8n5] {
    background-color: var(--pid-canvas, #f4f4f4);
    border-left: 3px solid var(--pid-line, #dcdcdc);
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.decision-note-label[b-1wfbj4y8n5] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-muted, #6b6b6b);
    margin-bottom: 0.25rem;
}

.decision-question[b-1wfbj4y8n5] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.decision[b-1wfbj4y8n5]  .form-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pid-muted, #6b6b6b);
}

.decision[b-1wfbj4y8n5]  .form-control {
    border-radius: 0;
}

.decision[b-1wfbj4y8n5]  .form-control:focus {
    border-color: var(--pid-green, #7eb935);
    box-shadow: 0 0 0 0.2rem rgba(126, 185, 53, 0.25);
}

/* Thumb-sized, because this is decided standing in front of the window. */
.decision .btn[b-1wfbj4y8n5] {
    min-height: 3.25rem;
    min-width: 10rem;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.decision .btn-outline-success[b-1wfbj4y8n5],
.decision .btn-success[b-1wfbj4y8n5] {
    border-color: var(--pid-green, #7eb935);
}

/* Green text on white takes the dark shade; the bright one only fills. */
.decision .btn-outline-success[b-1wfbj4y8n5] {
    color: var(--pid-green-dark, #55801f);
}

.decision .btn-outline-success:hover[b-1wfbj4y8n5],
.decision .btn-success[b-1wfbj4y8n5] {
    background-color: var(--pid-green, #7eb935);
    border-color: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
}

.decision[b-1wfbj4y8n5]  .alert {
    border-radius: 0;
    border-left-width: 3px;
}
/* /Components/Shared/ClientPortal/KInterventionForm.razor.rz.scp.css */
/* Checkboxes are tapped with a thumb, so give every row a real hit area.

   The min-height alone did not do that. It sized the row to 44px but only the input and the label are
   clickable, and the label is as tall as its text and as wide as its words - measured on a phone
   viewport: a 44x811 row with a 24x44 target inside it, 10px of dead strip above and below. The label
   is stretched to fill the row below, which is what turns the height into a hit area. */
.intervention-check[b-c4ixodjhy0] {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    margin-bottom: 0.15rem;
    border-left: 2px solid transparent;
}

.intervention-check:hover[b-c4ixodjhy0] {
    background-color: var(--pid-green-soft, #f1f8e7);
    border-left-color: var(--pid-green, #7eb935);
}

.intervention-check .form-check-input[b-c4ixodjhy0] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    border-radius: 0;
}

.intervention-check .form-check-input:checked[b-c4ixodjhy0] {
    background-color: var(--pid-green, #7eb935);
    border-color: var(--pid-green, #7eb935);
}

.intervention-check .form-check-label[b-c4ixodjhy0] {
    margin-left: 0.25rem;
    /* Fills the row so the whole 44px band toggles the box, not just the words. */
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.intervention-photos[b-c4ixodjhy0] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: var(--pid-muted, #6b6b6b);
}

[b-c4ixodjhy0] .form-control {
    border-radius: 0;
}

[b-c4ixodjhy0] .form-control:focus {
    border-color: var(--pid-green, #7eb935);
    box-shadow: 0 0 0 0.2rem rgba(126, 185, 53, 0.25);
}

[b-c4ixodjhy0] .form-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pid-muted, #6b6b6b);
}

[b-c4ixodjhy0] .btn-primary {
    background-color: var(--pid-green, #7eb935);
    border-color: var(--pid-green, #7eb935);
    /* Dark on the bright green. White would sit at about 2.4:1. */
    color: var(--pid-on-green, #16240a);
    border-radius: 0;
    min-height: 3rem;
    padding-inline: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

[b-c4ixodjhy0] .btn-primary:hover,
[b-c4ixodjhy0] .btn-primary:focus {
    background-color: var(--pid-green-dark, #55801f);
    border-color: var(--pid-green-dark, #55801f);
    color: #ffffff;
}

[b-c4ixodjhy0] .btn-outline-secondary {
    border-radius: 0;
    min-height: 3rem;
}

[b-c4ixodjhy0] .alert {
    border-radius: 0;
    border-left-width: 3px;
}
/* /Components/Shared/ClientPortal/KMyRequestPictures.razor.rz.scp.css */
/*
    The photo button and what it opens.

    These rules live here rather than in MyRequests.razor.css, and they have to: scoped CSS only matches
    the component that *rendered* the element. The button is drawn by this component, so it carries this
    component's b-... attribute, and a rule written in the page's stylesheet gets the page's attribute and
    never matches - which is exactly how it ended up on screen unstyled.

    The palette still comes from .client-page in ClientLayout.razor.css: custom properties inherit past the
    scope attributes, so every var() below resolves. Fallbacks all the same, like everywhere else here.
*/

/* Quiet until pressed: most meldingen carry no photos and most people will never open the ones that do. */
.mine-photo-button[b-qou740ui3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pid-green-dark, #55801f);
    background: var(--pid-surface, #ffffff);
    border: 1px solid var(--pid-green, #7eb935);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mine-photo-button:hover:enabled[b-qou740ui3y] {
    background: var(--pid-green, #7eb935);
    color: var(--pid-on-green, #16240a);
}

.mine-photo-button:disabled[b-qou740ui3y] {
    cursor: default;
    opacity: 0.7;
}

.mine-photo-button:focus-visible[b-qou740ui3y] {
    outline: 2px solid var(--pid-green-dark, #55801f);
    outline-offset: 3px;
}

.mine-photo-button i[b-qou740ui3y] {
    font-size: 1rem;
}

/* Stacked and full width, not a row of thumbnails. What these photographs show is a crack in a pane or a
   handle that does not close, and at thumbnail size neither is visible - the reader has already asked to
   see them, so they get the whole width the card has. */
.mine-photos[b-qou740ui3y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.mine-photo[b-qou740ui3y] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--pid-line, #dcdcdc);

    /* A phone photograph is several thousand pixels wide and usually taller than it is broad. Without a
       ceiling one portrait picture fills the screen and pushes everything under it out of sight; this
       keeps the whole card readable while still being big enough to see the damage. */
    max-height: 32rem;
    object-fit: contain;
    background: var(--pid-tile, #ececec);
}

.mine-photo-failed[b-qou740ui3y] {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--pid-muted, #6b6b6b);
}

@media (prefers-reduced-motion: reduce) {
    .mine-photo-button[b-qou740ui3y] { transition: none; }
}
/* /Components/Shared/ClientPortal/KWindowInternalPanel.razor.rz.scp.css */
/* Visually separate from the customer sections below it: this block belongs to the workshop, so it is
   deliberately the one thing on the page outside the client palette - nobody should mistake it for
   something the customer is meant to act on. */
.internal-panel[b-5r3uoz097f] {
    border: 1px solid #2b3a4a;
    background-color: #ffffff;
    margin-bottom: 1.75rem;
    overflow: hidden;
}

.internal-panel-actions[b-5r3uoz097f] {
    padding: 1rem 1rem 0;
}

.internal-panel-header[b-5r3uoz097f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background-color: #2b3a4a;
    color: #ffffff;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}
/* /Components/Shared/Stands/KStandStickerModal.razor.rz.scp.css */
/* The sticker as it will be printed: the name big enough to read across a workshop, the code below it. */
.stand-sticker[b-zudgsyftai] {
    display: inline-block;
    padding: 1.5rem;
    border: 1px dashed var(--bs-gray-400, #ced4da);
    background-color: #ffffff;
}

.stand-sticker-name[b-zudgsyftai] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    word-break: break-word;
}

/* Never upscaled past its own pixels - a stretched QR code is a QR code that will not scan. */
.stand-sticker-code[b-zudgsyftai] {
    width: 100%;
    max-width: 16rem;
    height: auto;
    image-rendering: pixelated;
}

.stand-sticker-hint[b-zudgsyftai] {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #6b6b6b;
}
/* /Components/Shared/Windows/ShowQRCodeComponent.razor.rz.scp.css */
/* Above a Bootstrap modal, which sits at 1055. This overlay is opened from inside one. */
.qr-overlay[b-7ee521qa7x] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.55);
}

.qr-card[b-7ee521qa7x] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    padding: 1rem;
    max-width: min(24rem, 100%);
    text-align: center;
}

.qr-card-header[b-7ee521qa7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.qr-card-title[b-7ee521qa7x] {
    font-weight: 600;
    word-break: break-word;
}

.qr-loading[b-7ee521qa7x] {
    padding: 3rem 0;
}

/* Square, never upscaled past its own pixels - a stretched QR code is a QR code that will not scan. */
.qr-image[b-7ee521qa7x] {
    width: 100%;
    max-width: 18rem;
    height: auto;
    image-rendering: pixelated;
}

.qr-hint[b-7ee521qa7x] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: #6b6b6b;
}