/* /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/Article/ArticlePositionCard.razor.rz.scp.css */
.position-card[b-p03x59382r] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  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);
  cursor: pointer;
}

.position-card:hover[b-p03x59382r] {
  background: rgba(15,23,42,0.03);
}

.position-card__icon[b-p03x59382r] {
  flex-shrink: 0;
  color: var(--muted, #64748b);
  font-size: 0.85em;
}

.position-card__coordinates[b-p03x59382r] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* /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;
}

/* Desktop/tablet only: the panel floats over blurred page content, where the default
   form-control fill (#eef3f8, see wwwroot/app.css) barely separates from the backdrop, so
   the input takes its focused surface by default (focus still reads via border + ring).
   Below 640px .additional-content is itself an opaque white panel — white on white would
   erase the field, so there the default fill stays. */
@media (min-width: 641px) {
    .header-search[b-5fgi481xri]  input {
        background: #fff;
    }
}

/* Filter action inside the search field, left of the clear button. */
.header-filter-icon[b-5fgi481xri] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500, #5c7180);
}

.header-filter-icon.active[b-5fgi481xri] {
    color: var(--accent-color);
}

.header-filter-badge[b-5fgi481xri] {
    position: absolute;
    top: -0.45rem;
    right: -0.55rem;
    min-width: 0.95rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.6rem;
    line-height: 0.95rem;
    text-align: center;
    font-weight: 600;
}

/* Count on the search action itself — inline rather than overlaid, since the action's button is owned
   by ActionButton and carries no positioning context of ours. */
.header-action-filter-badge[b-5fgi481xri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
}

.header-filters[b-5fgi481xri] {
    display: flex;
    justify-content: stretch;
}

@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] {
        /* Bleed the scroll container's side padding (MainLayout .main) so the white panel
           reaches the screen edges like the tile above it, then re-add that padding inside —
           the content keeps its exact position, only the gap beside it disappears.
           width must drop to auto: the base rule's width:100% would keep the box at the
           container's width and let the negative margins merely shift it left. */
        width: auto;
        margin-inline: calc(var(--main-padding) * -1);
        padding-inline: calc(15px + var(--main-padding));
        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.
   Gated on :has(*) so pages that render no <PageHeader> (e.g. the dashboard) leave
   an empty outlet and don't get a stray gradient band at the top. */
.page-header:has(*)[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;
}

[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: 3px 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: 11rem; /* opened target — comfortably fits the four 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;
}

/* Dokumente is a <button>, not a NavLink — strip the UA chrome so both read as the same row. */
.util[b-liychukh9i]  button.util-item {
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.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: 11rem;
}

.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;
    }

    /* ── Overlay mode (AsideOverlay) ─────────────────────────────────────────────
       The aside rests as a blurred strip (the mobile peek, moved to the desktop) and
       flies in on hover. It stays *in flow* — the flex row is the same one the pinned
       state uses and only the aside's basis animates — so the peek and the pinned
       layout are the two ends of one continuous motion rather than two separate
       layouts. The page margin is never touched; only the aside's hit area reaches
       past it (see --aside-reach) so the pointer can open it from the window edge. */
    .view.overlay[b-2p2suj85i0] {
        --aside-peek: 40px;
        /* Effective aside width. --aside-preferred (set inline by the component for an absolute
           PreferredWidth) seeds the pre-JS paint; SplitView.razor.js then overrides --aside-width
           inline with a concrete px value — resolving any %, applying a dragged custom width, and
           keeping .aside-inner's clip width stable. The clamp is the last-resort default. */
        --aside-width: var(--aside-preferred, clamp(300px, 30vw, 440px));
        /* Shared by the fly-in and by .aside-peek-catch's hand-off — they must not drift. */
        --aside-fly: 0.28s;
        --aside-ease: cubic-bezier(.22, .9, .3, 1);
        /* How far the aside's *hit area* reaches past the view into the page margin.
           Applied as a transparent right border cancelled by an equal negative margin,
           so the pointer can slam into the window edge to open the aside while the
           layout and everything visible stay exactly where the margin puts them. */
        --aside-reach: 0px;
        /* Same trick on the *left*, but a hold rather than an opener: an aside that is already
           open extends its hit area across the visual gap (the flex gap + the main pane's right
           padding), so a pointer crossing that dead space — dragging something onto the aside, or
           just rounding the corner on the way in — cannot drop :hover and fly it shut. At rest it
           stays 0, so the pointer has to actually reach the peek strip to open the aside instead
           of merely coming near it (see the open-state rule below). */
        --aside-reach-left: 0px;
        /* Total transparent horizontal border added to the pane; the content box stays exactly
           --aside-width / --aside-peek because each side's border is cancelled by its margin. */
        --aside-hpad: calc(var(--aside-reach) + var(--aside-reach-left));
    }

    /* The second selector: a collapse-drag settles in JS (strip + hover lock) before the Blazor
       unpin re-render lands, so for that beat the pane is still .aside-pinned. The reach must
       already be on during it, or the pane's border box would briefly be 15px narrower than the
       final strip — a pointer resting in that band would get a pointerleave (clearing the lock)
       and then find itself hovering the grown strip once the unpin lands, flying it back open.
       (The left twin covers the same beat from the rule below, which lists the locked strip.) */
    .view.overlay:not(.aside-pinned)[b-2p2suj85i0],
    .view.overlay.aside-pinned:has(.view-pane.right[data-aside-hover-lock])[b-2p2suj85i0] {
        --aside-reach: var(--main-padding, 15px);
    }

    /* The left reach, switched on only once the pane is actually engaged — hovered, held open, or
       being dragged. A collapsed strip therefore has no extended hit area: it opens when the pointer
       reaches it, not 27px early. Once open the extension is self-sustaining — the pointer sitting in
       the gap keeps :hover, which keeps the extension — so it reads as a hysteresis band that only a
       deliberate move away breaks. Redeclared here rather than on .view because the state lives on the
       pane; --aside-hpad has to follow, since the inherited one was substituted with the 0 above.

       The locked strip is in the list (in either pin state) for the reason the lock section spells
       out: a border box that shrank under a resting pointer would fire the pointerleave that clears
       the lock, and the strip would fly back open the moment the unpin re-render lands. */
    .view.overlay:not(.aside-pinned) .view-pane.right:hover[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible)[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(.context-menu-toggle.open)[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right[data-aside-hold-open][b-2p2suj85i0],
    .view.overlay .view-pane.right[data-aside-hover-lock][b-2p2suj85i0],
    .view.overlay.aside-resizing:not(.aside-pinned) .view-pane.right[b-2p2suj85i0] {
        --aside-reach-left: 27px; /* 12px flex gap + 15px main-pane right padding */
        --aside-hpad: calc(var(--aside-reach) + var(--aside-reach-left));
    }

    /* Gap is tighter than the classic split's 30px: both panes already carry 15px of
       their own padding, and the main pane is the point of this mode — don't spend
       width on air. overflow must be visible or the aside's reach, which sticks out
       past the pane row, would raise a horizontal scrollbar; nothing scrolls here
       anyway, each pane is its own scroller. */
    .view.overlay .view-scroll[b-2p2suj85i0] {
        display: flex;
        gap: 0;
        overflow: visible;
    }

    .view.overlay .view-pane.left[b-2p2suj85i0] {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The pane is the clip window: its width animates, its content does not. The width
       carries --aside-reach on top of the visible width, the border spends it and the
       negative margin takes it back out of the layout — net zero, but the pane's
       border box (and with it :hover) runs to the window edge. */
    .view.overlay .view-pane.right[b-2p2suj85i0] {
        position: relative;
        flex: 0 0 calc(var(--aside-width) + var(--aside-hpad));
        width: calc(var(--aside-width) + var(--aside-hpad));
        border-right: var(--aside-reach) solid transparent;
        margin-right: calc(var(--aside-reach) * -1);
        /* Left twin of the reach border: a transparent hit-area extension across the gap,
           cancelled by an equal negative margin so nothing visible moves. */
        border-left: var(--aside-reach-left) solid transparent;
        margin-left: calc(var(--aside-reach-left) * -1);
        padding: 0;
        overflow: hidden;
        /* border-right-width and margin-right ride the exact same curve as the width.
           Pinning drops --aside-reach to 0, and only if all three move in lockstep does
           (width − border) stay constant — otherwise the visible panel would shrink by
           the reach and spring back over the transition. */
        transition: flex-basis var(--aside-fly) var(--aside-ease),
                    width var(--aside-fly) var(--aside-ease),
                    border-right-width var(--aside-fly) var(--aside-ease),
                    margin-right var(--aside-fly) var(--aside-ease),
                    border-left-width var(--aside-fly) var(--aside-ease),
                    margin-left var(--aside-fly) var(--aside-ease),
                    filter 0.25s ease;
        /* Deliberately no will-change: a promised `filter` makes the pane a containing
           block for fixed-position descendants, which would strand Select's dropdown
           (position: fixed) inside the pane. Settling on `filter: none` avoids that. */
    }

    /* Collapsed: clipped to the peek strip and blurred, matching the treatment mobile
       gives its inactive pane. */
    .view.overlay:not(.aside-pinned) .view-pane.right[b-2p2suj85i0] {
        flex-basis: calc(var(--aside-peek) + var(--aside-hpad));
        width: calc(var(--aside-peek) + var(--aside-hpad));
        filter: brightness(0.8) blur(3px) grayscale(0.2) opacity(0.8);
    }

    /* Fly in. The pane grows leftwards, and .aside-inner — anchored to the pane's left
       edge — travels with it, so the panel slides in from the border instead of being
       progressively uncovered.

       :has(:focus-visible) rather than :focus-within on purpose. A mouse click never
       sets :focus-visible, so clicking the pin button to *unpin* doesn't leave the
       panel held open — it collapses as soon as the pointer leaves, which is the whole
       point of unpinning. Keyboard focus and text inputs do get :focus-visible, so
       tabbing into the aside (or typing in it) still holds it open.

       :not(.aside-resizing): while dragging, its `filter: none` (specificity 0,6,0, since the pane
       is :hovered when the pointer is on the handle) would otherwise outrank the distance-driven
       collapse blur (0,5,0) and cancel it — which is why the blur previously only showed while
       pinned. The forced-open rule below keeps the aside open during the drag regardless of hover. */
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right:hover[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right:has(:focus-visible)[b-2p2suj85i0] {
        flex-basis: calc(var(--aside-width) + var(--aside-hpad));
        width: calc(var(--aside-width) + var(--aside-hpad));
        filter: none;
    }

    /* ── Held open by a popover opened from inside ───────────────────────────────
       ContextMenu (and every Select/ActionMenu built on it) portals its panel to a SectionOutlet
       at the layout root — outside this pane. So the moment the pointer travels from the toggle
       onto the panel, the pane loses :hover and the aside flies shut underneath the open menu.
       A mouse click sets no :focus-visible, so the focus twin above doesn't catch it either.

       The *toggle* stays in the aside and carries .open for exactly as long as the panel is up,
       which makes :has() on it a hover-independent hold with no JS and no lifecycle to clear.
       :not([data-aside-hover-lock]) keeps the collapse-drag's lock authoritative — the :has()
       argument's two classes would otherwise push this rule past the lock's specificity. */
    .view.overlay:not(.aside-pinned):not(.aside-resizing)
        .view-pane.right:not([data-aside-hover-lock]):has(.context-menu-toggle.open)[b-2p2suj85i0] {
        flex-basis: calc(var(--aside-width) + var(--aside-hpad));
        width: calc(var(--aside-width) + var(--aside-hpad));
        filter: none;
    }

    /* Held at its final width at all times so flying in/out never reflows the aside. */
    .view.overlay .aside-inner[b-2p2suj85i0] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--aside-width);
        overflow: auto;
        padding: 15px;
    }

    /* Nothing in the clipped sliver may be clickable. Two layers, because each covers the
       other's blind spot:

       1. pointer-events on .aside-inner is z-index proof — no descendant can paint its way
          out of it — but it flips back the instant :hover matches, i.e. while the aside is
          still flying in.
       2. .aside-peek-catch covers exactly that window. It sits above the content and only
          steps aside once the fly-in has finished, via a visibility transition-delay
          (visibility is one of the few hit-testing-relevant properties that can be delayed).
          Collapsing is not delayed — the base rule carries no transition — so the catch is
          back the moment the pointer leaves and the aside flies out unclickable. */
    .view.overlay:not(.aside-pinned) .view-pane.right:not(:hover):not(:has(:focus-visible)):not([data-aside-hold-open]):not(:has(.context-menu-toggle.open)) .aside-inner[b-2p2suj85i0] {
        pointer-events: none;
    }

    .view.overlay .aside-peek-catch[b-2p2suj85i0] {
        position: absolute;
        inset: 0;
        z-index: 3; /* over .aside-inner and over .aside-pin, both idle while collapsed */
    }

    .view.overlay:not(.aside-pinned) .view-pane.right:hover .aside-peek-catch[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible) .aside-peek-catch[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(.context-menu-toggle.open) .aside-peek-catch[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned) .view-pane.right[data-aside-hold-open] .aside-peek-catch[b-2p2suj85i0] {
        visibility: hidden;
        transition: visibility 0s var(--aside-fly);
    }

    /* Pinned there is nothing to guard. */
    .view.overlay.aside-pinned .aside-peek-catch[b-2p2suj85i0] {
        display: none;
    }

    /* ── Hover lock after a collapse-drag ────────────────────────────────────────
       A drag that ends in the collapse zone unpins the aside, but the pointer is still over
       the pane — and focus may still sit inside it — so :hover / :has(:focus-visible) would
       immediately fly it back open. While aside-hover-lock is set the pane is held at the
       collapsed strip *unconditionally*: no :hover in these selectors, so neither a lingering
       hover nor focus can reopen it. The JS clears the lock on the next pointerleave, press,
       or focusin, so the aside only reopens on a fresh enter, a click, or a deliberate tab-in.

       The .aside-pinned twin covers the unpin round-trip: the collapse settles in JS first and
       the Blazor unpin re-render lands a beat later (SignalR) — without it the pane would bounce
       back toward its expanded width until the new class arrives.

       The lock is a data attribute the JS sets on the *pane*, not a class on .view: the collapse
       unpins, which re-renders .view (and the pane) and lets Blazor rewrite every attribute it renders
       — including bound class attributes — wiping any JS class. Blazor never renders this data
       attribute, so it survives. :not(.aside-resizing) keeps the unpinned selector at the fly-in
       rules' (0,7,0) specificity; being later in the file, the lock wins the tie. */
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right[data-aside-hover-lock][b-2p2suj85i0],
    .view.overlay.aside-pinned:not(.aside-resizing) .view-pane.right[data-aside-hover-lock][b-2p2suj85i0] {
        flex-basis: calc(var(--aside-peek) + var(--aside-hpad));
        width: calc(var(--aside-peek) + var(--aside-hpad));
        filter: brightness(0.8) blur(3px) grayscale(0.2) opacity(0.8);
    }

    /* Keep the strip inert and the click-catcher live so a press lands on it (and clears the lock).
       The catch selectors out-specify both the hover/focus hand-off above and the pinned
       display:none, so the strip is guarded in either pin state. */
    .view.overlay .view-pane.right[data-aside-hover-lock] .aside-inner[b-2p2suj85i0] {
        pointer-events: none;
    }

    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right[data-aside-hover-lock] .aside-peek-catch[b-2p2suj85i0],
    .view.overlay.aside-pinned .view-pane.right[data-aside-hover-lock] .aside-peek-catch[b-2p2suj85i0] {
        display: block;
        visibility: visible;
        transition: none;
    }

    /* The handle stays live on a locked strip — a press must be able to clear the lock AND start a
       fresh drag in the same gesture (hiding it here made a drag-intent press land on the peek-catch
       and resolve as a mere hover-open). Only the pin button is withheld from the strip. */
    .view.overlay .view-pane.right[data-aside-hover-lock] .aside-pin[b-2p2suj85i0] {
        opacity: 0;
        pointer-events: none;
    }

    /* ── Hold-open after a drag-open ─────────────────────────────────────────────
       The hover lock's inverse. A drag/fling that opens the aside from the strip pins it, but the
       pin re-render arrives a beat later (SignalR) and a touch drag leaves no :hover behind — without
       this bridge the pane would fly back to the strip and then reopen when the pin lands. The JS
       clears it via the same pane listeners as the lock (pointerleave for mouse/pen, press, focusin);
       if the pin never lands it degrades to plain hover behaviour at the next pointer interaction. */
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right[data-aside-hold-open][b-2p2suj85i0] {
        flex-basis: calc(var(--aside-width) + var(--aside-hpad));
        width: calc(var(--aside-width) + var(--aside-hpad));
        filter: none;
    }

    /* Pin toggle — mirrors the nav sidebar's .sidebar-toggle. Inside the pane (so moving
       onto it keeps the pane hovered) but above .aside-inner's scroll, hence its own
       backdrop. */
    .aside-pin[b-2p2suj85i0] {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        color: var(--primary-color);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, color 0.2s, opacity 0.2s;
    }

    .aside-pin:hover[b-2p2suj85i0] {
        background: rgba(13, 108, 172, 0.1);
        color: var(--accent-color);
    }

    /* Nothing to pin while the aside is a strip. */
    .view.overlay:not(.aside-pinned) .view-pane.right:not(:hover):not(:has(:focus-visible)):not([data-aside-hold-open]):not(:has(.context-menu-toggle.open)) .aside-pin[b-2p2suj85i0] {
        opacity: 0;
        pointer-events: none;
    }

    /* ── Resize handle ───────────────────────────────────────────────────────────
       A full-height grab strip along the aside's left border. It lives inside the overflow:hidden
       pane, so it starts at the pane edge; the centered bar draws the eye to it. Active in every
       state, including the collapsed peek and the hover-locked strip — a press there both clears the
       lock and starts a drag. Sits above the peek-catch (z 3) so the collapsed strip is grabbable.
       Width is 18px (a border grip) when the aside is open, but spans the whole peek when collapsed
       (rule below) so the drag can be started from anywhere on the peek. */
    .aside-resize[b-2p2suj85i0] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 18px;
        z-index: 4;
        cursor: col-resize;
        touch-action: none;     /* the pointer drags the border, never scrolls */
        user-select: none;
        opacity: 1;
        pointer-events: auto;
        /* On hover the aside flies open; hold the wide peek grab area through the fly (transition-delay),
           then glide down to the 18px grip so the open aside's content is fully interactive. */
        transition: width 0.18s ease var(--aside-fly), opacity 0.2s ease;
    }

    /* Collapsed peek: the whole strip is the grab area — including a hover-locked strip, which is
       visually identical and must accept a fresh drag (the press clears the lock and primes the drag
       in one gesture). Not while dragging or held open (kept at the grip). */
    .view.overlay:not(.aside-pinned):not(.aside-resizing)
        .view-pane.right:not(:hover):not(:has(:focus-visible)):not([data-aside-hold-open]):not(:has(.context-menu-toggle.open)) .aside-resize[b-2p2suj85i0],
    .view.overlay:not(.aside-pinned):not(.aside-resizing)
        .view-pane.right[data-aside-hover-lock] .aside-resize[b-2p2suj85i0] {
        width: var(--aside-peek);
        transition: width 0.18s ease, opacity 0.2s ease; /* widen back immediately on collapse (no fly delay) */
    }

    /* Drawer-style bar (cf. .bottom-drawer-handle-bar), stood on end. Vertically it tracks the aside's
       content centre via --aside-handle-center (set by SplitView.razor.js), capped at the visible
       centre; the 50% default holds until the module measures. max-height keeps it proportional when
       the content is short. */
    .aside-resize-bar[b-2p2suj85i0] {
        position: absolute;
        left: 50%;
        top: var(--aside-handle-center, 50%);
        transform: translate(-50%, -50%);
        width: 5px;
        height: 44px;
        max-height: 60%;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.18);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        /* Only `top` transitions (frozen mid-drag, re-set on release, so the bar eases to the content's
           new centre instead of hopping). The accent glow below is driven by distance, not time, so it
           must NOT be on a time transition. */
        transition: top var(--aside-fly) var(--aside-ease);
    }

    .aside-resize:hover .aside-resize-bar[b-2p2suj85i0] {
        background: rgba(0, 0, 0, 0.3);
    }

    /* Snap proximity, driven per-frame by --aside-snap-t (0..1, distance to the nearest of
       min/preferred/max): the bar itself tints toward the accent, wrapped in a soft accent glow
       (rather than a hard fill). At t=0 both vanish (grey bar, zero-radius transparent shadow).
       No time transition — the value is the distance. */
    .view.overlay.aside-resizing .aside-resize-bar[b-2p2suj85i0] {
        background: color-mix(in srgb, var(--accent-color) calc(var(--aside-snap-t, 0) * 65%), rgba(0, 0, 0, 0.3));
        box-shadow:
            0 0 calc(var(--aside-snap-t, 0) * 7px) calc(var(--aside-snap-t, 0) * 1px)
                color-mix(in srgb, var(--accent-color) calc(var(--aside-snap-t, 0) * 55%), transparent),
            0 1px 2px rgba(0, 0, 0, 0.08);
    }

    /* ── While dragging ──────────────────────────────────────────────────────────
       Freeze the fly-in transition (the width is following the pointer, not easing)
       and force the aside open so a captured pointer straying off the pane can't let
       an unpinned aside collapse mid-drag. */
    .view.overlay.aside-resizing[b-2p2suj85i0] {
        cursor: col-resize;
        user-select: none;
    }

    /* Width follows the pointer instantly (no width/flex-basis easing). The filter is driven per-frame by
       --aside-collapse-t (0 at the min width → 1 at the collapse point), scaling each part of the collapsed
       peek's blur so the preview grows with *distance to the collapse point*, not over time — hence no
       transition here. It applies whether pinned or not, so the forced-open rule below no longer sets it. */
    .view.overlay.aside-resizing .view-pane.right[b-2p2suj85i0] {
        transition: none;
        filter:
            brightness(calc(1 - 0.2 * var(--aside-collapse-t, 0)))
            blur(calc(3px * var(--aside-collapse-t, 0)))
            grayscale(calc(0.2 * var(--aside-collapse-t, 0)))
            opacity(calc(1 - 0.2 * var(--aside-collapse-t, 0)));
    }

    .view.overlay.aside-resizing:not(.aside-pinned) .view-pane.right[b-2p2suj85i0] {
        flex-basis: calc(var(--aside-width) + var(--aside-hpad));
        width: calc(var(--aside-width) + var(--aside-hpad));
    }

    .view.overlay.aside-resizing .aside-peek-catch[b-2p2suj85i0] {
        visibility: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
        .view.overlay .view-pane.right[b-2p2suj85i0] {
            transition: none;
        }
        /* The fly-in is instant here, so the catch has nothing left to cover. */
        .view.overlay:not(.aside-pinned) .view-pane.right:hover .aside-peek-catch[b-2p2suj85i0],
        .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible) .aside-peek-catch[b-2p2suj85i0] {
            transition: none;
        }
    }
}
    
@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/Project/ReportMaterialFieldEditor.razor.rz.scp.css */
.material-editor[b-44txew2fps] {
    display: flex;
    flex-direction: column;
}

.material-hint[b-44txew2fps] {
    color: #7b8189;
    font-size: 0.875rem;
    margin: 0.25rem 0 0.5rem;
}

.material-list[b-44txew2fps] {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One position per row: name (grows), quantity, remove. The whole row opens the quantity dialog. */
.material-row[b-44txew2fps] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    cursor: pointer;
}

.material-row:hover[b-44txew2fps] {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.material-name[b-44txew2fps] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-quantity[b-44txew2fps] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.material-remove[b-44txew2fps] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #b0b4ba;
    background: transparent;
    border: 1px solid transparent;
    transition: color 0.15s, background 0.15s;
}

.material-remove:hover[b-44txew2fps] {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

.material-remove .fa[b-44txew2fps] {
    font-size: 0.875rem;
}

/* Full-width add button, mirroring the generated collection editor's own add row. */
.material-addrow[b-44txew2fps] {
    display: flex;
    margin-top: 0.5rem;
}

.material-addrow[b-44txew2fps]  .material-add {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.material-source[b-44txew2fps] {
    color: #7b8189;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}
/* /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 */
/* The action menu is a Select. Its panel (options, hover, slide-in) comes from Select as-is; only the
   toggle is toned down here, because a full select pill on every table row would be far too heavy. */
.action-menu[b-yy55xoyl5f] {
    display: inline-flex;
}

.action-menu[b-yy55xoyl5f]  .select {
    min-height: 0;
    min-width: 0;
    background: transparent;
}

.action-menu[b-yy55xoyl5f]  .select:hover:not(.is-disabled) {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.action-menu[b-yy55xoyl5f]  .select.placeholder-compact .selected-option {
    padding: 0.5rem 0.7rem;
}

/* An ellipsis already reads as "more" — the select's caret would only add noise next to it. */
.action-menu[b-yy55xoyl5f]  .select .expander {
    display: none;
}

.action-menu-toggle[b-yy55xoyl5f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500, #5c7180);
    line-height: 1;
    min-width: 0.75rem;
}

/* Option content. The row chrome (padding, hover, animation) belongs to Select; this only lays out
   icon + label and carries the action's type colour. */
.action-option[b-yy55xoyl5f] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.action-option i[b-yy55xoyl5f] {
    width: 1.1em;
    text-align: center;
}

.action-option.danger[b-yy55xoyl5f] {
    color: var(--color-red-800);
}

.action-option.primary[b-yy55xoyl5f] {
    color: var(--primary-color);
}

.action-option-label[b-yy55xoyl5f] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /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;
    }
}

/* Rich option row (only when the host supplies OptionMeta/OptionPicked) — kept in step with the
   EasyTransfer search list, see TransferSearchPanel.razor.css. */
.art-opt[b-xozso6bfln] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.art-name[b-xozso6bfln] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

.art-meta[b-xozso6bfln] {
    font-size: var(--fs-xs);
    color: var(--color-gray-400, #6b7280);
}

.art-picked[b-xozso6bfln] {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

/* 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;
}

/* ── Edge variants ───────────────────────────────────────────────────────────────
   The base rules above are the bottom sheet (also tagged .edge-bottom). These override the
   axis, anchoring, shape and handle orientation for the other three edges. The dragged size is
   a width for right/left and a height for top/bottom (the JS engine sets the matching property). */

.bottom-drawer.edge-right[b-s0l43pk16n],
.bottom-drawer.edge-left[b-s0l43pk16n] {
    top: 0;
    bottom: 0;
    max-height: none;
    max-width: 90vw;
    will-change: width;
}

.bottom-drawer.edge-right[b-s0l43pk16n] {
    left: auto;
    right: 0;
    flex-direction: row;                 /* handle on the left (interior side) */
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.bottom-drawer.edge-left[b-s0l43pk16n] {
    right: auto;
    left: 0;
    flex-direction: row-reverse;         /* handle on the right (interior side) */
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.bottom-drawer.edge-top[b-s0l43pk16n] {
    top: 0;
    bottom: auto;
    flex-direction: column-reverse;      /* handle at the bottom (interior side) */
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Vertical-edge handle: a full-height grab strip with the bar stood on end. */
.bottom-drawer.edge-right .bottom-drawer-handle[b-s0l43pk16n],
.bottom-drawer.edge-left .bottom-drawer-handle[b-s0l43pk16n] {
    height: auto;
    width: 28px;
    cursor: col-resize;
}

.bottom-drawer.edge-right .bottom-drawer-handle-bar[b-s0l43pk16n],
.bottom-drawer.edge-left .bottom-drawer-handle-bar[b-s0l43pk16n] {
    width: 5px;
    height: 44px;
}

.bottom-drawer.edge-right .bottom-drawer-content[b-s0l43pk16n],
.bottom-drawer.edge-left .bottom-drawer-content[b-s0l43pk16n] {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}
/* /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);
}

/* Toggle buttons whose panel is open (header search / alerts): take the same raised white
   surface the panel's search input uses, so button and panel read as one open state. */
.is-active[b-cfbxvuh54f], .is-active:hover:enabled[b-cfbxvuh54f] {
    background: #fff;
}

.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-entity-icon[b-26iqnr74w3] {
    font-size: 0.9em;
    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;
}

/* Embedded (Inline): the host panel already supplies the chrome, so drop the popover look and let the levels
   stretch to the height the host gives them (the drill-down panel of a select, which owns the scroll). */
.cop-panel.cop-panel-inline[b-agopjlsyum] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

    .cop-panel-inline .cop-level[b-agopjlsyum] {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

/* 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: hidden;
}

/* Only the folders scroll; the breadcrumb, the toolbar and the footer stay put. */
.documents-body[b-s0hjtcdewd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    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;
}

/* Upload sits at the left, the search + filter/sort/view action bar fills the rest of the row. */
.documents-actionbar[b-s0hjtcdewd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Rides the dialog's animated lower edge (data-dialog-bottom), so it needs to be opaque and stacked
   above the body it slides over while the box grows. */
.documents-footer[b-s0hjtcdewd] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
    background: var(--surface, white);
    position: relative;
    z-index: 1;
}

.documents-tree-host[b-s0hjtcdewd] {
    padding: 0.25rem;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.doc-tile-label .meta[b-s0hjtcdewd] {
    font-size: var(--fs-sm);
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.doc-tile-owner[b-s0hjtcdewd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin-top: 0.15rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: var(--surface-alt, #f5f5f5);
    color: #555;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.doc-tile-owner span[b-s0hjtcdewd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-tile-owner:hover[b-s0hjtcdewd] {
    border-color: var(--primary-color, #264653);
    color: var(--primary-color, #264653);
}

.documents-resultcount[b-s0hjtcdewd] {
    font-size: var(--fs-sm);
    color: #777;
    padding: 0 0.25rem;
}

.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/DocumentToolbar.razor.rz.scp.css */
/* One action bar: inline search grows to fill, the icon actions hug the right (mirrors the table toolbar). */
.doc-toolbar[b-9p09jv21uz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.doc-toolbar-actions[b-9p09jv21uz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* --- Search field (shared by the inline desktop host and the collapsed mobile panel) --- */
.doc-search[b-9p09jv21uz] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Desktop: the search grows to fill the bar. Below 640px it hides for the collapsed button. */
.doc-search-inline[b-9p09jv21uz] {
    flex: 1;
}

.doc-search-embedded[b-9p09jv21uz] {
    width: 100%;
}

.doc-search-icon[b-9p09jv21uz] {
    position: absolute;
    left: 0.65rem;
    color: #888;
    font-size: 0.85rem;
    pointer-events: none;
}

/* The input is rendered by DebouncedInput (a child component), so it needs ::deep to cross the scope. */
.doc-search[b-9p09jv21uz]  input {
    width: 100%;
    /* right padding clears the clear button + the global-scope toggle sitting inside the field */
    padding: 0.5rem 3.9rem 0.5rem 2rem;
    border: 1px solid #ccc;
    border-radius: 0.45rem;
    font-size: var(--fs-sm);
    background: white;
}

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

/* No scope toggle in the field (the upload picker) — reclaim its right padding and reseat the clear button. */
.doc-search-scopeless[b-9p09jv21uz]  input {
    padding-right: 2.4rem;
}

.doc-search-scopeless .doc-search-clear[b-9p09jv21uz] {
    right: 0.4rem;
}

.doc-search-clear[b-9p09jv21uz] {
    position: absolute;
    right: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

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

/* The "Überall suchen" scope toggle, seated at the right edge of the search field. */
.doc-search-global[b-9p09jv21uz] {
    position: absolute;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.doc-search-global:hover[b-9p09jv21uz] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-color, #264653);
}

.doc-search-global.active[b-9p09jv21uz] {
    background: var(--primary-color, #264653);
    color: white;
}

/* The collapsed search lives in the actions strip; only shown on narrow viewports. */
.doc-search-mobile[b-9p09jv21uz] {
    display: none;
}

/* Combined selector so it beats the base .doc-toolbar-panel sizing that follows it in the sheet. */
.doc-toolbar-panel.doc-search-panel[b-9p09jv21uz] {
    min-width: 17rem;
    max-width: 24rem;
}

@media (max-width: 640px) {
    .doc-search-inline[b-9p09jv21uz] {
        display: none;
    }

    .doc-search-mobile[b-9p09jv21uz] {
        display: inline-flex;
    }
}

/* --- Filter / sort / view toggle buttons --- */
.doc-toolbar-btn[b-9p09jv21uz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.45rem;
    border: 1px solid #d4d4d4;
    background: white;
    color: var(--primary-color, #264653);
    cursor: pointer;
}

.doc-toolbar-btn:hover[b-9p09jv21uz] {
    border-color: var(--primary-color, #264653);
    background: rgba(0, 0, 0, 0.03);
}

.doc-toolbar-btn.active[b-9p09jv21uz] {
    border-color: var(--primary-color, #264653);
    color: var(--primary-color, #264653);
}

.doc-toolbar-badge[b-9p09jv21uz] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--primary-color, #264653);
    color: white;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Labelled global toggle kept for the entity-card surface, which has no inline search to host the icon. */
.doc-toolbar-toggle[b-9p09jv21uz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    background: white;
    color: var(--primary-color, #264653);
    cursor: pointer;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.doc-toolbar-toggle:hover[b-9p09jv21uz] {
    border-color: var(--primary-color, #264653);
    background: rgba(0, 0, 0, 0.03);
}

.doc-toolbar-toggle.active[b-9p09jv21uz] {
    background: var(--primary-color, #264653);
    border-color: var(--primary-color, #264653);
    color: white;
}

/* --- Filter / sort popover panels (teleported into the ContextMenu outlet, which adds no chrome) --- */
.doc-toolbar-panel[b-9p09jv21uz] {
    min-width: 15rem;
    max-width: 20rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(15, 42, 64, 0.18);
}

.doc-toolbar-panel-title[b-9p09jv21uz] {
    margin: 0.35rem 0 0.15rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #777;
}

.doc-toolbar-panel-title:first-child[b-9p09jv21uz] {
    margin-top: 0;
}

/* Pivot between the two filter sets: documents on screen vs the folders below them. */
.doc-toolbar-tabs[b-9p09jv21uz] {
    display: flex;
    gap: 0.15rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eee;
}

.doc-toolbar-tab[b-9p09jv21uz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: #777;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.doc-toolbar-tab:hover:not(.selected)[b-9p09jv21uz] {
    background: rgba(0, 0, 0, 0.04);
}

.doc-toolbar-tab.selected[b-9p09jv21uz] {
    background: rgba(38, 70, 83, 0.09);
    color: var(--primary-color, #264653);
    font-weight: 600;
}

/* Inline, unlike the button's corner badge: it labels the tab rather than floating over an icon. */
.doc-toolbar-tab-count[b-9p09jv21uz] {
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--primary-color, #264653);
    color: white;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-toolbar-filter-row[b-9p09jv21uz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.doc-toolbar-filter-label[b-9p09jv21uz] {
    font-size: var(--fs-sm);
    color: #555;
    font-weight: 500;
}

.doc-toolbar-option[b-9p09jv21uz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: #222;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.doc-toolbar-option:hover[b-9p09jv21uz] {
    background: rgba(0, 0, 0, 0.04);
}

.doc-toolbar-option.selected[b-9p09jv21uz] {
    color: var(--primary-color, #264653);
    font-weight: 600;
}

.doc-toolbar-panel-footer[b-9p09jv21uz] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
    border-top: 1px solid #eee;
    padding-top: 0.4rem;
}

.doc-toolbar-reset[b-9p09jv21uz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--primary-color, #264653);
    cursor: pointer;
    font-size: var(--fs-sm);
}

.doc-toolbar-reset:disabled[b-9p09jv21uz] {
    color: #bbb;
    cursor: default;
}

.doc-toolbar-reset:not(:disabled):hover[b-9p09jv21uz] {
    background: rgba(0, 0, 0, 0.04);
}
/* /Components/Shared/Documents/DocumentTree.razor.rz.scp.css */
.doc-tree[b-f6ap00lzcg] {
    display: flex;
    flex-direction: column;
}

.doc-tree-row[b-f6ap00lzcg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.4rem;
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

.doc-tree-row.folder[b-f6ap00lzcg] {
    cursor: pointer;
}

.doc-tree-row.folder:hover[b-f6ap00lzcg] {
    background: rgba(0, 0, 0, 0.03);
}

/* Caret is its own hit target (toggle only); the ::after widens it for touch without shifting layout. */
.doc-tree-caret-btn[b-f6ap00lzcg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.doc-tree-caret-btn[b-f6ap00lzcg]::after {
    content: "";
    position: absolute;
    inset: -0.5rem -0.35rem;
}

.doc-tree-caret[b-f6ap00lzcg] {
    font-size: 0.8rem;
    color: #9aa8b5;
    width: 0.85rem;
    flex-shrink: 0;
    transition: rotate 0.12s ease-in-out;
}

.doc-tree-caret-btn:hover .doc-tree-caret[b-f6ap00lzcg] {
    color: var(--primary-color, #264653);
}

.doc-tree-caret.expanded[b-f6ap00lzcg] {
    rotate: 90deg;
}

.doc-tree-icon[b-f6ap00lzcg] {
    font-size: 1.2rem;
    width: 1.5rem;
    text-align: center;
    color: #555;
    flex-shrink: 0;
}

.doc-tree-open[b-f6ap00lzcg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    /* Align file rows with folder rows, which lead with a caret. */
    padding-left: calc(0.85rem + 0.6rem);
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
}

/* Folder rows lead with a real caret button, so their body drops the caret-width spacer. */
.doc-tree-open-folder[b-f6ap00lzcg] {
    padding-left: 0;
}

.doc-tree-open:hover .primary[b-f6ap00lzcg] {
    text-decoration: underline;
}

.doc-tree-text[b-f6ap00lzcg] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.doc-tree-text .primary[b-f6ap00lzcg] {
    font-weight: 500;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-tree-text .secondary[b-f6ap00lzcg] {
    font-size: var(--fs-sm);
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-tree-row.file[b-f6ap00lzcg] {
    padding: 0;
}

.doc-tree-row.file .doc-tree-open[b-f6ap00lzcg] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.doc-tree-empty[b-f6ap00lzcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    color: #888;
    text-align: center;
}

.doc-tree-empty i[b-f6ap00lzcg] {
    font-size: 1.6rem;
}

/* The nested Table lists carry their own hairlines; keep them transparent inside the tree. */
.doc-tree[b-f6ap00lzcg]  .list {
    background: transparent;
}
/* /Components/Shared/Documents/DocumentUploadDialog.razor.rz.scp.css */
.upload-form[b-ury1ujg07q] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
    max-height: 65vh;
    overflow: auto;
}

/* Rides the dialog's animated lower edge (data-dialog-bottom): opaque and above the body it slides over. */
.upload-footer[b-ury1ujg07q] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.75rem;
    background: var(--surface, white);
    position: relative;
    z-index: 1;
}

.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);
}

/* The form itself scrolls now, so the grid just lays the type tiles out. */
.picker-grid[b-ury1ujg07q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    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;
}

/* Mirrors the browser's folder tiles, which name their document total under the label. */
.picker-tile .picker-tile-count[b-ury1ujg07q] {
    color: #999;
}

.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);
}

.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);
}

/* A staged file is chosen but not sent yet — solid border to read as settled, not as an empty target. */
.drop-zone.has-file[b-ury1ujg07q] {
    border-style: solid;
    border-color: var(--primary-color, #264653);
    background: rgba(38, 70, 83, 0.04);
}

.drop-zone.has-file .drop-zone-prompt i[b-ury1ujg07q] {
    color: var(--primary-color, #264653);
}

.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);
}

.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-filterbar[b-60n2v5hvaa] {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eee;
}

.entity-docs-tree[b-60n2v5hvaa] {
    padding: 0.35rem 0.5rem;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.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/Documents/EntityFolderBrowser.razor.rz.scp.css */
/* Folder presentation for one browser level. The grid itself is the table's list-style-tiles rule; these
   are the tiles and rows that sit in it, matching the browser's own folder tiles and the entity card's rows. */

.folder-browser[b-lz9b3icnbk] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tiles */
.folder-tile[b-lz9b3icnbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    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;
}

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

.folder-tile-icon[b-lz9b3icnbk] {
    font-size: 1.6rem;
}

.folder-tile-label[b-lz9b3icnbk],
.folder-tile-meta[b-lz9b3icnbk] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
}

.folder-tile-label[b-lz9b3icnbk] {
    color: #333;
}

.folder-tile-meta[b-lz9b3icnbk] {
    color: #999;
}

/* Rows */
.folder-row[b-lz9b3icnbk] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.folder-row:hover[b-lz9b3icnbk] {
    background: rgba(0, 0, 0, 0.03);
}

.folder-row-icon[b-lz9b3icnbk] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.folder-row-text[b-lz9b3icnbk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.folder-row-text .primary[b-lz9b3icnbk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.folder-row-text .secondary[b-lz9b3icnbk] {
    font-size: var(--fs-sm);
    color: #999;
}

.folder-row-chevron[b-lz9b3icnbk] {
    font-size: 0.75rem;
    color: #bbb;
    flex-shrink: 0;
}
/* /Components/Shared/EntityChangeDisplay.razor.rz.scp.css */
/* Row geometry mirrors the Compact list item (Components/Shared/Table/ListItems/CompactListItem.razor.css):
   44px two-line row, leading icon, title + meta, trailing actions. Deliberate deviation: the icon keeps its
   high-contrast fill (solid entity colour, white glyph) instead of Compact's tinted circle. */
.entity-change-display[b-z985k21rp2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
}

.icon[b-z985k21rp2] {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    background: var(--accent-color);
    cursor: pointer;
}

.entity-change-display__content[b-z985k21rp2] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The change sentence can outrun a narrow column; truncate like a list title (full text in the tooltip). */
.activity-title[b-z985k21rp2] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-meta[b-z985k21rp2] {
    color: var(--color-gray-500, #5c7180);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/EntityForms/CollectionFieldRenderer.razor.rz.scp.css */
.collection-editor[b-hx1aqy3wic] {
    display: flex;
    flex-direction: column;
}

/* Owned-object items carry their own rail (FormRail) and sit flush. */
.collection-editor--owned[b-hx1aqy3wic] {
    gap: 0;
}

/* Simple scalar/string lists have no rail; give the rows a little breathing room. */
.collection-editor--simple[b-hx1aqy3wic] {
    gap: 0.5rem;
}

.collection-editor__row[b-hx1aqy3wic] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.collection-editor__body[b-hx1aqy3wic] {
    flex: 1 1 auto;
    min-width: 0;
}

.collection-editor__remove[b-hx1aqy3wic] {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.35rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #b0b4ba;
    background: transparent;
    border: 1px solid transparent;
    transition: color 0.15s, background 0.15s;
}

.collection-editor__remove:hover[b-hx1aqy3wic] {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

.collection-editor__remove .fa[b-hx1aqy3wic] {
    font-size: 0.875rem;
}

.collection-editor__error[b-hx1aqy3wic] {
    color: var(--accent-red);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.collection-editor__error--collection[b-hx1aqy3wic] {
    margin-top: 0.35rem;
}

/* Add: a full-width, regular form button that always sits last in the list.
   Reserve the same right-hand space the rows give the remove ✕ (button width + gap),
   so the add button's right edge lines up with the fields above it rather than the ✕. */
.collection-editor__addrow[b-hx1aqy3wic] {
    display: flex;
    padding-right: 1.9rem;
}

/* Owned lists sit flush (gap: 0), so the add button needs its own top spacing;
   simple lists already get it from the list gap. */
.collection-editor--owned .collection-editor__addrow[b-hx1aqy3wic] {
    margin-top: 0.5rem;
}

.collection-editor__addrow[b-hx1aqy3wic]  .collection-editor__add {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
}
/* /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/FormRail.razor.rz.scp.css */
.form-rail[b-f0i8rrhde2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: border-color 0.15s, background 0.15s;
}

.form-rail:hover[b-f0i8rrhde2] {
    border-color: #e5e7eb;
    background: color-mix(in srgb, var(--accent-color) 2%, transparent);
}

.form-rail:focus-within[b-f0i8rrhde2] {
    border-color: color-mix(in srgb, var(--accent-color) 16%, transparent);
    background: color-mix(in srgb, var(--accent-color) 2%, transparent);
}

/* Lay the sub-form's fields out side by side (they each render inside an .mb-3 block). */
.form-rail[b-f0i8rrhde2]  .mb-3 {
    margin-bottom: 0;
    flex: 1 1 160px;
    min-width: 0;
}
/* /Components/Shared/EntityForms/OwnedObjectFieldRenderer.razor.rz.scp.css */
.owned-field[b-xc4zeq6cln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.owned-field__label[b-xc4zeq6cln] {
    font-weight: 500;
    line-height: 1.3;
}
/* /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);
}

/* Actions overlaid on the search input's right edge (filter, scanner). */
.entity-select-search-aside[b-4ci0dwueo0] {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

/* Inline-mode scanner: overlaid on the search input's right edge (mirrors TextInput's scanner-inline-button). */
.entity-select-search-scan-btn[b-4ci0dwueo0],
.entity-select-filter-btn[b-4ci0dwueo0] {
    position: relative;
    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);
}

.entity-select-filter-btn[b-4ci0dwueo0] {
    color: var(--color-gray-500, #5c7180);
}

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

.entity-select-filter-btn.active[b-4ci0dwueo0] {
    color: var(--primary-color);
}

.entity-select-filter-badge[b-4ci0dwueo0] {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    min-width: 0.85rem;
    padding: 0 0.15rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.55rem;
    line-height: 0.85rem;
    text-align: center;
    font-weight: 600;
}

/* --- In-dropdown filter panel --- */

.entity-select-filter-panel[b-4ci0dwueo0] {
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    overflow-y: auto;
}

.entity-select-filter-row[b-4ci0dwueo0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0;
}

.entity-select-filter-row + .entity-select-filter-row[b-4ci0dwueo0] {
    border-top: 1px solid #f1f5f9;
}

.entity-select-filter-label[b-4ci0dwueo0] {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #374151;
}

.entity-select-filter-footer[b-4ci0dwueo0] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.3rem;
}

.entity-select-filter-reset[b-4ci0dwueo0] {
    border: none;
    background: transparent;
    color: var(--color-gray-500, #5c7180);
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
}

.entity-select-filter-reset:hover:not(:disabled)[b-4ci0dwueo0] {
    background: #f1f5f9;
}

.entity-select-filter-reset:disabled[b-4ci0dwueo0] {
    opacity: 0.4;
    cursor: default;
}
/* /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;
}
/* Logo and title fade in only on the initial page load — the `intro` class is set by the first
   header of the session (ShellIntroState). Without it they render at their final state. */
.main-header.intro[b-cwlaijse1d]  .main-header-center {
    opacity: 0;
    animation: show-title-b-cwlaijse1d 1s 1.5s forwards;
}

@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);
}

.main-header.intro[b-cwlaijse1d]  .main-header-left img {
    opacity: 0;
    animation: show-icon-b-cwlaijse1d 1s 1s forwards;
}

@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/NotAuthorizedView.razor.rz.scp.css */
.access-denied[b-88cymmwdfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    min-height: 60vh;
    padding: 24px;
    color: var(--text-color, #333);
}

.access-denied-icon[b-88cymmwdfg] {
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.access-denied h1[b-88cymmwdfg] {
    margin: 0;
    font-size: 1.5rem;
}

.access-denied p[b-88cymmwdfg] {
    margin: 0;
    max-width: 420px;
    opacity: 0.75;
}

.access-denied-home[b-88cymmwdfg] {
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-var, 8px);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}
/* /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/PositionDimensionsGrid.razor.rz.scp.css */
/* One tile per dimension — wraps on narrow containers instead of squeezing the values. */
.pd-dimensions[b-8smk1u6mk1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-dimension[b-8smk1u6mk1] {
    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-8smk1u6mk1] {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-gray-400, #9aa8b5);
}

.pd-dimension-value[b-8smk1u6mk1] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
/* /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;
    }

    /* Two stacked actions (filter + scanner) need the room of both. */
    .search-field.has-aside:has(.entity-select-search-aside > * + *) input[b-yr1fzlif2y] {
        padding-right: 4.4rem;
    }

/* Content that narrows the option list (e.g. a filter panel), between the search row and the options. */
.select-subheader[b-yr1fzlif2y] {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.25rem 15px 0.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);
}

/* Per-row type icon: the flex gap on .select-option already spaces it from the label and lines the
   icons up into a leading column, so it only needs to keep its intrinsic size. */
.select-option-type-icon[b-yr1fzlif2y] {
    flex-shrink: 0;
}

.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 */
}

/* Mobile and tablet: reclaim the horizontal room the deep indent eats up. */
@media (max-width: 1024px) {
    .child-block[b-kxeujk1612] {
        padding: 0 0 0.5rem 0.4rem;
    }
}

.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;
}

/* Title row: the name/main column reads as the card's heading and the action menu gets a track of
   its own on the right. The title is the only thing that gives way — it truncates against the menu
   rather than flowing under it, which is what the menu-as-corner-overlay used to do to the first
   value. flex-shrink:0 on the menu keeps that slot at full width however narrow the aside gets. */
.data-card-header[b-y4aef4nho9] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.data-card-title[b-y4aef4nho9] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--primary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A title column may render a chip (a linked supplier/article as the identity) — keep it on the one
   line and let it ellipsise with the rest instead of wrapping the header open. */
.data-card-title[b-y4aef4nho9]  .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-card-header-actions[b-y4aef4nho9] {
  flex: 0 0 auto;
  margin-left: auto;
}

.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: var(--border-radius);
    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/PageFilterPanel.razor.rz.scp.css */
/* Mirrors the table toolbar's filter panel so both read as the same control. */

.page-filter-panel[b-yxtn7k1bmt] {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

.page-filter-row[b-yxtn7k1bmt] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0;
}

.page-filter-row + .page-filter-row[b-yxtn7k1bmt] {
    border-top: 1px solid #f1f5f9;
}

/* A switch is its own control, not a labelled editor: label left, toggle right. */
.page-filter-row.is-switch[b-yxtn7k1bmt] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page-filter-row.is-switch[b-yxtn7k1bmt]  input[type="checkbox"] {
    flex: none;
}

.page-filter-label[b-yxtn7k1bmt] {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #374151;
}

.page-filter-footer[b-yxtn7k1bmt] {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.45rem;
    margin-top: 0.45rem;
    display: flex;
    justify-content: flex-end;
}

.page-filter-reset[b-yxtn7k1bmt] {
    border: none;
    background: transparent;
    color: var(--color-gray-500, #5c7180);
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
}

.page-filter-reset:hover:not(:disabled)[b-yxtn7k1bmt] {
    background: #f1f5f9;
}

.page-filter-reset:disabled[b-yxtn7k1bmt] {
    opacity: 0.4;
    cursor: default;
}
/* /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;
}

/* The list rendering of the same thing. It needs no sticky trick — the toolbar is a sibling of the
   rows, not a row itself — so the scroller is just .list-items, under the same
   --table-body-max-height cap (and the same pane-fill override, which nulls it and lets the flex
   chain below hand down the pane height instead). .list-body is the flex column that splits the
   fixed toolbar from the shrinking rows; .list itself joins the chain so a pane-height bound
   arriving from template.css reaches it. */
.list.scroll-body[b-f8snr0qbnn],
.list.scroll-body > .list-body[b-f8snr0qbnn] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.list.scroll-body > .list-body[b-f8snr0qbnn] {
    flex: 0 1 auto;
}

.list.scroll-body .list-toolbar[b-f8snr0qbnn] {
    flex: 0 0 auto;
}

/* flex: 0 1 auto, like the pane-fill cards: a short list keeps its content height (no stretched
   whitespace under the last row) while a long one compresses and scrolls. The border is on the
   scroller, so it stays put and closes the region off the way the table's bottom border does —
   the row cut off mid-scroll reads as clipped rather than as the end of the list. */
.list.scroll-body .list-items[b-f8snr0qbnn] {
    overflow: auto;
    max-height: var(--table-body-max-height, 62vh);
    min-height: 0;
    flex: 0 1 auto;
    border-bottom: 1px solid #e5e7eb;
}

/* The wrapper scrolls in both directions, so a vertical scrollbar would claim a gutter running the
   full height — beside the pinned header it squares off the host card's rounded corner, and beside
   the rows it reads as an empty column (the gutter can only take one colour, the rows alternate).
   Drop it: header and rows both reach the card edge again. Wheel, touch and the drag-scroll module
   still scroll; the row count is bounded by pagination. The horizontal bar stays — wide tables need
   the cue that there is more to the right — restyled thin so it stops looking like a system widget.
   The list's scroller gets the same treatment for the same reason; it only ever scrolls vertically
   (items wrap instead of running wide), so for it this is the hiding half alone. */
.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar {
    background: transparent;
    height: 10px;
}

.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar:vertical,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar:vertical {
    width: 0;
}

.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar-track,
.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar-corner,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar-track,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar-corner {
    background: transparent;
}

.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar-thumb,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar-thumb {
    background-color: rgba(15, 42, 64, 0.25);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.table.scroll-body .table-wrapper[b-f8snr0qbnn]::-webkit-scrollbar-thumb:hover,
.list.scroll-body .list-items[b-f8snr0qbnn]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 42, 64, 0.45);
}

/* Firefox cannot hide one axis alone, so it keeps a thin bar on both. Kept away from Chromium, where
   declaring scrollbar-color switches the ::-webkit-scrollbar rules above off entirely. */
@supports not selector(::-webkit-scrollbar) {
    .table.scroll-body .table-wrapper[b-f8snr0qbnn],
    .list.scroll-body .list-items[b-f8snr0qbnn] {
        scrollbar-width: thin;
        scrollbar-color: rgba(15, 42, 64, 0.25) transparent;
    }
}

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);
}

/* Subtle head style (HeaderStyle.Subtle): blends the header into the table's own palette instead of
   the accent bar — for a header that still labels the columns but shouldn't read as another accent
   stripe (e.g. a list already sitting inside an accent-coloured card). */
.table.subtle-header th[b-f8snr0qbnn] {
    background-color: #f3f5f7;
    color: #374151;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

    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;
}

/* The menu fills its header cell so the whole header — not just the label's own width — is the hover
   target and the click target. Columns without a menu render bare text and stay unclickable. */
table th[b-f8snr0qbnn]  .column-menu-anchor {
    width: 100%;
}

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-mode header row: the list's answer to the table's <thead> — the rendered columns on the left,
   the actions strip on the right, on the same accent bar the table header uses. */
/* Right padding puts the strip's ⋯ on the same vertical axis as every row's ⋮ action menu: the row
   icon's centre sits 0.9rem (item padding) + 0.7rem (action menu padding) + 6px (half its 0.75rem hit
   area) = 31.6px from the right edge, and the strip itself contributes 5px inner padding + half its
   26px button. Left padding matches the item padding so the header starts on the row's own margin. */
.list-toolbar[b-f8snr0qbnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem 0.3rem 0.9rem;
    min-height: 38px;
    background: var(--accent-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.list.transparent .list-toolbar[b-f8snr0qbnn] {
    background: color-mix(in srgb, var(--accent-color) 60%, transparent);
}

/* Subtle head style, list rendering — same intent as .table.subtle-header th. */
.list.subtle-header .list-toolbar[b-f8snr0qbnn] {
    background: #f3f5f7;
    border-bottom: 1px solid #e5e7eb;
}

.list.subtle-header .list-header[b-f8snr0qbnn] {
    color: #374151;
}

.list.subtle-header .list-header-part:not(:first-child)[b-f8snr0qbnn]::before {
    color: rgba(55, 65, 81, 0.4);
}

.list.subtle-header .list-header-part.is-subtitle[b-f8snr0qbnn],
.list.subtle-header .list-header-part.is-meta[b-f8snr0qbnn] {
    color: rgba(55, 65, 81, 0.65);
}

.list.subtle-header .list-header-part.is-badge[b-f8snr0qbnn] {
    color: rgba(55, 65, 81, 0.85);
}

/* Column names in the item's own reading order, "·"-separated like the compact subtitle line. */
.list-header[b-f8snr0qbnn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    color: white;
    font-size: var(--fs-sm);
}

.list-header-part[b-f8snr0qbnn] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-header-part:not(:first-child)[b-f8snr0qbnn]::before {
    content: "·";
    margin-right: 0.35rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Roles mirror how the item renders them: the title leads, subtitles read quieter, badges are values. */
.list-header-part.is-title[b-f8snr0qbnn] {
    font-weight: 600;
}

.list-header-part.is-subtitle[b-f8snr0qbnn],
.list-header-part.is-meta[b-f8snr0qbnn] {
    color: rgba(255, 255, 255, 0.75);
}

.list-header-part.is-badge[b-f8snr0qbnn] {
    color: rgba(255, 255, 255, 0.9);
}

/* In table mode the actions strip 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. overflow must stay visible: the expanded strip overlays the neighboring header cells. */
.table th.has-toolbar[b-f8snr0qbnn] {
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
    overflow: visible;
}

.table.scroll-body thead th.has-toolbar[b-f8snr0qbnn] {
    z-index: 3; /* above the other sticky header cells (z-index 2) */
}

/* Tables without an actions column: the strip shares the last header cell, pushed to its trailing edge
   so it neither adds a column nor pushes the header text around. The strip positions itself against
   this cell (see TableToolbar's .on-accent rule). */
.table th.with-inline-toolbar[b-f8snr0qbnn] {
    position: relative;
    padding-right: 42px;
    overflow: visible;
}

/* 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;
}

/* Tiles: the item container becomes the grid; the tile markup itself comes from ListItemTemplate. */
.list-style-tiles .list-items[b-f8snr0qbnn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    align-content: start;
}

/* 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/Table/TableColumnMenu.razor.rz.scp.css */
/* The header label doubles as the menu toggle — in the table's accent header and on the list header
   bar, so it inherits its colour and only picks up an affordance on hover. The pointer is set here and
   inherited by the toggle inside, which belongs to ContextMenu's scope and is out of reach otherwise. */
.column-menu-anchor[b-0wzyn0u4uf] {
    display: inline-flex;
    max-width: 100%;
    cursor: pointer;
    border-radius: 6px;
}

.column-menu-anchor:hover[b-0wzyn0u4uf] {
    background: rgba(255, 255, 255, 0.16);
}

/* ContextMenu's toggle fills the anchor, so the whole hover area is also the click target. */
.column-menu-anchor[b-0wzyn0u4uf]  .context-menu-toggle {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.column-menu-label[b-0wzyn0u4uf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.15rem;
    min-width: 0;
    white-space: nowrap;
}

/* A column carrying an active sort or filter reads stronger than its idle neighbours. */
.column-menu-label.is-active[b-0wzyn0u4uf] {
    font-weight: 600;
}

.column-menu-marker[b-0wzyn0u4uf] {
    font-size: 0.7em;
    opacity: 0.9;
}

/* --- The menu panel (teleported into the ContextMenu outlet, keeps this scope) --- */

.column-menu[b-0wzyn0u4uf] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(15, 42, 64, 0.18);
    padding: 0.5rem;
    min-width: 220px;
    max-width: 320px;
}

.column-menu-title[b-0wzyn0u4uf] {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--primary-color);
    margin: 0 0 0.3rem;
}

.column-menu-option[b-0wzyn0u4uf] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #374151;
}

.column-menu-option:hover[b-0wzyn0u4uf] {
    background: #f1f5f9;
}

.column-menu-option.selected[b-0wzyn0u4uf] {
    color: var(--primary-color);
    font-weight: 600;
}

.column-menu-option i[b-0wzyn0u4uf] {
    width: 1.1em;
    text-align: center;
}

.column-menu-filter[b-0wzyn0u4uf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem 0.2rem;
}

/* Only separate the filter from the sort options when both are present. */
.column-menu-option + .column-menu-filter[b-0wzyn0u4uf] {
    border-top: 1px solid #f1f5f9;
    margin-top: 0.3rem;
}

.column-menu-filter-label[b-0wzyn0u4uf] {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #374151;
}

.column-menu-reset[b-0wzyn0u4uf] {
    color: var(--color-gray-500, #5c7180);
}
/* /Components/Shared/Table/TableFilterEditor.razor.rz.scp.css */
/* Controls of one filter. The surrounding panel (title, footer, spacing) belongs to the toolbar's
   filter panel or the column menu; only the editors themselves live here so both look identical. */

.filter-pills[b-1fzlg6cjrj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-pill[b-1fzlg6cjrj] {
    border: none;
    background: #e7edf3;
    color: var(--color-gray-600, #4b5c68);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.2;
}

.filter-pill:hover[b-1fzlg6cjrj] {
    background: #d8e2ec;
}

.filter-pill.selected[b-1fzlg6cjrj] {
    background: var(--primary-color);
    color: white;
}

.filter-text[b-1fzlg6cjrj]  input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
    background: white;
}

.filter-range[b-1fzlg6cjrj] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-range input[b-1fzlg6cjrj] {
    width: 0;
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
    min-width: 0;
    background: white;
}

.filter-range-divider[b-1fzlg6cjrj] {
    color: var(--color-gray-400, #94a3b8);
    flex: none;
}

.filter-entity-selected[b-1fzlg6cjrj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    background: color-mix(in srgb, var(--primary-color) 10%, white);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 100%;
    margin-bottom: 0.3rem;
}

.filter-entity-name[b-1fzlg6cjrj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.filter-entity-clear[b-1fzlg6cjrj] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 999px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex: none;
}

.filter-entity-clear:hover[b-1fzlg6cjrj] {
    background: rgba(15, 42, 64, 0.1);
}

/* The inline EntitySelect is sized for a full pane (the transfer scanner surface); inside a filter
   panel it is one compact row, so its search box and option rows scale down. */
.filter-entity-select[b-1fzlg6cjrj] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.filter-entity-select[b-1fzlg6cjrj]  .search {
    padding: 0;
}

.filter-entity-select[b-1fzlg6cjrj]  .search input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: white;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.filter-entity-select[b-1fzlg6cjrj]  .select-options {
    max-height: 132px;
    overflow-y: auto;
}

.filter-entity-select[b-1fzlg6cjrj]  .select-option {
    padding: 0.35rem 0.5rem;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* The option list carries no outer margin here, so the selected row must not offset itself. */
.filter-entity-select[b-1fzlg6cjrj]  .select-option.selected:first-child {
    margin-top: 0;
}
/* /Components/Shared/Table/TableToolbar.razor.rz.scp.css */
/* The strip itself: chips + dots retracted, full action row expanded. Two hosting contexts:
   default (white list-toolbar row) and .on-accent (inside the table's accent header cell). */
.table-toolbar[b-vh8e49tkwx] {
    display: inline-flex;
    align-items: center;
}

/* In the table header the strip is always absolutely positioned (not only while expanded), so growing
   it overlays the neighboring header cells instead of widening the sticky actions cell — and the
   expand animation never has to cross a positioning switch. The hosting th is the ancestor.

   The offset puts the ⋯ on the same vertical axis as each row's ⋮ action menu: that icon's centre sits
   15px (last cell's padding) + 0.7rem (action menu padding) + 6px (half its 0.75rem hit area) = 32.2px
   from the cell's right edge, and the strip adds its own 5px inner padding + half its 26px button. */
.table-toolbar.floating[b-vh8e49tkwx] {
    position: absolute;
    top: 50%;
    right: 14.2px;
    transform: translateY(-50%);
    z-index: 4;
}

/* Fixed padding and min-height in both states: only the background changes when expanding, so the
   list toolbar row keeps its height and nothing below it shifts. */
.toolbar-actions[b-vh8e49tkwx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-height: 32px;
    padding: 3px 5px;
    border-radius: 999px;
    background: transparent;
    transition: background 160ms ease, box-shadow 160ms ease;
}

/* Expanded, the floating strip covers the headers passing beneath it, so it needs an opaque backing. */
.floating.expanded .toolbar-actions[b-vh8e49tkwx] {
    background: var(--accent-color);
    box-shadow: 0 2px 10px rgba(15, 42, 64, 0.25);
}

/* Open because it fits rather than because the user pulled it open: nothing is passing beneath it, so
   the strip reads as part of the header instead of a chip raised above it. Same specificity as the
   rule above and placed after it, which is what lets it win. */
.table-toolbar.fits .toolbar-actions[b-vh8e49tkwx] {
    background: transparent;
    box-shadow: none;
}

/* ContextMenu wraps each toggle in .context-menu-toggle — keep it inline in the strip. */
.toolbar-actions[b-vh8e49tkwx]  .context-menu-toggle {
    display: inline-flex;
}

/* Actions animate in and out by width rather than mounting/unmounting. The gap would still reserve
   space around a zero-width item, so collapsed items pull it back in. */
.toolbar-actions[b-vh8e49tkwx]  .toolbar-collapsible {
    max-width: 26px;
    opacity: 1;
    transition: max-width 180ms ease, opacity 130ms ease, transform 180ms ease, margin-left 180ms ease;
}

/* Clipping only while collapsing — expanded, the filter count badge must overhang its button. */
.toolbar-actions[b-vh8e49tkwx]  .toolbar-collapsible.is-collapsed {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: scale(0.7);
    margin-left: -4px;
    pointer-events: none;
}

/* The first item has no preceding gap to absorb. */
.toolbar-actions[b-vh8e49tkwx]  > .toolbar-collapsible.is-collapsed:first-child {
    margin-left: 0;
}

.toolbar-btn[b-vh8e49tkwx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #e7edf3;
    color: var(--color-gray-500, #5c7180);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.toolbar-btn:hover[b-vh8e49tkwx] {
    background: #d8e2ec;
}

.toolbar-btn.active[b-vh8e49tkwx] {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
}

.on-accent .toolbar-btn[b-vh8e49tkwx] {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.on-accent .toolbar-btn:hover[b-vh8e49tkwx] {
    background: rgba(255, 255, 255, 0.3);
}

.on-accent .toolbar-btn.active[b-vh8e49tkwx] {
    background: white;
    color: var(--accent-color);
}

.toolbar-badge[b-vh8e49tkwx] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--primary-color);
    color: white;
    border: 1px solid white;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Panels (teleported into the ContextMenu outlet; they keep this component's CSS scope) --- */

.toolbar-panel[b-vh8e49tkwx] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(15, 42, 64, 0.18);
    padding: 0.6rem;
    min-width: 250px;
    max-width: 330px;
}

.toolbar-panel-title[b-vh8e49tkwx] {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--primary-color);
    margin: 0 0 0.3rem;
}

.toolbar-panel-footer[b-vh8e49tkwx] {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.45rem;
    margin-top: 0.45rem;
    display: flex;
    justify-content: flex-end;
}

.toolbar-panel-reset[b-vh8e49tkwx] {
    border: none;
    background: transparent;
    color: var(--color-gray-500, #5c7180);
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
}

.toolbar-panel-reset:hover:not(:disabled)[b-vh8e49tkwx] {
    background: #f1f5f9;
}

.toolbar-panel-reset:disabled[b-vh8e49tkwx] {
    opacity: 0.4;
    cursor: default;
}

/* --- Filter panel --- */

.toolbar-filter-panel[b-vh8e49tkwx] {
    max-height: 70vh;
    overflow-y: auto;
}

.toolbar-filter-row[b-vh8e49tkwx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0;
}

.toolbar-filter-row + .toolbar-filter-row[b-vh8e49tkwx] {
    border-top: 1px solid #f1f5f9;
}

/* A switch is its own control, not a labelled editor: label left, toggle right. */
.toolbar-filter-row.is-switch[b-vh8e49tkwx] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.toolbar-filter-row.is-switch[b-vh8e49tkwx]  input[type="checkbox"] {
    flex: none;
}

.toolbar-filter-label[b-vh8e49tkwx] {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #374151;
}

/* --- Search panel --- */

.toolbar-search-panel[b-vh8e49tkwx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toolbar-search-panel[b-vh8e49tkwx]  input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

/* --- Sort panel --- */

.toolbar-option[b-vh8e49tkwx] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #374151;
}

.toolbar-option:hover[b-vh8e49tkwx] {
    background: #f1f5f9;
}

.toolbar-option.selected[b-vh8e49tkwx] {
    color: var(--primary-color);
    font-weight: 600;
}

.toolbar-option-reset[b-vh8e49tkwx] {
    justify-content: flex-start;
    color: var(--color-gray-500, #5c7180);
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 6px 6px;
    margin-top: 0.2rem;
    padding-top: 0.5rem;
}
/* /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/Shared/WarehouseSectionLink.razor.rz.scp.css */
.wsl[b-qi3h93u4ih] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
}

.wsl--empty[b-qi3h93u4ih] {
    color: var(--color-gray-400, #9aa8b5);
}

.wsl__icon[b-qi3h93u4ih] {
    align-self: center;
    flex: 0 0 auto;
    font-size: 0.9em;
    color: var(--color-gray-400, #9aa8b5);
}

.wsl__name[b-qi3h93u4ih] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* A slash, not a chip separator: reads as one "Lager / Bereich" path. */
.wsl__sep[b-qi3h93u4ih] {
    color: var(--color-gray-400, #9aa8b5);
    font-weight: 400;
}

.wsl__section[b-qi3h93u4ih] {
    color: var(--muted, #64748b);
    overflow-wrap: anywhere;
}

/* Link variant: coloured like every other in-app link, underlined only on hover so dense tables stay calm. */
.wsl--link[b-qi3h93u4ih] {
    color: var(--primary-color, #00385e);
    text-decoration: none;
    border-radius: 4px;
}

    .wsl--link:hover .wsl__name[b-qi3h93u4ih],
    .wsl--link:focus-visible .wsl__name[b-qi3h93u4ih] {
        text-decoration: underline;
    }

    .wsl--link:hover .wsl__icon[b-qi3h93u4ih] {
        color: inherit;
    }

    .wsl--link:focus-visible[b-qi3h93u4ih] {
        outline: 2px solid var(--primary-color, #00385e);
        outline-offset: 2px;
    }
/* /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;
}

/* Section heading above each position grid — only rendered when the transfer lands in more than one section
   (a multi-source Einkauf/Korrektur), where the grids would otherwise run into each other unlabelled. */
.tf-landing-head[b-vvwbdor376] {
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gray-500, #6b7280);
}

.tf-landing-head:first-child[b-vvwbdor376] {
    margin-top: 0;
}
/* /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;
}

.pd-location[b-r7m9cvifu0] {
    display: flex;
}

.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;
  }
}