@import '_content/CelTom.WAL/CelTom.WAL.44sl50jcns.bundle.scp.css';
@import '_content/Respondit.WAL/Respondit.WAL.pl7qvxngub.bundle.scp.css';

/* _content/Respondit.WAL.WebTerminal/Components/Pages/EventScanner.razor.rz.scp.css */
/* EventScanner.razor.css */

.scan-host[b-ukhi9gkow9] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding-inline: 8px;
    min-width: 0;
}

.layout-two-cols .scan-host[b-ukhi9gkow9] {
    grid-column: 2;
    justify-self: center;
}

/* Dialoogbreedte met veilige zijmarge */
.scan-dialog[b-ukhi9gkow9] {
    width: 100%;
    max-width: 560px;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    overflow: hidden;
}

/* Result-card cropt veilig en rekt nooit uit */
.result-card[b-ukhi9gkow9] {
    margin-top: 0;
    border: 6px solid #c8c8c8;
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
    min-width: 0;
    overflow-x: hidden;
    transition: opacity .15s ease;
}

    .result-card *[b-ukhi9gkow9] {
        max-width: 100%;
    }
    /* kinderen nooit breder dan kaart */

    /* Kleuraccent per status */
    .result-card.ok[b-ukhi9gkow9] {
        border-color: #18a54b;
    }

    .result-card.error[b-ukhi9gkow9], .result-card.warn[b-ukhi9gkow9] {
        border-color: #e43131;
    }

    .result-card.neutral[b-ukhi9gkow9] {
        border-color: #c8c8c8;
    }

    .result-card.busy[b-ukhi9gkow9] {
        opacity: .65;
        filter: saturate(.9);
        opacity: .85;
    }

    /* Result-icoon: robuust voor <i> én <svg> (FA kit) */
    .result-card .result-icon[b-ukhi9gkow9] {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.2rem; /* grootte van het icoon */
        line-height: 1;
        margin: .6rem 0;
    }

        /* Zorg dat child <i>/<svg> de grootte van de container erft */
        .result-card .result-icon i[b-ukhi9gkow9],
        .result-card .result-icon svg[b-ukhi9gkow9] {
            font-size: inherit;
            width: 1em;
            height: 1em;
        }

    .result-card input.timestamp[b-ukhi9gkow9] {
        text-align: center !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-variant-numeric: tabular-nums;
    }

    /* Kleur op basis van kaartstatus (werkt altijd, ook met SVG) */
    .result-card.ok .result-icon[b-ukhi9gkow9] {
        color: #18a54b;
    }
    /* groen ✔ */
    .result-card.error .result-icon[b-ukhi9gkow9] {
        color: #e43131;
    }
    /* rood ✖ */
    .result-card.warn .result-icon[b-ukhi9gkow9] {
        color: #2d98ff;
    }

    /* blauw */
    .result-card.info[b-ukhi9gkow9] {
        border-color: #2d98ff;
    }

        .result-card.info .result-icon[b-ukhi9gkow9] {
            color: #2d98ff;
        }


/* Teksten “croppen” zoals eerder */
.event-title[b-ukhi9gkow9] {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere; /* modern; mag ook binnen woorden afbreken */
    word-break: break-word; /* fallback */
}

.member-block[b-ukhi9gkow9] {
    margin: .25rem 0 .75rem;
    line-height: 1.25rem;
}

    .member-block > div[b-ukhi9gkow9] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .member-block .member-code[b-ukhi9gkow9] {
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: .5px;
        margin: .25rem 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

.member-dob[b-ukhi9gkow9] {
    font-weight: 800;
    margin-top: .25rem;
    white-space: nowrap;
}

.result-text[b-ukhi9gkow9] {
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    font-weight: 800;
    margin: .25rem 0 .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.signal-text[b-ukhi9gkow9] {
    text-align: center;
    font-weight: 800;
    margin: .25rem 0 .5rem;
    line-height: 1.2rem;
    /* multi-line clamp (max 3 regels) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* breek lange woorden/URLs netjes */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.btn-row[b-ukhi9gkow9] {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: .75rem;
    flex-wrap: wrap;
}

.primary[b-ukhi9gkow9], .secondary[b-ukhi9gkow9] {
    min-width: 180px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}

.primary[b-ukhi9gkow9] {
    background: #ffc423;
}

.secondary[b-ukhi9gkow9] {
    background: #efefef;
}

@media (max-width: 767px) {
    .layout-two-cols .scan-host[b-ukhi9gkow9] {
        grid-column: auto;
    }
}

/* Responsive tweaks (optioneel) */
@media (max-width: 540px) {
    .primary[b-ukhi9gkow9], .secondary[b-ukhi9gkow9] {
        min-width: 150px;
    }
}

@media (max-width: 420px) {
    .primary[b-ukhi9gkow9], .secondary[b-ukhi9gkow9] {
        min-width: 130px;
    }
}
/* _content/Respondit.WAL.WebTerminal/Components/Pages/FlowScanner.razor.rz.scp.css */
/* FlowScanner.razor.css */

.scan-host[b-6o10h8x6ji] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding-inline: 8px;
    min-width: 0;
}

.layout-two-cols .scan-host[b-6o10h8x6ji] {
    grid-column: 2;
    justify-self: center;
}

.scan-dialog[b-6o10h8x6ji] {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    overflow: hidden;
}

.result-card[b-6o10h8x6ji] {
    border: 6px solid #c8c8c8;
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}

    .result-card.neutral[b-6o10h8x6ji] {
        border-color: #c8c8c8;
    }

    .result-card.error[b-6o10h8x6ji] {
        border-color: #e43131;
    }

    .result-card.busy[b-6o10h8x6ji] {
        opacity: .65;
        filter: saturate(.9);
    }

.scanned-code[b-6o10h8x6ji] {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .5rem;
    word-break: break-word;
    color: #333;
}

.result-card .result-icon[b-6o10h8x6ji] {
    font-size: 3rem;
    color: #e43131;
    margin: .5rem 0;
}

.result-text[b-6o10h8x6ji] {
    font-size: 1.1rem;
    font-weight: 800;
    margin: .25rem 0 .5rem;
}

.result-card input.timestamp[b-6o10h8x6ji] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.btn-row[b-6o10h8x6ji] {
    display: flex;
    justify-content: center;
    margin-top: .75rem;
}

.primary[b-6o10h8x6ji] {
    min-width: 180px;
    height: 44px;
    border-radius: 10px;
    font-weight: 800;
    background: #ffc423;
    border: none;
    cursor: pointer;
}

.hint[b-6o10h8x6ji] {
    opacity: .7;
    font-style: italic;
}

@media (max-width: 767px) {
    .layout-two-cols .scan-host[b-6o10h8x6ji] {
        grid-column: auto;
    }
}
/* _content/Respondit.WAL.WebTerminal/Components/Pages/MemberCard.razor.rz.scp.css */
/* ============ MemberCard layout (clean breakpoints & overflow) ============ */

/* Grid staat naast het SideMenu en kan krimpen/groeien */
.layout-two-cols .membercard-grid[b-6c9b6ln4xa] {
    grid-column: 2;
    justify-self: center;
    width: 100%;
    min-width: 0;
    padding: 12px 16px 24px;
}

/* Donkere box-look */
.app-dark .form-section-box[b-6c9b6ln4xa] {
    background: var(--surface-2, rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.12));
    border-radius: 16px;
    padding: 16px;
}

/* ---- GRID: 3 → 2 → 1 kolom ---- */
.membercard-grid[b-6c9b6ln4xa] {
    display: grid;
    gap: 16px;
    align-items: stretch;
    margin-top: 12px;
    grid-template-columns: repeat(3, minmax(320px, 1fr)); /* groot: 3 kolommen */
}

/* Kaarten: geen overflow door vaste min-breedtes */
.membercard-grid .form-section-box[b-6c9b6ln4xa] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Detailsraster & typografie ---- */

/* Eén regel = label links | waarde rechts */
.member-grid[b-6c9b6ln4xa] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 12px;
}

    .member-grid > div[b-6c9b6ln4xa] {
        display: grid;
        grid-template-columns: minmax(140px, max-content) 1fr;
        align-items: baseline;
        column-gap: 10px;
    }

.field-label[b-6c9b6ln4xa] {
    color: rgba(255,255,255,.65);
    font-weight: 600;
    font-size: .95rem;
}

.field-value[b-6c9b6ln4xa] {
    color: #fff;
    font-weight: 600;
    font-size: .98rem;
    justify-self: end; /* rechts in de cel */
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---- Knoppenstack ---- */
.menu-buttons[b-6c9b6ln4xa] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}

    .menu-buttons .btn[b-6c9b6ln4xa],
    .menu-buttons [class*="btn"][b-6c9b6ln4xa] {
        float: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        gap: 8px;
    }

.btn.disabled[b-6c9b6ln4xa],
.btn:disabled[b-6c9b6ln4xa],
.disabled[b-6c9b6ln4xa] {
    opacity: .55;
    cursor: not-allowed;
}

/* ---- Titels centreren ---- */
.app-dark .form-section-box h1[b-6c9b6ln4xa],
.app-dark .form-section-box h2[b-6c9b6ln4xa],
.app-dark .form-section-box .menu-title-small[b-6c9b6ln4xa] {
    text-align: center;
}

.app-dark .form-section-box .menu-subtitle[b-6c9b6ln4xa] {
    text-align: center;
}

/* ≤1200px: 2 kolommen */
@media (max-width: 1230px) {
    .membercard-grid[b-6c9b6ln4xa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ≤720px: 1 kolom, gecentreerd, netjes meerekken */
@media (max-width: 720px) {
    /* niet langer in kolom 2 van layout-two-cols */
    .layout-two-cols .membercard-grid[b-6c9b6ln4xa] {
        grid-column: auto;
        justify-self: center;
    }

    .membercard-grid[b-6c9b6ln4xa] {
        grid-template-columns: 1fr; /* stapelen */
        justify-items: center; /* kolom centreren */
        margin-inline: auto; /* geheel centreren */
        padding-inline: 12px; /* veilige randen */
        width: clamp(320px, 96vw, 680px);
        max-width: none;
    }

        .membercard-grid .form-section-box[b-6c9b6ln4xa] {
            width: min(560px, 100%); /* kaart rekt mee tot rand */
            min-width: 0; /* geen harde min-breedte */
        }
}

/* ≤560px: label boven waarde voor leesbaarheid */
@media (max-width: 420px) {
    .member-grid > div[b-6c9b6ln4xa] {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .field-value[b-6c9b6ln4xa] {
        justify-self: start;
        text-align: left;
    }
}

/* _content/Respondit.WAL.WebTerminal/Components/Pages/Prepaid.razor.rz.scp.css */
.prepaid-host[b-j0h0ltmt62] {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

/* Zelfde centrering als EventScanner */
.layout-two-cols .prepaid-host[b-j0h0ltmt62] {
    grid-column: 2;
    justify-self: center;
}

/* Product-card net zo breed als scan-dialog */
.product-card[b-j0h0ltmt62] {
    width: 100%;
    max-width: 560px; /* zelfde breedte als .scan-dialog */
    margin: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    padding: 1.2rem;
    text-align: center;
}

/* Groter logo */
.logo-wrap[b-j0h0ltmt62] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    margin-bottom: 10px;
}

    .logo-wrap img[b-j0h0ltmt62] {
        max-height: 90px;
        max-width: 100%;
        object-fit: contain;
    }

/* Provider en product */
.line.provider[b-j0h0ltmt62] {
    color: #f37021;
    font-weight: 800;
    margin-top: 6px;
    font-size: 1.2rem;
}

.line.product[b-j0h0ltmt62] {
    color: #f39a21;
    font-weight: 800;
    margin-top: 2px;
    font-size: 1.1rem;
}

/* Bedrag */
.amount[b-j0h0ltmt62] {
    font-size: 2rem;
    font-weight: 900;
    margin: 12px 0;
}

/* Grotere vlag */
.flag-wrap[b-j0h0ltmt62] {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

    .flag-wrap img[b-j0h0ltmt62] {
        height: 36px;
        border-radius: 4px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
    }

.country[b-j0h0ltmt62] {
    color: #f39a21;
    font-weight: 800;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

/* Buttons */
.btn-row[b-j0h0ltmt62] {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.primary[b-j0h0ltmt62], .secondary[b-j0h0ltmt62] {
    min-width: 180px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}

.primary[b-j0h0ltmt62] {
    background: #ffc423;
}

.secondary[b-j0h0ltmt62] {
    background: #efefef;
}

/* Responsive shrink voor buttons */
@media (max-width: 540px) {
    .primary[b-j0h0ltmt62], .secondary[b-j0h0ltmt62] {
        min-width: 150px;
    }
}

@media (max-width: 420px) {
    .primary[b-j0h0ltmt62], .secondary[b-j0h0ltmt62] {
        min-width: 130px;
    }
}

.error[b-j0h0ltmt62] {
    color: #e43131;
    margin-top: 8px;
}

.empty[b-j0h0ltmt62] {
    opacity: .7;
    font-style: italic;
}


@media (max-width: 767px) {
    .layout-two-cols .prepaid-host[b-j0h0ltmt62] {
        grid-column: auto;
    }
}





.preview-backdrop[b-j0h0ltmt62] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55); /* iets donkerder */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000; /* hoger dan alles */
}

.preview-card[b-j0h0ltmt62] {
    max-height: 88vh;
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    box-sizing: border-box; /* breedte netjes */
    /* breedte komt via inline style: width:min(92vw, Npx) */
}

.preview-header[b-j0h0ltmt62] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

    .preview-header .actions[b-j0h0ltmt62] {
        display: flex;
        gap: 8px;
    }

.preview-body[b-j0h0ltmt62] {
    padding: 12px;
    overflow: auto; /* alleen dit deel scrolt */
    flex: 1; /* neemt resterende hoogte */
}

/* ticket */
.ticket-frame[b-j0h0ltmt62] {
    margin: 0 auto;
    border: 1px dashed #ddd;
    background: #fafafa;
    padding: 12px;
}

.ticket-css[b-j0h0ltmt62] {
    background: #fff;
    padding: 8px;
}

    .ticket-css[b-j0h0ltmt62], .ticket-css td[b-j0h0ltmt62] {
        font-family: "Lucida Console", monospace;
        font-size: 6.5pt;
        line-height: 115%;
    }

        .ticket-css table[b-j0h0ltmt62] {
            border-collapse: collapse;
        }

        .ticket-css img[b-j0h0ltmt62] {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

/* knoppen + loader */
.btn[b-j0h0ltmt62] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}

    .btn.primary[b-j0h0ltmt62] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .btn.ghost[b-j0h0ltmt62] {
        background: transparent;
        border: none;
        font-size: 18px;
        line-height: 1;
        padding: 6px 8px;
    }

.printing-toast[b-j0h0ltmt62] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(1px);
    z-index: 6000;
}

.printing-card[b-j0h0ltmt62] {
    background: #111;
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.spinner[b-j0h0ltmt62] {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 2px solid #fff;
    border-right-color: transparent;
    animation: spin-b-j0h0ltmt62 .8s linear infinite;
}

@keyframes spin-b-j0h0ltmt62 {
    to {
        transform: rotate(360deg);
    }
}
/* _content/Respondit.WAL.WebTerminal/Components/Pages/PrinterTest.razor.rz.scp.css */
.printertest-host[b-kby4kt8jdv] {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 12px;
}

.layout-two-cols .printertest-host[b-kby4kt8jdv] {
    grid-column: 2;
    justify-self: center;
    max-width: 760px;
    width: 100%;
}

.card[b-kby4kt8jdv] {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

    .card .title[b-kby4kt8jdv] {
        font-weight: 800;
        margin-bottom: 8px;
    }

.row[b-kby4kt8jdv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn[b-kby4kt8jdv] {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}

    .btn.primary[b-kby4kt8jdv] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

.result[b-kby4kt8jdv] {
    margin-top: 8px;
}

.error[b-kby4kt8jdv] {
    color: #e43131;
}

.hint[b-kby4kt8jdv] {
    opacity: .7;
    font-size: .9rem;
    margin-top: 6px;
}

pre.json[b-kby4kt8jdv] {
    max-height: 180px;
    overflow: auto;
    background: #f7f7f8;
    border: 1px solid #eee;
    padding: 8px;
    border-radius: 8px;
}