/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login[b-3skx144jvi] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
    width: 600px;
    max-width: 100%;
}

.main[b-3skx144jvi] {
    display: flex;
    flex-direction: column;
}

[b-3skx144jvi] .btn-primary::after {
    content: '';
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

[b-3skx144jvi] .btn-primary {
    background: var(--accent-color);
    padding: 10px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    width: 100%;
}

    [b-3skx144jvi] .btn-primary:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
    }

.form-floating[b-3skx144jvi] {
    display: flex;
    flex-direction: column;
}

[b-3skx144jvi] input::placeholder {
    text-align: left !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

.form-label[b-3skx144jvi] {
    font-size: var(--fs-sm);
    padding: 0 0 5px 0;
}

h1[b-3skx144jvi] {
    font-size: var(--fs-xl);
    margin: 0px 0 10px 0;
}

.header h1[b-3skx144jvi] {
    margin: 0;
}

aside[b-3skx144jvi] {
    display: grid;
    margin: -1.25rem -1.25rem -1rem 0;
    position: relative;
    width: 200px;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
}

img[b-3skx144jvi] {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


aside[b-3skx144jvi]::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    width: 70px;
    background: linear-gradient(90deg,white 0%, transparent 100%);
}

[b-3skx144jvi] .text-danger, [b-3skx144jvi] .alert {
    font-size: var(--fs-sm);
    border-radius: var(--border-radius);
    background: rgba(255, 0, 0, 0.1);
    padding: 10px;
    margin: 0 0 10px 0;
}

@media (max-width: 640px) {
    aside[b-3skx144jvi] {
        width: 0;
        display: none;
    }

    .login[b-3skx144jvi] {
        grid-gap: 0;
    }
}
/* /Components/Article/ArticlePosition.razor.rz.scp.css */
/* Styles for ArticlePosition component */
.position-list[b-yg2b7rtu5a] {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: start;
}
.position-list dt[b-yg2b7rtu5a] {
    /* font-weight: 600; */
    margin: 0;
    /* padding: 4px 0; */
    color: var(--muted, #444);
}
.position-list dd[b-yg2b7rtu5a] {
    margin: 0;
    /* padding: 4px 0; */
    /* color: var(--text, #111); */
}
.position-list dt[b-yg2b7rtu5a],
.position-list dd[b-yg2b7rtu5a] {
    padding-left: 0;
}

.warning[b-yg2b7rtu5a] {
    display: block;
    margin-top: 8px;
    color: var(--warning, #b45f06);
    font-size: var(--fs-sm);
}

span[b-yg2b7rtu5a] {
    color: var(--muted, #666);
}
/* /Components/Dashboard/GlobalSearch.razor.rz.scp.css */
.search[b-k6mhdr4a9a] {
    position: relative;
    display: grid;
    animation: show-search-b-k6mhdr4a9a 1s forwards;
    opacity: 0;
    animation-delay: 0.2s;
}

.search-backdrop[b-k6mhdr4a9a] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    height: 100vh;
    width: 100vw;
}

@keyframes show-search-b-k6mhdr4a9a {
    from {
        margin: 0 10px;
        opacity: 0;
    }

    to {
        margin: 0;
        opacity: 1;
    }
}

[b-k6mhdr4a9a] input {
    background: white;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.06);
    outline: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
    font-weight: 600;
    padding: 0.7rem 1rem !important;
    font-size: var(--fs-md);
}

    input:hover[b-k6mhdr4a9a] {
        box-shadow: var(--box-shadow-hover);
    }

    input:focus[b-k6mhdr4a9a] {
        color: black;
        border-color: rgba(59,130,246,0.8); 
        box-shadow: 0 6px 18px rgba(59,130,246,0.06);
    }

[b-k6mhdr4a9a] i {
    font-size: 1.2rem;
}

.search-input[b-k6mhdr4a9a] {
    position: relative;
}

.searchicon[b-k6mhdr4a9a] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    color: rgba(102,102,102,0.9);
}

.searchicon-button[b-k6mhdr4a9a] {
    pointer-events: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    width: 1.8rem;
    height: 1.8rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.searchicon-button:hover[b-k6mhdr4a9a] {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

@media (max-width: 640px) {
    .search[b-k6mhdr4a9a] { max-width: 100%; }
}

/* Results container open/close animation */
.results[b-k6mhdr4a9a] {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height .42s cubic-bezier(.2,.8,.2,1), opacity .16s ease;
    opacity: 0;
}

.results.open[b-k6mhdr4a9a] {
    max-height: 100dvh;
    opacity: 1;
}

.results-list[b-k6mhdr4a9a] {
    max-height: 65dvh;
    overflow-y: auto;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--border-radius);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.result-group[b-k6mhdr4a9a] {
    padding: 0.35rem 0;
}

.result-group + .result-group[b-k6mhdr4a9a] {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.result-group-header[b-k6mhdr4a9a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem 0.35rem 0.9rem;
    color: #334155;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.result-group-count[b-k6mhdr4a9a] {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.1rem 0.4rem;
}

[b-k6mhdr4a9a] .result-group-list {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0.2rem 0.25rem;
}

[b-k6mhdr4a9a] .result-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--fs-sm);
    border: 1px solid transparent;
}

[b-k6mhdr4a9a] .result-item.clickable {
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

[b-k6mhdr4a9a] .result-item.clickable:hover {
    background-color: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    transform: translateX(1px);
}

[b-k6mhdr4a9a] .result-item.empty {
    justify-content: center;
    color: #7a7a7a;
    font-size: var(--fs-sm);
    padding: 0.9rem;
}

[b-k6mhdr4a9a] .result-icon {
    margin-right: 0.6rem;
    color: #64748b;
    width: 1.2rem;
    text-align: center;
}

[b-k6mhdr4a9a] .result-content {
    flex: 1;
}

[b-k6mhdr4a9a] .result-name {
    color: #0f172a;
    font-weight: 600;
}

[b-k6mhdr4a9a] .result-load-more {
    font-size: var(--fs-sm);
    color: #475569;
    font-style: italic;
    font-weight: 600;
    padding: 0.1rem 0.9rem 0.35rem 1.2rem;
    cursor: pointer;
    background: transparent;
    border: none;
}

[b-k6mhdr4a9a] .result-load-more:hover {
    color: #0f172a;
}
/* /Components/Dashboard/Tile.razor.rz.scp.css */
.linkwrapper[b-nxm5x3ns5l] {
    opacity: 0;
    animation: ShowTile-b-nxm5x3ns5l 0.3s ease-in-out forwards;
}

.linkwrapper.disabled[b-nxm5x3ns5l] {
    pointer-events: none;
    filter: saturate(0.5) opacity(0.4);
    cursor: default;
}

.tile[b-nxm5x3ns5l] {
    aspect-ratio: 1/1;
    width: 100%;
}

[b-nxm5x3ns5l] i {
    font-size: 4rem;
    margin: 0;
    color: white;
    transition: all 0.3s;
    /* text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); */
}

.text[b-nxm5x3ns5l] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    padding: 0.3rem;
    color: white;
    margin: 0 0 0.2rem 0;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-size: var(--fs-lg);
}

    .text p[b-nxm5x3ns5l] {
        color: white;
        margin: 0 0 0.2rem 0;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        font-size: var(--fs-base);
    }

.icon[b-nxm5x3ns5l] {
    background: var(--tile-color, var(--primary-color));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tile-badge[b-nxm5x3ns5l] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-color);
    color: white;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

    .icon[b-nxm5x3ns5l]::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: 0;
    }

[b-nxm5x3ns5l] a {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    aspect-ratio: 1 / 1;
    background: white;
    overflow: auto;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    user-select: none;
}
    [b-nxm5x3ns5l] a:hover {
        box-shadow: var(--box-shadow-hover);
        transform: scale(1.03);
    }

    [b-nxm5x3ns5l] a:hover ::deep i {
        transform: scale(1.1, 1.1)
    }

    @keyframes ShowTile-b-nxm5x3ns5l {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }    
    }
/* /Components/Feedback/CreateReportDialog.razor.rz.scp.css */
.report-create[b-8pma2sx1pm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row[b-8pma2sx1pm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label[b-8pma2sx1pm] {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.type-buttons[b-8pma2sx1pm],
.visibility-buttons[b-8pma2sx1pm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.type-btn[b-8pma2sx1pm] {
    flex: 1;
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    background: #fff;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.type-btn i[b-8pma2sx1pm] {
    font-size: 1.2rem;
}

.type-btn:hover[b-8pma2sx1pm] {
    background: rgba(0, 0, 0, 0.03);
}

.type-btn.active[b-8pma2sx1pm] {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
    color: var(--primary-color, #3b82f6);
}

.visibility-btn[b-8pma2sx1pm] {
    flex: 1;
    min-width: 12rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.visibility-btn i[b-8pma2sx1pm] {
    font-size: 1.1rem;
    color: #64748b;
}

.visibility-btn:hover[b-8pma2sx1pm] {
    background: rgba(0, 0, 0, 0.03);
}

.visibility-btn.active[b-8pma2sx1pm] {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
}

.visibility-btn.active i[b-8pma2sx1pm] {
    color: var(--primary-color, #3b82f6);
}

.visibility-text[b-8pma2sx1pm] {
    display: flex;
    flex-direction: column;
}

.visibility-title[b-8pma2sx1pm] {
    font-weight: 600;
}

.visibility-hint[b-8pma2sx1pm] {
    font-size: var(--fs-xs);
    color: #64748b;
}

.terms-row[b-8pma2sx1pm] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.4rem;
    cursor: pointer;
}

.terms-checkbox[b-8pma2sx1pm] {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-color, #3b82f6);
    cursor: pointer;
    flex-shrink: 0;
}

.terms-text[b-8pma2sx1pm] {
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.terms-text a[b-8pma2sx1pm] {
    color: var(--primary-color, #3b82f6);
    text-decoration: underline;
}

.terms-text a:hover[b-8pma2sx1pm] {
    text-decoration: none;
}
/* /Components/Feedback/ReportDetailDialog.razor.rz.scp.css */
.report-detail[b-brf05hsa8y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-meta[b-brf05hsa8y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.badge[b-brf05hsa8y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #e2e8f0;
    color: #334155;
}

.badge.type-bug[b-brf05hsa8y] { background: #fee2e2; color: #b91c1c; }
.badge.type-feature[b-brf05hsa8y] { background: #dbeafe; color: #1d4ed8; }
.badge.type-feedback[b-brf05hsa8y] { background: #ede9fe; color: #6d28d9; }

.badge.status-open[b-brf05hsa8y] { background: #e2e8f0; color: #475569; }
.badge.status-planned[b-brf05hsa8y] { background: #dbeafe; color: #1d4ed8; }
.badge.status-inprogress[b-brf05hsa8y] { background: #fef3c7; color: #b45309; }
.badge.status-needsinfo[b-brf05hsa8y] { background: #ede9fe; color: #6d28d9; }
.badge.status-done[b-brf05hsa8y],
.badge.status-released[b-brf05hsa8y] { background: #dcfce7; color: #15803d; }
.badge.status-rejected[b-brf05hsa8y],
.badge.status-duplicate[b-brf05hsa8y] { background: #fee2e2; color: #b91c1c; }

.badge.visibility[b-brf05hsa8y] { background: #f1f5f9; color: #0f172a; }

.report-description[b-brf05hsa8y] {
    white-space: pre-line;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.vote-row[b-brf05hsa8y] {
    margin-top: 0.75rem;
}

.comment-list[b-brf05hsa8y] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
}

.comment-item[b-brf05hsa8y] {
    padding: 0.6rem 0.8rem;
    background: #f8fafc;
    border-radius: 0.4rem;
}

.comment-head[b-brf05hsa8y] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.comment-author[b-brf05hsa8y] {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.comment-date[b-brf05hsa8y] {
    font-size: var(--fs-xs);
    color: #94a3b8;
}

.comment-content[b-brf05hsa8y] {
    margin: 0;
    white-space: pre-line;
    font-size: var(--fs-sm);
}

.comment-compose[b-brf05hsa8y] {
    margin-top: 1rem;
}
/* /Components/Layout/Breadcrumbs.razor.rz.scp.css */
/* ── Shared base ─────────────────────────────────────────────── */
.breadcrumbs[b-d7h1u4r34w] {
    font-size: var(--fs-sm);
    width: 100%;
}

ol[b-d7h1u4r34w] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

[b-d7h1u4r34w] .crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 4px;
    text-decoration: none;
    color: #1f2d3d;
    border-radius: 6px;
    transition: background 0.15s;
    min-width: 0;
    overflow: hidden;
}

[b-d7h1u4r34w] a.crumb:hover {
    background: rgba(13, 108, 172, 0.08);
}

[b-d7h1u4r34w] .crumb-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--crumb-color, var(--primary-color));
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.7rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

[b-d7h1u4r34w] .crumb-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1f2d3d;
    min-width: 0;
    flex: 1 1 0;
}

li.current[b-d7h1u4r34w]  .crumb-text {
    font-weight: 600;
}

.crumb-sep[b-d7h1u4r34w] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a4b3;
    font-size: 0.65rem;
    flex-shrink: 0;
}


/* ── Desktop: vertical column ────────────────────────────────── */
.breadcrumbs:not(.mobile)[b-d7h1u4r34w] {
    margin-left: 10px;
}

.breadcrumbs:not(.mobile) ol[b-d7h1u4r34w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breadcrumbs:not(.mobile) li[b-d7h1u4r34w] {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* Separator sits in the icon column so text always aligns */
.breadcrumbs:not(.mobile) .crumb-sep[b-d7h1u4r34w]  {
    display: none;
    width: 22px; /* same width as crumb-icon so text lines up */
    margin-right: 8px;
}

.breadcrumbs:not(.mobile)[b-d7h1u4r34w]  .crumb {
    flex: 1;
    min-width: 0;
    border-radius: 6px;
}


/* ── Mobile: horizontal inline row ──────────────────────────── */
.breadcrumbs.mobile[b-d7h1u4r34w] {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.breadcrumbs.mobile[b-d7h1u4r34w]::-webkit-scrollbar {
    display: none;
}

.breadcrumbs.mobile ol[b-d7h1u4r34w] {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0;
    padding: 4px 0;
}

.breadcrumbs.mobile li[b-d7h1u4r34w] {
    display: inline-flex;
    width: auto;
    max-width: 100px;
    flex-shrink: 1;
}

.breadcrumbs.mobile li.current[b-d7h1u4r34w] {
    max-width: 120px;
}

.breadcrumbs.mobile li.root[b-d7h1u4r34w] {
    max-width: none;
    flex-shrink: 0;
}

.breadcrumbs.mobile .crumb-sep[b-d7h1u4r34w] {
    width: 16px;
    margin-right: 0;
}

.breadcrumbs.mobile[b-d7h1u4r34w]  .crumb {
    flex: none;
    width: 100%;
    border-radius: 999px;
    padding: 3px 8px 3px 4px;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.app[b-x09h2a6bgr] {
    display: grid;
    grid-template-rows: 1fr;
    overflow: auto;
    height: 100%;
    width: 100%;
    position: relative;
}

.main[b-x09h2a6bgr] {
    padding: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.content-wrapper[b-x09h2a6bgr] {
    animation: show-main-b-x09h2a6bgr 1s forwards;
    max-width: 90%;
}

@keyframes show-main-b-x09h2a6bgr{
    0% {
        transform: perspective(100px) rotateX(-5deg);
        opacity: 0;
    }

    70% {
        transform: perspective(100px) rotateX(1deg);
        opacity: 1;
    }

    100% {
        transform: perspective(100px) rotateX(0deg);
    }
}

.header[b-x09h2a6bgr] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 0 25px;
}

img[b-x09h2a6bgr] {
    height: 40px;
    background: white;
    border-radius: var(--border-radius);
    padding: 5px 8px 10px 8px;
    box-shadow: var(--box-shadow);
    opacity: 0;
    animation: show-icon-b-x09h2a6bgr 1s forwards;
    opacity: 0;
    animation-delay: 1s;
}

@keyframes show-icon-b-x09h2a6bgr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.main-header-left[b-x09h2a6bgr] {
    z-index: 1;
}

.main-header-center[b-x09h2a6bgr] {
    animation: show-title-b-x09h2a6bgr 1s forwards;
    opacity: 0;
    animation-delay: 1.5s;
    z-index: -1;
}

@keyframes show-title-b-x09h2a6bgr {
    from {
        opacity: 0;
        margin-left: -20px;
    }

    to {
        opacity: 1;
        margin-left: 0px;
    }
}

.footer[b-x09h2a6bgr] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-sm);
}

[b-x09h2a6bgr] a {
    animation: show-footer-item-b-x09h2a6bgr 0.5s forwards;
    opacity: 0;
    cursor: pointer;
    position: relative;
}

    [b-x09h2a6bgr] a:after {
        content: '';
        position: absolute;
        width: 0%;
        height: 2px;
        background: var(--accent-color);
        left: 0;
        bottom: -2px;
        transition: width 0.25s ease;
    }

    [b-x09h2a6bgr] a:hover:after {
        width: 100%;
    }

@keyframes show-footer-item-b-x09h2a6bgr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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


@media (max-width: 640px) {
    .main[b-x09h2a6bgr] {
        align-items: start;
        padding-top: 20px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app[b-f2i9nxy1q5] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.app-header[b-f2i9nxy1q5] {
    position: relative;
    z-index: 300;
    flex-shrink: 0;
}

.app-body[b-f2i9nxy1q5] {
    position: relative;
    overflow: hidden;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    height: 100%;
}

.content-area[b-f2i9nxy1q5] {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 0;
    /* Always offset by the collapsed sidebar width so nothing shifts on hover. */
    margin-left: 64px;
    transition: margin-left 0.25s ease;
}

/* Pinned: sidebar is in-flow, no margin needed; no transition on the margin. */
.app-body.pinned .content-area[b-f2i9nxy1q5] {
    margin-left: 0;
    transition: none;
}

.main[b-f2i9nxy1q5] {
    --main-padding: 15px;
    padding: var(--main-padding);
    overflow: auto;
    position: relative;
}

@media (max-width: 1024px) {
    .content-area[b-f2i9nxy1q5] {
        margin-left: 0;
        transition: none;
    }
}

@media (max-width: 640px) {
    .main[b-f2i9nxy1q5] {
        --main-padding: 10px;
    }
    .desktop-only[b-f2i9nxy1q5] {
        display: none;
    }
}

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

    #blazor-error-ui .dismiss[b-f2i9nxy1q5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PageHeader.razor.rz.scp.css */
.icon[b-5fgi481xri]  i {
    font-size: 1.4rem;
    margin: 0;
    color: white;
    transition: all 0.3s;
}

h2[b-5fgi481xri] {
    font-size: var(--fs-xl);
    padding: 0 0 0 15px;
    margin: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text[b-5fgi481xri] {
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    margin-right: 2rem;
    min-width: 0;
    overflow: hidden;
}

.icon[b-5fgi481xri] {
    background: var(--primary-color);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1;
    min-width: 3.4em;
}

    .icon[b-5fgi481xri]::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: 0;
    }

.header-wrapper[b-5fgi481xri] {
    z-index: 10;
    margin-bottom: 12px;
}
.header-tile[b-5fgi481xri] {
    margin: 0;
    display: grid;
    border: none;
    border-radius: var(--border-radius);
    background: white;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    user-select: none;
    padding: 0 0px;
    grid-template-columns: auto 1fr auto;
    animation: show-title-b-5fgi481xri 1s forwards;
    /* Translucent so the blurred content behind the header shows through;
       the title rides the most opaque (left) part for legibility. */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 55%);
    /* Frost only the content scrolling behind the header tile itself. */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    min-height: 4.2em;
    /* padding: 10px 15px; */
    padding-right: calc(1 * var(--main-padding, 0px));
    margin-right: calc(-1 * var(--main-padding, 0px));
}
.additional-content[b-5fgi481xri] {
    width: 100%;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

@keyframes show-title-b-5fgi481xri {
    from {
        opacity: 0;
        /* transform: translateX(-10px); */
    }
    to {
        opacity: 1;
        /* transform: translateX(0); */
    }
}

.child-content[b-5fgi481xri] {
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.child-content[b-5fgi481xri]  button {
    color: var(--primary-color);
}

@media (max-width: 640px) {
    .header-tile[b-5fgi481xri] {
        margin: calc(var(--main-padding) * -1);
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: var(--box-shadow);
        /* Stickiness is handled by the parent .page-header (PageLayout).
           Translucent vertical fade lets the frosted backdrop show through. */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.45) 100%);
        min-height: 4em;
        padding-right: max(var(--main-padding, 0px), 10px);
    }
    .icon[b-5fgi481xri] {
        border-radius: 0;
    }
    .additional-content[b-5fgi481xri] {
        padding-inline: 15px;
        padding-bottom: 12px;
        background-color: white;
    }
}

[b-5fgi481xri] .mobile-header-content {
    transition: transform 0.3s ease, margin-top 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    transform-origin: top;
}
[b-5fgi481xri] .mobile-header-content:not(.open) {
    transform: scaleY(0);
    margin: 0px;
    padding: 0px;
    max-height: 0;
}
[b-5fgi481xri] .mobile-header-content.open {
    margin-top: 10px;
    max-height: 100vh;
}
[b-5fgi481xri] .mobile-header-content > * {
    transition: opacity 0.3s linear;
    opacity: 1;
}
[b-5fgi481xri] .mobile-header-content:not(.open) > * {
    opacity: 0;
}

[b-5fgi481xri] .vertical-dots-menu > * {
    display: flex;
    width: 100%;
    justify-content: left;
    color: var(--primary-color);
    min-height: 2.5em;
}
/* /Components/Layout/PageLayout.razor.rz.scp.css */
.page[b-jpcxb37h9k] {
    display: grid;
    grid-template-rows: auto 1fr;
    /* Grow with content instead of capping at the viewport, so the sticky
       page header below has a containing block spanning the full scroll. */
    min-height: 100%;
    width: 100%;
    /* Height of the pinned header; in-content sticky elements offset by this. */
    --sticky-header-height: calc(4.2em + 12px);
}

.page-header[b-jpcxb37h9k] {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Transparent so it doesn't occlude the content the tile's backdrop blurs. */
    background: transparent;
}

/* Background covering the full header area (and bleeding over the scroll
   container's top + side padding), fading from the page background at the top to
   transparent at the bottom. Masks scrolled content around the pinned header. */
.page-header[b-jpcxb37h9k]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(var(--main-padding, 15px) * -1) calc(var(--main-padding, 15px) * -1) 0;
    background: linear-gradient(to bottom, #e8f0f6 0%, #e8f0f6 25%, rgba(232, 240, 246, 0) 100%);
}

.page-content[b-jpcxb37h9k] {
    height: 100%;
    max-height: 100%;
    overflow: visible;
    max-width: calc(100vw - var(--main-padding) * 2);
}
.page-content:not(:has( > .view))
.page-content:not(:has( > .dashboard))[b-jpcxb37h9k] {
    background: linear-gradient(180deg,rgb(255, 255, 255) 0%, rgba(91, 154, 186, 0) 50%);
    border-radius: 5px;
    padding: 15px;
}

/* A split page fills exactly the viewport instead of growing: the page stops being
   the scroller (min-height:0 + a fixed 100% height) and the content row is allowed
   to shrink below its content (minmax(0,1fr)), so the split panes — not the page —
   absorb the overflow and scroll. On wide screens the two side-by-side panes scroll
   independently; on mobile/tablet the snapped pane is the vertical scroller, letting
   the primary table fill the screen. Non-split pages keep the growing page. */
.page:has(> .page-content > .view)[b-jpcxb37h9k] {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
}
.page:has(> .page-content > .view) > .page-content[b-jpcxb37h9k] {
    min-height: 0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xuobwbr9yc],
.components-reconnect-repeated-attempt-visible[b-xuobwbr9yc],
.components-reconnect-failed-visible[b-xuobwbr9yc],
.components-pause-visible[b-xuobwbr9yc],
.components-resume-failed-visible[b-xuobwbr9yc],
.components-rejoining-animation[b-xuobwbr9yc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-retrying[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-failed[b-xuobwbr9yc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xuobwbr9yc] {
    display: block;
}


#components-reconnect-modal[b-xuobwbr9yc] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xuobwbr9yc 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xuobwbr9yc 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xuobwbr9yc 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xuobwbr9yc]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xuobwbr9yc 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xuobwbr9yc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xuobwbr9yc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xuobwbr9yc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xuobwbr9yc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xuobwbr9yc] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xuobwbr9yc] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xuobwbr9yc] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xuobwbr9yc] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xuobwbr9yc] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xuobwbr9yc] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xuobwbr9yc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xuobwbr9yc] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xuobwbr9yc {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* ===== Desktop sidebar ===== */
.sidebar[b-acqmnk7wq6] {
    /* one homogeneous modern gradient */
    background:
        linear-gradient(165deg, #f4f8fc 0%, #ffffff 48%, #eef5fb 100%);

    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    flex-shrink: 0;

    isolation: isolate;
    box-shadow: var(--box-shadow);
}
.sidebar.collapsed[b-acqmnk7wq6] {
    width: 64px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sidebar.expanded[b-acqmnk7wq6] {
    width: 240px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
}

/* Pinned: join the flex row so the content-area shifts right. */
.sidebar.pinned[b-acqmnk7wq6] {
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sidebar-inner[b-acqmnk7wq6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 240px;
    overflow: hidden;
}

.sidebar-toggle[b-acqmnk7wq6] {
    position: absolute;
    right: 5px;
    top: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle:hover[b-acqmnk7wq6] {
    background: rgba(13, 108, 172, 0.1);
    color: var(--accent-color);
}

/* --- Breadcrumbs / top area in sidebar --- */
.sidebar-breadcrumbs[b-acqmnk7wq6] {
    padding: 6px 44px 6px 6px; /* reserve room for the absolutely-positioned toggle */
    border-bottom: 1px solid #e5eaf0;
    position: relative;   /* anchor for the absolute-positioned toggle */
    min-height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

[b-acqmnk7wq6] .sidebar-breadcrumbs .breadcrumbs {
    flex: 1;
    min-width: 0;
}

/* --- Nav --- */
[b-acqmnk7wq6] .sidebar-nav {
    /* flex: 1;
    min-height: 0; */
    padding: 8px 6px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-acqmnk7wq6] .nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

/* Group label row: fixed height so icons never move.
   In collapsed state the text/line shrink to a centered short line.
   The row keeps its height at all times. */
[b-acqmnk7wq6] .nav-group-label {
    position: relative;
    height: 18px;           /* fixed — never changes */
    margin: 4px 8px 3px 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* The horizontal divider line is always present, centered vertically.
   Collapsed: short line centered in the 64px column.
   Expanded: full-width line. */
[b-acqmnk7wq6] .label-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 1px;
    background: #e5eaf0;
    /* When collapsed, shrink to a small centered segment */
    transition: left 0.25s ease, right 0.25s ease;
}

.sidebar.collapsed[b-acqmnk7wq6]  .label-line {
    /* Center a ~24px line over the icon column (center ≈ 26px from sidebar left).
       nav-group-label has 8px left margin, so icon center = 18px within label.
       sidebar-inner width = 240px, label width = 224px → right = 224-(18+12) = 194px */
    left: 6px;
    max-width: 24px;
}

/* Label text sits on top of the line (white padding creates the gap).
   Collapsed: opacity → 0 and max-width → 0 so the line fills the space.
   Expanded: fades + slides in from the left. */
[b-acqmnk7wq6] .label-text {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: #98a4b3;
    letter-spacing: 0.06em;
    white-space: nowrap;
    position: relative;         /* above the line */
    z-index: 1;
    background: white;          /* punch out the line behind the text */
    padding-right: 6px;
    max-width: 200px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.2s ease, max-width 0.25s ease;
}

.sidebar.collapsed[b-acqmnk7wq6]  .label-text {
    opacity: 0;
    max-width: 0;
    padding-right: 0;
}

/* --- Nav item --- */
[b-acqmnk7wq6] .nav-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    text-decoration: none;
    color: #1f2d3d;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    overflow: hidden;
    position: relative;
}

[b-acqmnk7wq6] .nav-item:hover {
    background: rgba(13, 108, 172, 0.06);
}

[b-acqmnk7wq6] .nav-item.active {
    background: linear-gradient(90deg, rgba(13, 108, 172, 0.13) 0%, rgba(13, 108, 172, 0.03) 100%);
    color: var(--primary-color);
    font-weight: 600;
}

[b-acqmnk7wq6] .nav-item.active .nav-icon {
    background: color-mix(in srgb, var(--tile-color, var(--primary-color)) 30%, white);
    background: white;
    color: var(--tile-color, var(--primary-color));
    box-shadow: inset 0 0 0 2px var(--tile-color, var(--primary-color)), inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

[b-acqmnk7wq6] .nav-item.active .nav-icon i {
    color: var(--tile-color, var(--primary-color));
}

[b-acqmnk7wq6] .nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

[b-acqmnk7wq6] .nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tile-color, var(--primary-color));
    color: white;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

[b-acqmnk7wq6] .nav-icon::before {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

[b-acqmnk7wq6] .nav-icon i {
    font-size: 1rem;
    color: white;
    z-index: 1;
    transition: color 0.2s ease;
}
    [b-acqmnk7wq6] .nav-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 10px;
        height: 10px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e34b4b;
        color: white;
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        pointer-events: none;
    }
[b-acqmnk7wq6] .nav-badge.new {
    background: var(--accent-color);
}

[b-acqmnk7wq6] .nav-icon.profile {
    background: var(--accent-color);
    color: white;
    font-weight: 700;
    font-size: var(--fs-sm);
}

[b-acqmnk7wq6] .nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    transition: opacity 0.15s ease;
}

.profile-name[b-acqmnk7wq6] {
    font-weight: 600;
    color: #1f2d3d;
}

.profile-role[b-acqmnk7wq6] {
    font-size: var(--fs-xs);
    color: #6b7785;
}

/* Hide texts when collapsed but keep icons (and label space) intact */
.sidebar.collapsed .nav-text[b-acqmnk7wq6] {
    opacity: 0;
    pointer-events: none;
}

/* Breadcrumb label fades in/out like the other sidebar texts (.nav-text). */
.sidebar[b-acqmnk7wq6]  .crumb-text {
    opacity: 1;
    transition: opacity 0.15s ease;
}

.sidebar.collapsed[b-acqmnk7wq6]  .crumb-text {
    opacity: 0;
    pointer-events: none;
}

/* Collapsed: toggle button is already absolute-positioned, nothing else to override */

.sidebar-toggle[b-acqmnk7wq6] {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar.collapsed .sidebar-toggle[b-acqmnk7wq6] {
    opacity: 0;
    pointer-events: none;
}

.sidebar-bottom[b-acqmnk7wq6] {
    border-top: 1px solid #e5eaf0;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(90deg, #eef3fa 0%, #f7f9fc 100%);
}

/* ===== Mobile ===== */
.sidebar.mobile[b-acqmnk7wq6] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 95%;
    max-width: 480px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    display: grid;
    /* minmax(0, 1fr): let the nav track shrink below its content so the ScrollShadow
       inside it actually overflows and scrolls (a plain 1fr keeps the min content size). */
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    touch-action: pan-y;
    background: linear-gradient(175deg, #f0f5fb 0%, #ffffff 55%, #f7f9fc 100%);
}
.sidebar.mobile.tablet[b-acqmnk7wq6] {
    grid-template-rows: auto minmax(0, 1fr) auto;
}
    
/* The ScrollShadow's inner .scroll-shadow is the scroll container now; this is just its
   content. It must NOT also be a scroll container — an overflow:auto element with no
   overflow of its own + overscroll-behavior:contain swallows the scroll instead of letting
   it chain up to .scroll-shadow, which is why the nav appeared unscrollable. */
[b-acqmnk7wq6] .mobile-nav-content {
    touch-action: pan-y;
}

/* Tablet: sidebar starts below the app header (measured via --app-header-h).
   Fills 2/3 of viewport width. */
.sidebar.mobile.tablet[b-acqmnk7wq6] {
    position: fixed;
    top: var(--app-header-h, 0px);
    left: 0;
    bottom: 0;
    right: auto;
    width: 66.6667%;
    height: auto;
}

.mobile-overlay.tablet[b-acqmnk7wq6] {
    position: fixed;
    inset: 0;
}

.sidebar.mobile.open[b-acqmnk7wq6] {
    transform: translateX(0);
}

.mobile-overlay[b-acqmnk7wq6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 150;
}

.mobile-overlay.open[b-acqmnk7wq6] {
    opacity: 1;
    pointer-events: auto;
}

/* Breadcrumbs row: fixed (sticky) at top of mobile menu */
.mobile-breadcrumbs[b-acqmnk7wq6] {
    background: #f5f8fb;
    border-bottom: 1px solid #e5eaf0;
    padding: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.mobile-close-btn[b-acqmnk7wq6] {
    position: absolute;
    right: 5px;
    top: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    z-index: 6;
}

.mobile-close-btn:hover[b-acqmnk7wq6] {
    background: rgba(13, 108, 172, 0.1);
    color: var(--accent-color);
}

[b-acqmnk7wq6] .mobile-nav-content {
    padding: 16px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-group .nav-group-label[b-acqmnk7wq6] {
    border-bottom: 1px solid #e5eaf0;
    margin: 4px 0 8px 0;
    height: 24px;
    padding: 0 0 4px 4px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #98a4b3;
}

.mobile-group ul.tiles[b-acqmnk7wq6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-group ul.tiles li[b-acqmnk7wq6] {
    display: contents;
}

/* Active tile: white background, accent icon color, inset shadow */
.mobile-group[b-acqmnk7wq6]  a.button.active {
    background: white;
}

.mobile-group[b-acqmnk7wq6]  a.button.active .icon {
    background: white !important;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 2px var(--tile-color, var(--primary-color));
}

.mobile-group[b-acqmnk7wq6]  a.button.active .icon i {
    color: var(--tile-color, var(--primary-color));
}

.mobile-group[b-acqmnk7wq6]  a.button .icon i {
    font-size: 2.8em;
}
    .mobile-group[b-acqmnk7wq6]  .tile-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--accent-color);
        color: white;
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        pointer-events: none;
    }

.mobile-group[b-acqmnk7wq6]  a.button.active .text p {
    color: var(--tile-color, var(--primary-color));
    text-shadow: none;
}

/* Footer: fixed row at bottom, no surrounding box.
   Profile takes remaining space as a card; settings/help are icon-only. */
.mobile-bottom[b-acqmnk7wq6] {
    border-top: 1px solid #e5eaf0;
    background: linear-gradient(90deg, #f0f5fb 0%, #ffffff 100%);
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 6;
}

[b-acqmnk7wq6] .bottom-item {
    text-decoration: none;
    color: #1f2d3d;
    border-radius: var(--border-radius);
    transition: background 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-acqmnk7wq6] .bottom-item:hover {
    background: rgba(13, 108, 172, 0.06);
}

[b-acqmnk7wq6] .bottom-item.profile {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 0px;
}

[b-acqmnk7wq6] .bottom-item.profile .nav-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    background: var(--accent-color);
    color: white;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-acqmnk7wq6] .bottom-item.profile .nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    overflow: hidden;
}

[b-acqmnk7wq6] .bottom-item.profile .profile-name {
    font-weight: 600;
    color: #1f2d3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-acqmnk7wq6] .bottom-item.profile .profile-role {
    font-size: var(--fs-xs);
    color: #6b7785;
}

/* Swipe handle bar — full height strip on right edge, intercepts pointer events */
.swipe-handle[b-acqmnk7wq6] {
    position: absolute;
    top: 50%;
    height: 80%;
    translate: 0 -50%;
    right: -4px;
    bottom: 0;
    width: 24px;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none; /* prevent browser scroll so our drag fires cleanly */
    z-index: 7;
}

.swipe-handle:active[b-acqmnk7wq6] {
    cursor: grabbing;
}

.handle-bar[b-acqmnk7wq6] {
    width: 4px;
    height: 48px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* /Components/Layout/SidebarUtilityMenu.razor.rz.scp.css */
/* Collapsed: a compact icon row with the caret at the end.
   Open: a labeled column that grows the footer upward IN FLOW (the nav above shrinks).

   .open drives the column LAYOUT; .expanded drives the revealed HEIGHT. They are split so
   the close animation can shrink the height (max-height) while the column layout is still
   applied — otherwise removing the layout would snap straight to the short icon row. */
.util[b-liychukh9i] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.util.open[b-liychukh9i] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* ===== List ===== */
.util-list[b-liychukh9i] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    max-height: 2.5rem; /* collapsed: a single icon row */
}

.util.open .util-list[b-liychukh9i] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    /* Only animate the height while the MENU is open/closing. Otherwise a sidebar collapse with
       the menu closed would animate max-height (2.5rem→0) through the stacked column layout,
       briefly flashing the icons as if expanded. With no transition there, it snaps cleanly. */
    transition: max-height 0.26s ease;
}

.util.expanded .util-list[b-liychukh9i] {
    max-height: 8rem; /* opened target — comfortably fits the three items */
}

/* ===== Buttons (icon-only when collapsed) ===== */
.util[b-liychukh9i]  .util-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--primary-color);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.util[b-liychukh9i]  .util-item:hover {
    background: rgba(13, 108, 172, 0.08);
}

.util[b-liychukh9i]  .util-item.active {
    background: rgba(13, 108, 172, 0.13);
}

.util[b-liychukh9i]  .util-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.util[b-liychukh9i]  .util-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.util[b-liychukh9i]  .util-item-icon i {
    font-size: 1rem;
}

.util[b-liychukh9i]  .util-item-label {
    display: none;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Open layout: each button becomes a labeled row (revealed as the height grows). */
.util.open[b-liychukh9i]  .util-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 8px 10px;
    color: #1f2d3d;
}

.util.open[b-liychukh9i]  .util-item.active {
    background: linear-gradient(90deg, rgba(13, 108, 172, 0.13) 0%, rgba(13, 108, 172, 0.03) 100%);
    color: var(--primary-color);
    font-weight: 600;
}

.util.open[b-liychukh9i]  .util-item-icon {
    color: var(--primary-color);
}

.util.open[b-liychukh9i]  .util-item-label {
    display: block;
}

/* ===== Caret ===== */
.util-caret[b-liychukh9i] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.util-caret:hover[b-liychukh9i] {
    background: rgba(13, 108, 172, 0.1);
}

.util-caret i[b-liychukh9i] {
    transition: transform 0.2s ease;
}

.util:not(.open) .util-caret[b-liychukh9i] {
    margin-left: auto;
}

/* Caret stays a 36px button aligned to the icon column (8px inset) in every open state, so it
   doesn't resize or slide when the sidebar expands/collapses with the menu open. */
.util.open .util-caret[b-liychukh9i] {
    width: 36px;
    height: 36px;
    margin-top: 2px;
    margin-left: 8px;
}

.util.expanded .util-caret i[b-liychukh9i] {
    transform: rotate(180deg);
}

/* ===== Desktop narrow (64px) rail =====
   The .util is 228px wide but clipped to the left 64px, so rail content sits at the LEFT
   (8px inset to line up with the nav-icon column), never justify/align-centered.
   The list is always a stacked icon-only column; its max-height toggles (animatable, via
   .expanded) — 0 when closed (only the caret shows), revealed when open — so opening AND
   closing the menu in the rail animate instead of snapping. ===== */
.util.desktop.narrow[b-liychukh9i] {
    flex-direction: column;  /* list (above) + caret (below); the list is 0-height when closed */
    padding-left: 8px;
    align-items: flex-start;
}

.util.desktop.narrow .util-list[b-liychukh9i] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-height: 0;
}

.util.desktop.narrow.expanded .util-list[b-liychukh9i] {
    max-height: 8rem;
}

.util.desktop.narrow[b-liychukh9i]  .util-item {
    display: inline-flex;
    width: 36px;
    height: 36px;
    padding: 0;
}

.util.desktop.narrow[b-liychukh9i]  .util-item-label {
    display: none;
}

.util.desktop.narrow .util-caret[b-liychukh9i] {
    margin-left: 0;
    width: 36px;
    height: 36px;
}
/* /Components/Layout/SplitView.razor.rz.scp.css */
.view[b-2p2suj85i0] {
    position: relative;
    max-height: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 255, 255) 0%, rgba(91, 154, 186, 0) 50%);
    border-radius: 5px;
    --peek-width: 15px;
}

.view-scroll[b-2p2suj85i0] {
    overflow: auto;
    height: 100%;
}

.view-pane[b-2p2suj85i0] {
    overflow: auto;
    padding: 15px;
    height: 100%;
}

@media (min-width: 1025px) {
    .view-scroll[b-2p2suj85i0] {
        position: relative;
        display: grid;
        grid-template-columns: 2fr 1fr;
        /* Constrain the single row to the container height so the panes (not the
           grid) absorb overflow and each scroll independently. */
        grid-template-rows: minmax(0, 1fr);
        gap: 30px;
    }
    /* Panes already declare height:100%; overflow:auto — min-height:0 lets them
       shrink below their content so their own scrollbar engages. */
    .view-pane[b-2p2suj85i0] {
        min-height: 0;
    }
}
    
@media (max-width: 1025px) {
    .view[b-2p2suj85i0] {
        overflow: visible;
    }
    /* Scroll-snap container for mobile: make each pane full-width and snap to it */
    .view-scroll[b-2p2suj85i0] {
        display: flex;
        overflow: auto;
        scroll-snap-type: x mandatory;
        /* -webkit-overflow-scrolling: touch; */
        scroll-behavior: smooth;
        width: 100%;
        position: relative; /* for ::before/::after gradients */
    }
    .view.left-active[b-2p2suj85i0] {
        margin-right: calc(var(--main-padding) * -1);
    }
    .view.right-active[b-2p2suj85i0] {
        margin-left: calc(var(--main-padding) * -1);
    }

    .view-pane.left[b-2p2suj85i0] {    
        scroll-snap-align: start;
    }
    .view-pane.right[b-2p2suj85i0] {
        scroll-snap-align: end;
    }
    .view-pane:not(.active)[b-2p2suj85i0] {
        filter: brightness(0.8) blur(3px) grayscale(0.2) opacity(0.8);
        padding-inline: 0px;
    }
    .view-pane[b-2p2suj85i0] {
        flex: 0 0 calc(100% - var(--peek-width)); /* leave var(--peek-width) peek */
        width: calc(100% - var(--peek-width));
        min-width: calc(100% - var(--peek-width));
        max-width: calc(100% - var(--peek-width));
        transition: filter 0.3s ease, width 0.32s cubic-bezier(.22,.9,.3,1);
        will-change: width, filter;
    }
    .view-pane[b-2p2suj85i0] {
        transition: filter 0.3s ease;
    }

    /* Peek trigger buttons (hidden by default) */
    .peek-trigger[b-2p2suj85i0] {
        position: absolute;
        top: 0;
        height: 100%;
        width: var(--peek-width);
        padding: 0;
        border: none;
        cursor: pointer;
        z-index: 1;
        background: transparent;
    }

    /* show right trigger when .view-scroll has peek-right */
    .peek-trigger.right[b-2p2suj85i0] {
        display: flex;
        right: 0;
    }

    /* show left trigger when .view-scroll has peek-left */
    .peek-trigger.left[b-2p2suj85i0] {
        display: flex;
        left: 0;
    }
}
/* /Components/Pages/DeliveryDetails.razor.rz.scp.css */
/* Instance rows are emitted into the Table component's <tbody> but authored on this page, so they carry THIS
   page's CSS-isolation scope — the rules in Table.razor.css (scoped to the Table component) never reach them.
   Re-declare the padding/appearance rules so instance cells line up with the article rows pixel-for-pixel. */
.instance-row td[b-w3qg0icsca] {
    padding: 8px;
}

.instance-row td:first-child[b-w3qg0icsca] {
    padding-left: 15px;
}

.instance-row td:last-child[b-w3qg0icsca] {
    padding-right: 15px;
}

.instance-row td.main-column[b-w3qg0icsca] {
    font-weight: 500;
}

.instance-row:hover[b-w3qg0icsca] {
    background-color: #f1f1f1 !important;
}
/* /Components/Pages/EasyTransfer.razor.rz.scp.css */
/* The page is a flex column: header on top, then either a two-pane split (desktop) or a full-height input surface
   with a bottom-drawer basket (mobile). */
.easy-transfer[b-z2px8ztmk9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* ---- desktop: scanner/search left, basket permanently beside it, via the shared SplitView ---- */
/* SplitView's root is a height:100% block; inside our flex-column page it must instead take the space left under the
   header and let its panes scroll internally. */
.easy-transfer.is-desktop[b-z2px8ztmk9]  .view {
    flex: 1 1 0;
    min-height: 0;
}

/* Fill each SplitView pane so the input surface and the basket's internal scroll (with the book bar pinned below it)
   get a definite height — the same effect the old grid cells gave via stretch. */
.easy-transfer.is-desktop .et-input[b-z2px8ztmk9],
.easy-transfer.is-desktop .et-aside[b-z2px8ztmk9] {
    height: 100%;
}

.et-input[b-z2px8ztmk9] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.et-aside[b-z2px8ztmk9] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.et-basket-scroll[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.et-book-bar[b-z2px8ztmk9] {
    flex: 0 0 auto;
    padding-top: 10px;
}

    /* In the drawer the book button is a footer pinned to the bottom, so the basket scrolls above it and only the
       handle + button show at the drawer's peek height. */
    .et-book-bar.sticky[b-z2px8ztmk9] {
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex: 0 0 auto;
        background: #fff;
        padding: 8px 0 2px;
        border-top: 1px solid #eef3f8;
    }

    .et-book-bar[b-z2px8ztmk9]  button {
        width: 100%;
        padding: 13px 16px;
    }

/* ---- mobile: input fills the screen, basket in the bottom drawer ---- */
.et-input-mobile[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    /* Reserve the live drawer height so the input surface can always be scrolled clear of the fixed drawer. */
    padding-bottom: calc(var(--bottom-drawer-height, 92px) + 0.5rem);
}

.et-drawer[b-z2px8ztmk9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0 4px;
}

.et-drawer-basket[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Keep the list's scroll self-contained so hitting its top/bottom edge doesn't rubber-band the page — the
       nested-scroll drawer takes over the gesture from there instead. */
    overscroll-behavior: contain;
}

/* ---- shared input surface ---- */
.et-input-inner[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.et-surface[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Fade the input surface in when the mode changes (keyed remount in the markup replays this). */
.et-surface-fade[b-z2px8ztmk9] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: et-fade-in-b-z2px8ztmk9 0.18s ease;
}

@keyframes et-fade-in-b-z2px8ztmk9 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-surface-fade[b-z2px8ztmk9] {
        animation: none;
    }
}

.et-scan-hint[b-z2px8ztmk9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color, #00385e);
    background: #eef5fb;
    border: 1px solid #cfe0ee;
}

.et-basket[b-z2px8ztmk9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Basket heading: Umlagerung icon + "Artikel" + a count chip that pops when the total changes. */
.et-basket-head[b-z2px8ztmk9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

    .et-basket-head i[b-z2px8ztmk9] {
        color: var(--primary-color, #00385e);
    }

.et-basket-title[b-z2px8ztmk9] {
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--primary-color, #00385e);
}

.et-basket-count[b-z2px8ztmk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--primary-color, #00385e);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    animation: et-count-pop-b-z2px8ztmk9 0.28s cubic-bezier(.22, .9, .3, 1);
}

@keyframes et-count-pop-b-z2px8ztmk9 {
    0% {
        transform: scale(0.6);
    }

    55% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-basket-count[b-z2px8ztmk9] {
        animation: none;
    }
}

.et-error[b-z2px8ztmk9] {
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    color: #b91c1c;
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
.feedback-filters[b-jnhnqh2z31] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.filter-group[b-jnhnqh2z31] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.filter-chip[b-jnhnqh2z31] {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.filter-chip:hover[b-jnhnqh2z31] {
    background: rgba(0, 0, 0, 0.04);
}

.filter-chip.active[b-jnhnqh2z31] {
    background: var(--primary-color, #3b82f6);
    color: #fff;
    border-color: transparent;
}

.report-list[b-jnhnqh2z31] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-card[b-jnhnqh2z31] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.report-card:hover[b-jnhnqh2z31] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.report-card-icon[b-jnhnqh2z31] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #64748b;
}

.report-card-icon.type-bug[b-jnhnqh2z31] { background: #dc2626; }
.report-card-icon.type-feature[b-jnhnqh2z31] { background: #2563eb; }
.report-card-icon.type-feedback[b-jnhnqh2z31] { background: #7c3aed; }

.report-card-title[b-jnhnqh2z31] {
    font-weight: 600;
    line-height: 1.3;
}

.report-card-meta[b-jnhnqh2z31] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.report-card-stats[b-jnhnqh2z31] {
    display: flex;
    gap: 0.5rem;
}

.stat-pill[b-jnhnqh2z31] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: var(--fs-sm);
    color: #475569;
}

.stat-pill.voted[b-jnhnqh2z31] {
    background: var(--primary-color, #3b82f6);
    color: #fff;
}

.badge[b-jnhnqh2z31] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #e2e8f0;
    color: #334155;
}

.badge.status-open[b-jnhnqh2z31] { background: #e2e8f0; color: #475569; }
.badge.status-planned[b-jnhnqh2z31] { background: #dbeafe; color: #1d4ed8; }
.badge.status-inprogress[b-jnhnqh2z31] { background: #fef3c7; color: #b45309; }
.badge.status-needsinfo[b-jnhnqh2z31] { background: #ede9fe; color: #6d28d9; }
.badge.status-done[b-jnhnqh2z31],
.badge.status-released[b-jnhnqh2z31] { background: #dcfce7; color: #15803d; }
.badge.status-rejected[b-jnhnqh2z31],
.badge.status-duplicate[b-jnhnqh2z31] { background: #fee2e2; color: #b91c1c; }
.badge.visibility-public[b-jnhnqh2z31] { background: #f1f5f9; color: #0f172a; }

.empty-state[b-jnhnqh2z31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #64748b;
}

@media (max-width: 640px) {
    .report-card[b-jnhnqh2z31] {
        grid-template-columns: auto 1fr;
    }

    .report-card-stats[b-jnhnqh2z31] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard[b-yn0wybhhgz] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: auto;
    gap: 16px;
    min-height: 100%;
    margin-bottom: var(--main-padding);
}

.card[b-yn0wybhhgz] {
    background: white;
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
}

/* Welcome */
.welcome[b-yn0wybhhgz] {
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

.welcome h1[b-yn0wybhhgz] {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: #0f2f51;
    line-height: 1.2;
}

.welcome h1 .accent[b-yn0wybhhgz] {
    /* colorful gradient text with a subtle motion */
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 25%, #6a11cb 60%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift-b-yn0wybhhgz 60s ease infinite;
}

@keyframes gradientShift-b-yn0wybhhgz {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.welcome-text p[b-yn0wybhhgz] {
    color: #6b7785;
    margin: 8px 0 0 0;
    white-space: pre-line;
}

/* Insights pivot card */
.insights[b-yn0wybhhgz] {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
}

.insights-head[b-yn0wybhhgz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.insights-head h3[b-yn0wybhhgz] {
    margin: 0;
    font-size: var(--fs-lg);
    color: #1f2d3d;
}

.pivot-tabs[b-yn0wybhhgz] {
    display: inline-flex;
    gap: 8px;
}

.pivot-tab[b-yn0wybhhgz] {
    width: 38px;
    height: 38px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #fff;
    color: #6b7785;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pivot-tab:hover[b-yn0wybhhgz] {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

.pivot-tab.active[b-yn0wybhhgz] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-purple));
}

.pivot-tab i[b-yn0wybhhgz] {
    font-size: 1rem;
}

.insight-panel[b-yn0wybhhgz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 116px;
    align-items: center; /* center content horizontally */
    justify-content: center; /* center content vertically */
    text-align: center; /* center text inside */
}

.insight-kicker[b-yn0wybhhgz] {
    font-size: var(--fs-xs);
    color: #6b7785;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insight-value[b-yn0wybhhgz] {
    font-size: var(--fs-base);
    font-weight: 600;
    color: #0f2f51;
    line-height: 1.45;
}

.insight-meta[b-yn0wybhhgz] {
    color: #6b7785;
    font-size: var(--fs-sm);
}

.insights-empty[b-yn0wybhhgz] {
    min-height: 116px;
    display: flex;
    align-items: center;
}

/* Info chips */
.info-chips[b-yn0wybhhgz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.chip[b-yn0wybhhgz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

.chip i[b-yn0wybhhgz] {
    font-size: 0.7rem;
    opacity: 0.85;
}

.chip-weather[b-yn0wybhhgz]   { background: #e8f4fd; color: #1565c0; border-color: #bbdefb; }
.chip-sunset[b-yn0wybhhgz]    { background: #fff8e1; color: #e65100; border-color: #ffe082; }
.chip-holiday[b-yn0wybhhgz]   { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; }
.chip-fck[b-yn0wybhhgz]       { background: #fff3e0; color: #bf360c; border-color: #ffcc80; }
.chip-articles[b-yn0wybhhgz]  { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.chip-deliveries[b-yn0wybhhgz]{ background: #e0f7fa; color: #006064; border-color: #80deea; }
.chip-hours[b-yn0wybhhgz]     { background: #fce4ec; color: #880e4f; border-color: #f48fb1; }
.chip-mandanten[b-yn0wybhhgz] { background: #e8eaf6; color: #283593; border-color: #9fa8da; }
.chip-alerts[b-yn0wybhhgz]    { background: #fff3e0; color: #e65100; border-color: #ffb74d; font-weight: 600; }
.chip-loading[b-yn0wybhhgz]   { background: #f5f5f5; color: #9e9e9e; border-color: #e0e0e0; }

.welcome-illustration[b-yn0wybhhgz] {
    z-index: -1;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    color: var(--accent-color);
    opacity: 0.85;
    height: 80%;
}
.welcome-illustration img[b-yn0wybhhgz] {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Quick access */
[b-yn0wybhhgz] .quick-access {
    grid-column: 2 / 3;
}

[b-yn0wybhhgz] .qa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

[b-yn0wybhhgz] .qa-card-head h3 {
    margin: 0;
    font-size: var(--fs-lg);
    color: #1f2d3d;
}

/* Save icon accent colour */
[b-yn0wybhhgz] .qa-save-icon {
    color: var(--accent-color) !important;
    font-size: 1.05rem;
}

/* Split view when >6 tiles */
[b-yn0wybhhgz] .qa-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-yn0wybhhgz] .qa-aside {
    border-left: 2px solid #e5eaf0;
    padding-left: 12px;
}

/* Edit mode: keep the Tile at full colour but non-navigating (Disabled dims + kills
   pointer events; we only undo the dimming so the action buttons stay usable). */
[b-yn0wybhhgz] .qa-edit-li .linkwrapper.disabled {
    filter: none;
    cursor: default;
}

/* Action buttons overlay */
[b-yn0wybhhgz] .qa-tile-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 3px;
    z-index: 1;
}

[b-yn0wybhhgz] .qa-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background 0.15s, transform 0.15s;
}

[b-yn0wybhhgz] .qa-btn-change {
    background: #e8f0fe;
    color: #1a73e8;
}

[b-yn0wybhhgz] .qa-btn-change:hover {
    background: #d2e3fc;
    transform: scale(1.1);
}

[b-yn0wybhhgz] .qa-btn-remove {
    background: #fce8e6;
    color: #d93025;
}

[b-yn0wybhhgz] .qa-btn-remove:hover {
    background: #f5c6c2;
    transform: scale(1.1);
}

/* Add-new tile — a dashed placeholder square that matches the Tile footprint. */
[b-yn0wybhhgz] .qa-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px dashed #c5cdd8;
    border-radius: var(--border-radius);
    background: #f8fafc;
    color: #6b7785;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

[b-yn0wybhhgz] .qa-add-tile i {
    font-size: 1.8rem;
}

[b-yn0wybhhgz] .qa-add-label {
    font-size: var(--fs-sm);
    font-weight: 600;
}

[b-yn0wybhhgz] .qa-add-tile:hover {
    background: #f0f4ff;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Mobile: bigger tap targets for action buttons */
@media (max-width: 640px) {
    [b-yn0wybhhgz] .qa-action-btn {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    [b-yn0wybhhgz] .qa-tile-actions {
        top: 3px;
        right: 3px;
        gap: 4px;
    }

    [b-yn0wybhhgz] .qa-split {
        grid-template-columns: 1fr;
    }

    [b-yn0wybhhgz] .qa-aside {
        border-left: none;
        border-top: 2px solid #e5eaf0;
        padding-left: 0;
        padding-top: 12px;
    }
}

[b-yn0wybhhgz] .btn-outline {
    padding: 8px 18px;
    border-radius: var(--border-radius);
    border: 1px solid #c5cdd8;
    background: white;
    color: #6b7785;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background 0.15s;
}

[b-yn0wybhhgz] .btn-outline:hover {
    background: #f5f7fa;
}


/* Quick-access tiles reuse the mobile-nav Tile component (see Sidebar's ul.tiles)
   so the dashboard and the mobile menu read as one system. Layout only — the tile
   visuals live in Tile.razor.css. */
[b-yn0wybhhgz] .qa-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* minmax(0, 1fr) lets the tracks shrink below their content's min-width so a
       tile never forces the grid wider than the card (no scrollbar). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

[b-yn0wybhhgz] .qa-tiles > li {
    position: relative; /* anchor for the edit-mode action buttons overlay */
    min-width: 0;
    container-type: inline-size; /* let the label size itself against the tile width */
}

/* Icon glyph scales with the tile (cqw) too, so it isn't oversized in the narrow
   desktop column; caps at 2.75rem to keep the wide mobile tiles' look. */
[b-yn0wybhhgz] .qa-tiles * .icon > i {
    font-size: clamp(1.5rem, 26cqw, 2.75rem);
}

/* The shared Tile label is single-line (fine in the wide mobile menu). On the
   dashboard the tiles get small — the narrow desktop column especially — so span
   the label across the full tile and let it wrap/hyphenate instead of overflowing
   sideways. Its size scales with the tile (cqw) and clamps so it stays on one line
   whenever there is room, matching the wider tiles' look. */
[b-yn0wybhhgz] .qa-tiles .text {
    left: 0;
    right: 0;
    transform: none;
    white-space: normal;
    padding: 0.3rem 0.4rem;
}

[b-yn0wybhhgz] .qa-tiles .text p {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.12;
    font-size: clamp(0.72rem, 13cqw, 0.95rem);
}

/* KPI cards */
.kpis[b-yn0wybhhgz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kpi[b-yn0wybhhgz] {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* Icon + caption + number form one aligned group; the trend line sits full-width
   below it (see .kpi-trend / .kpi-meta). */
.kpi-head[b-yn0wybhhgz] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kpi-body[b-yn0wybhhgz] {
    min-width: 0; /* let the body shrink so long captions wrap instead of overflowing */
}

.kpi-icon[b-yn0wybhhgz] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    background: var(--accent-color);
    cursor: pointer;
}

.kpi-label[b-yn0wybhhgz] {
    color: #6b7785;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    /* Long single-word captions (e.g. "Arbeitsstunden") must wrap within the card
       rather than clip against overflow:hidden; lang="de" hyphenates cleanly. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.kpi-value[b-yn0wybhhgz] {
    color: #0f2f51;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    margin: 4px 0 0;
    overflow-wrap: break-word;
}

/* Trend / meta: full-width footer, pinned to the card bottom so every card keeps the
   same bottom padding and the footers line up even when cards stretch to equal height
   in a row. Set off by a hairline divider. */
.kpi-meta[b-yn0wybhhgz],
.kpi-trend[b-yn0wybhhgz] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
    color: #6b7785;
    font-size: var(--fs-xs);
    line-height: 1.35;
}

.kpi-trend.positive[b-yn0wybhhgz] {
    color: #2a9d8f;
}

.kpi-trend.negative[b-yn0wybhhgz] {
    color: var(--accent-red);
}

.progress[b-yn0wybhhgz] {
    margin-top: 6px;
    height: 6px;
    background: #e5eaf0;
    border-radius: 4px;
    overflow: hidden;
}

.progress .bar[b-yn0wybhhgz] {
    height: 100%;
    background: var(--accent-color);
}

/* Chart + activities */
.chart[b-yn0wybhhgz] {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
}

.chart-head[b-yn0wybhhgz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.chart-head h3[b-yn0wybhhgz] {
    margin: 0;
    font-size: var(--fs-lg);
    color: #1f2d3d;
}

.chart-subtitle[b-yn0wybhhgz] {
    color: #6b7785;
    font-size: var(--fs-sm);
}

.transfer-chart[b-yn0wybhhgz] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 220px;
    padding-top: 10px;
}

.transfer-bar-group[b-yn0wybhhgz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.transfer-bar-track[b-yn0wybhhgz] {
    width: 100%;
    flex: 1;
    min-height: 150px;
    display: flex;
    align-items: end;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(229,234,240,0.45) 100%);
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    padding: 8px 8px 10px;
}

.transfer-bar[b-yn0wybhhgz] {
    width: 100%;
    min-height: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--accent-color), var(--accent-purple));
    box-shadow: 0 8px 18px rgba(106, 17, 203, 0.15);
}

.transfer-bar-label[b-yn0wybhhgz] {
    color: #6b7785;
    font-size: var(--fs-xs);
    font-weight: 500;
}

.transfer-bar-value[b-yn0wybhhgz] {
    color: #0f2f51;
    font-size: var(--fs-sm);
    font-weight: 700;
}

[b-yn0wybhhgz] .more-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.activities[b-yn0wybhhgz] {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
}

.activities h3[b-yn0wybhhgz] {
    margin: 0 0 10px 0;
    font-size: var(--fs-lg);
    color: #1f2d3d;
}

.activities ul[b-yn0wybhhgz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activities li[b-yn0wybhhgz] {
    display: block;
}

/* Drop the shared component's own vertical margin — the list gap alone spaces the
   rows, so they no longer sit ~32px apart. */
.activities[b-yn0wybhhgz]  .entity-change-display {
    margin: 0;
}

/* The card stretches to match the chart card beside it; keep the rows packed at the
   top and push the footer link to the bottom instead of spreading the list. */
.activities .more-link[b-yn0wybhhgz] {
    margin-top: auto;
}


@media (max-width: 1024px) {
    .dashboard[b-yn0wybhhgz] {
        grid-template-columns: 1fr 1fr;
    }
    .welcome[b-yn0wybhhgz],
    .insights[b-yn0wybhhgz],
    [b-yn0wybhhgz] .quick-access,
    .chart[b-yn0wybhhgz],
    .activities[b-yn0wybhhgz],
    .kpis[b-yn0wybhhgz] { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .dashboard[b-yn0wybhhgz] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .welcome[b-yn0wybhhgz] {
        grid-template-columns: 1fr;
    }
    .welcome-illustration[b-yn0wybhhgz] {
        opacity: 0.7;
    }
    .insights[b-yn0wybhhgz],
    .kpis[b-yn0wybhhgz],
    [b-yn0wybhhgz] .quick-access,
    .chart[b-yn0wybhhgz],
    .activities[b-yn0wybhhgz] {
        grid-column: 1 / -1;
    }
    [b-yn0wybhhgz] .qa-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .transfer-chart[b-yn0wybhhgz] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    /* place two KPI cards next to each other; the trend footer stays visible since
       the stacked layout gives it its own full-width row. */
    .kpis[b-yn0wybhhgz] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
main[b-nh2tq8yrwm] {
    display: grid;
    height: 100%;
    grid-template-rows: auto auto 1fr;
    overflow: auto;
}

h1[b-nh2tq8yrwm] {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--fs-2xl);
}
/* /Components/Pages/QuickAccessPickerDialog.razor.rz.scp.css */

/* Picker dialog */
.qa-picker-dialog[b-0xoeveobev] {
    padding: 8px 4px;
}

.qa-picker-header[b-0xoeveobev] {
    margin-bottom: 14px;
}

.qa-picker-header h4[b-0xoeveobev] {
    margin: 0 0 4px 0;
    font-size: var(--fs-lg);
    color: #0f2f51;
}

.qa-picker-header p[b-0xoeveobev] {
    margin: 0;
    color: #6b7785;
    font-size: var(--fs-sm);
}

.qa-picker-grid[b-0xoeveobev] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.qa-picker-group-label[b-0xoeveobev] {
    width: 100%;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #9ba9b4;
    text-transform: uppercase;
    margin-top: 8px;
}

.qa-picker-group-label:first-child[b-0xoeveobev] {
    margin-top: 0;
}

.qa-picker-tile[b-0xoeveobev] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    border: 1px solid #e5eaf0;
    background: white;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: #1f2d3d;
    transition: all 0.15s;
    min-width: 130px;
}

.qa-picker-tile:hover[b-0xoeveobev] {
    box-shadow: var(--box-shadow);
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.qa-picker-icon[b-0xoeveobev] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

.qa-picker-label[b-0xoeveobev] {
    font-weight: 500;
}

.qa-picker-footer[b-0xoeveobev] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-layout[b-s8tzgr1vpr] {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-sidenav[b-s8tzgr1vpr] {
    position: sticky;
    /* Clear the now-sticky page header (PageLayout) so the nav isn't hidden behind it. */
    top: calc(var(--sticky-header-height, 4.2em) + 1rem);
}

.settings-sidenav ul[b-s8tzgr1vpr] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-nav-item[b-s8tzgr1vpr] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background-color 120ms ease;
}

.settings-nav-item:hover[b-s8tzgr1vpr] {
    background: rgba(0, 0, 0, 0.04);
}

.settings-nav-item.active[b-s8tzgr1vpr] {
    background: var(--primary-color, #3b82f6);
    color: #fff;
}

.settings-nav-icon[b-s8tzgr1vpr] {
    width: 1.25rem;
    text-align: center;
}

.settings-nav-text[b-s8tzgr1vpr] {
    flex: 1;
    font-weight: 500;
}

.settings-content[b-s8tzgr1vpr] {
    min-width: 0;
}

[b-s8tzgr1vpr] .suggestly-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-s8tzgr1vpr] .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-s8tzgr1vpr] .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

[b-s8tzgr1vpr] .form-label {
    font-weight: 600;
    font-size: var(--fs-sm);
}

[b-s8tzgr1vpr] .form-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted, #64748b);
}

[b-s8tzgr1vpr] .form-icon-btn {
    padding: 0 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.4rem;
    background: #fff;
}

[b-s8tzgr1vpr] .telemetry-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-color, #3b82f6);
    cursor: pointer;
}

[b-s8tzgr1vpr] .telemetry-status a,
[b-s8tzgr1vpr] .suggestly-settings a {
    color: var(--primary-color, #3b82f6);
    text-decoration: underline;
}

[b-s8tzgr1vpr] .suggestly-settings a:hover {
    text-decoration: none;
}

@media (max-width: 768px) {
    .settings-layout[b-s8tzgr1vpr] {
        grid-template-columns: 1fr;
    }

    .settings-sidenav[b-s8tzgr1vpr] {
        position: static;
    }

    .settings-sidenav ul[b-s8tzgr1vpr] {
        flex-direction: row;
        overflow-x: auto;
    }

    .settings-nav-item[b-s8tzgr1vpr] {
        white-space: nowrap;
    }
}
/* /Components/Pages/WarehouseDetails.razor.rz.scp.css */
/* Instance rows are emitted into the (Table-component) <tbody> but are authored here, so they carry THIS page's
   CSS-isolation scope — the rules in Table.razor.css (scoped to the Table component) never reach them. Re-declare the
   handful that affect layout/appearance so instance cells match the article/table rows pixel-for-pixel. Keep these in
   sync with Table.razor.css. (Rules there written with ::deep — e.g. row striping, chip lists — already apply.) */
.instance-row td[b-slkdj8gvec] {
    padding: 8px;
}

.instance-row td:first-child[b-slkdj8gvec] {
    padding-left: 15px;
}

.instance-row td:last-child[b-slkdj8gvec] {
    padding-right: 15px;
}

.instance-row td.main-column[b-slkdj8gvec] {
    font-weight: 500;
}

.instance-row:hover[b-slkdj8gvec] {
    background-color: #f1f1f1 !important;
}
/* /Components/Project/ReportCustomerSheet.razor.rz.scp.css */
.report-sheet[b-xh01xflv9l] {
    /* background: linear-gradient(180deg, #fffef9 0%, #f7f4ea 100%); */
    padding: 1.5rem;
    color: #2a2a2a;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

.report-sheet.loading[b-xh01xflv9l] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.report-sheet .header[b-xh01xflv9l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.report-sheet .header h2[b-xh01xflv9l] {
    margin: 0;
    font-size: var(--fs-xl);
}

.report-sheet .subtitle[b-xh01xflv9l] {
    margin: 0.25rem 0 0;
    color: #666;
}

.report-sheet .meta[b-xh01xflv9l] {
    text-align: right;
}

.report-sheet .meta span[b-xh01xflv9l] {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: #666;
}

.report-sheet .meta strong[b-xh01xflv9l] {
    font-size: var(--fs-md);
}

.report-sheet .grid[b-xh01xflv9l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.report-sheet .grid span[b-xh01xflv9l] {
    display: block;
    font-size: var(--fs-xs);
    color: #666;
    text-transform: uppercase;
}

/* Pivot integration */
.report-sheet[b-xh01xflv9l]  .report-pivot {
    margin-top: 1rem;
}

.report-sheet[b-xh01xflv9l]  .report-pivot .pivot-bar {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 25%, #e5e7eb);
}

.report-sheet[b-xh01xflv9l]  .report-pivot .pivot-tab.active {
    color: var(--accent-color, #111827);
}

.report-sheet[b-xh01xflv9l]  .report-pivot .pivot-indicator {
    background: var(--accent-color, var(--primary-color, #2563eb));
}

.report-sheet[b-xh01xflv9l]  .report-pivot .pivot-tab i {
    font-size: 0.8rem;
    opacity: 0.75;
}

.report-sheet .pivot-empty[b-xh01xflv9l] {
    color: #9ca3af;
    font-style: italic;
    font-size: var(--fs-sm);
    padding: 0.25rem 0;
    margin: 0;
}

.report-sheet .defect-list[b-xh01xflv9l] {
    color: color-mix(in srgb, var(--color-red-800) 80%, transparent);
}

.report-sheet .table[b-xh01xflv9l] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.report-sheet .table th[b-xh01xflv9l],
.report-sheet .table td[b-xh01xflv9l] {
    border: 1px solid #ddd;
    padding: 0.5rem;
    vertical-align: top;
}

.report-sheet .table th[b-xh01xflv9l] {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    text-align: left;
    font-size: var(--fs-xs);
    text-transform: uppercase;
}

.report-sheet .table-scroll-container[b-xh01xflv9l] {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
}

.report-sheet .table-scroll-container .table[b-xh01xflv9l] {
    margin: 0;
    width: 100%;
}

.report-sheet .table-scroll-container tbody tr:not(.date-row)[b-xh01xflv9l] {
    border-top: 1px solid #ddd;
}

.report-sheet .table-scroll-container .date-row + tr[b-xh01xflv9l] {
    border-top: none;
}

.report-sheet .list[b-xh01xflv9l] {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.report-sheet .comment[b-xh01xflv9l] {
    margin: 0;
    white-space: pre-wrap;
}

.report-sheet .signature[b-xh01xflv9l] {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 2px dashed color-mix(in srgb, var(--accent-color) 30%, transparent);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-end;
}

.report-sheet .signature-image[b-xh01xflv9l] {
    margin-top: 0.5rem;
    width: min(360px, 100%);
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.report-sheet .signature-empty[b-xh01xflv9l] {
    margin: 0.4rem 0 0;
    color: #666;
    font-style: italic;
}

.report-sheet .actions[b-xh01xflv9l] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .report-sheet[b-xh01xflv9l] {
        padding: 1rem;
    }

    .report-sheet .grid[b-xh01xflv9l] {
        grid-template-columns: 1fr;
    }

    .report-sheet .signature[b-xh01xflv9l] {
        flex-direction: column;
        align-items: stretch;
    }

    .report-sheet .actions[b-xh01xflv9l] {
        justify-content: flex-start;
    }
}
/* /Components/Scanner/CodeScanner.razor.rz.scp.css */
.code-scanner[b-4kh8a3vo3u] {
    --scanner-accent: color-mix(in srgb, var(--primary-color) 82%, white);
    --scanner-accent-soft: color-mix(in srgb, var(--primary-color) 20%, white);
    --scanner-overlay: color-mix(in srgb, #0b1220 22%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.code-scanner.compact[b-4kh8a3vo3u] {
    width: min(70vw, 320px);
    height: min(70vw, 320px);
}

.scanner-header[b-4kh8a3vo3u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scanner-title[b-4kh8a3vo3u] {
    font-weight: 650;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.scanner-subtitle[b-4kh8a3vo3u] {
    color: #6b7280;
    font-size: var(--fs-sm);
}

.scanner-shell[b-4kh8a3vo3u] {
    position: relative;
    border-radius: calc(var(--border-radius) + 6px);
    background:
        radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--scanner-accent-soft) 85%, rgba(255, 255, 255, 0.5)) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff79 0%, #f8fafc79 100%);
    box-shadow:
        var(--box-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.code-scanner.compact .scanner-shell[b-4kh8a3vo3u] {
    width: 100%;
    height: 100%;
}

.scanner-surface[b-4kh8a3vo3u] {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-scanner.compact .scanner-surface[b-4kh8a3vo3u] {
    height: 100%;
    min-height: 100%;
}

.scanner-surface[b-4kh8a3vo3u] (video) {
    width: 100%;
    min-height: 420px;
    max-height: 62svh;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.code-scanner.compact .scanner-surface[b-4kh8a3vo3u] (video) {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.scanner-loading-overlay[b-4kh8a3vo3u] {
    position: absolute;
    inset: 0;
    z-index: 35;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.65rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.78) 100%);
    color: #f8fafc;
}

.scanner-loading-spinner[b-4kh8a3vo3u] {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.scanner-loading-label[b-4kh8a3vo3u] {
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
    text-align: center;
}

.scanner-overlay[b-4kh8a3vo3u] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--scanner-overlay) 100%);
}

.scanner-controls[b-4kh8a3vo3u] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.4rem; 
}

[b-4kh8a3vo3u] .scanner-control-btn {
    width: 2.1rem;
    height: 2.1rem;
    color: #f8fafc;
    backdrop-filter: blur(2px);
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

[b-4kh8a3vo3u] .scanner-control-btn.active {
    color: var(--accent-color);
}

[b-4kh8a3vo3u] .scanner-control-btn.zoom-btn {
    width: auto;
    min-width: 2.1rem;
    padding: 0 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.camera-dots[b-4kh8a3vo3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
}

.camera-dot[b-4kh8a3vo3u] {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
}

.camera-dot.is-active[b-4kh8a3vo3u] {
    background: var(--accent-color);
}

.guide-frame[b-4kh8a3vo3u] {
    position: relative;
    width: min(70vw, 320px);
    aspect-ratio: 1;
    border-radius: 1.1rem;
    border: 2px solid color-mix(in srgb, var(--scanner-accent) 55%, white);
    box-shadow:
        0 0 0 200vmax rgba(10, 18, 32, 0.17),
        0 0 0 1px rgba(255, 255, 255, 0.4) inset,
        0 14px 40px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.guide-frame.scan-hit[b-4kh8a3vo3u] {
    animation: scanner-hit-b-4kh8a3vo3u 700ms ease;
}

.guide-corner[b-4kh8a3vo3u] {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));
    transition: border-color 220ms ease, translate 220ms ease;
}

.guide-corner.scan-hit[b-4kh8a3vo3u] {
    color: var(--accent-color);
}

.guide-corner.tl[b-4kh8a3vo3u] {
    top: 0.55rem;
    left: 0.55rem;
    border-top-width: 4px;
    border-left-width: 4px;
    border-radius: 0.4rem 0 0 0;
}
.guide-corner.tl.scan-hit[b-4kh8a3vo3u] {
    translate: 0.5rem 0.5rem;
}

.guide-corner.tr[b-4kh8a3vo3u] {
    top: 0.55rem;
    right: 0.55rem;
    border-top-width: 4px;
    border-right-width: 4px;
    border-radius: 0 0.4rem 0 0;
}
.guide-corner.tr.scan-hit[b-4kh8a3vo3u] {
    translate: -0.5rem 0.5rem;
}

.guide-corner.bl[b-4kh8a3vo3u] {
    bottom: 0.55rem;
    left: 0.55rem;
    border-bottom-width: 4px;
    border-left-width: 4px;
    border-radius: 0 0 0 0.4rem;
}
.guide-corner.bl.scan-hit[b-4kh8a3vo3u] {
    translate: 0.5rem -0.5rem;
}

.guide-corner.br[b-4kh8a3vo3u] {
    bottom: 0.55rem;
    right: 0.55rem;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-radius: 0 0 0.4rem 0;
}
.guide-corner.br.scan-hit[b-4kh8a3vo3u] {
    translate: -0.5rem -0.5rem;
}

.guide-sweep[b-4kh8a3vo3u] {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 18%, color-mix(in srgb, var(--scanner-accent) 76%, white) 52%, #ffffff 82%, transparent 100%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--scanner-accent) 50%, white);
    /* animation: scanner-sweep 2.1s ease-in-out infinite; */
}

.scan-pill[b-4kh8a3vo3u] {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.7);
    color: #e5e7eb;
    backdrop-filter: blur(4px);
}

.scan-pill-label[b-4kh8a3vo3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0f172a;
    background: #dcfce7;
    white-space: nowrap;
}

.scan-pill-value[b-4kh8a3vo3u] {
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes scanner-sweep-b-4kh8a3vo3u {
    0% {
        transform: translateY(10%);
        opacity: 0.85;
    }
    50% {
        transform: translateY(calc(100% - 8px));
        opacity: 1;
    }
    100% {
        transform: translateY(10%);
        opacity: 0.85;
    }
}

@keyframes scanner-hit-b-4kh8a3vo3u {
    0% {
        box-shadow: var(--box-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 0 3px var(--color-accent), var(--box-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: scale(1.1);
    }
    100% {
        box-shadow: var(--box-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .code-scanner.compact[b-4kh8a3vo3u] {
        width: min(78vw, 300px);
        height: min(78vw, 300px);
    }

    .guide-frame[b-4kh8a3vo3u] {
        width: min(78vw, 300px);
    }

    .scanner-surface[b-4kh8a3vo3u] (video) {
        min-height: 420px;
    }
}
/* /Components/Scanner/EntityScannerDialogContent.razor.rz.scp.css */
.scanner-dialog-content[b-wuuqtokvrz] {
    display: grid;
    gap: 0.75rem;
}

.scanner-dialog-error[b-wuuqtokvrz] {
    color: var(--accent-red);
    font-size: var(--fs-sm);
}

.scanner-dialog-actions[b-wuuqtokvrz] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Scanner/EntityScanResultDialog.razor.rz.scp.css */
.entity-scan-dialog[b-pw0k0fn3a0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.entity-scan-dialog__header[b-pw0k0fn3a0] {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.9rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-radius: calc(var(--border-radius) + 4px);
    z-index: 0;
    /* color: #fff; */
    box-shadow: var(--box-shadow);
}

.entity-scan-dialog__icon-wrap[b-pw0k0fn3a0] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.entity-scan-dialog__icon[b-pw0k0fn3a0] {
    font-size: 1.25rem;
}

.entity-scan-dialog__heading[b-pw0k0fn3a0] {
    flex: 1 1 auto;
    min-width: 0;
}

.entity-scan-dialog__title[b-pw0k0fn3a0] {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
}

.entity-scan-dialog__subtitle[b-pw0k0fn3a0] {
    font-size: var(--fs-sm);
    opacity: 0.78;
    overflow-wrap: anywhere;
}

.entity-scan-dialog__close[b-pw0k0fn3a0] {
    flex: 0 0 auto;
}

.entity-scan-dialog__body[b-pw0k0fn3a0] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.entity-scan-dialog__footer[b-pw0k0fn3a0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .entity-scan-dialog__header[b-pw0k0fn3a0] {
        align-items: flex-start;
    }

    .entity-scan-dialog__footer[b-pw0k0fn3a0] {
        justify-content: stretch;
    }

    .entity-scan-dialog__footer button[b-pw0k0fn3a0] {
        flex: 1 1 auto;
    }
}
/* /Components/Shared/Action/ActionButtons.razor.rz.scp.css */
.action-buttons[b-54kti50ie7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.action-buttons[b-54kti50ie7]  > * {
    /* max-width: 20rem; */
    flex-grow: 1;
    height: -webkit-fill-available;
    height: stretch;
}

@supports (height: -moz-available) {
    .action-buttons[b-54kti50ie7]  > * {
        min-height: 3rem
    }
}
/* /Components/Shared/Action/ActionGroup.razor.rz.scp.css */
.action-group[b-bbkw8px5zk] {
    min-height: 3rem;
    margin: 0 0 10px 0;
    margin-top: 0;
    margin-bottom: 2px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    border-radius: var(--border-radius);
    /* background-color: #f9f9f9; */
    /* box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); */
    /* border: 1px solid #e5e7eb; */
}

.action-group[b-bbkw8px5zk]  > *:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.action-group[b-bbkw8px5zk]  > *:first-child {
    border-top-left-radius: var(--border-radius) !important;
    border-bottom-left-radius: var(--border-radius) !important;
}

.action-group[b-bbkw8px5zk]  > *:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.action-group[b-bbkw8px5zk]  > *:last-child {
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

.action-group[b-bbkw8px5zk]  > * {
    /* max-width: 20rem; */
    flex-grow: 1;
    border-radius: 0;
    height: -webkit-fill-available;
    height: stretch;
}

@supports (height: -moz-available) {
    .action-group[b-bbkw8px5zk]  > * {
        min-height: 3rem
    }
}
/* /Components/Shared/Action/ActionMenu.razor.rz.scp.css */
.action-menu-item[b-yy55xoyl5f] {
    opacity: 0;
    animation: 0.28s action-menu-pop-b-yy55xoyl5f forwards ease-out;
}

@keyframes action-menu-pop-b-yy55xoyl5f {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    70% {
        opacity: 1;
        transform: translateY(1px) scale(1.01);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/Shared/AnimatedList.razor.rz.scp.css */
.animated-list > *[b-dkr4j982cx] {
  opacity: 0;
  animation-duration: 320ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.9,.3,1);
  transition-behavior: allow-discrete;
  will-change: transform, opacity;
}

.animated-list.horizontal > *[b-dkr4j982cx] {
  animation-name: show-item-b-dkr4j982cx;
}

.animated-list.vertical > *[b-dkr4j982cx] {
  animation-name: show-item-vertical-b-dkr4j982cx;
}

@keyframes show-item-b-dkr4j982cx {
    from { display: none; opacity: 0; margin-left: -10px }
    60% { display: block; margin-left: 3px }
    80% { margin-left: -1px }
    to { opacity: 1; margin-left: 0px }
}

@keyframes show-item-vertical-b-dkr4j982cx {
    from { display: none; opacity: 0; margin-top: -10px }
    60% { display: block; margin-top: 3px }
    80% { margin-top: -1px }
    to { opacity: 1; margin-top: 0px }
}

@media (prefers-reduced-motion: reduce) {
  .animated-list > *[b-dkr4j982cx] { animation-duration: 1ms !important; }
}
/* /Components/Shared/ArticleScanSearchSurface.razor.rz.scp.css */
.ass-surface[b-xozso6bfln] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ass-body[b-xozso6bfln] {
    display: flex;
    flex-direction: column;
}

/* Scannen / Suchen segmented pill — a white thumb slides behind the active segment (mirrors TransferSourceBar). */
.mode-toggle[b-xozso6bfln] {
    position: relative;
    display: flex;
    background: #e7edf3;
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.mode-toggle-thumb[b-xozso6bfln] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 4.5px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
    transition: transform 0.2s cubic-bezier(.22, .9, .3, 1);
    will-change: transform;
}

    .mode-toggle-thumb.right[b-xozso6bfln] {
        transform: translateX(calc(100% + 3px));
    }

    .mode-toggle button[b-xozso6bfln] {
        position: relative;
        z-index: 1;
        flex: 1;
        border: none;
        background: transparent;
        color: var(--color-gray-500, #5c7180);
        font-family: inherit;
        font-weight: 700;
        font-size: var(--fs-sm);
        padding: 9px;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: color 0.18s;
    }

    .mode-toggle button.on[b-xozso6bfln] {
        color: var(--primary-color, #00385e);
    }

@media (prefers-reduced-motion: reduce) {
    .mode-toggle-thumb[b-xozso6bfln] {
        transition: none;
    }
}

/* The inline article picker owns a bounded height (the always-open select fills it and scrolls internally) so a
   long article list never grows the dialog. */
.inline-picker[b-xozso6bfln] {
    height: min(45dvh, 380px);
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/BottomDrawer.razor.rz.scp.css */
.bottom-drawer[b-s0l43pk16n] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the app sidebar (z-index:50, including its hover-expanded overlay) and header, but above page
       content so the bottom sheet still sits over the scrolling content. */
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    /* Never exceed the viewport even if MaxHeight is set larger. */
    max-height: 90dvh;
    will-change: height;
}

/* The handle is the drag surface; touch-action:none lets the pointer drag without the page scrolling. */
.bottom-drawer-handle[b-s0l43pk16n] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.bottom-drawer-handle:active[b-s0l43pk16n] {
    cursor: grabbing;
}

.bottom-drawer-handle-bar[b-s0l43pk16n] {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease;
}

.bottom-drawer-handle:hover .bottom-drawer-handle-bar[b-s0l43pk16n] {
    background: rgba(0, 0, 0, 0.3);
}

.bottom-drawer-content[b-s0l43pk16n] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 12px;
}

/* When the whole body is the drag surface, stop the page from scrolling under the gesture. */
.bottom-drawer.drag-body[b-s0l43pk16n] {
    touch-action: none;
}
/* /Components/Shared/Button.razor.rz.scp.css */
button[b-cfbxvuh54f] {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.625rem 1rem;
    gap: 0.625rem;
    margin: 0;
    border-radius: 10px;
    background: #eef3f8;
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    min-width: 1px;
}
    button:disabled[b-cfbxvuh54f] {
        opacity: 0.5;
        cursor: unset;
    }

    /* Darken whatever the button's actual colour is (soft default, accent, danger, or a utility bg) — a background
       swap here would wash colored buttons out to grey with unreadable white text. */
    button:hover:enabled[b-cfbxvuh54f] {
        filter: brightness(0.93);
    }

    button:focus[b-cfbxvuh54f] {
        outline: none;
    }

.danger[b-cfbxvuh54f] {
    background-color: var(--accent-red);
    color: white;
}
.danger-text[b-cfbxvuh54f] {
    color: var(--color-red-800);
}
.primary[b-cfbxvuh54f], .accent[b-cfbxvuh54f] {
    background-color: var(--accent-color);
    color: white;
}
.primary-text[b-cfbxvuh54f] {
    color: var(--primary-color);
}

.none[b-cfbxvuh54f] {
    background: none;
    border: none;
}
.none:hover:enabled[b-cfbxvuh54f] {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.click-indicator[b-cfbxvuh54f]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.34) 45%, rgba(255,255,255,0.12) 100%);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms ease;
}

.click-indicator.is-clicked[b-cfbxvuh54f] {
    box-shadow: 0 0 0.1rem rgba(255,255,255,0.45), 0 0 0.8rem rgba(255,255,255,0.38);
    filter: brightness(1.06);
}

.click-indicator.is-clicked[b-cfbxvuh54f]::after {
    animation: click-indicator-glow-b-cfbxvuh54f 280ms ease-out;
}



.important[b-cfbxvuh54f] {
    background: linear-gradient(100deg,#ffffff00 50%,#6178ff3f,#ffffff00 80%) no-repeat;
    background-size: 180% 180%;
    animation: gradient-animation-b-cfbxvuh54f 4s ease-in-out infinite;
}

@keyframes gradient-animation-b-cfbxvuh54f {
    0%,20% {
        background-position: 180% 50%;
        font-size: 0.875em;
    }
    50% {
        border-color: #6179ff;
        font-size: 0.9em;
    }
  80%,100% {
    background-position: -80% 50%;
    font-size: 0.875em;
  }
}

@keyframes click-indicator-glow-b-cfbxvuh54f {
        from {
        opacity: 0.18;
        transform: translateX(-6%) scale(1.01);
        }

    50% {
        opacity: 0.42;
        transform: translateX(0%) scale(1.01);
    }

        to {
                opacity: 0;
        transform: translateX(6%) scale(1.01);
        }
}
/* /Components/Shared/Card.razor.rz.scp.css */
.card[b-sr6x4rv6gm] {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    transition: box-shadow 0.2s;
    overflow: auto;
}
.card.no-padding[b-sr6x4rv6gm] {
    padding: 0;
}
.card.no-margin[b-sr6x4rv6gm] {
    margin: 0;
}
.card.no-shadow[b-sr6x4rv6gm] {
    box-shadow: none;
}
.card:has(.link-icon)[b-sr6x4rv6gm] {
    position: relative;
}
.card:hover[b-sr6x4rv6gm] {
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}
.card.clickable[b-sr6x4rv6gm] {
    cursor: pointer;
}
.card-content[b-sr6x4rv6gm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
@media (max-width: 640px) {
  .card[b-sr6x4rv6gm] {
    padding: 0.85rem;
    font-size: var(--fs-base);
  }
}
.link-icon[b-sr6x4rv6gm] {
    color: #6b7280; /* text-gray-500 */
    box-sizing: content-box;
}

/* The action/link icon is a fixed overlay in the top-right corner so the card
   content keeps the full width. Previously the card was a flex row and the icon
   claimed its own column, cutting content short (Details value cells scrolled
   early, QuickAccess grid lost width). Offsets match the card padding. */
.card:has(.link-icon) > .link-icon[b-sr6x4rv6gm] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}
.card.no-padding:has(.link-icon) > .link-icon[b-sr6x4rv6gm] {
    top: 0.75rem;
    right: 0.75rem;
}
@media (max-width: 640px) {
    .card:has(.link-icon) > .link-icon[b-sr6x4rv6gm] {
        top: 0.85rem;
        right: 0.85rem;
    }
}
/* /Components/Shared/Chip.razor.rz.scp.css */

.chip[b-26iqnr74w3] {
    /* display: flex; */
    /* align-items: center; */
    width: fit-content;
    background: #f0f4fa;
    color: var(--primary-color);
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: var(--fs-sm);
    text-wrap: nowrap;
    align-items: center;
    /* border: 1px solid #e5e5e5; */
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-width: 3em;
    text-align: center;
}

.chip.clickable[b-26iqnr74w3] {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.chip.clickable:hover[b-26iqnr74w3] {
    filter: brightness(0.95);
}

.chip-link-icon[b-26iqnr74w3] {
    width: 1rem;
    height: 1rem;
    color: #6b7280d0;
}

.chip[b-26iqnr74w3]  > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
/* /Components/Shared/ContextMenu.razor.rz.scp.css */
/* /Components/Shared/ContextMenuItem.razor.rz.scp.css */
.menu-item[b-djn5grbrox] {
    display: grid;
    grid-template-columns: 1em 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-gray-900);
    text-decoration: none;
    cursor: pointer;
    align-items: center;
}

.menu-item:hover[b-djn5grbrox] {
  background-color: var(--color-gray-100);
}
/* /Components/Shared/CustomerObjectProjectSelect.razor.rz.scp.css */
/* Pill — mirrors the look of the shared Select toggle so the picker sits consistently among the form's fields. */
.cop-select[b-agopjlsyum] {
    position: relative;
    min-height: 3em;
    min-width: 150px;
    border-radius: 10px;
    display: grid;
    transition: all 0.2s;
    background: #eef3f8;
    border: 1px solid transparent;
}

    .cop-select:hover:not(.is-disabled)[b-agopjlsyum] {
        background: #e2ebf4;
    }

    .cop-select.is-disabled[b-agopjlsyum] {
        background: var(--color-gray-100);
    }

.cop-main[b-agopjlsyum] {
    display: grid;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.cop-select.is-disabled .cop-main[b-agopjlsyum] {
    cursor: default;
}

.cop-selected[b-agopjlsyum] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 0 8px 12px;
    text-align: start;
}

.cop-name[b-agopjlsyum] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cop-expander[b-agopjlsyum] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: all 0.3s;
}

    .cop-expander:hover[b-agopjlsyum] {
        color: var(--primary-color);
    }

.cop-select.is-open .cop-expander[b-agopjlsyum] {
    transform: rotate(180deg);
}

/* Popover panel (portalled into the ContextMenu section; scoped styling still applies via the scope attribute). */
.cop-panel[b-agopjlsyum] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    animation: cop-show-b-agopjlsyum 0.25s ease both;
}

/* One navigation level: an optional back header + a bounded inline EntitySelect that owns the list scroll. */
.cop-level[b-agopjlsyum] {
    display: flex;
    flex-direction: column;
    height: 340px;
    animation: cop-drill-in-b-agopjlsyum 0.25s ease both;
}

    /* Let the inline EntitySelect fill the remaining height (below the back header), and drop its inner chrome —
       the popover panel already supplies the border/shadow. height:auto defers sizing to the flex layout. */
    .cop-level[b-agopjlsyum]  .select-inline {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .cop-level[b-agopjlsyum]  .select-inline .select-menu-panel {
        border: none;
        border-radius: 0;
    }

.cop-back[b-agopjlsyum] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    background: #f9f9f9;
    color: var(--color-gray-500, #374151);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

    .cop-back:hover[b-agopjlsyum] {
        background: var(--color-gray-200);
    }

    .cop-back i[b-agopjlsyum] {
        color: var(--primary-color);
    }

    .cop-back span[b-agopjlsyum] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Drillable option row: label + trailing chevron affordance (matches Select's drill indicator). */
.cop-opt[b-agopjlsyum] {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
}

.cop-opt-label[b-agopjlsyum] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cop-opt-chevron[b-agopjlsyum] {
    margin-left: auto;
    color: var(--color-gray-300);
    transition: transform 0.2s, color 0.2s;
}

.cop-level[b-agopjlsyum]  .select-option:hover .cop-opt-chevron {
    color: var(--primary-color);
    transform: translateX(3px);
}

@keyframes cop-show-b-agopjlsyum {
    from { opacity: 0; margin-top: -8px; }
    to   { opacity: 1; margin-top: 0; }
}

@keyframes cop-drill-in-b-agopjlsyum {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* /Components/Shared/CustomerObjectSelect.razor.rz.scp.css */
/* Shell styling for the Mandant → Objekt drill-down. Mirrors CustomerObjectProjectSelect.razor.css — Blazor CSS
   isolation scopes each component's rules to its own markup, so the two drill-downs each carry their own copy. */

/* Pill — mirrors the look of the shared Select toggle so the picker sits consistently among the form's fields. */
.cos-select[b-rlv1lmzih7] {
    position: relative;
    min-height: 3em;
    min-width: 150px;
    border-radius: 10px;
    display: grid;
    transition: all 0.2s;
    background: #eef3f8;
    border: 1px solid transparent;
}

    .cos-select:hover:not(.is-disabled)[b-rlv1lmzih7] {
        background: #e2ebf4;
    }

    .cos-select.is-disabled[b-rlv1lmzih7] {
        background: var(--color-gray-100);
    }

.cos-main[b-rlv1lmzih7] {
    display: grid;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.cos-select.is-disabled .cos-main[b-rlv1lmzih7] {
    cursor: default;
}

.cos-selected[b-rlv1lmzih7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 0 8px 12px;
    text-align: start;
}

.cos-name[b-rlv1lmzih7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-expander[b-rlv1lmzih7] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: all 0.3s;
}

    .cos-expander:hover[b-rlv1lmzih7] {
        color: var(--primary-color);
    }

.cos-select.is-open .cos-expander[b-rlv1lmzih7] {
    transform: rotate(180deg);
}

/* Popover panel (portalled into the ContextMenu section; scoped styling still applies via the scope attribute). */
.cos-panel[b-rlv1lmzih7] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    animation: cos-show-b-rlv1lmzih7 0.25s ease both;
}

/* One navigation level: an optional back header + a bounded inline EntitySelect that owns the list scroll. */
.cos-level[b-rlv1lmzih7] {
    display: flex;
    flex-direction: column;
    height: 340px;
    animation: cos-drill-in-b-rlv1lmzih7 0.25s ease both;
}

    /* Let the inline EntitySelect fill the remaining height (below the back header), and drop its inner chrome —
       the popover panel already supplies the border/shadow. height:auto defers sizing to the flex layout. */
    .cos-level[b-rlv1lmzih7]  .select-inline {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .cos-level[b-rlv1lmzih7]  .select-inline .select-menu-panel {
        border: none;
        border-radius: 0;
    }

.cos-back[b-rlv1lmzih7] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    background: #f9f9f9;
    color: var(--color-gray-500, #374151);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

    .cos-back:hover[b-rlv1lmzih7] {
        background: var(--color-gray-200);
    }

    .cos-back i[b-rlv1lmzih7] {
        color: var(--primary-color);
    }

    .cos-back span[b-rlv1lmzih7] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Drillable option row: label + trailing chevron affordance (matches Select's drill indicator). */
.cos-opt[b-rlv1lmzih7] {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
}

.cos-opt-label[b-rlv1lmzih7] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-opt-chevron[b-rlv1lmzih7] {
    margin-left: auto;
    color: var(--color-gray-300);
    transition: transform 0.2s, color 0.2s;
}

.cos-level[b-rlv1lmzih7]  .select-option:hover .cos-opt-chevron {
    color: var(--primary-color);
    transform: translateX(3px);
}

@keyframes cos-show-b-rlv1lmzih7 {
    from { opacity: 0; margin-top: -8px; }
    to   { opacity: 1; margin-top: 0; }
}

@keyframes cos-drill-in-b-rlv1lmzih7 {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* /Components/Shared/DataCard.razor.rz.scp.css */
.data-card-container[b-2wm6slmzzx] {
    width: 100%;
    container-type: inline-size;
}

.data-card-actions[b-2wm6slmzzx] {
    overflow: auto;
    display: flex;
    display: flex;
    margin: 0 0 10px 0;
    padding: 0;
    border-radius: var(--border-radius);
    background: #f9f9f9;
    overflow: hidden;
    float: right;
    border: 1px solid #ddd;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(221, 221, 221);
}


.data-card-actions[b-2wm6slmzzx]  button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: all 0.3s;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

    .data-card-actions[b-2wm6slmzzx]  button:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .data-card-actions[b-2wm6slmzzx]  > * {
        border-right: 1px solid #ddd !important;
    }

    .data-card-actions[b-2wm6slmzzx] :last-child {
        border-right: none;
    }

.data-card-grid[b-2wm6slmzzx] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem 1rem;
  font-size: var(--fs-base);
  container-type: inline-size;
}
.data-card-label[b-2wm6slmzzx] {
  font-weight: 600;
  color: #555;
  /* align-self: center; */
  word-break: break-word;
  hyphens: auto;
}
.data-card-value[b-2wm6slmzzx] {
  color: #222;
  align-self: center;
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: 640px) {
  .data-card-grid[b-2wm6slmzzx] {
    grid-template-columns: 1fr;
    font-size: var(--fs-base);
  }
  .data-card-label[b-2wm6slmzzx] {
    margin-top: 0.5rem;
    color: #888;
  }
  .data-card-value[b-2wm6slmzzx] {
    margin-bottom: 0.5rem;
  }
}

/* Lists inside table cells (chip-like identifiers) */
[b-2wm6slmzzx] .data-card-value > ul,
[b-2wm6slmzzx] .data-card-label > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-2wm6slmzzx] .data-card-value > ul li,
[b-2wm6slmzzx] .data-card-label > ul li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3f3f3;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: var(--fs-sm);
    /* border: 1px solid #e5e5e5; */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

[b-2wm6slmzzx] .data-card-value > ul li:hover,
[b-2wm6slmzzx] .data-card-label > ul li:hover {
    background: #efefef;
}

[b-2wm6slmzzx] .data-card-value > ul li  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--fs-xs);
    color: #374151; /* text-gray-700 */
    padding: 0.125rem 0.25rem; /* px-1 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    border: 1px solid #e8e8e8;
    background: #f7f7f7;
}

@container (max-width: 640px) {
  .data-card-grid[b-2wm6slmzzx] {
    display: flex;
    flex-direction: column;
  }
}
/* /Components/Shared/DebouncedInput.razor.rz.scp.css */
input[b-rqerc9x9xs] {
    padding: 0.5rem 0.75rem;
}

input:focus[b-rqerc9x9xs] {
    outline: none;
}
/* /Components/Shared/DialogInstance.razor.rz.scp.css */
/* DialogCard.razor.css */
.modal-backdrop[b-ztfde06exf] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  /* Above the main header (.app-header z-index: 300) and sidebar (z-index: 200),
     but below the error UI (1000) and toasts (9999). */
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialog-fadein-b-ztfde06exf 0.2s;
  width: 100vw;
}

.modal-backdrop.backdrop-locked[b-ztfde06exf] {
  cursor: default;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}
.modal[b-ztfde06exf] {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    max-width: min(700px, 90vw);
    max-height: 85dvh;
    overflow: hidden;
    animation: dialog-popin-b-ztfde06exf 0.25s;
    position: relative;
}

.modal.mobile[b-ztfde06exf] {
  max-width: 90vw;
}
@keyframes dialog-fadein-b-ztfde06exf {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-popin-b-ztfde06exf {
  0% { transform: scale(0.95); opacity: 0.7; }
  80% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* /Components/Shared/Documents/DocumentsView.razor.rz.scp.css */
.documents-view[b-s0hjtcdewd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 280px;
    max-height: 70vh;
    overflow: auto;
}

.documents-breadcrumb[b-s0hjtcdewd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface-alt, #f5f5f5);
    border-radius: 0.5rem;
    font-size: var(--fs-sm);
}

.documents-breadcrumb .breadcrumb-btn[b-s0hjtcdewd] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary-color, #264653);
}

.documents-breadcrumb .breadcrumb-btn:hover[b-s0hjtcdewd] {
    background: rgba(0, 0, 0, 0.05);
}

.documents-breadcrumb .breadcrumb-btn.active[b-s0hjtcdewd] {
    font-weight: 600;
}

.documents-breadcrumb .breadcrumb-sep[b-s0hjtcdewd] {
    color: #999;
}

.documents-breadcrumb .breadcrumb-root[b-s0hjtcdewd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary-color, #264653);
    font-weight: 600;
}

.documents-toolbar[b-s0hjtcdewd] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.documents-search-row[b-s0hjtcdewd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.documents-search[b-s0hjtcdewd] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.documents-search > i[b-s0hjtcdewd] {
    position: absolute;
    left: 0.65rem;
    color: #888;
    font-size: 0.85rem;
    pointer-events: none;
}

.documents-search input[b-s0hjtcdewd] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 2rem;
    border: 1px solid #ccc;
    border-radius: 0.45rem;
    font-size: var(--fs-sm);
    background: white;
}

.documents-search input:focus[b-s0hjtcdewd] {
    outline: none;
    border-color: var(--primary-color, #264653);
}

.documents-search .search-clear[b-s0hjtcdewd] {
    position: absolute;
    right: 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.documents-search .search-clear:hover[b-s0hjtcdewd] {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}

.documents-pagination[b-s0hjtcdewd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: var(--fs-sm);
    color: #555;
}

.documents-pagination button[b-s0hjtcdewd] {
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 0.35rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #264653);
}

.documents-pagination button:hover:not(:disabled)[b-s0hjtcdewd] {
    border-color: var(--primary-color, #264653);
    background: rgba(0, 0, 0, 0.03);
}

.documents-pagination button:disabled[b-s0hjtcdewd] {
    opacity: 0.4;
    cursor: default;
}

.documents-grid[b-s0hjtcdewd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 0.25rem;
}

.documents-empty[b-s0hjtcdewd] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: #888;
    text-align: center;
}

.documents-empty i[b-s0hjtcdewd] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.doc-tile[b-s0hjtcdewd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.6rem;
    background: white;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.doc-tile.folder[b-s0hjtcdewd] {
    text-align: center;
}

.doc-tile > i[b-s0hjtcdewd] {
    font-size: 2rem;
}

.doc-tile:hover[b-s0hjtcdewd] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #cdd;
}

.doc-tile-main[b-s0hjtcdewd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 0;
}

.doc-tile-main > i[b-s0hjtcdewd] {
    font-size: 2rem;
    color: #555;
}

.doc-tile.file[b-s0hjtcdewd] {
    cursor: default;
}

.doc-tile-label[b-s0hjtcdewd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    width: 100%;
}

.doc-tile-label .primary[b-s0hjtcdewd] {
    font-weight: 500;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.doc-tile-label .secondary[b-s0hjtcdewd] {
    font-size: var(--fs-sm);
    color: #888;
}

.doc-tile-menu[b-s0hjtcdewd] {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    opacity: 0;
    transition: opacity 120ms ease;
}

.doc-tile.file:hover .doc-tile-menu[b-s0hjtcdewd],
.doc-tile-menu:focus-within[b-s0hjtcdewd] {
    opacity: 1;
}

.documents-loading[b-s0hjtcdewd] {
    padding: 1rem;
}
/* /Components/Shared/Documents/DocumentUploadDialog.razor.rz.scp.css */
.upload-form[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.upload-breadcrumb[b-ury1ujg07q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface-alt, #f5f5f5);
    border-radius: 0.5rem;
    font-size: var(--fs-sm);
}

.upload-breadcrumb .crumb-btn[b-ury1ujg07q] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary-color, #264653);
}

.upload-breadcrumb .crumb-btn:hover:not(:disabled)[b-ury1ujg07q] {
    background: rgba(0, 0, 0, 0.06);
}

.upload-breadcrumb .crumb-btn:disabled[b-ury1ujg07q] {
    cursor: default;
    opacity: 0.85;
}

.upload-breadcrumb .crumb-btn.active[b-ury1ujg07q] {
    font-weight: 600;
}

.upload-breadcrumb .crumb-current[b-ury1ujg07q] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    font-weight: 600;
}

.upload-breadcrumb .crumb-sep[b-ury1ujg07q] {
    color: #aaa;
}

.picker-step[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.picker-label[b-ury1ujg07q] {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--primary-color, #264653);
}

.picker-search[b-ury1ujg07q] {
    width: 100%;
}

.picker-grid[b-ury1ujg07q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    max-height: 45vh;
    overflow-y: auto;
    padding: 0.25rem;
}

.picker-tile[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid #e2e2e2;
    border-radius: 0.55rem;
    background: white;
    cursor: pointer;
    text-align: center;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    min-height: 90px;
}

.picker-tile i[b-ury1ujg07q] {
    font-size: 1.6rem;
}

.picker-tile span[b-ury1ujg07q] {
    font-size: var(--fs-sm);
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.picker-tile:hover[b-ury1ujg07q] {
    transform: translateY(-1px);
    border-color: var(--primary-color, #264653);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.picker-empty[b-ury1ujg07q] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    color: #888;
}

.picker-empty i[b-ury1ujg07q] {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.picker-loading[b-ury1ujg07q] {
    padding: 1rem 0.5rem;
}

.upload-fields[b-ury1ujg07q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 540px) {
    .upload-fields[b-ury1ujg07q] {
        grid-template-columns: 1fr;
    }
}

.field[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label[b-ury1ujg07q] {
    font-size: var(--fs-sm);
    color: #555;
}

.select-native[b-ury1ujg07q],
.input[b-ury1ujg07q] {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #ccc;
    border-radius: 0.4rem;
    font-size: var(--fs-base);
    background: white;
}

.select-native:focus[b-ury1ujg07q],
.input:focus[b-ury1ujg07q] {
    outline: none;
    border-color: var(--primary-color, #264653);
}

.drop-zone[b-ury1ujg07q] {
    position: relative;
    border: 2px dashed #b8c5cc;
    border-radius: 0.6rem;
    padding: 1.6rem 1rem;
    background: #fafbfc;
    transition: border-color 120ms ease, background 120ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 130px;
}

.drop-zone.drag-over[b-ury1ujg07q] {
    border-color: var(--primary-color, #264653);
    background: rgba(38, 70, 83, 0.06);
}

.drop-zone .file-input[b-ury1ujg07q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.drop-zone-prompt[b-ury1ujg07q] {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.drop-zone-prompt i[b-ury1ujg07q] {
    font-size: 1.8rem;
    color: #6c7a82;
}

.drop-zone-prompt .primary[b-ury1ujg07q] {
    font-weight: 500;
    color: #333;
    margin: 0;
}

.drop-zone-prompt .secondary[b-ury1ujg07q] {
    font-size: var(--fs-sm);
    color: #888;
    margin: 0;
}

.upload-source-row[b-ury1ujg07q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.source-button[b-ury1ujg07q] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.65rem 0.4rem;
    border: 1px solid #d4d4d4;
    border-radius: 0.45rem;
    background: white;
    color: #333;
    cursor: pointer;
    text-align: center;
    font-size: var(--fs-sm);
}

.source-button:hover[b-ury1ujg07q] {
    border-color: var(--primary-color, #264653);
    color: var(--primary-color, #264653);
}

.source-button i[b-ury1ujg07q] {
    font-size: 1.05rem;
}

.source-button.disabled[b-ury1ujg07q] {
    opacity: 0.6;
    pointer-events: none;
}

.hidden-input[b-ury1ujg07q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-progress[b-ury1ujg07q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color, #264653);
    font-size: var(--fs-sm);
}

.dialog-buttons[b-ury1ujg07q] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.camera-stage[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.camera-video[b-ury1ujg07q] {
    width: 100%;
    max-height: 60vh;
    background: black;
    border-radius: 0.5rem;
    object-fit: contain;
}

.camera-buttons[b-ury1ujg07q] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.document-preview[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 70vh;
}

.preview-image[b-ury1ujg07q],
.preview-video[b-ury1ujg07q],
.preview-pdf[b-ury1ujg07q] {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 0.4rem;
    background: #eee;
    object-fit: contain;
}

.preview-pdf[b-ury1ujg07q] {
    width: 100%;
    height: 60vh;
}

.preview-fallback[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.preview-meta[b-ury1ujg07q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: var(--fs-sm);
}

.preview-download-link[b-ury1ujg07q],
.preview-download[b-ury1ujg07q] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary-color, #264653);
    text-decoration: none;
}
/* /Components/Shared/Documents/EntityDocuments.razor.rz.scp.css */
.entity-docs[b-60n2v5hvaa] {
    display: flex;
    flex-direction: column;
}

.entity-docs-loading[b-60n2v5hvaa] {
    padding: 1rem;
}

.entity-docs-list[b-60n2v5hvaa] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.entity-docs-list li[b-60n2v5hvaa] {
    border-bottom: 1px solid #eee;
}

.entity-docs-list li:last-child[b-60n2v5hvaa] {
    border-bottom: none;
}

.entity-docs-row[b-60n2v5hvaa] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
}

.entity-docs-row.folder[b-60n2v5hvaa] {
    cursor: pointer;
}

.entity-docs-row.folder:hover[b-60n2v5hvaa] {
    background: rgba(0, 0, 0, 0.03);
}

.entity-docs-row > i[b-60n2v5hvaa] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    color: #555;
    flex-shrink: 0;
}

.entity-docs-open[b-60n2v5hvaa] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-align: left;
}

.entity-docs-open > i[b-60n2v5hvaa] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    color: #555;
    flex-shrink: 0;
}

.entity-docs-open:hover .primary[b-60n2v5hvaa] {
    text-decoration: underline;
}

.entity-docs-label[b-60n2v5hvaa] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.entity-docs-label .primary[b-60n2v5hvaa] {
    font-weight: 500;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-docs-label .secondary[b-60n2v5hvaa] {
    font-size: var(--fs-sm);
    color: #888;
}

.entity-docs-chevron[b-60n2v5hvaa] {
    font-size: 0.8rem !important;
    color: #bbb !important;
    width: auto !important;
}

.entity-docs-row.file[b-60n2v5hvaa]  .context-menu-toggle {
    flex-shrink: 0;
}

/* Breadcrumb */
.entity-docs-breadcrumb[b-60n2v5hvaa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid #eee;
    font-size: var(--fs-sm);
}

.entity-docs-crumb[b-60n2v5hvaa] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 12rem;
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 0.3rem;
    background: transparent;
    color: var(--primary-color, #264653);
    cursor: pointer;
    font: inherit;
}

.entity-docs-crumb span[b-60n2v5hvaa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-docs-crumb:hover:not(.active)[b-60n2v5hvaa] {
    background: rgba(0, 0, 0, 0.05);
}

.entity-docs-crumb.active[b-60n2v5hvaa] {
    font-weight: 600;
    color: #222;
    cursor: default;
}

.entity-docs-crumb-sep[b-60n2v5hvaa] {
    font-size: 0.65rem;
    color: #bbb;
}

/* Empty state */
.entity-docs-empty[b-60n2v5hvaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    color: #888;
    text-align: center;
}

.entity-docs-empty i[b-60n2v5hvaa] {
    font-size: 1.6rem;
}

/* Folder pagination */
.entity-docs-pagination[b-60n2v5hvaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid #eee;
    font-size: var(--fs-sm);
    color: #555;
}

.entity-docs-pagination button[b-60n2v5hvaa] {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 0.35rem;
    cursor: pointer;
    color: var(--primary-color, #264653);
}

.entity-docs-pagination button:hover:not(:disabled)[b-60n2v5hvaa] {
    border-color: var(--primary-color, #264653);
    background: rgba(0, 0, 0, 0.03);
}

.entity-docs-pagination button:disabled[b-60n2v5hvaa] {
    opacity: 0.4;
    cursor: default;
}

.entity-docs-footer[b-60n2v5hvaa] {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid #eee;
}
/* /Components/Shared/EntityChangeDisplay.razor.rz.scp.css */
.entity-change-display[b-z985k21rp2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin: 10px 0;
}

.entity-change-display__icon[b-z985k21rp2] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

[b-z985k21rp2] .entity-change-display__icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

[b-z985k21rp2] .entity-change-display__icon .tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.entity-change-display__content[b-z985k21rp2] {
    min-width: 0;
}

.activity-title[b-z985k21rp2] {
    font-size: var(--fs-sm);
    color: #1f2d3d;
}

.activity-meta[b-z985k21rp2] {
    font-size: var(--fs-xs);
    color: #98a4b3;
}

.icon[b-z985k21rp2] {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    background: var(--accent-color);
    cursor: pointer;
}
/* /Components/Shared/EntityForms/EntityForm.razor.rz.scp.css */
.entity-form[b-ebu7u14m09] {
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.entity-form-edit[b-ebu7u14m09] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.entity-form .header[b-ebu7u14m09] {
  padding: 20px 30px 0;
  flex-shrink: 0;
  background-color: #fff;
  z-index: 2;
}

.entity-form .title[b-ebu7u14m09] {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-size: var(--fs-xl);
  font-weight: bold;
  margin-left: 0;
}

.entity-form[b-ebu7u14m09]  .body {
  padding: 0 30px 1rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
}
@media (max-width: 640px) {
  .entity-form[b-ebu7u14m09]  .body {
    max-height: 70vh;
  }
}

.entity-form .footer[b-ebu7u14m09] {
  padding: 0.5rem 30px 20px;
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  background-color: #fff;
  z-index: 2;
}

/* Grouped forms render the body as a <Pivot Class="body">, so the .body height bound (max-height
   above) lands on the pivot root rather than on a scroll container. Thread that bound down the
   pivot's flex chain so the active panel's inner ScrollShadow becomes the scroller, while the tab
   bar stays pinned — matching the non-grouped path where .body is itself the scroller. */
.entity-form[b-ebu7u14m09]  .body.pivot-root {
  overflow: hidden;
  /* The shared .body inset puts 1rem below the pivot root, i.e. outside the scroller — useless as
     breathing room for the last field. Drop it here and move that padding inside the panel scroller
     (below), matching the non-grouped path where .body is itself the scroller. */
  padding-bottom: 0;
}

.entity-form[b-ebu7u14m09]  .body.pivot-root > .pivot-label,
.entity-form[b-ebu7u14m09]  .body.pivot-root > .pivot-bar {
  flex-shrink: 0;
}

.entity-form[b-ebu7u14m09]  .body.pivot-root > .pivot-content,
.entity-form[b-ebu7u14m09]  .body.pivot-root > .pivot-content-all {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Pivot's own padding-top would sit outside the scroller (a fixed gap below the tab bar), clipping
     content before it reaches the bar's shadow. Move that spacing inside the scroller (below) so it
     scrolls away with the content. */
  /* padding-top: 0; */
  /* The per-panel scroller uses a -5px horizontal margin + 5px inner padding (ScrollShadow Class="mx-[-5px]"
     wrapping a px-[5px] div in GeneratedEntityFormBodyCore) so field borders/focus rings clear the scroll
     clip by 5px. This overflow:hidden would re-clip that 5px overhang and slice the borders, so push the
     clip box out by the same 5px: the negative margin keeps panels aligned with the tab bar/header/footer,
     the padding restores the content box. (There is 30px of body padding on each side to absorb it.) */
  margin-left: -5px;
  margin-right: -5px;
  padding-left: 5px;
  padding-right: 5px;
}

.entity-form[b-ebu7u14m09]  .body.pivot-root .pivot-panel.visible {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.entity-form[b-ebu7u14m09]  .body.pivot-root .pivot-content > .scroll-shadow,
.entity-form[b-ebu7u14m09]  .body.pivot-root .pivot-panel > .scroll-shadow {
  flex: 1 1 auto;
  min-height: 0;
  /* Top/bottom breathing room lives inside the scroller so content scrolls into the tab-bar/footer
     shadows rather than being clipped short by an outside gap. */
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}

/* Keep the tab bar opaque and above the scrolling panel so its scroll shadow reads over the content. */
.entity-form[b-ebu7u14m09]  .body.pivot-root > .pivot-bar {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.entity-form[b-ebu7u14m09]  .validation-summary {
    color: red;
    padding: 0.5rem 30px 0.5rem;
    /* Sits directly below the scroller and carries the bottom scroll shadow, so it must paint above
       the scrolling content (like the header/footer chrome). */
    position: relative;
    z-index: 2;
    background-color: #fff;
}

/* .entity-form ::deep .validation-summary ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
} */
.entity-form[b-ebu7u14m09]  .validation-summary li {
    margin-bottom: 0.25rem;
}
.entity-form[b-ebu7u14m09]  .validation-summary li::marker {
    color: red;
    
}

.entity-form[b-ebu7u14m09]  .pivot-tab.invalid {
    color: #dc2626;
}
/* /Components/Shared/EntityForms/EntityFormField.razor.rz.scp.css */
.entity-form-field[b-kyemss30fy] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.entity-form-field__label[b-kyemss30fy] {
  display: block;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.entity-form-field__required[b-kyemss30fy] {
  color: var(--primary-color);
  margin-left: 0.15rem;
}

.entity-form-field__control[b-kyemss30fy] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.entity-form-field__validation[b-kyemss30fy] {
  margin-top: -0.1rem;
}

[b-kyemss30fy] .entity-form-field__validation .validation-message {
  display: block;
}
/* /Components/Shared/EntityForms/ScanInputNumber.razor.rz.scp.css */
.scanner-inline-field[b-zo45ynhr1v] {
    position: relative;
}

.scanner-inline-field[b-zo45ynhr1v]  .form-control {
    padding-right: 2.5rem;
}

.scanner-inline-button[b-zo45ynhr1v] {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--primary-color);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.scanner-inline-button:hover[b-zo45ynhr1v] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/EntityForms/TypedValueEditor.razor.rz.scp.css */
.select-inline-scan-btn[b-jon6x49a9y] {
    width: 2rem;
    height: 100%;
    border: none;
    border-left: 1px solid var(--color-gray-200);
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.select-inline-scan-btn:hover[b-jon6x49a9y] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/EntitySelect.razor.rz.scp.css */
.entity-select-footer[b-4ci0dwueo0] {
    display: flex;
    justify-content: center;
}

.entity-select-load-more[b-4ci0dwueo0] {
    width: 100%;
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--color-gray-500);
    font-style: italic;
    font-weight: 600;
    padding: 4px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.entity-select-load-more:hover:enabled[b-4ci0dwueo0] {
    color: var(--color-gray-700);
}

.entity-select-load-more:disabled[b-4ci0dwueo0] {
    opacity: 0.6;
    cursor: default;
}

.entity-select-scan-btn[b-4ci0dwueo0] {
    width: 3rem;
    height: 100%;
    border: none;
    border-left: 1px solid var(--color-gray-200);
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.entity-select-scan-btn:hover[b-4ci0dwueo0] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}

/* Inline-mode scanner: overlaid on the search input's right edge (mirrors TextInput's scanner-inline-button). */
.entity-select-search-scan-btn[b-4ci0dwueo0] {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--primary-color);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.entity-select-search-scan-btn:hover[b-4ci0dwueo0] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/FooterMenu.razor.rz.scp.css */
footer[b-fxsai4mf8b] {
    background: rgba(0, 0, 0, 0.1);
    animation: show-footer-b-fxsai4mf8b 0.5s forwards;
    animation-delay: 1s;
    opacity: 0;
}

ul[b-fxsai4mf8b] {
    list-style: none;
    display: grid;
    margin: 0;
    padding: 5px;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}

li[b-fxsai4mf8b] {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: show-footer-b-fxsai4mf8b 0.5s forwards;
    opacity: 0;
}

[b-fxsai4mf8b] i {
    font-size: 1.5rem;
    color: var(--primary-color);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

p[b-fxsai4mf8b] {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--primary-color);
}

[b-fxsai4mf8b] a {
    width: 100%;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 10px;
    gap: 5px;
    flex-direction: column;
    background: white;
    margin: 0;
    border-radius: var(--border-radius);
    text-decoration: none;
}

    [b-fxsai4mf8b] a:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    @keyframes show-footer-b-fxsai4mf8b {
        from {
            transform: translateY(10px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes show-item-b-fxsai4mf8b {
        from {
            transform: translateY(10px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
.loading-spinner[b-a3c3vfar31] {
    --loading-spinner-size: 1.8rem;
    --loading-spinner-stroke: 0.16rem;
    display: inline-grid;
    place-items: center;
    width: var(--loading-spinner-size);
    height: var(--loading-spinner-size);
}

.loading-spinner-ring[b-a3c3vfar31] {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: var(--loading-spinner-stroke) solid color-mix(in srgb, white 45%, transparent);
    border-top-color: color-mix(in srgb, var(--accent-color) 70%, white);
    animation: loading-spinner-rotate-b-a3c3vfar31 0.85s linear infinite;
}

@keyframes loading-spinner-rotate-b-a3c3vfar31 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/LoadingText.razor.rz.scp.css */
.loading-text[b-ednnx3kjhd] {
    --chars: 10;
    display: inline-block;
    width: calc(var(--chars) * 0.55ch);
    white-space: nowrap;
    overflow: hidden;
    user-select: none;

    /* show gradient through text */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* blurred, heavy placeholder */
    background: linear-gradient(90deg, rgba(0,0,0,0.10) 8%, rgba(0,0,0,0.16) 20%, rgba(0,0,0,0.10) 32%);
    background-size: 200% 100%;
    filter: blur(1px) saturate(0.85) opacity(0.3);
    border-radius: 3px;

    /* animation */
    animation: loading-shimmer-b-ednnx3kjhd 3.4s linear infinite, loading-pulse-b-ednnx3kjhd 1.6s ease-in-out infinite;
}

@keyframes loading-shimmer-b-ednnx3kjhd {
    0% { background-position: -150% 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 100% 0; }
}

@keyframes loading-pulse-b-ednnx3kjhd {
    0% { opacity: 0.9; }
    50% { opacity: 0.65; }
    100% { opacity: 0.9; }
}
/* /Components/Shared/MainHeader.razor.rz.scp.css */
[b-cwlaijse1d] .main-header-center h1 {
    color: white;
    user-select: none;
}
.main-header[b-cwlaijse1d] {
    flex-direction: column;
    background: rgb(13, 108, 172);
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 0;
    padding: 15px 15px 15px 15px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.main-row[b-cwlaijse1d] {
    display: grid;
    width: 100%;
    gap: 20px;
    align-items: center;
    grid-template-columns: auto 1fr auto;
}

.main-header-left[b-cwlaijse1d] {
    margin: 0;
    display: flex;
    flex-grow: 0;
    z-index: 1;
}
[b-cwlaijse1d] .main-header-center {
    animation: show-title-b-cwlaijse1d 1s forwards;
    opacity: 0;
    animation-delay: 1.5s;
}

@keyframes show-title-b-cwlaijse1d {
    from {
        opacity: 0;
        margin-left: -20px;
    }

    to {
        opacity: 1;
        margin-left: 0px;
    }
}

.main-header-right[b-cwlaijse1d] {
    display: flex;
}


[b-cwlaijse1d] .main-header-left img {
    height: 40px;
    background: white;
    border-radius: var(--border-radius);
    padding: 5px 8px 10px 8px;
    box-shadow: var(--box-shadow);
    opacity: 0;
    animation: show-icon-b-cwlaijse1d 1s forwards;
    opacity: 0;
    animation-delay: 1s;
}

@keyframes show-icon-b-cwlaijse1d {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.search-container[b-cwlaijse1d] {
    margin-top: 20px;
}

[b-cwlaijse1d] a {
    text-decoration: none;
}

@media (max-width:640px) {
    .main-header[b-cwlaijse1d] {
        padding: 10px;
    }

    .search-container[b-cwlaijse1d] {
        margin-top: 10px;
    }
}
/* /Components/Shared/NumberInput.razor.rz.scp.css */
.number-input[b-p9pz3x4ziu] {
    width: fit-content;
    display: grid;
    grid-template-columns: auto 4em auto;
    align-items: center;
    gap: 10px;
}

input[b-p9pz3x4ziu] {
    border: none;
    outline: none;
    background: transparent;
    padding: 5px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.value[b-p9pz3x4ziu] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.scan-btn[b-p9pz3x4ziu] {
    border: none;
    background: transparent;
    color: var(--primary-color);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.scan-btn:hover[b-p9pz3x4ziu] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}

.dec[b-p9pz3x4ziu], .inc[b-p9pz3x4ziu], .del[b-p9pz3x4ziu] {
    cursor: pointer;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    margin: auto;
}
.del[b-p9pz3x4ziu] {
    color: var(--accent-red);
}

    .dec:hover:not(.disabled)[b-p9pz3x4ziu], .inc:hover:not(.disabled)[b-p9pz3x4ziu], .del:hover:not(.disabled)[b-p9pz3x4ziu] {
        box-shadow: var(--box-shadow);
    }

    .dec.disabled[b-p9pz3x4ziu], .inc.disabled[b-p9pz3x4ziu], .del.disabled[b-p9pz3x4ziu] {
        cursor: default;
        opacity: 0.25;
    }
/* /Components/Shared/PackingListIcon.razor.rz.scp.css */
/* PackingListIcon.razor.css */
.packinglist-icon[b-a7ue9ao062] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f03e3e;
    color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 0.3rem 0.6rem 0.3rem .6rem;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    opacity: 0;
    animation: show-icon-b-a7ue9ao062 1s forwards;
    animation-delay: 3s;
}

@keyframes show-icon-b-a7ue9ao062 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.packinglist-icon:hover[b-a7ue9ao062] {
  background: #c92a2a;
}
.icon-wrapper[b-a7ue9ao062] {
  position: relative;
  display: inline-block;
}
.packinglist-icon i[b-a7ue9ao062] {
    margin-right: 0;
    font-size: 1.8em;
    position: relative;
    z-index: 1;
}
.packinglist-count[b-a7ue9ao062] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%); /* Center exactly */
    background: transparent;
    color: #f03e3e;
    font-size: 1em;
    font-weight: 700;
    min-width: 1.2em;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    text-align: center;
}
@media (max-width: 640px) {
  .packinglist-icon[b-a7ue9ao062] {
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem 0.4rem 0.7rem;
  }
  .packinglist-count[b-a7ue9ao062] {
    font-size: 0.95rem;
    min-width: 1.1em;
  }
}
/* /Components/Shared/Pivot.razor.rz.scp.css */
.pivot-root[b-prm11nw1cq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

/* Optional section label above the tab bar */
.pivot-label[b-prm11nw1cq] {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* Tab bar */
.pivot-bar[b-prm11nw1cq] {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.pivot-bar[b-prm11nw1cq]::-webkit-scrollbar {
    display: none;
}

/* Individual tab button */
.pivot-tab[b-prm11nw1cq] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: none;
    border: none;
    border-radius: 0;
    font-size: var(--fs-base);
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
    outline: none;
    overflow: visible;
    box-shadow: none;
}
.pivot-tab:first-child[b-prm11nw1cq] {
    margin-left: -0.55rem;
}

.pivot-tab:hover:not(.active)[b-prm11nw1cq] {
    color: #374151;
    box-shadow: none;
    background: none;
}

.pivot-tab.active[b-prm11nw1cq] {
    color: var(--primary-color, #111827);
    font-weight: 600;
}

.pivot-tab.invalid[b-prm11nw1cq] {
    color: #dc2626;
}

.pivot-tab.invalid.active[b-prm11nw1cq] {
    color: #dc2626;
}

.pivot-tab.invalid .pivot-indicator[b-prm11nw1cq] {
    background: #dc2626;
}

/* Collapse mode: icon-only tabs that expand their label when active */
.pivot-collapse .pivot-tab.has-icon[b-prm11nw1cq] {
    gap: 0;
}

/* Pack the icon tabs closer (tighter side padding) so several icons plus the active
   label fit the narrow aside strip instead of spreading out. */
.pivot-collapse .pivot-tab[b-prm11nw1cq] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Only the active tab shows a label; let it shrink so the label truncates with an
   ellipsis rather than pushing the icon-only tabs out of view. The inactive icon
   tabs keep flex-shrink: 0 (from .pivot-tab) so they always stay fully visible. */
.pivot-collapse .pivot-tab.active[b-prm11nw1cq] {
    flex-shrink: 1;
    min-width: 0;
}

.pivot-collapse .pivot-tab.has-icon .pivot-tab-label[b-prm11nw1cq] {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
}

.pivot-collapse .pivot-tab.has-icon.active .pivot-tab-label[b-prm11nw1cq] {
    max-width: 12rem;
    margin-left: 0.4rem;
    opacity: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

/* Animated underline indicator */
.pivot-indicator[b-prm11nw1cq] {
    position: absolute;
    bottom: 0;
    left: 7.5%;
    right: 7.5%;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--primary-color, #2563eb);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.pivot-tab.active .pivot-indicator[b-prm11nw1cq] {
    transform: scaleX(1);
    opacity: 1;
}

/* Content area � single active tab */
.pivot-content[b-prm11nw1cq] {
    padding-top: 0.75rem;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pivot-content:empty[b-prm11nw1cq] {
    display: none;
}

/* Content area � all tabs rendered, inactive hidden */
.pivot-content-all[b-prm11nw1cq] {
    padding-top: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pivot-panel[b-prm11nw1cq] {
    display: none;
}

.pivot-panel.visible[b-prm11nw1cq] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    animation: pivot-slide-in-right-b-prm11nw1cq 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation: pivot-slide-in-right-b-prm11nw1cq 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-panel.visible.pivot-slide-left[b-prm11nw1cq] {
    animation: pivot-slide-in-left-b-prm11nw1cq 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-slide-right[b-prm11nw1cq] {
    animation: pivot-slide-in-right-b-prm11nw1cq 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-slide-left[b-prm11nw1cq] {
    animation: pivot-slide-in-left-b-prm11nw1cq 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pivot-slide-in-right-b-prm11nw1cq {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pivot-slide-in-left-b-prm11nw1cq {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Opt-in: große Seiten-Tabs (ersetzt das frühere TabLabelClass="!text-xl") */
.pivot-root.pivot-xl .pivot-tab[b-prm11nw1cq] {
    font-size: var(--fs-lg);
}

/* Aside pivots use pivot-xl + collapse; at the full lg size a few icon tabs plus a
   long active label ("Zuletzt Verwendet") overflow the narrow aside. Drop the
   collapsed variant one step to md so it fits — the non-collapse section tabs keep lg. */
.pivot-root.pivot-xl.pivot-collapse .pivot-tab[b-prm11nw1cq] {
    font-size: var(--fs-md);
}

/* Cap the expanded label; the active tab shrinks/truncates (see .pivot-collapse rules)
   if the aside is narrower than this. */
.pivot-root.pivot-xl.pivot-collapse .pivot-tab.has-icon.active .pivot-tab-label[b-prm11nw1cq] {
    max-width: 14rem;
}
/* /Components/Shared/PrefixedTextInput.razor.rz.scp.css */
/* The field surface (background, border, radius, padding, focus ring, disabled) comes from the shared
   `.prefixed-input` rule in wwwroot/app.css — the single source of truth shared with real inputs. This
   file only adds the prefix+input layout and resets the inner input so the wrapper alone shows that surface. */
.prefixed-input[b-v0yka746v8] {
    display: flex;
    align-items: center;
    gap: 0;
}

.prefixed-input__prefix[b-v0yka746v8] {
    color: #9ca3af;
    white-space: nowrap;
    user-select: none;
}

/* Reset the inner input so only the wrapper shows the field surface. The selectors are scoped (Blazor
   appends a [b-*] attribute) so they outrank the global `input` / `input:focus` rules and strip their
   background, border, padding, full width and focus glow. */
.prefixed-input__input[b-v0yka746v8],
.prefixed-input__input:focus[b-v0yka746v8] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}
/* /Components/Shared/ScrollShadow.razor.rz.scp.css */
.scroll-shadow-wrapper[b-v38xnovvff] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scroll-shadow[b-v38xnovvff] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-shadow[b-v38xnovvff]::-webkit-scrollbar {
    display: none;
}

.scroll-shadow-wrapper.has-scroll-top[b-v38xnovvff]::before,
.scroll-shadow-wrapper.has-scroll-bottom[b-v38xnovvff]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    z-index: 10;
}

.scroll-shadow-wrapper.has-scroll-top[b-v38xnovvff]::before {
    top: 0;
    box-shadow: inset 0 14px 8px -4px rgba(0, 0, 0, 0.10);
}

.scroll-shadow-wrapper.has-scroll-bottom[b-v38xnovvff]::after {
    bottom: 0;
    box-shadow: inset 0 -14px 8px -4px rgba(0, 0, 0, 0.10);
}
/* /Components/Shared/Select.razor.rz.scp.css */
.select[b-yr1fzlif2y] {
    position: relative;
    min-height: 3em;
    min-width: 150px;
    border-radius: 10px;
    display: grid;
    transition: all 0.2s;
    background: #eef3f8;
    border: 1px solid transparent;
}

    .select:hover:not(.is-disabled)[b-yr1fzlif2y] {
        background: #e2ebf4;
    }

    .select.is-disabled[b-yr1fzlif2y] {
        background: var(--color-gray-100);
    }

/* Icon-only placeholder (PlaceholderTemplate, e.g. the table sort select): shrink the pill to
   its icon + caret rather than reserving the standard 150px. Reverts once a value is picked. */
.select.placeholder-compact[b-yr1fzlif2y] {
    min-width: 0;
    width: max-content;
}

    .select.placeholder-compact .selected-option[b-yr1fzlif2y] {
        gap: 0;
        padding: 8px 0 8px 10px;
    }

    .select.placeholder-compact .expander[b-yr1fzlif2y] {
        padding: 0 8px;
    }

    /* The panel no longer inherits the toggle's width here, so keep it readable. */
    .select.placeholder-compact .select-menu-panel[b-yr1fzlif2y] {
        min-width: 180px;
    }

.select-main[b-yr1fzlif2y] {
    display: grid;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.select.is-disabled .select-main[b-yr1fzlif2y] {
    cursor: default;
}

.select-center[b-yr1fzlif2y] {
    display: grid;
    grid-template-columns: 1fr auto;
}

.select-right[b-yr1fzlif2y] {
    display: grid;
}

[b-yr1fzlif2y] p {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: clip;
}

.selected-option[b-yr1fzlif2y] {
    display: flex;
    text-align: start;
    align-items: center;
    gap: 15px;
    padding: 8px 0 8px 12px;
    transition: all 0.3s;
}

.expander[b-yr1fzlif2y] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    transition: all 0.3s;
}

    .expander:hover[b-yr1fzlif2y] {
        color: var(--primary-color)
    }

.is-open .expander[b-yr1fzlif2y] {
    transform: rotate(180deg);
}

.select-menu-panel[b-yr1fzlif2y] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 2;
    animation: show-options-b-yr1fzlif2y forwards 0.3s;
    min-height: 20px;
    overflow: hidden;
}

/* Inline mode: the panel is always visible and fills its container — no popover pill, shadow or slide-in. */
.select.select-inline[b-yr1fzlif2y] {
    display: flex;
    min-height: 0;
    min-width: 0;
    background: transparent;
    border: none;
    height: 100%;
}

    .select.select-inline:hover:not(.is-disabled)[b-yr1fzlif2y] {
        box-shadow: none;
    }

    .select-inline .select-menu-panel[b-yr1fzlif2y] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        animation: none;
        border-radius: var(--border-radius);
    }

    .select-inline .select-panel[b-yr1fzlif2y] {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Let the surrounding pane (scanner area / drawer) own the scroll height instead of a fixed 300px window. */
    .select-inline .select-options[b-yr1fzlif2y] {
        max-height: none;
        overflow-y: auto;
        flex: 1 1 auto;
    }

.select-options[b-yr1fzlif2y] {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 300px;
}

/* Drill-down: primary and secondary panels swap inside the menu with a short horizontal slide. */
.select-panel[b-yr1fzlif2y] {
    display: flex;
    flex-direction: column;
}

.select-panel-drill[b-yr1fzlif2y] {
    animation: select-drill-in-b-yr1fzlif2y 0.28s ease both;
}

.select-panel.returning[b-yr1fzlif2y] {
    animation: select-drill-out-b-yr1fzlif2y 0.28s ease both;
}

@keyframes select-drill-in-b-yr1fzlif2y {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes select-drill-out-b-yr1fzlif2y {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.select-drill-back[b-yr1fzlif2y] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    background: #f9f9f9;
    color: var(--color-gray-500, #374151);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .select-drill-back:hover[b-yr1fzlif2y] {
        background: var(--color-gray-200);
    }

    .select-drill-back i[b-yr1fzlif2y] {
        color: var(--primary-color);
    }

/* ">" affordance on options that open a secondary panel; pushed to the trailing edge of the option row. */
.select-option-drill-indicator[b-yr1fzlif2y] {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--color-gray-300);
    transition: transform 0.2s, color 0.2s;
}

.select-option.has-drilldown:hover .select-option-drill-indicator[b-yr1fzlif2y] {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* The secondary panel's options are supplied by the consumer's drill-down template, so they carry that
   component's style scope rather than this one; ::deep reaches them to keep the standard option look. */
.select-panel-drill[b-yr1fzlif2y]  .select-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s;
    animation: 0.3s show-option-b-yr1fzlif2y forwards ease-in-out;
    opacity: 0;
}

    .select-panel-drill[b-yr1fzlif2y]  .select-option:hover {
        background: var(--color-gray-200);
    }

    .select-panel-drill[b-yr1fzlif2y]  .select-option.selected {
        background: #eef3f8;
        color: color-mix(in srgb, var(--primary-color) 78%, #1f2937);
        box-shadow: inset 3px 0 0 var(--accent-color);
        font-weight: 500;
    }

    .select-panel-drill[b-yr1fzlif2y]  .select-option.selected:hover {
        background: #e2ebf4;
    }

.select-tabs[b-yr1fzlif2y] {
    display: flex;
    gap: 4px;
    padding: 10px 10px 2px 10px;
}

.select-tab[b-yr1fzlif2y] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    border: none;
    border-radius: 10px;
    background: #eef3f8;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all 0.18s;
}

    .select-tab-label[b-yr1fzlif2y] {
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: 500;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .select-tab:hover[b-yr1fzlif2y] {
        background: #e2ebf4;
        color: var(--primary-color);
    }

    .select-tab.is-active[b-yr1fzlif2y],
    .select-tab.is-active:hover[b-yr1fzlif2y] {
        background: var(--primary-color);
        color: white;
    }

.search[b-yr1fzlif2y] {
    display: grid;
    padding: 10px 10px 2px 10px;
}

/* Positioning context for SearchAside, which overlays the input's right edge (mirrors TextInput's scanner button). */
.search-field[b-yr1fzlif2y] {
    position: relative;
    display: grid;
}

    .search-field.has-aside input[b-yr1fzlif2y] {
        padding-right: 2.5rem;
    }

.select-option[b-yr1fzlif2y] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    transition: all 0.3s;
    cursor: pointer;
    animation: 0.3s show-option-b-yr1fzlif2y forwards ease-in-out;
    opacity: 0;
    /* border-radius: var(--border-radius); */
}
.select-option.selected[b-yr1fzlif2y] {
    background: #eef3f8;
    color: color-mix(in srgb, var(--primary-color) 78%, #1f2937);
    box-shadow: inset 3px 0 0 var(--accent-color);
    font-weight: 500;
}

/* The selected fill matches the search box above; when it's the first row, add a gap so the two don't merge. */
.select-option.selected:first-child[b-yr1fzlif2y] {
    margin-top: 10px;
}

.select-option.selected:hover:not(.no-click)[b-yr1fzlif2y] {
    background: #e2ebf4;
}

.select-option.selected i[b-yr1fzlif2y] {
    color: var(--primary-color);
}

.no-click.select-option[b-yr1fzlif2y] {
    cursor: default;
}

.select-option:hover:not(.no-click)[b-yr1fzlif2y] {
    background: var(--color-gray-200);
}

.select-option.loading[b-yr1fzlif2y] {
    padding: 8px 15px;
}

.select-footer[b-yr1fzlif2y] {
    border-top: 1px solid var(--color-gray-200);
    padding: 8px 10px;
}

.mouse-cap[b-yr1fzlif2y] {
    position: fixed;
    top: -1000px;
    left: -1000px;
    right: -1000px;
    bottom: -1000px;
    background: transparent;
    z-index: 1;
}

.no-options[b-yr1fzlif2y] {
    padding: 10px;
    text-align: center;
    color: var(--color-gray-300);
}

@keyframes show-options-b-yr1fzlif2y {
    from {
        margin-top: -20px;
        opacity: 0;
    }

    to {
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes show-option-b-yr1fzlif2y {
    from {
        opacity: 0;
        margin-left: -10px
    }
    60% {
        margin-left: 3px
    }
    80% {
        margin-left: -1px
    }
    to {
        opacity: 1;
        margin-left: 0px
    }
}
/* /Components/Shared/Table/ChildRow.razor.rz.scp.css */
.child-row[b-kxeujk1612] {
    box-shadow: inset 0 2em 3em -4.5em black
                /* , inset 0 -2em 3em -4em black */
                ;
}

.title[b-kxeujk1612] {
    font-size: var(--fs-sm);
    color: var(--color-gray-400);
    touch-action: manipulation;
}

/* Invisible touch-target expander around the caret + title text only.
   Inline-flex keeps it hugging the content; the ::after extends the hit
   area slightly without affecting layout. Clicks bubble to .title's Toggle.
   Touch only — on a fine pointer the overlay would intercept precise
   clicks/hovers near the edges, so it's gated behind a coarse pointer. */
.title-hit[b-kxeujk1612] {
    position: relative;
    display: inline-flex;
    align-items: center;
}
@media (pointer: coarse) {
    .title-hit[b-kxeujk1612]::after {
        content: "";
        position: absolute;
        inset: -10px -6px;
        cursor: pointer;
    }
}

.arrow[b-kxeujk1612] {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    transform-origin: center;
    transition: rotate 0.1s ease-in-out, translate 0.1s ease-in-out;
}
.arrow.expanded[b-kxeujk1612] {
    rotate: 90deg;
    translate: 0 -5%;
}

/* List-view variant: same anatomy without the table row wrapper. */
.child-block[b-kxeujk1612] {
    padding: 0 0.9rem 0.5rem 3.25rem; /* aligns under the list item's title, past its icon */
}

.child-block .title[b-kxeujk1612] {
    padding: 0.25rem 0;
}

.child-block .line-container[b-kxeujk1612] {
    margin-left: 0.35rem;
    margin-bottom: 0;
    padding-left: 0.5rem;
}

.line-container[b-kxeujk1612] {
    margin-left: 1.375rem;
    margin-bottom: 0.75rem;
    border-left-width: 1px;
    border-left-style: solid;
}
.collapsed * .line-container[b-kxeujk1612] {
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    /* inset shadow */    
    /* place inset shadow at the bottom of the component */
    box-shadow: inset 0 -2em 3em -4.5em black;
}
/* /Components/Shared/Table/DataGrid.razor.rz.scp.css */
.data-card-container[b-y4aef4nho9] {
    width: 100%;
    container-type: inline-size;
}
.data-card-grid[b-y4aef4nho9] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem 1rem;
  font-size: var(--fs-base);
}
.data-card-label[b-y4aef4nho9] {
  font-weight: 600;
  color: #555;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}
.data-card-value[b-y4aef4nho9] {
  color: #222;
  word-break: break-word;
  hyphens: auto;
  /* Keep headings fixed: instead of the whole grid/card scrolling, let each
     value shrink to its track (min-width:0) and scroll its own overflow. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
@media (max-width: 640px) {
  .data-card-grid[b-y4aef4nho9] {
    grid-template-columns: 1fr;
    /* padding: 0 1rem; */
    font-size: var(--fs-base);
  }
  .data-card-label:not(:first-child)[b-y4aef4nho9] {
    margin-top: 0.5rem;
  }
  .data-card-value[b-y4aef4nho9] {
    margin-left: 0.1rem;
  }
}

.data-card-grid[b-y4aef4nho9]  a { text-decoration: underline; }
.data-card-grid[b-y4aef4nho9]  a:hover { color: #084a8a; }

/* Lists inside table cells */
[b-y4aef4nho9] .data-card-value > ul,
[b-y4aef4nho9] .data-card-label > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (max-width: 350px) {
  .data-card-grid[b-y4aef4nho9] {
    display: flex;
    flex-direction: column;
  }
}
/* /Components/Shared/Table/ListItems/CompactListItem.razor.rz.scp.css */
/* Style A "Kompaktliste": dense contact-list row. Host Card provides the frame;
   hairlines between rows come from Table.razor.css (.item + .item). */
.compact-item[b-dh5bttwuzc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
}

.compact-leading[b-dh5bttwuzc] {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--item-accent, var(--accent-color)) 12%, white);
    color: var(--item-accent, var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-body[b-dh5bttwuzc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.compact-title[b-dh5bttwuzc] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* All Subtitle columns share one line, "·"-separated, so a row stays two lines tall. */
.compact-subtitle[b-dh5bttwuzc] {
    display: flex;
    align-items: center;
    column-gap: 0.35rem;
    color: var(--color-gray-500, #5c7180);
    font-size: var(--fs-sm);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.compact-subtitle-part[b-dh5bttwuzc] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-subtitle-part:not(:first-child)[b-dh5bttwuzc]::before {
    content: "·";
    margin-right: 0.35rem;
    color: var(--color-gray-400, #9aa8b5);
}

/* Link chips read as plain text in the title/subtitle slots (the row itself is the tap target). */
.compact-title[b-dh5bttwuzc]  .chip,
.compact-subtitle-part[b-dh5bttwuzc]  .chip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.compact-title[b-dh5bttwuzc]  .chip i,
.compact-subtitle-part[b-dh5bttwuzc]  .chip i {
    display: none;
}

/* Chip lists inside title/subtitle collapse to one micro-pill line. */
.compact-body[b-dh5bttwuzc]  ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.compact-subtitle[b-dh5bttwuzc]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.1rem 0.45rem;
    min-width: 0;
}

.compact-badge[b-dh5bttwuzc] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    color: #222;
    white-space: nowrap;
}

.compact-actions[b-dh5bttwuzc] {
    flex: none;
}

/* Per-item disclosure for Detail-role columns (chips, long text) that don't fit the two-line row. */
.compact-expander[b-dh5bttwuzc] {
    flex: none;
    border: none;
    background: transparent;
    color: var(--color-gray-400, #9aa8b5);
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    line-height: 1;
}

.compact-expander i[b-dh5bttwuzc] {
    transition: rotate 0.15s ease-in-out;
}

.compact-expander i.expanded[b-dh5bttwuzc] {
    rotate: 90deg;
}

.compact-details[b-dh5bttwuzc] {
    padding: 0 0.9rem 0.7rem 3.25rem;
    cursor: default;
}

.compact-details[b-dh5bttwuzc]  .data-card-grid {
    font-size: var(--fs-sm);
    gap: 0.25rem 0.75rem;
}
/* /Components/Shared/Table/ListItems/InfoCardListItem.razor.rz.scp.css */
/* Style B "Info-Karten": rich bordered card with header + DataGrid detail body.
   Bordered (not shadow-elevated) so it reads correctly inside a white host Card;
   the gap between cards comes from Table.razor.css (.list-style-infocards). */
.info-card[b-o2e4ed56nz] {
    background: white;
    border: 1px solid #e4ebf2;
    border-radius: var(--border-radius);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.info-card-header[b-o2e4ed56nz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.info-card-icon[b-o2e4ed56nz] {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--item-accent, var(--accent-color)) 12%, white);
    color: var(--item-accent, var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-title[b-o2e4ed56nz] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--fs-base);
}

/* Chip lists in the title (aliases) wrap to a single compact line under the name. */
.info-card-title[b-o2e4ed56nz]  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

.info-card-title[b-o2e4ed56nz]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.1rem 0.45rem;
    font-weight: 400;
}

.info-card-badge[b-o2e4ed56nz] {
    flex: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: #222;
    white-space: nowrap;
}

.info-card-actions[b-o2e4ed56nz] {
    flex: none;
    align-self: flex-start;
    margin: -0.25rem -0.35rem 0 0;
}

.info-card-subtitle[b-o2e4ed56nz] {
    color: var(--color-gray-500, #5c7180);
    font-size: var(--fs-sm);
}

.info-card-body[b-o2e4ed56nz] {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.6rem;
}

/* Clamp long prose values (e.g. Beschreibung) to two lines inside the detail grid;
   chip lists (ul) keep their own stacked layout from DataGrid.razor.css. */
.info-card-body[b-o2e4ed56nz]  .data-card-value:not(:has(ul)) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Shared/Table/ListItems/TerminalListItem.razor.rz.scp.css */
/* Style C "Terminal-Zeilen": scanner-terminal grammar (EasyTransfer .ts-group rows).
   The hosting Card provides the outer frame; hairlines between rows come from
   Table.razor.css (.item + .item). */
.terminal-item[b-jc1kjhb31e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.9rem;
    min-height: 44px;
    justify-content: center;
}

.terminal-line[b-jc1kjhb31e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.terminal-icon[b-jc1kjhb31e] {
    flex: none;
    color: var(--item-accent, var(--color-gray-500, #5c7180));
}

.terminal-title[b-jc1kjhb31e] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status chips become tight 999px pills. */
.terminal-badge[b-jc1kjhb31e] {
    flex: none;
}

.terminal-badge[b-jc1kjhb31e]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.2rem 0.6rem;
    min-width: 0;
    box-shadow: none;
}

.terminal-actions[b-jc1kjhb31e] {
    flex: none;
}

/* Meta line: small gray, ·-separated; link chips flatten to accent-colored text. */
.terminal-meta[b-jc1kjhb31e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.15rem;
    font-size: var(--fs-xs);
    color: var(--color-gray-500, #5c7180);
    min-width: 0;
}

.terminal-meta-item[b-jc1kjhb31e] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.terminal-meta-item:not(:first-child)[b-jc1kjhb31e]::before {
    content: "·";
    margin-right: 0.4rem;
    color: var(--color-gray-400, #9aa8b5);
}

.terminal-meta-item[b-jc1kjhb31e]  .chip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--accent-color);
}

.terminal-meta-item[b-jc1kjhb31e]  .chip i {
    font-size: 0.6rem;
}
/* /Components/Shared/Table/Table.razor.rz.scp.css */
.table[b-f8snr0qbnn] {
    display: grid;
    width: 100%;
    position: relative;
}

table[b-f8snr0qbnn] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 1em;
    text-align: left;
}

.table-wrapper[b-f8snr0qbnn] {
    /* border-radius: var(--border-radius); */
    overflow: auto;
    width: 100%;
    background: #f9f9f9;
}
.table.transparent .table-wrapper[b-f8snr0qbnn] {
    background: transparent;
}

/* Scrolling body: the header row stays pinned and the table's bottom border stays
   framed while only the rows scroll. The wrapper (already overflow:auto for the
   horizontal drag-scroll) becomes the vertical scroller too — capped at
   --table-body-max-height, which the desktop pane-fill overrides to `none`
   (it then fills a definite-height .table; see template.css). */
.table.scroll-body .table-wrapper[b-f8snr0qbnn] {
    max-height: var(--table-body-max-height, 62vh);
    min-height: 0;
    border-bottom: 1px solid #e5e7eb;
}
.table.scroll-body thead th[b-f8snr0qbnn] {
    position: sticky;
    top: 0;
    z-index: 2;
}

table th[b-f8snr0qbnn], table td[b-f8snr0qbnn] {
    border: 0 solid #ddd;
    padding: 8px;
    transition: width 200ms ease, height 200ms ease;    
    will-change: width, height;
}

table td.main-column[b-f8snr0qbnn] {
    font-weight: 500;
}

/* Full-width group divider row (Table GroupBy/GroupHeader) — light tinted + bold, overriding row striping. */
.group-header-row td[b-f8snr0qbnn] {
    background-color: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
    font-weight: 600;
    color: #374151;
    padding: 8px 15px;
}

table th[b-f8snr0qbnn] {
    background-color: var(--accent-color);
    color: white;
    font-weight: normal;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: clip;
}
.table.transparent th[b-f8snr0qbnn] {
    /* --accent-color with alpha */
    background-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}

    table tr td:first-child[b-f8snr0qbnn],
    table tr th:first-child[b-f8snr0qbnn] {
        padding-left: 15px;
    }
    table tr td:last-child[b-f8snr0qbnn],
    table tr th:last-child[b-f8snr0qbnn] {
        padding-right: 15px;
    }

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

.table[b-f8snr0qbnn]  a { text-decoration: underline; }
.table[b-f8snr0qbnn]  a:hover { color: #084a8a; }

table.alternating:not(.transparent) > tbody[b-f8snr0qbnn] >  tr:nth-child(even) {
    background-color: #e8f0f6;
}

table th.sortable:hover[b-f8snr0qbnn] {
    background-color: #e0e0e0;
}

table tr:not(:has(th)):hover[b-f8snr0qbnn] {
    background-color: #f1f1f1 !important;
}

.filter-btn[b-f8snr0qbnn] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
}

.filter-popup[b-f8snr0qbnn] {
    position: absolute;
    background: white;
    border: 0 solid #ddd;
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.pagination-controls[b-f8snr0qbnn] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.pagination-controls button[b-f8snr0qbnn] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    border-radius: 4px;
}

.pagination-controls button:disabled[b-f8snr0qbnn] {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination-controls span[b-f8snr0qbnn] {
    font-size: var(--fs-base);
}

/* Lists inside table cells */
[b-f8snr0qbnn] table td > ul,
[b-f8snr0qbnn] table th > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-f8snr0qbnn] table tr:nth-child(even) .chip {
    background: #edf3f8;
}

span:has(.expander)[b-f8snr0qbnn] {
    user-select: none;
}
.expander[b-f8snr0qbnn] {
    width: 1rem;
    height: 1rem; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;    
}

.expander i[b-f8snr0qbnn] {
    transition: transform 0.2s ease-in-out;
    font-size: 0.75rem;
}

.expander.expanded i[b-f8snr0qbnn] {
    transform: rotate(90deg);
}

.list-head[b-f8snr0qbnn] {
    background: var(--accent-color);
    min-height: 22px;
    display: flex;
    justify-content: end;
    padding: 5px;
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

/* Toolbar shown when the view toggle is enabled (AutoListView): sort select left, toggle right. */
.list-toolbar[b-f8snr0qbnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
}

/* In table mode the toggle lives inside the trailing actions header cell, pinned to the right edge so
   horizontal scrolling never moves it — its accent background covers headers passing underneath. */
.table th.has-view-toggle[b-f8snr0qbnn] {
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
}

.table.scroll-body thead th.has-view-toggle[b-f8snr0qbnn] {
    z-index: 3; /* above the other sticky header cells (z-index 2) */
}

/* Tables without an actions column: the toggle shares the last header cell, pushed to its trailing edge
   so it neither adds a column nor pushes the header text around. */
.table th.with-inline-toggle[b-f8snr0qbnn] {
    position: relative;
    padding-right: 42px;
}

.table th.with-inline-toggle .header-view-toggle[b-f8snr0qbnn] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.header-view-toggle[b-f8snr0qbnn] {
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: white;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
}

.header-view-toggle:hover[b-f8snr0qbnn] {
    background: rgba(255, 255, 255, 0.3);
}

/* Segmented Tabelle⇄Liste mini-toggle (EasyTransfer mode-toggle grammar, scaled down). */
.view-toggle[b-f8snr0qbnn] {
    display: inline-flex;
    background: #e7edf3;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex: none;
}

.view-toggle-btn[b-f8snr0qbnn] {
    border: none;
    background: transparent;
    color: var(--color-gray-500, #5c7180);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.view-toggle-btn.active[b-f8snr0qbnn] {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
}

/* Full-width group divider inside the list view (GroupBy/GroupHeader). */
.list-group-header[b-f8snr0qbnn] {
    background: #f6f9fc;
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 0.4rem 0.9rem;
}

/* Row hairlines for the row-based styles; the hosting Card provides the outer frame.
   An item followed by its own child block keeps them visually joined (no rule between them). */
.list-style-compact .item + .item[b-f8snr0qbnn],
.list-style-terminal .item + .item[b-f8snr0qbnn],
.list-style-compact .item-children + .item[b-f8snr0qbnn],
.list-style-terminal .item-children + .item[b-f8snr0qbnn] {
    border-top: 1px solid #f1f5f9;
}

/* Child rows of a list item: nested tables inside render as lists themselves. */
.item-children:empty[b-f8snr0qbnn] {
    display: none;
}

.item-children[b-f8snr0qbnn]  .list {
    background: transparent;
}

/* Info cards stack with gaps and breathing room inside a NoPadding host Card. */
.list-style-infocards .list-items[b-f8snr0qbnn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px 10px;
}

/* Stale-while-revalidate: keep the outgoing rows mounted, dim them, and float a
   spinner over them while the next page loads — no height collapse, no flicker. */
.list[b-f8snr0qbnn] {
    position: relative;
}

.is-reloading[b-f8snr0qbnn] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.reload-overlay[b-f8snr0qbnn] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

.reload-overlay-badge[b-f8snr0qbnn] {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border-radius: 9999px;
    background: Canvas;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
/* /Components/Shared/TextInput.razor.rz.scp.css */
.scanner-inline-field[b-bogqsdwcfu] {
    position: relative;
}

.scanner-inline-field[b-bogqsdwcfu]  .form-control {
    padding-right: 2.5rem;
}

.scanner-inline-button[b-bogqsdwcfu] {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--primary-color);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.scanner-inline-button:hover[b-bogqsdwcfu] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/TextInputSelect.razor.rz.scp.css */
.text-input-select[b-fuaprjclbu] {
    position: relative;
}

.text-input-select-input[b-fuaprjclbu] {
    width: 100%;
}

.text-input-select-panel[b-fuaprjclbu] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    z-index: 120;
}

.placeholder[b-fuaprjclbu] {
    color: var(--color-gray-400);
}

.select-options[b-fuaprjclbu] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
}

.select-option[b-fuaprjclbu] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.select-option:hover:not(.no-click)[b-fuaprjclbu] {
    background: var(--color-gray-200);
}

.select-option:focus[b-fuaprjclbu] {
    outline: none;
    background: var(--color-gray-200);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.select-option.selected:focus[b-fuaprjclbu] {
    background: color-mix(in srgb, var(--primary-color) 20%, white);
}

.select-option.selected[b-fuaprjclbu] {
    background: color-mix(in srgb, var(--primary-color) 14%, white);
    color: color-mix(in srgb, var(--primary-color) 78%, #1f2937);
    box-shadow: inset 3px 0 0 var(--accent-color);
    font-weight: 500;
}

.select-option.no-click[b-fuaprjclbu] {
    cursor: default;
}
/* /Components/Shared/TransferSummary.razor.rz.scp.css */
.ts[b-hamfdltckq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ts.loading[b-hamfdltckq] {
        opacity: 0.6;
        pointer-events: none;
    }

.ts-empty[b-hamfdltckq] {
    padding: 16px 4px;
    font-size: var(--fs-sm);
    color: var(--color-gray-500, #6b7280);
}

/* ---- source group card ---- */
.ts-group[b-hamfdltckq] {
    border: 1px solid #e4ebf2;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.ts-group-head[b-hamfdltckq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #f6f9fc;
    border-bottom: 1px solid #eef3f8;
}

.ts-group-icon[b-hamfdltckq] {
    display: inline-flex;
    color: var(--primary-color, #00385e);
}

.ts-group-name[b-hamfdltckq] {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--primary-color, #00385e);
}

.ts-group-section[b-hamfdltckq] {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--color-gray-400, #9aa8b5);
}

/* ---- rows ---- */
.ts-rows[b-hamfdltckq] {
    display: flex;
    flex-direction: column;
}

.ts-row[b-hamfdltckq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

    .ts-row + .ts-row[b-hamfdltckq] {
        border-top: 1px solid #f1f5f9;
    }

    .ts-row.clickable[b-hamfdltckq] {
        cursor: pointer;
        transition: background 0.12s;
    }

        .ts-row.clickable:hover[b-hamfdltckq] {
            background: #f6f9fc;
        }

.ts-row-icon[b-hamfdltckq] {
    flex: 0 0 auto;
    display: inline-flex;
    width: 1.1rem;
    justify-content: center;
    color: var(--color-gray-400, #9aa8b5);
}

.ts-row-name[b-hamfdltckq] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--primary-color, #00385e);
}

/* ---- quantity pill (neutral transfer icon ⇄ for a live move; +/- direction for a saved transfer) ---- */
.ts-pill[b-hamfdltckq] {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: #e7f0f8;
    color: var(--primary-color, #00385e);
}

    .ts-pill i[b-hamfdltckq] {
        font-size: 0.72rem;
    }

    /* incoming = stock arrives (green +), outgoing = stock leaves (red −) */
    .ts-pill.incoming[b-hamfdltckq] {
        background: #e7f6ec;
        color: #15803d;
    }

    .ts-pill.outgoing[b-hamfdltckq] {
        background: #fde8ea;
        color: #e63946;
    }

/* ---- optional per-row action (e.g. the destination-position button) ---- */
.ts-row-action[b-hamfdltckq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

    /* Row-sized: the action sits inside a list row, so it stays smaller than a standalone form button. */
    .ts-row-action[b-hamfdltckq]  button {
        padding: 5px 10px;
        font-size: var(--fs-xs);
        white-space: nowrap;
    }

/* ---- delete ---- */
.ts-del[b-hamfdltckq] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-gray-400, #9aa8b5);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 0.82rem;
    transition: color 0.15s, background 0.15s;
}

    .ts-del:hover[b-hamfdltckq] {
        color: var(--accent-red, #e63946);
        background: #fde8ea;
    }
/* /Components/Supplier/ContactCard.razor.rz.scp.css */
.contact-card[b-pgu4cd76c2] {
  display: block;
  border-radius: 8px;
  padding: 12px;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  /* border: 1px solid rgba(15,23,42,0.04); */
  overflow: hidden;
}

.contact-card__header[b-pgu4cd76c2] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.contact-card__name[b-pgu4cd76c2] {
  font-weight: 600;
  font-size: var(--fs-lg);
  /* color: var(--text, #0f172a); */
}

.contact-card__dept[b-pgu4cd76c2] {
  color: var(--muted, #64748b);
  font-size: var(--fs-sm);
}

.contact-card__body[b-pgu4cd76c2] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-card__row[b-pgu4cd76c2] {
  display: flex;
}

.contact-card__link[b-pgu4cd76c2] {
  background: transparent;
  border: none;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  cursor: pointer;
  border-radius: 6px;
}

.contact-card__link:hover[b-pgu4cd76c2] {
  background: rgba(15,23,42,0.03);
}

.contact-card__text[b-pgu4cd76c2] {
}

.contact-card__footer[b-pgu4cd76c2] {
  margin-top: 8px;
}

.contact-card__meta[b-pgu4cd76c2] {
  color: var(--muted, #64748b);
}

/* Slim variant */
.contact-card--slim[b-pgu4cd76c2] {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-card--slim .contact-card__slim[b-pgu4cd76c2] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.contact-card__slim-left[b-pgu4cd76c2] {
  display: flex;
  flex-direction: column;
}

.contact-card__slim-right[b-pgu4cd76c2] {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-top: 2px;
}

.contact-card--slim .contact-card__name[b-pgu4cd76c2] {
  font-size: var(--fs-sm);
  font-weight: normal;
}

.contact-card--slim .contact-card__dept[b-pgu4cd76c2] {
  font-size: var(--fs-xs);
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card--slim .contact-card__link[b-pgu4cd76c2] {
  padding: 4px;
  display: inline-grid;
  place-items: center;
  font-size: 0.7em;
  color: #64748b99;
}
/* /Components/Toast/ToastHost.razor.rz.scp.css */
.toast-container[b-289zyor9po] {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    align-items: center;
    width: auto;
    min-width: 320px;
    max-width: 90vw;
}
/* /Components/Toast/ToastInstance.razor.rz.scp.css */
.toast[b-9n2ztnt489] {
    min-width: 200px;
    max-width: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-base);
    pointer-events: auto;
    animation: fadein-b-9n2ztnt489 0.3s;
}

.toast-info[b-9n2ztnt489] { border-left: 5px solid #2196f3; }
.toast-success[b-9n2ztnt489] { border-left: 5px solid #4caf50; }
.toast-warning[b-9n2ztnt489] { border-left: 5px solid #ff9800; }
.toast-error[b-9n2ztnt489] { border-left: 5px solid #f44336; }

.close-button[b-9n2ztnt489] {
    margin-left: auto;
    cursor: pointer;
    font-size: 1.2rem;
    color: #888;
}

.icon[b-9n2ztnt489] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.center[b-9n2ztnt489] {
    flex: 1;
}

.message[b-9n2ztnt489] {
    margin: 0;
}

@keyframes fadein-b-9n2ztnt489 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Transfer/ContainerScanChoiceDialog.razor.rz.scp.css */
.container-choice[b-mrxg9fupe7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 420px;
}

.cc-head[b-mrxg9fupe7] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cc-icon[b-mrxg9fupe7] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: var(--accent-gold, #f0b429);
    background: #fffaf0;
    border: 1px solid #f3e0a8;
}

.cc-kicker[b-mrxg9fupe7] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-gold, #b8860b);
}

.cc-name[b-mrxg9fupe7] {
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-size: var(--fs-lg);
}

.cc-question[b-mrxg9fupe7] {
    color: var(--color-gray-500, #4b5563);
    margin: 0;
}

.cc-options[b-mrxg9fupe7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .cc-options[b-mrxg9fupe7]  button {
        justify-content: flex-start;
        padding: 14px 16px;
    }

.cc-opt[b-mrxg9fupe7] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    text-align: left;
}

    .cc-opt i[b-mrxg9fupe7] {
        grid-row: 1 / span 2;
        font-size: 1.2rem;
    }

.cc-opt-main[b-mrxg9fupe7] {
    font-weight: 700;
}

.cc-opt-sub[b-mrxg9fupe7] {
    grid-column: 2;
    font-size: var(--fs-xs);
    font-weight: 400;
    opacity: 0.85;
}

.cc-footer[b-mrxg9fupe7] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Transfer/TransferForm.razor.rz.scp.css */
/* The inline destination picker owns a bounded height (the always-open select fills it and scrolls its
   options internally) so a long warehouse list never grows the dialog. */
.inline-picker[b-vvwbdor376] {
    height: min(45dvh, 380px);
    display: flex;
    flex-direction: column;
}
/* /Components/Transfer/TransferPositionDialog.razor.rz.scp.css */
.position-dialog[b-r7m9cvifu0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 420px;
}

.pd-head[b-r7m9cvifu0] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pd-icon[b-r7m9cvifu0] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: var(--primary-color, #00385e);
    background: #eef5fb;
    border: 1px solid #d9e6f2;
}

.pd-kicker[b-r7m9cvifu0] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-400, #9aa8b5);
}

.pd-name[b-r7m9cvifu0] {
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-size: var(--fs-lg);
    overflow-wrap: anywhere;
}

/* One tile per dimension — wraps on narrow dialogs instead of squeezing the values. */
.pd-dimensions[b-r7m9cvifu0] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-dimension[b-r7m9cvifu0] {
    flex: 1 1 7rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: #f6f9fc;
}

.pd-dimension-name[b-r7m9cvifu0] {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-gray-400, #9aa8b5);
}

.pd-dimension-value[b-r7m9cvifu0] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pd-footer[b-r7m9cvifu0] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* /Components/Transfer/TransferSearchPanel.razor.rz.scp.css */
.transfer-search[b-knzjzogh0n] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

    .transfer-search[b-knzjzogh0n]  .select {
        flex: 1 1 auto;
        min-height: 0;
    }

.art-opt[b-knzjzogh0n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.art-name[b-knzjzogh0n] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

.art-meta[b-knzjzogh0n] {
    font-size: var(--fs-xs);
    color: var(--color-gray-400, #6b7280);
}

.art-picked[b-knzjzogh0n] {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

.instance-check[b-knzjzogh0n] {
    color: var(--primary-color, #00385e);
}
/* /Components/Transfer/TransferSourceBar.razor.rz.scp.css */
.source-bar[b-rrbfb6dxxl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Scannen / Suchen segmented pill — a white thumb slides behind the active segment (active label in the app blue). */
.mode-toggle[b-rrbfb6dxxl] {
    position: relative;
    display: flex;
    background: #e7edf3;
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.mode-toggle-thumb[b-rrbfb6dxxl] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 4.5px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
    transition: transform 0.2s cubic-bezier(.22, .9, .3, 1);
    will-change: transform;
}

    .mode-toggle-thumb.right[b-rrbfb6dxxl] {
        transform: translateX(calc(100% + 3px));
    }

    .mode-toggle button[b-rrbfb6dxxl] {
        position: relative;
        z-index: 1;
        flex: 1;
        border: none;
        background: transparent;
        color: var(--color-gray-500, #5c7180);
        font-family: inherit;
        font-weight: 700;
        font-size: var(--fs-sm);
        padding: 9px;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: color 0.18s;
    }

    .mode-toggle button.on[b-rrbfb6dxxl] {
        color: var(--primary-color, #00385e);
    }

@media (prefers-reduced-motion: reduce) {
    .mode-toggle-thumb[b-rrbfb6dxxl] {
        transition: none;
    }
}

/* Source chips */
.src-chips[b-rrbfb6dxxl] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.src-chip[b-rrbfb6dxxl] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #dbe4ee;
    background: #fff;
    color: var(--color-gray-500, #5c7180);
    transition: all 0.15s;
}

    .src-chip:hover[b-rrbfb6dxxl] {
        border-color: var(--primary-color, #00385e);
    }

    .src-chip.active[b-rrbfb6dxxl] {
        background: var(--primary-color, #00385e);
        color: #fff;
        border-color: var(--primary-color, #00385e);
    }

        .src-chip.active i[b-rrbfb6dxxl],
        .src-chip.active[b-rrbfb6dxxl]  i {
            color: #cbe0f0;
        }

    .src-chip.add[b-rrbfb6dxxl] {
        border-style: dashed;
        color: var(--primary-color, #00385e);
        border-color: #cfe0ee;
        background: #eef5fb;
    }

.src-chip-section[b-rrbfb6dxxl] {
    opacity: 0.7;
    font-weight: 500;
}

.src-chip-count[b-rrbfb6dxxl] {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 800;
    padding: 1px 6px;
}

.src-chip.active .src-chip-count[b-rrbfb6dxxl] {
    background: rgba(255, 255, 255, 0.22);
}
/* /Components/WorkTask/WorkTaskArticleCard.razor.rz.scp.css */
/* WorkTaskArticleCard.razor.css */
.worktask-article-card[b-ox3cg0em4d] {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.worktask-article-row[b-ox3cg0em4d] {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.worktask-article-info[b-ox3cg0em4d] {
  flex: 1 1 0;
  min-width: 0;
}
.pack-action[b-ox3cg0em4d] {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 160px;
  justify-content: flex-end;
}
.packed-by[b-ox3cg0em4d] {
  color: #0bb68e;
  font-weight: 600;
}
@media (max-width: 800px) {
  .worktask-article-row[b-ox3cg0em4d] {
    flex-direction: column;
    gap: 0.5rem;
  }
  .pack-action[b-ox3cg0em4d] {
    justify-content: flex-start;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .worktask-article-card[b-ox3cg0em4d] {
    padding: 0.75rem 0.5rem;
    font-size: var(--fs-base);
  }
}
/* /Components/WorkTask/WorkTaskCard.razor.rz.scp.css */
/* WorkTaskCard.razor.css */
.worktask-title[b-juebfy2c6a] {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
  word-break: break-word;
}
.worktask-description[b-juebfy2c6a] {
  color: #444;
  font-size: var(--fs-base);
  margin-bottom: 0.5rem;
  word-break: break-word;
}
.worktask-meta[b-juebfy2c6a] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--fs-base);
  color: #666;
}
.worktask-meta-item[b-juebfy2c6a] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.worktask-users[b-juebfy2c6a] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.worktask-user-chip[b-juebfy2c6a] {
  background: #f0f4fa;
  color: #2a4d7a;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: var(--fs-base);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.worktask-completed-badge[b-juebfy2c6a] {
  position: absolute;
  top: -0.7rem;
  right: 0.2rem;
  background: #27ae60;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.13rem 0.85rem 0.13rem 0.7rem;
  box-shadow: 0 1px 4px rgba(39,174,96,0.08);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  z-index: 2;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .worktask-title[b-juebfy2c6a] {
    font-size: var(--fs-lg);
  }
  .worktask-meta[b-juebfy2c6a] {
    flex-direction: column;
    gap: 0.5rem;
  }
  .worktask-users[b-juebfy2c6a] {
    gap: 0.3rem;
  }
  .worktask-completed-badge[b-juebfy2c6a] {
    font-size: var(--fs-sm);
    padding: 0.1rem 0.6rem 0.1rem 0.5rem;
    top: -0.5rem;
    right: 0.1rem;
  }
}