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

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

[b-tota7j4sak] .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-tota7j4sak] .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-tota7j4sak] .btn-primary:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
    }

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

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

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

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

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

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

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


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

[b-tota7j4sak] .text-danger, [b-tota7j4sak] .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-tota7j4sak] {
        width: 0;
        display: none;
    }

    .login[b-tota7j4sak] {
        grid-gap: 0;
    }
}

/* Only rendered while the installation has no administrator left. Reads as a notice, not an error:
   nothing the person at the login form did is wrong. */
.recovery-hint[b-tota7j4sak] {
    font-size: var(--fs-sm);
    border-radius: var(--border-radius);
    background: rgba(255, 170, 0, 0.12);
    padding: 10px;
    margin: 15px 0 0 0;
}
/* /Components/Account/Pages/Setup.razor.rz.scp.css */
.login[b-ioa7gkp09h] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
    width: 640px;
    max-width: 100%;
}

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

[b-ioa7gkp09h] .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-ioa7gkp09h] .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-ioa7gkp09h] .btn-primary:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
    }

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

.grid-2[b-ioa7gkp09h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 10px;
}

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

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

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

.intro[b-ioa7gkp09h] {
    font-size: var(--fs-sm);
    margin: 0 0 15px 0;
}

.hint[b-ioa7gkp09h] {
    font-size: var(--fs-sm);
    opacity: 0.7;
    margin: 0 0 10px 0;
}

/* The closing panels have no EditForm, so they need the button look on a plain anchor —
   ::deep would not reach it, it is this component's own markup. */
.link-button[b-ioa7gkp09h] {
    align-self: flex-start;
    display: inline-block;
    background: var(--accent-color);
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

    .link-button:hover[b-ioa7gkp09h] {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
    }

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

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

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

[b-ioa7gkp09h] .text-danger, [b-ioa7gkp09h] .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-ioa7gkp09h] {
        width: 0;
        display: none;
    }

    .login[b-ioa7gkp09h] {
        grid-gap: 0;
    }

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

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

span[b-wv0wxh37oq] {
    color: var(--muted, #666);
}
/* /Components/Article/ArticlePositionCard.razor.rz.scp.css */
.position-card[b-1uor9y1awz] {
  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-1uor9y1awz] {
  background: rgba(15,23,42,0.03);
}

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

.position-card__coordinates[b-1uor9y1awz] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* /Components/Dashboard/GlobalSearch.razor.rz.scp.css */
.search[b-xf5dpfahgk] {
    position: relative;
    display: grid;
    animation: show-search-b-xf5dpfahgk 1s forwards;
    opacity: 0;
    animation-delay: 0.2s;
}

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

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

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

[b-xf5dpfahgk] 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-xf5dpfahgk] {
        box-shadow: var(--box-shadow-hover);
    }

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

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

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

.searchicon[b-xf5dpfahgk] {
    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-xf5dpfahgk] {
    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-xf5dpfahgk] {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

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

/* Results container open/close animation */
.results[b-xf5dpfahgk] {
    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-xf5dpfahgk] {
    max-height: 100dvh;
    opacity: 1;
}

.results-list[b-xf5dpfahgk] {
    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-xf5dpfahgk] {
    padding: 0.35rem 0;
}

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

.result-group-header[b-xf5dpfahgk] {
    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-xf5dpfahgk] {
    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-xf5dpfahgk] .result-group-list {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0.2rem 0.25rem;
}

[b-xf5dpfahgk] .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-xf5dpfahgk] .result-item.clickable {
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

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

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

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

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

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

[b-xf5dpfahgk] .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-xf5dpfahgk] .result-load-more:hover {
    color: #0f172a;
}
/* /Components/Dashboard/Tile.razor.rz.scp.css */
.linkwrapper[b-vhh2zi87m7] {
    opacity: 0;
    animation: ShowTile-b-vhh2zi87m7 0.3s ease-in-out forwards;
}

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

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

[b-vhh2zi87m7] 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-vhh2zi87m7] {
    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-vhh2zi87m7] {
        color: white;
        margin: 0 0 0.2rem 0;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        font-size: var(--fs-base);
    }

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

.tile-badge[b-vhh2zi87m7] {
    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-vhh2zi87m7]::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-vhh2zi87m7] 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-vhh2zi87m7] a:hover {
        box-shadow: var(--box-shadow-hover);
        transform: scale(1.03);
    }

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

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

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

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

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

.type-btn[b-2n0sc9cskz] {
    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-2n0sc9cskz] {
    font-size: 1.2rem;
}

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

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

.visibility-btn[b-2n0sc9cskz] {
    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-2n0sc9cskz] {
    font-size: 1.1rem;
    color: #64748b;
}

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

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

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

.visibility-text[b-2n0sc9cskz] {
    display: flex;
    flex-direction: column;
}

.visibility-title[b-2n0sc9cskz] {
    font-weight: 600;
}

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

.terms-row[b-2n0sc9cskz] {
    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-2n0sc9cskz] {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-color, #3b82f6);
    cursor: pointer;
    flex-shrink: 0;
}

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

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

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

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

.badge[b-zyzb0j22q4] {
    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-zyzb0j22q4] { background: #fee2e2; color: #b91c1c; }
.badge.type-feature[b-zyzb0j22q4] { background: #dbeafe; color: #1d4ed8; }
.badge.type-feedback[b-zyzb0j22q4] { background: #ede9fe; color: #6d28d9; }

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

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

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

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

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

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

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

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

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

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

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

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

[b-85lr5yssak] .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-85lr5yssak] a.crumb:hover {
    background: rgba(13, 108, 172, 0.08);
}

[b-85lr5yssak] .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-85lr5yssak] .crumb-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1f2d3d;
    min-width: 0;
    flex: 1 1 0;
}

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

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


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

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

.breadcrumbs:not(.mobile) li[b-85lr5yssak] {
    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-85lr5yssak]  {
    display: none;
    width: 22px; /* same width as crumb-icon so text lines up */
    margin-right: 8px;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

img[b-88a6winlut] {
    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-88a6winlut 1s forwards;
    opacity: 0;
    animation-delay: 1s;
}

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

#blazor-error-ui[b-88a6winlut] {
    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-88a6winlut] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


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

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

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

.content-area[b-iazeonq2cr] {
    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-iazeonq2cr] {
    margin-left: 0;
    transition: none;
}

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

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

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

#blazor-error-ui[b-iazeonq2cr] {
    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-iazeonq2cr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PageHeader.razor.rz.scp.css */
.icon[b-zjlme4uj75]  i {
    font-size: 1.4rem;
    margin: 0;
    color: white;
    transition: all 0.3s;
}

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

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

.icon[b-zjlme4uj75] {
    background: var(--primary-color);
    position: relative;
    /* Above the progress bar, which spans the whole tile: the icon block covers its left end, so the bar
       reads as starting next to the icon without having to know how wide the icon is. */
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    /* The square is stated as a width and filled vertically by the grid's default stretch — deliberately
       not `height: 100%` + `aspect-ratio: 1`. That pair is circular inside an auto-sized grid row (the
       percentage needs the row, the row needs the item), so the engine falls back to sizing the block
       from its own content: with the fallback logo below that is a 256px image, and the whole header
       tile grows to 256px tall. */
    width: var(--header-tile-height);
}

/* The fallback logo is a 256px asset, and without a cap it — not the tile — decides how tall the header
   is. Sized as a share of the icon block so it scales with the tile instead of the other way round.

   The height cap is computed from --header-tile-height rather than written as a percentage: a percentage
   max-height resolves against the containing block's height, and the icon block has none of its own — it
   is stretched to the grid row, which is itself sized from its content. Chromium resolves that circle in
   the image's favour, Safari does not, and there the 256px intrinsic height wins and drags the whole
   header tile up with it. */
.icon img[b-zjlme4uj75] {
    width: 55%;
    max-height: calc(var(--header-tile-height) * 0.55);
    object-fit: contain;
}

    .icon[b-zjlme4uj75]::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-zjlme4uj75] {
    z-index: 10;
    /* Ein Abstand für die ganze Kopfzeile: zwischen Kachel, Suchzeile, Alerts-Karte und dem Seiteninhalt
       darunter liegt überall derselbe Zwischenraum. Als Variable, weil er sonst an vier Stellen steht und
       drei davon beim nächsten Mal vergessen werden. */
    --header-gap: 12px;
    margin-bottom: var(--header-gap);
}
/* Progress for everything this page has running, along the tile's lower border.

   Taken out of flow on purpose: the bar appears and disappears mid-interaction, and an in-flow element
   would push the page content by its own height every time. Absolute positioning against the tile costs
   no layout at all, and the tile's overflow:hidden already clips it to the rounded corners. */
.header-progress[b-zjlme4uj75] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.07);
}

.header-progress-bar[b-zjlme4uj75] {
    height: 100%;
    background: var(--primary-color);
}

/* Counted work: the width is the truth, eased just enough not to jump between steps. */
.header-progress.determinate .header-progress-bar[b-zjlme4uj75] {
    width: 0;
    transition: width 0.2s linear;
}

/* Uncounted work: a flat sliver travelling the bar. No percentage is claimed because none is known. */
.header-progress.indeterminate .header-progress-bar[b-zjlme4uj75] {
    width: 30%;
    animation: header-progress-slide-b-zjlme4uj75 1.15s ease-in-out infinite;
}

@keyframes header-progress-slide-b-zjlme4uj75 {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(440%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-progress.indeterminate .header-progress-bar[b-zjlme4uj75] {
        width: 100%;
        animation: none;
        opacity: 0.55;
    }

    .header-progress.determinate .header-progress-bar[b-zjlme4uj75] {
        transition: none;
    }
}

.header-tile[b-zjlme4uj75] {
    margin: 0;
    display: grid;
    /* Anchors .header-progress. */
    position: relative;
    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-zjlme4uj75 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);
    /* The tile's nominal height, and the side of the square icon block. One variable so the two cannot
       drift apart. */
    --header-tile-height: 4.2em;
    min-height: var(--header-tile-height);
    /* padding: 10px 15px; */
    padding-right: calc(1 * var(--main-padding, 0px));
    margin-right: calc(-1 * var(--main-padding, 0px));
}
.additional-content[b-zjlme4uj75] {
    width: 100%;
    padding-top: var(--header-gap, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--header-gap, 12px);
}

/* The alerts panel is bounded and scrolls inside itself. It is part of a header the page content has to
   fit underneath, and some pages group dozens of alerts — unbounded, the panel alone pushed the table out
   of the viewport. The cap is a share of the viewport rather than a flat length, so it shrinks with the
   window instead of eating the page-content floor PageLayout.razor.css guarantees (a floor the pinned
   header would otherwise simply cover). Card is already overflow:auto, so bounding its height is all the
   scrolling takes; overflow-y is restated here so the scroll is stated where the cap is. */
.header-alerts[b-zjlme4uj75]  .card {
    max-height: var(--header-alerts-max-height, min(20rem, 32vh));
    overflow-y: auto;
}

/* Room for the search icon on the left — plain CSS rather than a Tailwind utility class, since
   pl-* wasn't previously used anywhere and so isn't guaranteed to be in the compiled dist.css. */
.header-search[b-zjlme4uj75]  input {
    padding-left: 2.25rem;
}

/* 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-zjlme4uj75]  input {
        background: #fff;
    }
}

/* Static search glyph on the field's left edge, mirroring the filter/clear icons on the right. */
.header-search-icon[b-zjlme4uj75] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500, #5c7180);
    pointer-events: none;
}

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

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

.header-filter-badge[b-zjlme4uj75] {
    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-zjlme4uj75] {
    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-zjlme4uj75] {
    display: flex;
    justify-content: stretch;
}

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

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

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

@media (max-width: 640px) {
    .header-tile[b-zjlme4uj75] {
        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%);
        --header-tile-height: 4em;
        padding-right: max(var(--main-padding, 0px), 10px);
    }
    .icon[b-zjlme4uj75] {
        border-radius: 0;
    }
    .additional-content[b-zjlme4uj75] {
        /* 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: var(--header-gap, 12px);
        background-color: white;
    }
}

[b-zjlme4uj75] .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-zjlme4uj75] .mobile-header-content:not(.open) {
    transform: scaleY(0);
    margin: 0px;
    padding: 0px;
    max-height: 0;
}
[b-zjlme4uj75] .mobile-header-content.open {
    margin-top: 10px;
    max-height: 100vh;
}
[b-zjlme4uj75] .mobile-header-content > * {
    transition: opacity 0.3s linear;
    opacity: 1;
}
[b-zjlme4uj75] .mobile-header-content:not(.open) > * {
    opacity: 0;
}

[b-zjlme4uj75] .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-di1kt9n8x2] {
    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-di1kt9n8x2] {
    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-di1kt9n8x2]::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-di1kt9n8x2] {
    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-di1kt9n8x2] {
    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(...,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.

   The content row has a floor, though. The header above it grows with whatever the page
   currently shows — a deleted-entity banner, the search row, the alerts panel, an open filter
   panel — and every pixel it takes comes straight out of the panes, so a page with several of
   them open squeezed its table down to a header row and a pagination bar rather than let
   anything scroll. At --page-content-min the row stops giving space back: the page then
   overflows the viewport and the scroll container around it takes over, i.e. the table keeps
   rows in it and the page scrolls instead.

   The floor is deliberately low, and capped against the viewport on top of that. It is a
   backstop for the case where the header has taken everything, not a size the content aims
   for — the page's own scroll can only move the content so far, since the header stays pinned
   over it (sticky inside a page box that is exactly the viewport), so a floor larger than the
   room actually left over would be paid for in content hidden behind the header rather than
   in content the user can reach. Capping the alerts panel (PageHeader.razor.css) is what keeps
   the header modest enough that it rarely comes to this. */
.page:has(> .page-content > .view)[b-di1kt9n8x2] {
    --page-content-min: min(18rem, 30vh);
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(var(--page-content-min), 1fr);
}
.page:has(> .page-content > .view) > .page-content[b-di1kt9n8x2] {
    min-height: 0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zj7xojy7p2],
.components-reconnect-repeated-attempt-visible[b-zj7xojy7p2],
.components-reconnect-failed-visible[b-zj7xojy7p2],
.components-pause-visible[b-zj7xojy7p2],
.components-resume-failed-visible[b-zj7xojy7p2],
.components-rejoining-animation[b-zj7xojy7p2] {
    display: none;
}

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


#components-reconnect-modal[b-zj7xojy7p2] {
    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-zj7xojy7p2 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-zj7xojy7p2 {
    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-mc7u9nknxy] {
    /* 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);
}
/* ── The one place that decides the desktop aside shows its wide 240px form ──────────────────
   Everything else in this file — and in SidebarUtilityMenu.razor.css, through inherited custom
   properties, which cross the CSS-isolation boundary — reads the variables below, so this
   condition is stated exactly once.

     .pinned                 always wide and in flow. Still server state: a deliberate click that
                             genuinely changes layout (.app-body.pinned shifts the content area).
     [data-hover-open]       the replacement for the old SidebarState.HoverOpen/HoverClose round
                             trips. Set by Sidebar.razor.js rather than being plain :hover, because
                             :hover is also emulated on touch — a tap would expand the rail and
                             reflow it out from under the finger before the click landed. The module
                             restricts it to real mouse pointers and gives touch a two-step tap
                             instead. It also clears it when the page scrolls under a resting
                             pointer, which is what the old sidebarDismiss round trip did.
                             Safe to keep entirely client-side because the content area's margin
                             depends only on the pin, never on hover.
     :has(:focus-visible)    keyboard tab-in holds it open. NOT :focus-within, which also matches
                             mouse-click focus and would leave the sidebar stuck open after
                             clicking a nav item — the exact bug the old code needed an explicit
                             post-navigation focus reset to paper over.
     :has(.util.expanded)    an open utility menu holds the sidebar wide, so the menu can never be
                             orphaned as stacked icons in the 64px rail. This replaces
                             SidebarUtilityMenu's Collapsed false->true auto-close.

   If the variable table ever proves fiddly, the escape hatch is to have Sidebar.razor.js mirror
   this same condition into a data-expanded attribute (still zero round trips) and collapse every
   consumer below to .sidebar.desktop[data-expanded] / :not([data-expanded]). */
.sidebar.desktop[b-mc7u9nknxy] {
    --sb-w: 64px;
    --sb-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    --sb-open: 0;                 /* 0|1 — drives every text fade */
    --sb-pe: none;                /* pointer-events for faded-out text */
    --sb-line-left: 6px;
    --sb-line-max: 24px;
    --sb-label-max: 0px;
    --sb-label-pad: 0px;

    /* Published across the CSS-isolation boundary to SidebarUtilityMenu.razor.css, which consumes
       them with the WIDE values as var() fallbacks — so .util.mobile, which is not a descendant of
       .sidebar.desktop and inherits none of these, is untouched. */
    --util-dir: column;
    --util-align: flex-start;
    --util-open-align: flex-start;
    --util-pad-left: 8px;
    --util-gap: 2px;
    --util-list-max: 0px;
    --util-open-item-display: inline-flex;
    --util-open-item-w: 36px;
    --util-open-item-h: 36px;
    --util-open-item-pad: 0;
    --util-open-label-display: none;
    --util-caret-ml: 0;
    --util-caret-size: 36px;

    width: var(--sb-w);
    box-shadow: var(--sb-shadow);
}

.sidebar.desktop.pinned[b-mc7u9nknxy],
.sidebar.desktop:not(.pinned)[data-hover-open][b-mc7u9nknxy],
.sidebar.desktop:not(.pinned):has(:focus-visible)[b-mc7u9nknxy],
.sidebar.desktop:not(.pinned):has(.util.expanded)[b-mc7u9nknxy] {
    --sb-w: 240px;
    --sb-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
    --sb-open: 1;
    --sb-pe: auto;
    --sb-line-left: 0px;
    --sb-line-max: none;
    --sb-label-max: 200px;
    --sb-label-pad: 6px;

    --util-dir: row;
    --util-align: center;
    --util-open-align: stretch;
    --util-pad-left: 0px;
    --util-gap: 4px;
    --util-list-max: 2.5rem;
    --util-open-item-display: grid;
    --util-open-item-w: auto;
    --util-open-item-h: auto;
    --util-open-item-pad: 8px 10px;
    --util-open-label-display: block;
    --util-caret-ml: auto;
    --util-caret-size: 32px;
}

/* Pinned joins the flex row so the content-area shifts right. After the block above so its
   flat shadow wins over the hover-expanded drop shadow. */
.sidebar.desktop.pinned[b-mc7u9nknxy] {
    position: relative;
    --sb-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

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

.sidebar-toggle[b-mc7u9nknxy] {
    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-mc7u9nknxy] {
    background: rgba(13, 108, 172, 0.1);
    color: var(--accent-color);
}

/* --- Breadcrumbs / top area in sidebar --- */
.sidebar-breadcrumbs[b-mc7u9nknxy] {
    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-mc7u9nknxy] .sidebar-breadcrumbs .breadcrumbs {
    flex: 1;
    min-width: 0;
}

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

[b-mc7u9nknxy] .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-mc7u9nknxy] .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. */
/* Collapsed, the line shrinks to a ~24px segment centred over the icon column; expanded it runs
   the full width. Both states come from the token block at the top of this file. */
[b-mc7u9nknxy] .label-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--sb-line-left, 0px);
    right: 0;
    max-width: var(--sb-line-max, none);
    height: 1px;
    background: #e5eaf0;
    transition: left 0.25s ease, max-width 0.25s ease;
}

/* 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-mc7u9nknxy] .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: var(--sb-label-pad, 6px);
    max-width: var(--sb-label-max, 200px);
    overflow: hidden;
    opacity: var(--sb-open, 1);
    transition: opacity 0.2s ease, max-width 0.25s ease;
}

/* --- Nav item --- */
[b-mc7u9nknxy] .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-mc7u9nknxy] .nav-item:hover {
    background: rgba(13, 108, 172, 0.06);
}

[b-mc7u9nknxy] .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-mc7u9nknxy] .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-mc7u9nknxy] .nav-item.active .nav-icon i {
    color: var(--tile-color, var(--primary-color));
}

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

[b-mc7u9nknxy] .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-mc7u9nknxy] .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-mc7u9nknxy] .nav-icon i {
    font-size: 1rem;
    color: white;
    z-index: 1;
    transition: color 0.2s ease;
}
    [b-mc7u9nknxy] .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-mc7u9nknxy] .nav-badge.new {
    background: var(--accent-color);
}

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

[b-mc7u9nknxy] .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-mc7u9nknxy] {
    font-weight: 600;
    color: #1f2d3d;
}

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

/* Hide texts when collapsed but keep icons (and label space) intact. Scoped to .desktop: the
   mobile profile row also uses .nav-text and must not inherit a --sb-open-less opacity. */
.sidebar.desktop .nav-text[b-mc7u9nknxy] {
    opacity: var(--sb-open);
    pointer-events: var(--sb-pe);
}

/* Breadcrumb label fades in/out like the other sidebar texts (.nav-text). */
.sidebar.desktop[b-mc7u9nknxy]  .crumb-text {
    opacity: var(--sb-open);
    pointer-events: var(--sb-pe);
    transition: opacity 0.15s ease;
}

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

.sidebar-toggle[b-mc7u9nknxy] {
    opacity: var(--sb-open, 1);
    pointer-events: var(--sb-pe, auto);
    transition: opacity 0.2s ease;
}

.sidebar-bottom[b-mc7u9nknxy] {
    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-mc7u9nknxy] {
    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-mc7u9nknxy] {
    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-mc7u9nknxy] .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-mc7u9nknxy] {
    position: fixed;
    top: var(--app-header-h, 0px);
    left: 0;
    bottom: 0;
    right: auto;
    width: 66.6667%;
    height: auto;
}

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

/* data-open, not a class: Blazor rewrites every class it renders, which would wipe the state the
   JS module owns. Must stay AFTER the .tablet blocks above — specificity ties at (0,3,0), so only
   source order separates them. */
.sidebar.mobile[data-open][b-mc7u9nknxy] {
    transform: translateX(0);
}

/* While the finger drives the transform, freeze the stylesheet transition and hint the
   compositor. The module sets its own inline transition for the snap on release. */
.sidebar.mobile[data-dragging][b-mc7u9nknxy] {
    transition: none;
    will-change: transform;
    user-select: none;
}

/* touch-action is not inherited, and is only intersected up to the nearest scroll container.
   ScrollShadow's inner .scroll-shadow IS that container, so without this the browser can claim a
   horizontal gesture that starts on the nav list and pointercancel the swipe. */
.sidebar.mobile[b-mc7u9nknxy]  .scroll-shadow {
    touch-action: pan-y;
}

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

/* --drag-t is written per animation frame while swiping, so the scrim fades with the drawer
   instead of holding full strength until the gesture ends. */
.mobile-overlay[data-open][b-mc7u9nknxy] {
    opacity: var(--drag-t, 1);
    pointer-events: auto;
}

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

.mobile-close-btn[b-mc7u9nknxy] {
    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-mc7u9nknxy] {
    background: rgba(13, 108, 172, 0.1);
    color: var(--accent-color);
}

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

.mobile-group .nav-group-label[b-mc7u9nknxy] {
    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-mc7u9nknxy] {
    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-mc7u9nknxy] {
    display: contents;
}

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

.mobile-group[b-mc7u9nknxy]  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-mc7u9nknxy]  a.button.active .icon i {
    color: var(--tile-color, var(--primary-color));
}

.mobile-group[b-mc7u9nknxy]  a.button .icon i {
    font-size: 2.8em;
}
    .mobile-group[b-mc7u9nknxy]  .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-mc7u9nknxy]  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-mc7u9nknxy] {
    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-mc7u9nknxy] .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-mc7u9nknxy] .bottom-item:hover {
    background: rgba(13, 108, 172, 0.06);
}

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

[b-mc7u9nknxy] .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-mc7u9nknxy] .bottom-item.profile .nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    overflow: hidden;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-mc7u9nknxy],
    .sidebar.mobile[b-mc7u9nknxy],
    .mobile-overlay[b-mc7u9nknxy] {
        transition: none;
    }
}
/* /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. */
/* The --util-* variables come from .sidebar.desktop in Sidebar.razor.css and inherit through the
   CSS-isolation boundary. Each is consumed with the WIDE value as its fallback, so .util.mobile —
   which is not a descendant of .sidebar.desktop and inherits none of them — keeps the wide layout
   unchanged. They replace what used to be a `narrow` class driven by a hover-derived C# parameter,
   which meant the rail/wide layout could not settle until a round trip completed. */
.util[b-pjsebuz8pg] {
    display: flex;
    flex-direction: var(--util-dir, row);
    align-items: var(--util-align, center);
    padding-left: var(--util-pad-left, 0px);
    gap: var(--util-gap, 4px);
    min-width: 0;
}

.util.open[b-pjsebuz8pg] {
    flex-direction: column;
    align-items: var(--util-open-align, stretch);
    gap: 2px;
}

/* ===== List ===== */
.util-list[b-pjsebuz8pg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: var(--util-dir, row);
    align-items: var(--util-align, center);
    gap: var(--util-gap, 4px);
    overflow: hidden;
    max-height: var(--util-list-max, 2.5rem); /* collapsed: a single icon row, or 0 in the rail */
}

.util.open .util-list[b-pjsebuz8pg] {
    flex-direction: column;
    align-items: var(--util-open-align, 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-pjsebuz8pg] {
    max-height: 11rem; /* opened target — comfortably fits the four items */
}

/* ===== Buttons (icon-only when collapsed) ===== */
.util[b-pjsebuz8pg]  .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-pjsebuz8pg]  button.util-item {
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

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

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

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

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

.util[b-pjsebuz8pg]  .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) — except in the
   64px rail, where the vars keep it an icon-only square. */
.util.open[b-pjsebuz8pg]  .util-item {
    display: var(--util-open-item-display, grid);
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;
    width: var(--util-open-item-w, auto);
    height: var(--util-open-item-h, auto);
    padding: var(--util-open-item-pad, 8px 10px);
    color: #1f2d3d;
}

.util.open[b-pjsebuz8pg]  .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-pjsebuz8pg]  .util-item-icon {
    color: var(--primary-color);
}

.util.open[b-pjsebuz8pg]  .util-item-label {
    display: var(--util-open-label-display, block);
}

/* ===== Caret ===== */
.util-caret[b-pjsebuz8pg] {
    width: var(--util-caret-size, 32px);
    height: var(--util-caret-size, 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-pjsebuz8pg] {
    background: rgba(13, 108, 172, 0.1);
}

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

.util:not(.open) .util-caret[b-pjsebuz8pg] {
    margin-left: var(--util-caret-ml, 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-pjsebuz8pg] {
    width: 36px;
    height: 36px;
    margin-top: 2px;
    margin-left: 8px;
}

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

@media (prefers-reduced-motion: reduce) {
    .util.open .util-list[b-pjsebuz8pg],
    .util-caret i[b-pjsebuz8pg] {
        transition: none;
    }
}
/* /Components/Layout/SplitView.razor.rz.scp.css */
.view[b-jgss9lcwty] {
    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-jgss9lcwty] {
    overflow: auto;
    height: 100%;
}

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

@media (min-width: 1025px) {
    .view-scroll[b-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        --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-jgss9lcwty],
    .view.overlay.aside-pinned:has(.view-pane.right[data-aside-hover-lock])[b-jgss9lcwty] {
        --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-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible)[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(.context-menu-toggle[data-open])[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right[data-aside-hold-open][b-jgss9lcwty],
    .view.overlay .view-pane.right[data-aside-hover-lock][b-jgss9lcwty],
    .view.overlay.aside-resizing:not(.aside-pinned) .view-pane.right[b-jgss9lcwty] {
        --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-jgss9lcwty] {
        display: flex;
        gap: 0;
        overflow: visible;
    }

    .view.overlay .view-pane.left[b-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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.

       Touch never matches either of these for long: the hover a tap synthesizes expires by itself
       after about a second. It holds the aside open through [data-aside-hold-open] instead — see the
       hold-open rule further down. */
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right:hover[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right:has(:focus-visible)[b-jgss9lcwty] {
        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[data-open])[b-jgss9lcwty] {
        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-jgss9lcwty] {
        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[data-open])) .aside-inner[b-jgss9lcwty] {
        pointer-events: none;
    }

    .view.overlay .aside-peek-catch[b-jgss9lcwty] {
        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-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible) .aside-peek-catch[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right:has(.context-menu-toggle[data-open]) .aside-peek-catch[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned) .view-pane.right[data-aside-hold-open] .aside-peek-catch[b-jgss9lcwty] {
        visibility: hidden;
        transition: visibility 0s var(--aside-fly);
    }

    /* Pinned there is nothing to guard. */
    .view.overlay.aside-pinned .aside-peek-catch[b-jgss9lcwty] {
        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-jgss9lcwty],
    .view.overlay.aside-pinned:not(.aside-resizing) .view-pane.right[data-aside-hover-lock][b-jgss9lcwty] {
        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-jgss9lcwty] {
        pointer-events: none;
    }

    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right[data-aside-hover-lock] .aside-peek-catch[b-jgss9lcwty],
    .view.overlay.aside-pinned .view-pane.right[data-aside-hover-lock] .aside-peek-catch[b-jgss9lcwty] {
        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-jgss9lcwty] {
        opacity: 0;
        pointer-events: none;
    }

    /* ── Hold-open: after a drag-open, and for touch generally ───────────────────
       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.

       It is also how touch holds the aside open at all. The :hover rules above are useless there —
       the hover a tap synthesizes expires on its own after roughly a second, so an aside opened by
       tapping the strip collapsed again unprompted, exactly as if the pointer had left. A tap inside
       the pane now takes out this hold and a tap outside releases it (SplitView.razor.js). */
    .view.overlay:not(.aside-pinned):not(.aside-resizing) .view-pane.right[data-aside-hold-open][b-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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[data-open])) .aside-pin[b-jgss9lcwty] {
        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-jgss9lcwty] {
        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[data-open])) .aside-resize[b-jgss9lcwty],
    .view.overlay:not(.aside-pinned):not(.aside-resizing)
        .view-pane.right[data-aside-hover-lock] .aside-resize[b-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        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-jgss9lcwty] {
        visibility: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
        .view.overlay .view-pane.right[b-jgss9lcwty] {
            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-jgss9lcwty],
        .view.overlay:not(.aside-pinned) .view-pane.right:has(:focus-visible) .aside-peek-catch[b-jgss9lcwty] {
            transition: none;
        }
    }
}
    
@media (max-width: 1025px) {
    .view[b-jgss9lcwty] {
        overflow: visible;
    }
    /* Scroll-snap container for mobile: make each pane full-width and snap to it */
    .view-scroll[b-jgss9lcwty] {
        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-jgss9lcwty] {
        margin-right: calc(var(--main-padding) * -1);
    }
    .view.right-active[b-jgss9lcwty] {
        margin-left: calc(var(--main-padding) * -1);
    }

    .view-pane.left[b-jgss9lcwty] {    
        scroll-snap-align: start;
    }
    .view-pane.right[b-jgss9lcwty] {
        scroll-snap-align: end;
    }
    .view-pane:not(.active)[b-jgss9lcwty] {
        filter: brightness(0.8) blur(3px) grayscale(0.2) opacity(0.8);
        padding-inline: 0px;
    }
    .view-pane[b-jgss9lcwty] {
        /* Every pane is one peek narrower than the viewport, so the neighbouring pane always shows
           as a blurred sliver at the edge. That strip is the only affordance saying the carousel
           has a second pane — the .peek-trigger buttons sit on top of it and make it tappable, but
           they are transparent and hint at nothing by themselves. Do not widen this to 100%. */
        flex: 0 0 calc(100% - var(--peek-width));
        width: calc(100% - var(--peek-width));
        min-width: calc(100% - var(--peek-width));
        max-width: calc(100% - var(--peek-width));
        /* A pane scrolls down, never sideways: the carousel is .view-scroll's job. Anything genuinely
           wider than the pane (a table) brings its own horizontal scroller inside it. */
        overflow-x: hidden;
        transition: filter 0.3s ease, width 0.32s cubic-bezier(.22,.9,.3,1);
        will-change: width, filter;
    }
    .view-pane[b-jgss9lcwty] {
        transition: filter 0.3s ease;
    }

    /* Peek trigger buttons (hidden by default) */
    .peek-trigger[b-jgss9lcwty] {
        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-jgss9lcwty] {
        display: flex;
        right: 0;
    }

    /* show left trigger when .view-scroll has peek-left */
    .peek-trigger.left[b-jgss9lcwty] {
        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-8mk5ldgmnm] {
    padding: 8px;
}

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

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

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

.instance-row:hover[b-8mk5ldgmnm] {
    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-cds800f8v8] {
    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-cds800f8v8]  .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-cds800f8v8],
.easy-transfer.is-desktop .et-aside[b-cds800f8v8] {
    height: 100%;
}

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

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

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

.et-book-bar[b-cds800f8v8] {
    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 the
       drawer's peek shows the handle, the basket heading and the button. */
    .et-book-bar.sticky[b-cds800f8v8] {
        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-cds800f8v8]  button {
        width: 100%;
        padding: 13px 16px;
    }

/* ---- mobile: input fills the screen, basket in the bottom drawer ---- */
.et-input-mobile[b-cds800f8v8] {
    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, 124px) + 0.5rem);
}

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

.et-drawer-basket[b-cds800f8v8] {
    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-cds800f8v8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.et-surface[b-cds800f8v8] {
    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-cds800f8v8] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: et-fade-in-b-cds800f8v8 0.18s ease;
}

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

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

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

.et-scan-hint[b-cds800f8v8] {
    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-cds800f8v8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Basket heading: Umlagerung icon + "Artikel" + a count chip that pops when the total changes.
   Steht über dem Scroller, nicht darin: wie viel im Korb liegt, darf beim Blättern durch eine lange Liste
   nicht wegscrollen. */
.et-basket-head[b-cds800f8v8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
}

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

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

.et-basket-count[b-cds800f8v8] {
    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-cds800f8v8 0.28s cubic-bezier(.22, .9, .3, 1);
}

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

    55% {
        transform: scale(1.25);
    }

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

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

.et-error[b-cds800f8v8] {
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    color: #b91c1c;
}

/* Die Ziel-Card oben: dieselbe Form wie im Einkauf ("Wo gekauft? / Wohin?"), damit beide Flächen dieselbe
   Frage gleich stellen.

   Sie gibt nicht nach, wenn die Fläche darunter wächst: als Flex-Kind würde sie sonst schrumpfen, sobald die
   aufgeklappte Lagerliste Platz braucht — und weil eine Card selbst scrollt, blieb von der Frage „Wohin?“ ein
   Streifen mit eigenem Scrollbalken übrig. */
.et-destination[b-cds800f8v8] {
    flex: 0 0 auto;
}


.et-head[b-cds800f8v8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.et-field[b-cds800f8v8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.et-label[b-cds800f8v8] {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color, #00385e);
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
.feedback-filters[b-hmg67i6flz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

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

.filter-chip[b-hmg67i6flz] {
    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-hmg67i6flz] {
    background: rgba(0, 0, 0, 0.04);
}

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

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

.report-card[b-hmg67i6flz] {
    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-hmg67i6flz] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.report-card-icon[b-hmg67i6flz] {
    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-hmg67i6flz] { background: #dc2626; }
.report-card-icon.type-feature[b-hmg67i6flz] { background: #2563eb; }
.report-card-icon.type-feedback[b-hmg67i6flz] { background: #7c3aed; }

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

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

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

.stat-pill[b-hmg67i6flz] {
    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-hmg67i6flz] {
    background: var(--primary-color, #3b82f6);
    color: #fff;
}

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

.empty-state[b-hmg67i6flz] {
    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-hmg67i6flz] {
        grid-template-columns: auto 1fr;
    }

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

.card[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

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

.welcome h1 .accent[b-p8qo8y2qaw] {
    /* 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-p8qo8y2qaw 60s ease infinite;
}

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

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

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

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

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

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

.pivot-tab[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

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

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

.insight-panel[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    font-size: var(--fs-xs);
    color: #6b7785;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

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

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

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

.chip[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    font-size: 0.7rem;
    opacity: 0.85;
}

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

.welcome-illustration[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    width: auto;
    height: 100%;
    object-fit: contain;
}

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

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

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

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

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

[b-p8qo8y2qaw] .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-p8qo8y2qaw] .qa-edit-li .linkwrapper.disabled {
    filter: none;
    cursor: default;
}

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

[b-p8qo8y2qaw] .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-p8qo8y2qaw] .qa-btn-change {
    background: #e8f0fe;
    color: #1a73e8;
}

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

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

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

/* Add-new tile — a dashed placeholder square that matches the Tile footprint. */
[b-p8qo8y2qaw] .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-p8qo8y2qaw] .qa-add-tile i {
    font-size: 1.8rem;
}

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

[b-p8qo8y2qaw] .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-p8qo8y2qaw] .qa-action-btn {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

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

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

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

[b-p8qo8y2qaw] .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-p8qo8y2qaw] .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-p8qo8y2qaw] .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-p8qo8y2qaw] .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-p8qo8y2qaw] .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-p8qo8y2qaw] .qa-tiles .text {
    left: 0;
    right: 0;
    transform: none;
    white-space: normal;
    padding: 0.3rem 0.4rem;
}

[b-p8qo8y2qaw] .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-p8qo8y2qaw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kpi[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

.kpi-icon[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    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-p8qo8y2qaw],
.kpi-trend[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    color: #2a9d8f;
}

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

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

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

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

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

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

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

.transfer-chart[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.transfer-bar-track[b-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    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-p8qo8y2qaw] {
    color: #6b7785;
    font-size: var(--fs-xs);
    font-weight: 500;
}

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

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

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

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

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

.activities li[b-p8qo8y2qaw] {
    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-p8qo8y2qaw]  .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-p8qo8y2qaw] {
    margin-top: auto;
}


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

@media (max-width: 640px) {
    .dashboard[b-p8qo8y2qaw] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .welcome[b-p8qo8y2qaw] {
        grid-template-columns: 1fr;
    }
    .welcome-illustration[b-p8qo8y2qaw] {
        opacity: 0.7;
    }
    .insights[b-p8qo8y2qaw],
    .kpis[b-p8qo8y2qaw],
    [b-p8qo8y2qaw] .quick-access,
    .chart[b-p8qo8y2qaw],
    .activities[b-p8qo8y2qaw] {
        grid-column: 1 / -1;
    }
    [b-p8qo8y2qaw] .qa-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .transfer-chart[b-p8qo8y2qaw] {
        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-p8qo8y2qaw] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
main[b-l7xs59723z] {
    display: grid;
    height: 100%;
    grid-template-rows: auto auto 1fr;
    overflow: auto;
}

h1[b-l7xs59723z] {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--fs-2xl);
}
/* /Components/Pages/Purchase.razor.rz.scp.css */
.pu-input[b-fz87wy332o] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pu-aside[b-fz87wy332o] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

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

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

    /* In der Schublade sitzt der Knopf als Fuss: der Korb scrollt darüber, und im Peek sieht man Griff + Knopf. */
    .pu-book-bar.sticky[b-fz87wy332o] {
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex: 0 0 auto;
        background: #fff;
        padding: 8px 0 2px;
        border-top: 1px solid #eef3f8;
    }

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

/* ---- Telefon: Eingabe füllt das Bild, der Korb liegt in der Schublade ---- */
.pu-input-mobile[b-fz87wy332o] {
    flex: 1 1 auto;
    min-height: 0;
    /* Die lebende Schubladenhöhe freihalten, damit die Eingabefläche immer daran vorbeigescrollt werden kann. */
    padding-bottom: calc(var(--bottom-drawer-height, 124px) + 0.5rem);
}

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

.pu-drawer-basket[b-fz87wy332o] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- Eingabefläche ---- */
.pu-input-inner[b-fz87wy332o] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pu-head[b-fz87wy332o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.pu-field[b-fz87wy332o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pu-label[b-fz87wy332o] {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

/* „optional“ hinter einem Feldnamen: der Monteur soll auf einen Blick sehen, dass er weitertippen darf. */
.pu-optional[b-fz87wy332o] {
    font-weight: 500;
    font-size: var(--fs-2xs);
    color: var(--color-gray-400, #6b7280);
    text-transform: lowercase;
}

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

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

/* ---- Korb ---- */
.pu-basket[b-fz87wy332o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Steht über dem Scroller, nicht darin: wie viel im Korb liegt, darf beim Blättern nicht wegscrollen. */
.pu-basket-head[b-fz87wy332o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 10px;
}

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

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

.pu-basket-count[b-fz87wy332o] {
    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: pu-count-pop-b-fz87wy332o 0.28s cubic-bezier(.22, .9, .3, 1);
}

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

    55% {
        transform: scale(1.25);
    }

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

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

.pu-empty[b-fz87wy332o] {
    font-size: var(--fs-sm);
    color: var(--color-gray-400);
    padding: 0 2px;
}

.pu-lines[b-fz87wy332o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pu-line[b-fz87wy332o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e6eef6;
    border-radius: 10px;
    background: #fff;
}

.pu-line-main[b-fz87wy332o] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.pu-line-name[b-fz87wy332o] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pu-line-qty[b-fz87wy332o] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color, #00385e);
    font-weight: 700;
}

.pu-line-note[b-fz87wy332o] {
    flex: 1 1 100%;
    font-size: var(--fs-xs);
    color: var(--color-gray-400);
}

.pu-line-actions[b-fz87wy332o] {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}
/* /Components/Pages/QuickAccessPickerDialog.razor.rz.scp.css */

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

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

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

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

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

.qa-picker-group-label[b-j4uavpdw3y] {
    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-j4uavpdw3y] {
    margin-top: 0;
}

.qa-picker-tile[b-j4uavpdw3y] {
    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-j4uavpdw3y] {
    box-shadow: var(--box-shadow);
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.qa-picker-icon[b-j4uavpdw3y] {
    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-j4uavpdw3y] {
    font-weight: 500;
}

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

.settings-sidenav[b-38o16i2zus] {
    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-38o16i2zus] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-nav-item[b-38o16i2zus] {
    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-38o16i2zus] {
    background: rgba(0, 0, 0, 0.04);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .settings-nav-item[b-38o16i2zus] {
        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-uhlp65x8hl] {
    padding: 8px;
}

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

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

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

.instance-row:hover[b-uhlp65x8hl] {
    background-color: #f1f1f1 !important;
}


/* Der Kommissions-Drilldown im Spalten- und im Filtermenü. Er wird von dieser Seite gerendert (als Template
   für TableFilterEditor) und trägt deshalb ihren Isolations-Scope — die Pillen-Stile in
   TableFilterEditor.razor.css erreichen ihn nicht. Statt sie hier nachzubauen, sind die Ebenen Chips: dieselbe
   Form, die auch in der Zelle steht, also liest sich Filter und Zeile als dasselbe. */
.commission-filter[b-uhlp65x8hl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 260px;
}

/* Der Weg zurück, und zugleich die Anzeige, wo man steht. */
.commission-filter-up[b-uhlp65x8hl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.2rem 0.1rem;
    border: none;
    background: transparent;
    color: var(--color-gray-500, #374151);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.commission-filter-up:hover[b-uhlp65x8hl] {
    color: var(--primary-color);
}

.commission-filter-up i[b-uhlp65x8hl] {
    color: var(--primary-color);
}

.commission-filter-up span[b-uhlp65x8hl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commission-filter-level[b-uhlp65x8hl] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
}

/* Die Chips sind eigene Komponenten, also nur über ::deep erreichbar. Über die volle Breite, weil sie hier
   eine Liste sind und keine Marginalie an einer Zeile. */
.commission-filter-level[b-uhlp65x8hl]  .chip {
    width: 100%;
    text-align: left;
}

.commission-filter-level[b-uhlp65x8hl]  .chip.is-selected {
    background: var(--primary-color);
    color: #fff;
}

.commission-filter-level[b-uhlp65x8hl]  .chip.is-selected .chip-entity-icon {
    color: #ffffffc0;
}

/* ---- Umlagerungs-Schublade (Mobil/Tablet) ----
   Dieselbe Form wie der Korb beim EasyTransfer und beim Einkauf: Kopfzeile oben, die Zusammenfassung
   dazwischen scrollend, die Knöpfe als festgehaltener Fuß. Nur so zeigt die kleinste Ansicht der Schublade
   beides — was im Korb liegt und wie man ihn abschließt. */
.wd-drawer[b-uhlp65x8hl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0 6px;
    gap: 10px;
}

.wd-drawer-head[b-uhlp65x8hl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    flex: 0 0 auto;
}

.wd-drawer-head i[b-uhlp65x8hl] {
    color: var(--primary-color, #00385e);
}

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

.wd-drawer-count[b-uhlp65x8hl] {
    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: 700;
}

.wd-drawer-basket[b-uhlp65x8hl] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Wie beim EasyTransfer: die Liste scrollt in sich, statt am Rand die Seite mitzuziehen. */
    overscroll-behavior: contain;
}

/* Der Fuß bleibt stehen, während die Liste darüber läuft. */
.wd-drawer-bar[b-uhlp65x8hl] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    padding: 8px 0 2px;
    border-top: 1px solid #eef3f8;
}

.wd-drawer-bar[b-uhlp65x8hl]  button {
    flex: 1 1 auto;
    padding: 13px 16px;
    justify-content: center;
}
/* /Components/Project/ReportCustomerSheet.razor.rz.scp.css */
.report-sheet[b-q9y9c2t7uk] {
    /* 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-q9y9c2t7uk] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.report-sheet .header[b-q9y9c2t7uk] {
    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-q9y9c2t7uk] {
    margin: 0;
    font-size: var(--fs-xl);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.report-sheet .table th[b-q9y9c2t7uk] {
    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-q9y9c2t7uk] {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
}

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

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

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

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

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

.report-sheet .signature[b-q9y9c2t7uk] {
    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-q9y9c2t7uk] {
    margin-top: 0.5rem;
    width: min(360px, 100%);
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

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

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

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

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

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

    .report-sheet .actions[b-q9y9c2t7uk] {
        justify-content: flex-start;
    }
}
/* /Components/Project/ReportMaterialFieldEditor.razor.rz.scp.css */
.material-editor[b-jf32966cso] {
    display: flex;
    flex-direction: column;
}

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

.material-list[b-jf32966cso] {
    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-jf32966cso] {
    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-jf32966cso] {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.material-name[b-jf32966cso] {
    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-jf32966cso] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.material-remove[b-jf32966cso] {
    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-jf32966cso] {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

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

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

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

.material-source[b-jf32966cso] {
    color: #7b8189;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Das Lager, aus dem eine Position gebucht wird, wenn es nicht das der Baustelle ist. Steht neben dem Namen,
   weil es zur Position gehört und nicht zur Menge. */
.material-sourcechip[b-jf32966cso] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: #7b8189;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Die Fehlmenge samt Abhilfe. Warnend, aber nicht rot: es ist kein Fehler, sondern ein offener Punkt. */
.material-source-button[b-jf32966cso] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-orange) 55%, transparent);
    background: color-mix(in srgb, var(--accent-orange) 14%, transparent);
    color: color-mix(in srgb, var(--accent-orange) 65%, black);
    font-size: 0.75rem;
    white-space: nowrap;
    transition: background 0.15s;
}

.material-source-button:hover[b-jf32966cso] {
    background: color-mix(in srgb, var(--accent-orange) 26%, transparent);
}
/* /Components/Project/ReportMaterialSourceDialog.razor.rz.scp.css */
.material-hint[b-le8tzw4qbj] {
    color: #7b8189;
    font-size: 0.875rem;
    margin: 0.25rem 0 0.5rem;
}

.source-list[b-le8tzw4qbj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ein Lager je Zeile: Name links, entnehmbare Menge rechts. Die ganze Zeile ist die Schaltfläche -- es gibt
   nichts anderes zu tun, als eines zu wählen. */
.source-option[b-le8tzw4qbj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 8px;
    background: transparent;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}

.source-option:hover[b-le8tzw4qbj] {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.source-option.is-selected[b-le8tzw4qbj] {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.source-name[b-le8tzw4qbj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-available[b-le8tzw4qbj] {
    flex: 0 0 auto;
    color: #7b8189;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Scanner/CodeScanner.razor.rz.scp.css */
.code-scanner[b-w1o7bi60hq] {
    --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-w1o7bi60hq] {
    width: min(70vw, 320px);
    height: min(70vw, 320px);
}

.scanner-shell[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    width: 100%;
    height: 100%;
}

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

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

/* Dark until the first frame arrives, so the overlays read the same before and after. */
.scanner-video[b-w1o7bi60hq] {
    display: block;
    width: 100%;
    min-height: 420px;
    max-height: 62svh;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    background: #0b1220;
}

.scanner-video:not(.full-width)[b-w1o7bi60hq] {
    width: auto;
    max-width: 100%;
}

.code-scanner.compact .scanner-video[b-w1o7bi60hq] {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
}

.scanner-loading-overlay[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.scanner-pause-overlay[b-w1o7bi60hq] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: none;
    background: rgba(15, 23, 42, 0.45);
    color: #ffffff;
    cursor: pointer;
}

.scanner-pause-card[b-w1o7bi60hq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    text-align: center;
}

.scanner-pause-title[b-w1o7bi60hq] {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.scanner-pause-hint[b-w1o7bi60hq] {
    font-size: var(--fs-xs);
    opacity: 0.9;
}

/* Camera problems are shown where the camera would be, not as a toast: the surface is on screen anyway, and a
   message that stays until it is resolved is easier to act on than one that disappears. The bottom padding keeps
   the text clear of the code entry. */
.scanner-message-overlay[b-w1o7bi60hq] {
    position: absolute;
    inset: 0;
    z-index: 35;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.25rem 1.25rem 4rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.9) 100%);
    color: #f8fafc;
    text-align: center;
}

.scanner-message-icon[b-w1o7bi60hq] {
    font-size: 1.6rem;
    opacity: 0.85;
}

.scanner-message-text[b-w1o7bi60hq] {
    max-width: 22rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.scanner-message-hint[b-w1o7bi60hq] {
    max-width: 22rem;
    font-size: var(--fs-xs);
    opacity: 0.8;
}

.scanner-message-action[b-w1o7bi60hq] {
    margin-top: 0.25rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #f8fafc;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.scanner-overlay[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-w1o7bi60hq] .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-w1o7bi60hq] .scanner-control-btn.active {
    color: var(--accent-color);
}

[b-w1o7bi60hq] .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-w1o7bi60hq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
}

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

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

.guide-frame[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    animation: scanner-hit-b-w1o7bi60hq 700ms ease;
}

.guide-corner[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    color: var(--accent-color);
}

.guide-corner.tl[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    translate: 0.5rem 0.5rem;
}

.guide-corner.tr[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    translate: -0.5rem 0.5rem;
}

.guide-corner.bl[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    translate: 0.5rem -0.5rem;
}

.guide-corner.br[b-w1o7bi60hq] {
    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-w1o7bi60hq] {
    translate: -0.5rem -0.5rem;
}

/* Manual code entry: a chip on the lower edge that opens into a field. Above every overlay, so it stays usable
   while the camera starts, is paused or has failed. */
.scanner-manual[b-w1o7bi60hq] {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 40;
    display: flex;
    justify-content: center;
    max-width: calc(100% - 1.5rem);
    transform: translateX(-50%);
}

.scanner-manual.open[b-w1o7bi60hq] {
    width: calc(100% - 1.5rem);
}

.scanner-manual-chip[b-w1o7bi60hq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #f8fafc;
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.scanner-manual-form[b-w1o7bi60hq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.3rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* 16px is the size below which Safari on iOS zooms the page when the field receives focus. */
.scanner-manual-input[b-w1o7bi60hq] {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.1rem;
    padding: 0 0.8rem;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 16px;
}

.scanner-manual-submit[b-w1o7bi60hq],
.scanner-manual-close[b-w1o7bi60hq] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.scanner-manual-submit[b-w1o7bi60hq] {
    background: var(--primary-color);
    color: #ffffff;
}

.scanner-manual-submit:disabled[b-w1o7bi60hq] {
    opacity: 0.5;
    cursor: default;
}

.scanner-manual-close[b-w1o7bi60hq] {
    background: transparent;
    color: #f8fafc;
}

@keyframes scanner-hit-b-w1o7bi60hq {
    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-w1o7bi60hq] {
        width: min(78vw, 300px);
        height: min(78vw, 300px);
    }

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

    .scanner-video[b-w1o7bi60hq] {
        min-height: 420px;
    }
}
/* /Components/Scanner/EntityScannerDialogContent.razor.rz.scp.css */
.scanner-dialog-content[b-sij4opsbff] {
    display: grid;
    gap: 0.75rem;
}

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

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

.entity-scan-dialog__header[b-ou12u3sv37] {
    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-ou12u3sv37] {
    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-ou12u3sv37] {
    font-size: 1.25rem;
}

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

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

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

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

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

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

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

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

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

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

@supports (height: -moz-available) {
    .action-buttons[b-fasrc9wyri]  > * {
        min-height: 3rem
    }
}
/* /Components/Shared/Action/ActionGroup.razor.rz.scp.css */
/* The strip itself: chips + dots retracted, the full action row expanded. The items are rendered by
   the hosts (the Items template) or by ActionGroupButton, i.e. under a different CSS scope — hence
   ::deep on everything below the container.

   Three hosting surfaces: the default light bar, .on-accent (inside the table's accent header) and
   .floating (positioned against its host cell instead of taking part in its layout). */
.action-group[b-065f1vm4rj] {
    --action-group-size: 26px;
    --action-group-gap: 4px;
    display: inline-flex;
    align-items: center;
}

/* A bar of its own rather than a table row's density (the documents toolbar). */
.action-group.comfortable[b-065f1vm4rj] {
    --action-group-size: 2.1rem;
    --action-group-gap: 0.4rem;
}

/* 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.
   Hosts that seat the strip differently retune it through the variable. */
.action-group.floating[b-065f1vm4rj] {
    position: absolute;
    top: 50%;
    right: var(--action-group-inset, 14.2px);
    transform: translateY(-50%);
    z-index: 4;
}

/* Fixed padding and min-height in both states: only the background changes when expanding, so the
   hosting row keeps its height and nothing below it shifts. */
.action-group-items[b-065f1vm4rj] {
    display: inline-flex;
    align-items: center;
    gap: var(--action-group-gap);
    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 what passes beneath it, so it needs an opaque backing. */
.floating.expanded .action-group-items[b-065f1vm4rj] {
    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 bar instead of a chip raised above it. Same specificity as the rule
   above and placed after it, which is what lets it win. */
.action-group.fits .action-group-items[b-065f1vm4rj] {
    background: transparent;
    box-shadow: none;
}

/* ContextMenu wraps each toggle in .context-menu-toggle — keep it inline in the strip. */
.action-group-items[b-065f1vm4rj]  .context-menu-toggle {
    display: inline-flex;
}

/* Items 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. */
.action-group-items[b-065f1vm4rj]  .action-group-item {
    max-width: var(--action-group-size);
    opacity: 1;
    transition: max-width 180ms ease, opacity 130ms ease, transform 180ms ease, margin-left 180ms ease;
}

/* A labelled item takes the width its text needs; the cap only has to clear it for the animation. */
.action-group-items[b-065f1vm4rj]  .action-group-item.is-wide {
    max-width: 14rem;
}

/* Clipping only while collapsing — expanded, a count badge must overhang its button. */
.action-group-items[b-065f1vm4rj]  .action-group-item.is-collapsed {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: scale(0.7);
    margin-left: calc(var(--action-group-gap) * -1);
    pointer-events: none;
}

/* The first item has no preceding gap to absorb. */
.action-group-items[b-065f1vm4rj]  > .action-group-item.is-collapsed:first-child {
    margin-left: 0;
}

/* --- The chip ------------------------------------------------------------------------------------ */

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

.action-group[b-065f1vm4rj]  .action-group-btn.is-wide {
    width: auto;
    padding: 0 0.7rem;
    font-size: var(--fs-sm);
}

.action-group[b-065f1vm4rj]  .action-group-label {
    white-space: nowrap;
    font-weight: 600;
}

.action-group[b-065f1vm4rj]  .action-group-btn:hover {
    background: #d8e2ec;
}

/* Raised, in the surface colour: the state the action stands for is currently on. */
.action-group[b-065f1vm4rj]  .action-group-btn.active {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
}

/* On a host's own items the type is the chip's ink only — a filled red toggle would shout across a
   table header. Commands fill instead; see the block at the end of this sheet. */
.action-group[b-065f1vm4rj]  .action-group-btn.danger {
    color: var(--color-red-800, #991b1b);
}

.action-group[b-065f1vm4rj]  .action-group-btn.danger:hover {
    background: color-mix(in srgb, var(--color-red-800, #991b1b) 12%, #e7edf3);
}

.action-group[b-065f1vm4rj]  .action-group-btn.primary {
    color: var(--primary-color);
}

.action-group.on-accent[b-065f1vm4rj]  .action-group-btn {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.action-group.on-accent[b-065f1vm4rj]  .action-group-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.action-group.on-accent[b-065f1vm4rj]  .action-group-btn.active {
    background: white;
    color: var(--accent-color);
}

.action-group.on-accent[b-065f1vm4rj]  .action-group-btn.danger,
.action-group.on-accent[b-065f1vm4rj]  .action-group-btn.primary {
    color: white;
}

/* --- Commands ------------------------------------------------------------------------------------
   A registered action is something the user does, not a view toggle, so it leaves the quiet chip behind
   and takes the app's own button language (see Button.razor.css): a soft raised surface, its type
   filled. A bulk action in the selection bar has to carry the weight of what it is about to do to every
   selected entry. Placed after the surface rules above so a command looks the same wherever it sits. */

.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action {
    background: white;
    color: var(--primary-color);
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(14, 42, 64, 0.12);
}

.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action:hover {
    background: #f1f5f9;
}

.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action.danger {
    background: var(--accent-red);
    border-color: transparent;
    color: white;
}

.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action.primary {
    background: var(--accent-color);
    border-color: transparent;
    color: white;
}

/* Darkening rather than swapping the colour, exactly as the app's buttons hover. The background is
   restated because the plain-command hover above matches these too, at the same specificity. */
.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action.danger:hover {
    background: var(--accent-red);
    filter: brightness(0.93);
}

.action-group[b-065f1vm4rj]  .action-group-btn.action-group-action.primary:hover {
    background: var(--accent-color);
    filter: brightness(0.93);
}

.action-group[b-065f1vm4rj]  .action-group-badge {
    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;
}
/* /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-g61i7h89ff] {
    display: inline-flex;
}

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

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

.action-menu[b-g61i7h89ff]  .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-g61i7h89ff]  .select .expander {
    display: none;
}

.action-menu-toggle[b-g61i7h89ff] {
    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-g61i7h89ff] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

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

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

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

.action-option-label[b-g61i7h89ff] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/AnimatedList.razor.rz.scp.css */
.animated-list > *[b-c7wfgwssdh] {
  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-c7wfgwssdh] {
  animation-name: show-item-b-c7wfgwssdh;
}

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

@keyframes show-item-b-c7wfgwssdh {
    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-c7wfgwssdh {
    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-c7wfgwssdh] { animation-duration: 1ms !important; }
}
/* /Components/Shared/ArticleScanSearchSurface.razor.rz.scp.css */
.ass-surface[b-mkrlvcmx3h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

/* 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-mkrlvcmx3h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

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

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

.art-picked[b-mkrlvcmx3h] {
    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-mkrlvcmx3h] {
    height: min(45dvh, 380px);
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/BottomDrawer.razor.rz.scp.css */
.bottom-drawer[b-6etdbsxodp] {
    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-6etdbsxodp] {
    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-6etdbsxodp] {
    cursor: grabbing;
}

.bottom-drawer-handle-bar[b-6etdbsxodp] {
    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-6etdbsxodp] {
    background: rgba(0, 0, 0, 0.3);
}

.bottom-drawer-content[b-6etdbsxodp] {
    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-6etdbsxodp] {
    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-6etdbsxodp],
.bottom-drawer.edge-left[b-6etdbsxodp] {
    top: 0;
    bottom: 0;
    max-height: none;
    max-width: 90vw;
    will-change: width;
}

.bottom-drawer.edge-right[b-6etdbsxodp] {
    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-6etdbsxodp] {
    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-6etdbsxodp] {
    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-6etdbsxodp],
.bottom-drawer.edge-left .bottom-drawer-handle[b-6etdbsxodp] {
    height: auto;
    width: 28px;
    cursor: col-resize;
}

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

.bottom-drawer.edge-right .bottom-drawer-content[b-6etdbsxodp],
.bottom-drawer.edge-left .bottom-drawer-content[b-6etdbsxodp] {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}
/* /Components/Shared/BulkActionFailureDialog.razor.rz.scp.css */
.failure-list[b-s0uh2kahws] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 45dvh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
}

.failure-item[b-s0uh2kahws] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
}

.failure-item + .failure-item[b-s0uh2kahws] {
    border-top: 1px solid #f1f5f9;
}

.failure-entity[b-s0uh2kahws] {
    font-weight: 600;
    color: var(--primary-color);
}

.failure-reason[b-s0uh2kahws] {
    font-size: var(--fs-sm);
    color: #b91c1c;
}
/* /Components/Shared/Button.razor.rz.scp.css */
button[b-dn06q8zvjn] {
    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-dn06q8zvjn] {
        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-dn06q8zvjn] {
        filter: brightness(0.93);
    }

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

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

.none[b-dn06q8zvjn] {
    background: none;
    border: none;
}
.none:hover:enabled[b-dn06q8zvjn] {
    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-dn06q8zvjn], .is-active:hover:enabled[b-dn06q8zvjn] {
    background: #fff;
}

.click-indicator[b-dn06q8zvjn]::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;
}

/* Press feedback paints in the same frame as the press, with no circuit involvement. This
   replaces a server-driven `is-clicked` class that could not appear until a round trip had
   completed — on a remote connection the button read as dead until the server answered.
   :active wins over the :hover brightness above by coming later at equal specificity. */
.click-indicator:active:enabled[b-dn06q8zvjn] {
    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);
}

/* Snap in on press, fade out on release (the ::after base transition above carries the 240ms
   release). Together these read as the old 280ms sweep without needing an animation that a
   short press would truncate. */
.click-indicator:active:enabled[b-dn06q8zvjn]::after {
    opacity: 0.34;
    transition: opacity 40ms ease;
}



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

@keyframes gradient-animation-b-dn06q8zvjn {
    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;
  }
}

@media (prefers-reduced-motion: reduce) {
    .important[b-dn06q8zvjn] {
        animation: none;
    }
}
/* /Components/Shared/Card.razor.rz.scp.css */
.card[b-kylcj2buj0] {
    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-kylcj2buj0] {
    padding: 0;
}
.card.no-margin[b-kylcj2buj0] {
    margin: 0;
}
.card.no-shadow[b-kylcj2buj0] {
    box-shadow: none;
}
.card:has(.link-icon)[b-kylcj2buj0] {
    position: relative;
}
.card:hover[b-kylcj2buj0] {
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}
.card.clickable[b-kylcj2buj0] {
    cursor: pointer;
}
.card-content[b-kylcj2buj0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
@media (max-width: 640px) {
  .card[b-kylcj2buj0] {
    padding: 0.85rem;
    font-size: var(--fs-base);
  }
}
.link-icon[b-kylcj2buj0] {
    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-kylcj2buj0] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}
.card.no-padding:has(.link-icon) > .link-icon[b-kylcj2buj0] {
    top: 0.75rem;
    right: 0.75rem;
}
@media (max-width: 640px) {
    .card:has(.link-icon) > .link-icon[b-kylcj2buj0] {
        top: 0.85rem;
        right: 0.85rem;
    }
}
/* /Components/Shared/Chip.razor.rz.scp.css */

.chip[b-s0sts1ior6] {
    /* 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-s0sts1ior6] {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.chip.clickable:hover[b-s0sts1ior6] {
    filter: brightness(0.95);
}

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

.chip-entity-icon[b-s0sts1ior6] {
    font-size: 0.9em;
    color: #6b7280d0;
}

.chip[b-s0sts1ior6]  > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
/* /Components/Shared/CommissionLabel.razor.rz.scp.css */
/* Ein Zeichen und ein bis drei Namen, in einer Zeile: kommissionierte Ware soll auffallen, ohne die Zeile zu
   überladen, in der sie steht. Die Farbe ist die der Kommissionierung (Aktion „Kommissionieren“), das Symbol
   dasselbe — wer es einmal gesehen hat, erkennt es wieder. */
.commission[b-91nkpudjvy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-violet) 12%, transparent);
    color: color-mix(in srgb, var(--accent-violet) 75%, #222);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

.commission i[b-91nkpudjvy] {
    flex: 0 0 auto;
    font-size: 0.85em;
}

/* Jeder Teil der Kette bekommt seinen eigenen Trenner, damit „Müller · Werksweg 5“ als zwei Angaben liest und
   nicht als ein langer Name. Der Trenner sitzt vor dem Teil, nicht dahinter — so steht nie einer am Ende. */
.commission-part[b-91nkpudjvy] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commission-part + .commission-part[b-91nkpudjvy]::before {
    content: "·";
    margin-right: 0.3rem;
    opacity: 0.55;
}
/* /Components/Shared/ContextMenu.razor.rz.scp.css */
/* The panel is a `popover`, so the browser puts it in the top layer while it is showing. That is
   what replaces the old <SectionOutlet> teleport plus z-index: 600 — the top layer sits above every
   stacking context on the page by definition, including the dialog backdrop, so a menu opened from
   inside a dialog lands on top of it without anyone having to pick a number.

   Everything below is undoing the UA stylesheet's defaults for [popover] (a bordered, padded,
   auto-centred box). The panel is only a positioning shell; whatever is inside it — .select-menu-panel,
   the action list — brings its own surface. */
.context-menu-panel[b-zabckqf6f0] {
    position: fixed;
    inset: auto;
    width: fit-content;
    height: fit-content;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
}

/* Popover is Baseline 2024, but a browser without it ignores the attribute *entirely* — including
   the UA rule that keeps a closed popover display:none — which would leave every menu on the page
   permanently open. ContextMenu.razor.js mirrors the state into data-open so this can stand in.
   No top layer here, so fall back to the z-index the teleported menu used to carry. */
@supports not selector(:popover-open) {
    .context-menu-panel[b-zabckqf6f0] {
        display: none;
    }

    .context-menu-panel[data-open][b-zabckqf6f0] {
        display: block;
        z-index: 600;
    }
}
/* /Components/Shared/ContextMenuItem.razor.rz.scp.css */
.menu-item[b-8d7fvbhe2c] {
    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-8d7fvbhe2c] {
  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-t4ra0pb52i] {
    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-t4ra0pb52i] {
        background: #e2ebf4;
    }

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

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

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

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

/* Der gewählte Pfad: Mandant · Objekt · Baustelle, jede Ebene ein eigener Kasten.

   Jede Ebene bekommt denselben Anteil an der Breite (flex-grow aus einer Basis von 0), nimmt davon aber nur,
   was ihr Name braucht (max-width: max-content) — was sie liegen lässt, verteilt Flexbox an die längeren
   Nachbarn weiter. Damit gilt beides, worauf es hier ankommt: solange der ganze Pfad hineinpasst, steht er
   ungekürzt da, und wird es eng, gibt der lange Mandant nach, statt die Baustelle am Ende abzuschneiden.
   (Ohne die Anteile schrumpft Flexbox nach Inhaltsbreite: der lange Name behält den größten Platz und die
   kurzen werden gekürzt, obwohl sie kaum welchen bräuchten. Mit einer festen Prozentgrenze wiederum stünde
   ein langer Name selbst dann gekürzt da, wenn daneben alles frei ist.) */
.cop-path[b-t4ra0pb52i] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}

.cop-path-part[b-t4ra0pb52i] {
    flex: 1 1 0;
    max-width: max-content;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Trenner sitzt am Teil dahinter, nicht als eigener Kasten dazwischen: so steht nie einer am Ende, wenn
   die Ebene darunter fehlt. */
.cop-path-part + .cop-path-part[b-t4ra0pb52i]::before {
    content: "·";
    margin-right: 0.3rem;
    opacity: 0.55;
}

/* Solange nichts gewählt ist, steht in der Pille eine Frage und keine Antwort — gedämpft, wie jeder
   Platzhalter im Formular. (.placeholder ist die Klasse, die auch das geteilte Select dafür benutzt; ein
   eigener Stil dafür fehlte hier, weshalb die Frage so aussah wie eine Auswahl.) */
.cop-selected .placeholder[b-t4ra0pb52i] {
    color: var(--color-gray-500, #5c7180);
}

.cop-name[b-t4ra0pb52i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Ohne min-width: 0 schrumpft ein Flex-Element nicht unter seinen Inhalt, und das Ellipsis oben
       greift nie — sichtbar erst, seit der Mandant daneben um denselben Platz konkurriert. */
    min-width: 0;
}

/* Der Mandant hinter dem Baustellennamen: gedämpft wie der Bereichs-Zusatz im Lagerort-Picker, und er gibt
   doppelt so schnell nach, wenn die Pille zu schmal wird — der Name der Baustelle ist die Auskunft, der
   Mandant nur ihre Einordnung. */
.cop-origin[b-t4ra0pb52i] {
    color: var(--color-gray-400, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 2;
}

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

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

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

/* Popover panel (portalled into the ContextMenu section; scoped styling still applies via the scope attribute). */
.cop-panel[b-t4ra0pb52i] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    animation: cop-show-b-t4ra0pb52i 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-t4ra0pb52i] {
    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-t4ra0pb52i] {
        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-t4ra0pb52i] {
    display: flex;
    flex-direction: column;
    height: 340px;
    animation: cop-drill-in-b-t4ra0pb52i 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-t4ra0pb52i]  .select-inline {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

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

.cop-back[b-t4ra0pb52i] {
    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-t4ra0pb52i] {
        background: var(--color-gray-200);
    }

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

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

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

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

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

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

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

@keyframes cop-drill-in-b-t4ra0pb52i {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* „Alle“ — die Stufe über dem Mandanten, auf der nicht gefiltert wird. Steht als erster Eintrag in der obersten
   Liste und sieht aus wie eine Option, nur gedämpft: sie wählt nichts aus, sie nimmt die Wahl zurück. */
.cop-clear[b-t4ra0pb52i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: var(--color-gray-500, #5c7180);
    font-weight: 600;
}
/* /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-7cn8pjfjbh] {
    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-7cn8pjfjbh] {
        background: #e2ebf4;
    }

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

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

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

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

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

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

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

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

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

/* One navigation level: an optional back header + a bounded inline EntitySelect that owns the list scroll. */
.cos-level[b-7cn8pjfjbh] {
    display: flex;
    flex-direction: column;
    height: 340px;
    animation: cos-drill-in-b-7cn8pjfjbh 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-7cn8pjfjbh]  .select-inline {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

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

.cos-back[b-7cn8pjfjbh] {
    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-7cn8pjfjbh] {
        background: var(--color-gray-200);
    }

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

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

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

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

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

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

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

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

.data-card-actions[b-efzsxbw3gi] {
    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-efzsxbw3gi]  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-efzsxbw3gi]  button:hover {
        background: rgba(0, 0, 0, 0.1);
    }

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

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

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

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

[b-efzsxbw3gi] .data-card-value > ul li,
[b-efzsxbw3gi] .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-efzsxbw3gi] .data-card-value > ul li:hover,
[b-efzsxbw3gi] .data-card-label > ul li:hover {
    background: #efefef;
}

[b-efzsxbw3gi] .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-efzsxbw3gi] {
    display: flex;
    flex-direction: column;
  }
}
/* /Components/Shared/DebouncedInput.razor.rz.scp.css */
input[b-j4shlb8urh] {
    padding: 0.5rem 0.75rem;
}

input:focus[b-j4shlb8urh] {
    outline: none;
}
/* /Components/Shared/DialogContent.razor.rz.scp.css */
/* Der Dialograhmen (.modal) begrenzt auf 85 dvh und schneidet ab. Damit dabei der Inhalt scrollt statt der
   Fuß zu verschwinden, ist der Inhalt eine Spalte: Titel und Schaltflächen stehen fest, dazwischen scrollt
   der Rumpf. Gleiche Aufteilung wie in EntityForm. */

.dialog-content[b-ys407obply] {
    display: flex;
    flex-direction: column;
    max-height: 85dvh;
    overflow: hidden;
}

/* Dieselben Einzüge wie EntityForm.razor.css: Kopf 20px oben / 30px seitlich, Rumpf 30px seitlich,
   Fuß 30px seitlich / 20px unten. Beide erscheinen im selben Rahmen (.modal bringt keine Polsterung
   mit), und ein Dialog, der seinen Inhalt enger an den Rand setzt als ein Formular, liest sich neben
   ihm wie ein anderes Fenster. Die Einzüge stehen deshalb hier und nicht als Utility-Klassen im
   Markup — so gibt es genau eine Stelle, an der sie gleich bleiben müssen. */
.dialog-title[b-ys407obply] {
    flex-shrink: 0;
    padding: 20px 30px 0;
    margin-bottom: 0.5rem;
}

.dialog-body[b-ys407obply] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Ein Kontextmenü oder ein Fokusring am Rand des Rumpfes darf nicht am Scroll-Rand abgeschnitten werden. */
    overflow-x: visible;
    padding: 0 30px 1rem;
}

/* Ein Dialog ohne Titel hat keinen Kopf, der den oberen Abstand stellt — dann stellt ihn der Rumpf. */
.dialog-content > .dialog-body:first-child[b-ys407obply] {
    padding-top: 20px;
}

.buttons[b-ys407obply] {
    flex-shrink: 0;
    padding: 0.5rem 30px 20px;
}

/* Randloser Dialog: der Inhalt füllt den Rahmen selbst aus (Kamerabild). Als Modifikator und nicht als
   `!p-0` von außen, weil die Einzüge auf Kopf, Rumpf und Fuß liegen und nicht auf der Wurzel — eine
   Utility-Klasse an der Wurzel träfe sie gar nicht mehr. */
.dialog-content.dialog-flush > .dialog-title[b-ys407obply],
.dialog-content.dialog-flush > .dialog-body[b-ys407obply],
.dialog-content.dialog-flush > .buttons[b-ys407obply] {
    padding: 0;
}
/* /Components/Shared/DialogInstance.razor.rz.scp.css */
/* DialogCard.razor.css */
.modal-backdrop[b-01bk0y4fgb] {
  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-01bk0y4fgb 0.2s;
  width: 100vw;
}

.modal-backdrop.backdrop-locked[b-01bk0y4fgb] {
  cursor: default;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}
.modal[b-01bk0y4fgb] {
    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-01bk0y4fgb 0.25s;
    position: relative;
}

.modal.mobile[b-01bk0y4fgb] {
  max-width: 90vw;
}

/* Opt-in wider dialog. The 700px cap above is right for forms and confirmations, but the import conflict
   diff is a four-column table and the export relation tree nests several levels deep — both are unreadable
   squeezed into it. Still bounded by the viewport, and .mobile continues to win on small screens. */
.modal.wide[b-01bk0y4fgb] {
  max-width: min(1040px, 94vw);
}
@keyframes dialog-fadein-b-01bk0y4fgb {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-popin-b-01bk0y4fgb {
  0% { transform: scale(0.95); opacity: 0.7; }
  80% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop[b-01bk0y4fgb],
  .modal[b-01bk0y4fgb] {
    animation: none;
  }
}
/* /Components/Shared/Documents/DocumentsView.razor.rz.scp.css */
.documents-view[b-2co1dhvzqm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 280px;
    max-height: 70dvh;
    overflow: hidden;
}

/* Only the folders scroll; the breadcrumb, the toolbar and the footer stay put. */
.documents-body[b-2co1dhvzqm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.documents-breadcrumb[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    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-2co1dhvzqm] {
    background: rgba(0, 0, 0, 0.05);
}

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

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

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

.documents-toolbar[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    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-2co1dhvzqm] {
    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-2co1dhvzqm] {
    padding: 0.25rem;
}

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

.documents-empty[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.doc-tile[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    text-align: center;
}

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

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

.doc-tile-main[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    font-size: 2rem;
    color: #555;
}

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

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

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

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

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

.doc-tile-owner[b-2co1dhvzqm] {
    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-2co1dhvzqm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

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

.documents-loading[b-2co1dhvzqm] {
    padding: 1rem;
}
/* /Components/Shared/Documents/DocumentToolbar.razor.rz.scp.css */
/* One action bar: inline search grows to fill, the ActionGroup strip hugs the right (the same strip the
   table header carries). The strip never gives up width — the search field is what yields. */
.doc-toolbar[b-63sr6oc4h3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.doc-toolbar[b-63sr6oc4h3]  .action-group {
    flex-shrink: 0;
}

/* --- Search field (shared by the inline desktop host and the collapsed mobile panel) --- */
.doc-search[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    flex: 1;
}

.doc-search-embedded[b-63sr6oc4h3] {
    width: 100%;
}

.doc-search-icon[b-63sr6oc4h3] {
    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-63sr6oc4h3]  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-63sr6oc4h3]  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-63sr6oc4h3]  input {
    padding-right: 2.4rem;
}

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

.doc-search-clear[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    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-63sr6oc4h3] {
    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-63sr6oc4h3] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-color, #264653);
}

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

/* The collapsed search lives in the actions strip; only shown on narrow viewports. */
.doc-search-mobile[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    min-width: 17rem;
    max-width: 24rem;
}

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

    .doc-search-mobile[b-63sr6oc4h3] {
        display: inline-flex;
    }
}

/* The chips themselves (filter, sort, scope, view switch) are ActionGroup's — see
   Components/Shared/Action/ActionGroup.razor.css. Only their panels are styled here. */

/* --- Filter / sort popover panels (teleported into the ContextMenu outlet, which adds no chrome) --- */
.doc-toolbar-panel[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    margin: 0.35rem 0 0.15rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #777;
}

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

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

.doc-toolbar-tab[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    background: rgba(0, 0, 0, 0.04);
}

.doc-toolbar-tab.selected[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    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-63sr6oc4h3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

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

.doc-toolbar-option[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    background: rgba(0, 0, 0, 0.04);
}

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

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

.doc-toolbar-reset[b-63sr6oc4h3] {
    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-63sr6oc4h3] {
    color: #bbb;
    cursor: default;
}

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

.doc-tree-row[b-e811a9c8hp] {
    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-e811a9c8hp] {
    cursor: pointer;
}

.doc-tree-row.folder:hover[b-e811a9c8hp] {
    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-e811a9c8hp] {
    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-e811a9c8hp]::after {
    content: "";
    position: absolute;
    inset: -0.5rem -0.35rem;
}

.doc-tree-caret[b-e811a9c8hp] {
    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-e811a9c8hp] {
    color: var(--primary-color, #264653);
}

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

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

.doc-tree-open[b-e811a9c8hp] {
    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-e811a9c8hp] {
    padding-left: 0;
}

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

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

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

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

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

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

.doc-tree-empty[b-e811a9c8hp] {
    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-e811a9c8hp] {
    font-size: 1.6rem;
}

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

/* Rides the dialog's animated lower edge (data-dialog-bottom): opaque and above the body it slides over. */
.upload-footer[b-egg9tkul7y] {
    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-egg9tkul7y] {
    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-egg9tkul7y] {
    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-egg9tkul7y] {
    background: rgba(0, 0, 0, 0.06);
}

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

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

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

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

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

.picker-label[b-egg9tkul7y] {
    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-egg9tkul7y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    padding: 0.25rem;
}

.picker-tile[b-egg9tkul7y] {
    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-egg9tkul7y] {
    font-size: 1.6rem;
}

.picker-tile span[b-egg9tkul7y] {
    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-egg9tkul7y] {
    color: #999;
}

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

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

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

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

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

.select-native[b-egg9tkul7y],
.input[b-egg9tkul7y] {
    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-egg9tkul7y],
.input:focus[b-egg9tkul7y] {
    outline: none;
    border-color: var(--primary-color, #264653);
}

.drop-zone[b-egg9tkul7y] {
    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-egg9tkul7y] {
    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-egg9tkul7y] {
    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-egg9tkul7y] {
    color: var(--primary-color, #264653);
}

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

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

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

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

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

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

.source-button[b-egg9tkul7y] {
    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-egg9tkul7y] {
    border-color: var(--primary-color, #264653);
    color: var(--primary-color, #264653);
}

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

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

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

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

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

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

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

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

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

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

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

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

.preview-download-link[b-egg9tkul7y],
.preview-download[b-egg9tkul7y] {
    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-xud044tf0z] {
    display: flex;
    flex-direction: column;
}

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

.entity-docs-filterbar[b-xud044tf0z] {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eee;
}

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

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

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

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

.entity-docs-row[b-xud044tf0z] {
    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-xud044tf0z] {
    cursor: pointer;
}

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

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

.entity-docs-open[b-xud044tf0z] {
    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-xud044tf0z] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    color: #555;
    flex-shrink: 0;
}

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

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

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

.entity-docs-label .secondary[b-xud044tf0z] {
    font-size: var(--fs-sm);
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

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

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

/* Breadcrumb */
.entity-docs-breadcrumb[b-xud044tf0z] {
    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-xud044tf0z] {
    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-xud044tf0z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

/* Empty state */
.entity-docs-empty[b-xud044tf0z] {
    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-xud044tf0z] {
    font-size: 1.6rem;
}

/* Folder pagination */
.entity-docs-pagination[b-xud044tf0z] {
    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-xud044tf0z] {
    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-xud044tf0z] {
    border-color: var(--primary-color, #264653);
    background: rgba(0, 0, 0, 0.03);
}

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

.entity-docs-footer[b-xud044tf0z] {
    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-4ifw8pnpmy] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tiles */
.folder-tile[b-4ifw8pnpmy] {
    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-4ifw8pnpmy] {
    transform: translateY(-1px);
    border-color: var(--primary-color, #264653);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

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

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

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

/* Rows */
.folder-row[b-4ifw8pnpmy] {
    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-4ifw8pnpmy] {
    background: rgba(0, 0, 0, 0.03);
}

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

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

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

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

.folder-row-chevron[b-4ifw8pnpmy] {
    font-size: 0.75rem;
    color: #bbb;
    flex-shrink: 0;
}
/* /Components/Shared/DrilldownPivot.razor.rz.scp.css */
/* Bewusst dieselbe Optik wie Pivot (Unterstrich-Tabs, kein Chip-Look): CSS-Isolation reicht nicht über
   Komponentengrenzen, deshalb sind die tragenden Regeln aus Pivot.razor.css hier gespiegelt. Wer dort an
   Größen/Farben dreht, muss es hier mitziehen. */

.dpivot-root[b-ec77pz09n5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dpivot-bar[b-ec77pz09n5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.dpivot-bar[b-ec77pz09n5]::-webkit-scrollbar {
    display: none;
}

.dpivot-tab[b-ec77pz09n5] {
    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;
}

.dpivot-tab:hover:not(.active)[b-ec77pz09n5] {
    color: #374151;
    box-shadow: none;
    background: none;
}

.dpivot-tab.active[b-ec77pz09n5] {
    color: var(--primary-color, #111827);
    font-weight: 600;
}

/* Unterstrich des aktiven Tabs */
.dpivot-indicator[b-ec77pz09n5] {
    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;
}

.dpivot-tab.active .dpivot-indicator[b-ec77pz09n5] {
    transform: scaleX(1);
    opacity: 1;
}

/* Zurück-Caret: führt den Pfad an, deshalb schmal und ohne eigenen Unterstrich. */
.dpivot-back[b-ec77pz09n5] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: -0.35rem;
    padding: 0.55rem 0.45rem;
    background: none;
    border: none;
    border-radius: var(--border-radius, 6px);
    color: var(--primary-color, #2563eb);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: none;
}

.dpivot-back:hover[b-ec77pz09n5] {
    background: var(--color-gray-200, #e5e7eb);
    box-shadow: none;
}

/* Pfadeinträge sind Tabs wie alle anderen, nur eine Spur zurückgenommen — sie beschreiben, wo man ist,
   die Auswahl trifft man rechts vom Trenner. */
.dpivot-crumb .dpivot-tab-label[b-ec77pz09n5] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpivot-crumb:not(.active)[b-ec77pz09n5] {
    color: #9ca3af;
}

.dpivot-divider[b-ec77pz09n5] {
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 1.1rem;
    margin: 0 0.5rem;
    background: var(--color-gray-200, #e5e7eb);
}

/* Caret an Tabs mit Unterebene: dieselbe Andeutung wie in den Drill-down-Selects. */
.dpivot-drill[b-ec77pz09n5] {
    font-size: 0.75em;
    color: var(--color-gray-300, #d1d5db);
    transition: color 0.2s ease, transform 0.2s ease;
}

.dpivot-tab.has-children:hover .dpivot-drill[b-ec77pz09n5] {
    color: var(--primary-color, #2563eb);
    transform: translateX(2px);
}

.dpivot-tab.active .dpivot-drill[b-ec77pz09n5] {
    color: var(--primary-color, #2563eb);
}

/* Inhalt */
.dpivot-content[b-ec77pz09n5] {
    padding-top: 0.75rem;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dpivot-content:empty[b-ec77pz09n5] {
    display: none;
}

.dpivot-slide-right[b-ec77pz09n5] {
    animation: dpivot-slide-in-right-b-ec77pz09n5 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.dpivot-slide-left[b-ec77pz09n5] {
    animation: dpivot-slide-in-left-b-ec77pz09n5 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes dpivot-slide-in-right-b-ec77pz09n5 {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dpivot-slide-in-left-b-ec77pz09n5 {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dpivot-slide-right[b-ec77pz09n5],
    .dpivot-slide-left[b-ec77pz09n5] {
        animation: none;
    }
}

/* Opt-in: große Seiten-Tabs, wie .pivot-xl */
.dpivot-root.dpivot-xl .dpivot-tab[b-ec77pz09n5],
.dpivot-root.dpivot-xl .dpivot-back[b-ec77pz09n5] {
    font-size: var(--fs-lg);
}

/* Schmaler Streifen: nur der nächste Vorfahre bleibt stehen, die weiter oben liegenden Ebenen erreicht
   man über das Zurück-Caret. */
@media (max-width: 640px) {
    .dpivot-crumb.far[b-ec77pz09n5] {
        display: none;
    }

    .dpivot-crumb .dpivot-tab-label[b-ec77pz09n5] {
        max-width: 7rem;
    }
}
/* /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-kooa4ttsl3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
}

.icon[b-kooa4ttsl3] {
    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-kooa4ttsl3] {
    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-kooa4ttsl3] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-meta[b-kooa4ttsl3] {
    color: var(--color-gray-500, #5c7180);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/EntityForms/BulkEditForm.razor.rz.scp.css */
.bulk-edit-form[b-apggfcv8w1] {
    width: 100%;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ::deep — the <form> is EditForm's own element and carries no scope attribute of this component. */
.bulk-edit-form[b-apggfcv8w1] >  form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

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

.bulk-edit-form .title[b-apggfcv8w1] {
    margin-bottom: 0.25rem;
    margin-left: 0;
    color: var(--primary-color);
    font-size: var(--fs-xl);
    font-weight: bold;
}

.bulk-edit-form .hint[b-apggfcv8w1] {
    margin-bottom: 0.5rem;
    font-size: var(--fs-sm);
    color: #6b7280;
}

/* Wrapper carries the height bound, content carries the padding — see EntityForm.razor.css. */
.bulk-edit-form[b-apggfcv8w1]  .body {
    padding: 0 30px 1rem;
}

/* No height of its own — same reasoning as EntityForm.razor.css: .bulk-edit-form caps at 85dvh and
   clips, header and footer do not shrink, so the flex chain hands this precisely the remainder. */
.bulk-edit-form[b-apggfcv8w1]  .body-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

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

.bulk-edit-form[b-apggfcv8w1]  .validation-summary {
    color: red;
    padding: 0.5rem 30px;
    /* Chrome, like the header and footer — see EntityForm.razor.css. */
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: #fff;
}

.bulk-edit-form[b-apggfcv8w1]  .validation-summary li {
    margin-bottom: 0.25rem;
}

/* One row per field: the switch decides whether the field is written at all, the editor beside it what
   to. Until it is on the editor reads as inactive but stays clickable — the click turns it on. */
.bulk-field[b-apggfcv8w1] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 0.35rem;
}

/* Sits on the field's label line, not its input — that is the row it decides about. */
.bulk-field-toggle[b-apggfcv8w1] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    cursor: pointer;
}

.bulk-field-editor[b-apggfcv8w1] {
    flex: 1 1 auto;
    min-width: 0;
}

.bulk-field:not(.is-applied) .bulk-field-editor[b-apggfcv8w1] {
    opacity: 0.5;
    cursor: pointer;
}

.bulk-field:not(.is-applied) .bulk-field-editor[b-apggfcv8w1]  * {
    pointer-events: none;
}
/* /Components/Shared/EntityForms/CollectionFieldRenderer.razor.rz.scp.css */
.collection-editor[b-w0r4aq9psc] {
    display: flex;
    flex-direction: column;
}

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

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

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

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

.collection-editor__remove[b-w0r4aq9psc] {
    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-w0r4aq9psc] {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

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

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

.collection-editor__error--collection[b-w0r4aq9psc] {
    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-w0r4aq9psc] {
    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-w0r4aq9psc] {
    margin-top: 0.5rem;
}

.collection-editor__addrow[b-w0r4aq9psc]  .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-s5xcbddh8a] {
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ::deep: the <form> is EditForm's own element, so it carries no scope attribute of this component.
   Written as a plain `.entity-form-edit` this compiled to `.entity-form-edit[b-...]` and matched nothing,
   leaving the form a plain block between .entity-form and the body. A block flex item has min-height: auto,
   i.e. it cannot shrink below its content, so .entity-form's 85dvh cap clipped the form instead of the body
   scrolling inside it. The body's own max-height: 60dvh used to hide that by bounding the scroller directly;
   with that gone (and rightly so) nothing bounded it at all. Same shape, same reason as BulkEditForm.razor.css. */
.entity-form[b-s5xcbddh8a] >  .entity-form-edit {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

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

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

/* Two different boxes, deliberately separated: .body is the padded scroll *content*, .body-scroll is
   the ScrollShadow wrapper around it (the Pivot root plays the wrapper's role in the grouped shape).
   The height bound belongs on the wrapper. Capping .body instead clamps the content box while the
   fields keep flowing past its bottom edge, which strands its padding-bottom mid-content and leaves
   the last field flush against the scroller's clip — slicing that field's bottom border and the
   validation outline drawn just outside it. */
.entity-form[b-s5xcbddh8a]  .body {
  padding: 0 30px 1rem;
}

/* Deliberately no height of its own. .entity-form caps the whole form at 85dvh and clips; the header
   and footer do not shrink; so `flex: 1 1 auto` + `min-height: 0` already hand this exactly the room
   that is left over — which is the right height by construction.
   It used to carry max-height: 60dvh (70dvh below 640px) on top of that, and a fixed fraction can
   only be wrong in one of two directions: loose enough that it plus the header, validation row and
   footer overshoot the outer cap (Flexbox then squeezed it back, so the number never applied), or
   tight enough to make a short form scroll inside a dialog that had room to spare. A fraction of the
   viewport cannot know how tall the chrome above and below it is. The flex chain can. */
.entity-form[b-s5xcbddh8a]  .body-scroll,
.entity-form[b-s5xcbddh8a]  .body.pivot-root {
  flex: 1 1 auto;
  min-height: 0;
}

.entity-form .footer[b-s5xcbddh8a] {
  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-s5xcbddh8a]  .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-s5xcbddh8a]  .body.pivot-root > .pivot-label,
.entity-form[b-s5xcbddh8a]  .body.pivot-root > .pivot-bar {
  flex-shrink: 0;
}

.entity-form[b-s5xcbddh8a]  .body.pivot-root > .pivot-content,
.entity-form[b-s5xcbddh8a]  .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-s5xcbddh8a]  .body.pivot-root .pivot-panel.visible {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ScrollShadow renders .scroll-shadow-wrapper > .scroll-shadow, so the scroller is the panel's
   GRANDCHILD. This named it as a child and therefore matched nothing — and because .body.pivot-root
   drops the shared 1rem bottom inset on the understanding that it is restored in here, a grouped
   (tabbed) form was left with no bottom breathing room at all: the last field sat flush against the
   scroller's clip and was sliced in half by it, immediately above the footer.
   Only the inset belongs here. The wrapper already carries flex/min-height from ScrollShadow's own
   stylesheet, and the gap below the tab bar still comes from .pivot-content's own padding-top, which
   sits outside the scroller — moving that inside too is a separate change. */
.entity-form[b-s5xcbddh8a]  .body.pivot-root .pivot-content > .scroll-shadow-wrapper > .scroll-shadow,
.entity-form[b-s5xcbddh8a]  .body.pivot-root .pivot-panel > .scroll-shadow-wrapper > .scroll-shadow {
  padding-bottom: 1rem;
}

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

.entity-form[b-s5xcbddh8a]  .validation-summary {
    color: red;
    padding: 0.5rem 30px 0.5rem;
    /* Chrome, like the header and footer: with the flex chain above now actually bounding the form, a
       shrinkable row here would give up part of its height to a long body and clip its own message —
       exactly when there is a message to read. */
    flex-shrink: 0;
    /* 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-s5xcbddh8a]  .validation-summary li {
    margin-bottom: 0.25rem;
}
.entity-form[b-s5xcbddh8a]  .validation-summary li::marker {
    color: red;
    
}

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

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

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

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

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

[b-1hqefp5ob9] .entity-form-field__validation .validation-message {
  display: block;
}
/* /Components/Shared/EntityForms/FormRail.razor.rz.scp.css */
.form-rail[b-gd9dq6jl54] {
    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-gd9dq6jl54] {
    border-color: #e5e7eb;
    background: color-mix(in srgb, var(--accent-color) 2%, transparent);
}

.form-rail:focus-within[b-gd9dq6jl54] {
    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-gd9dq6jl54]  .mb-3 {
    margin-bottom: 0;
    flex: 1 1 160px;
    min-width: 0;
}
/* /Components/Shared/EntityForms/OwnedObjectFieldRenderer.razor.rz.scp.css */
.owned-field[b-sy2038ua0k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.owned-field__label[b-sy2038ua0k] {
    font-weight: 500;
    line-height: 1.3;
}
/* /Components/Shared/EntityForms/ScanInputNumber.razor.rz.scp.css */
.scanner-inline-field[b-x6f4goqtiw] {
    position: relative;
}

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

.scanner-inline-button[b-x6f4goqtiw] {
    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-x6f4goqtiw] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/EntityForms/TypedValueEditor.razor.rz.scp.css */
.select-inline-scan-btn[b-zmu9nhq564] {
    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-zmu9nhq564] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/EntitySelect.razor.rz.scp.css */
.entity-select-footer[b-ijgb2hjlqy] {
    display: flex;
    justify-content: center;
}

.entity-select-load-more[b-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    color: var(--color-gray-700);
}

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

.entity-select-scan-btn[b-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    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-ijgb2hjlqy],
.entity-select-filter-btn[b-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}

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

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

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

.entity-select-filter-badge[b-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    overflow-y: auto;
}

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

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

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

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

.entity-select-filter-reset[b-ijgb2hjlqy] {
    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-ijgb2hjlqy] {
    background: #f1f5f9;
}

.entity-select-filter-reset:disabled[b-ijgb2hjlqy] {
    opacity: 0.4;
    cursor: default;
}
/* /Components/Shared/FooterMenu.razor.rz.scp.css */
footer[b-78wku28riy] {
    background: rgba(0, 0, 0, 0.1);
    animation: show-footer-b-78wku28riy 0.5s forwards;
    animation-delay: 1s;
    opacity: 0;
}

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

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

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

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

[b-78wku28riy] 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-78wku28riy] a:hover {
        background: rgba(0, 0, 0, 0.1);
    }

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

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

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
.loading-spinner[b-sc3c7dvn51] {
    --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-sc3c7dvn51] {
    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-sc3c7dvn51 0.85s linear infinite;
}

@keyframes loading-spinner-rotate-b-sc3c7dvn51 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/LoadingText.razor.rz.scp.css */
.loading-text[b-7e0btxxwp5] {
    --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-7e0btxxwp5 3.4s linear infinite, loading-pulse-b-7e0btxxwp5 1.6s ease-in-out infinite;
}

@keyframes loading-shimmer-b-7e0btxxwp5 {
    0% { background-position: -150% 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 100% 0; }
}

@keyframes loading-pulse-b-7e0btxxwp5 {
    0% { opacity: 0.9; }
    50% { opacity: 0.65; }
    100% { opacity: 0.9; }
}
/* /Components/Shared/MainHeader.razor.rz.scp.css */
[b-74z7nf55h1] .main-header-center h1 {
    color: white;
    user-select: none;
}
.main-header[b-74z7nf55h1] {
    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-74z7nf55h1] {
    display: grid;
    width: 100%;
    gap: 20px;
    align-items: center;
    grid-template-columns: auto 1fr auto;
}

.main-header-left[b-74z7nf55h1] {
    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-74z7nf55h1]  .main-header-center {
    opacity: 0;
    animation: show-title-b-74z7nf55h1 1s 1.5s forwards;
}

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

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

.main-header-right[b-74z7nf55h1] {
    display: flex;
}


[b-74z7nf55h1] .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-74z7nf55h1]  .main-header-left img {
    opacity: 0;
    animation: show-icon-b-74z7nf55h1 1s 1s forwards;
}

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

    to {
        opacity: 1;
    }
}

.search-container[b-74z7nf55h1] {
    margin-top: 20px;
}

/* Replaces what Button.razor would have given this control. It is a plain <button> so that the
   drawer toggle costs no circuit traffic at all, which means the press feedback has to be local
   too — :active paints in the same frame as the press. */
.sidebar-toggle-btn[b-74z7nf55h1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #eef3f8;
    cursor: pointer;
    transition: filter 0.2s, transform 0.08s ease;
}

.sidebar-toggle-btn:hover[b-74z7nf55h1] {
    filter: brightness(0.93);
}

.sidebar-toggle-btn:active[b-74z7nf55h1] {
    filter: brightness(1.06);
    transform: scale(0.96);
}

[b-74z7nf55h1] a {
    text-decoration: none;
}

@media (max-width:640px) {
    .main-header[b-74z7nf55h1] {
        padding: 10px;
    }

    .search-container[b-74z7nf55h1] {
        margin-top: 10px;
    }
}
/* /Components/Shared/NotAuthorizedView.razor.rz.scp.css */
.access-denied[b-l5xaen5vrb] {
    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-l5xaen5vrb] {
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.8;
}

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

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

.access-denied-home[b-l5xaen5vrb] {
    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-enbyhi7p0z] {
    width: fit-content;
    display: grid;
    grid-template-columns: auto 4em auto;
    align-items: center;
    gap: 10px;
}

input[b-enbyhi7p0z] {
    border: none;
    outline: none;
    background: transparent;
    padding: 5px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.value[b-enbyhi7p0z] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.scan-btn[b-enbyhi7p0z] {
    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-enbyhi7p0z] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}

.dec[b-enbyhi7p0z], .inc[b-enbyhi7p0z], .del[b-enbyhi7p0z] {
    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-enbyhi7p0z] {
    color: var(--accent-red);
}

    .dec:hover:not(.disabled)[b-enbyhi7p0z], .inc:hover:not(.disabled)[b-enbyhi7p0z], .del:hover:not(.disabled)[b-enbyhi7p0z] {
        box-shadow: var(--box-shadow);
    }

    .dec.disabled[b-enbyhi7p0z], .inc.disabled[b-enbyhi7p0z], .del.disabled[b-enbyhi7p0z] {
        cursor: default;
        opacity: 0.25;
    }
/* /Components/Shared/PackingListIcon.razor.rz.scp.css */
/* PackingListIcon.razor.css */
.packinglist-icon[b-ogd5hscort] {
    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-ogd5hscort 1s forwards;
    animation-delay: 3s;
}

@keyframes show-icon-b-ogd5hscort {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.packinglist-icon:hover[b-ogd5hscort] {
  background: #c92a2a;
}
.icon-wrapper[b-ogd5hscort] {
  position: relative;
  display: inline-block;
}
.packinglist-icon i[b-ogd5hscort] {
    margin-right: 0;
    font-size: 1.8em;
    position: relative;
    z-index: 1;
}
.packinglist-count[b-ogd5hscort] {
    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-ogd5hscort] {
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem 0.4rem 0.7rem;
  }
  .packinglist-count[b-ogd5hscort] {
    font-size: 0.95rem;
    min-width: 1.1em;
  }
}
/* /Components/Shared/PageErrorView.razor.rz.scp.css */
/* Same panel as NotAuthorizedView, so the two "this page is not available" states read alike. */
.page-error[b-ma9uf99jhg] {
    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);
}

.page-error-icon[b-ma9uf99jhg] {
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.page-error h1[b-ma9uf99jhg] {
    margin: 0;
    font-size: 1.5rem;
}

.page-error p[b-ma9uf99jhg] {
    margin: 0;
    max-width: 420px;
    opacity: 0.75;
}

.page-error-actions[b-ma9uf99jhg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.page-error-primary[b-ma9uf99jhg],
.page-error-secondary[b-ma9uf99jhg] {
    padding: 8px 16px;
    border-radius: var(--radius-var, 8px);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.page-error-primary[b-ma9uf99jhg] {
    border: none;
    background: var(--primary-color);
    color: #fff;
}

.page-error-secondary[b-ma9uf99jhg] {
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
}
/* /Components/Shared/Pivot.razor.rz.scp.css */
.pivot-root[b-3bynpomb5k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* height: 100%; */
}

/* Optional section label above the tab bar */
.pivot-label[b-3bynpomb5k] {
    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-3bynpomb5k] {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.pivot-bar[b-3bynpomb5k]::-webkit-scrollbar {
    display: none;
}

/* Individual tab button */
.pivot-tab[b-3bynpomb5k] {
    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-3bynpomb5k] {
    margin-left: -0.55rem;
}

.pivot-tab:hover:not(.active)[b-3bynpomb5k] {
    color: #374151;
    box-shadow: none;
    background: none;
}

.pivot-tab.active[b-3bynpomb5k] {
    color: var(--primary-color, #111827);
    font-weight: 600;
}

.pivot-tab.invalid[b-3bynpomb5k] {
    color: #dc2626;
}

.pivot-tab.invalid.active[b-3bynpomb5k] {
    color: #dc2626;
}

.pivot-tab.invalid .pivot-indicator[b-3bynpomb5k] {
    background: #dc2626;
}

/* Tab mit eigenem Bedienelement (PivotItem.TabTemplate): die Hülle gibt nur Farbe, Schriftgröße und den
   Unterstrich vor. Das Padding setzt das Template, sonst wäre dessen Klickfläche kleiner als der Tab. */
.pivot-tab-slot[b-3bynpomb5k] {
    padding: 0;
    cursor: default;
}

/* Bringt das Bedienelement einen eigenen Wrapper mit (der Toggle eines ContextMenus etwa), soll er sich in
   die Tab-Zeile legen statt als Block die Höhe aufzureißen. */
.pivot-tab-slot[b-3bynpomb5k]  .context-menu-toggle {
    display: inline-flex;
    align-items: center;
}

/* Collapse mode: icon-only tabs that expand their label when active */
.pivot-collapse .pivot-tab.has-icon[b-3bynpomb5k] {
    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-3bynpomb5k] {
    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-3bynpomb5k] {
    flex-shrink: 1;
    min-width: 0;
}

.pivot-collapse .pivot-tab.has-icon .pivot-tab-label[b-3bynpomb5k] {
    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-3bynpomb5k] {
    max-width: 12rem;
    margin-left: 0.4rem;
    opacity: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

/* Animated underline indicator */
.pivot-indicator[b-3bynpomb5k] {
    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-3bynpomb5k] {
    transform: scaleX(1);
    opacity: 1;
}

/* A tab that is a running task, not a place to go: its label stays readable while another tab is active. */
.pivot-collapse .pivot-tab.has-icon.keep-label .pivot-tab-label[b-3bynpomb5k] {
    max-width: 12rem;
    margin-left: 0.4rem;
    opacity: 1;
}

/* Says that something is waiting in a tab nobody is looking at. The same mechanism as the active underline —
   scaleX from the centre — run as a loop, and only while the tab is inactive (the .active rule above wins by
   specificity and holds the indicator still). */
.pivot-tab .pivot-indicator.pulse[b-3bynpomb5k] {
    animation: pivot-indicator-pulse-b-3bynpomb5k 1.8s ease-in-out infinite;
}

@keyframes pivot-indicator-pulse-b-3bynpomb5k {
    0%, 100% { transform: scaleX(0); opacity: 0; }
    50% { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* No pulsing, but the tab still has to read as occupied — a steady, quieter underline. */
    .pivot-tab .pivot-indicator.pulse[b-3bynpomb5k] {
        animation: none;
        transform: scaleX(1);
        opacity: 0.45;
    }
}

/* Content area � single active tab */
.pivot-content[b-3bynpomb5k] {
    padding-top: 0.75rem;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pivot-content:empty[b-3bynpomb5k] {
    display: none;
}

/* Content area � all tabs rendered, inactive hidden */
.pivot-content-all[b-3bynpomb5k] {
    padding-top: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pivot-panel[b-3bynpomb5k] {
    display: none;
}

.pivot-panel.visible[b-3bynpomb5k] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    animation: pivot-slide-in-right-b-3bynpomb5k 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation: pivot-slide-in-right-b-3bynpomb5k 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-panel.visible.pivot-slide-left[b-3bynpomb5k] {
    animation: pivot-slide-in-left-b-3bynpomb5k 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-slide-right[b-3bynpomb5k] {
    animation: pivot-slide-in-right-b-3bynpomb5k 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pivot-slide-left[b-3bynpomb5k] {
    animation: pivot-slide-in-left-b-3bynpomb5k 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pivot-slide-in-right-b-3bynpomb5k {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pivot-slide-in-left-b-3bynpomb5k {
    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-3bynpomb5k] {
    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-3bynpomb5k] {
    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-3bynpomb5k] {
    max-width: 14rem;
}

/* Die Auswahl, die ab MaxVisibleTabs an die Stelle der Tab-Reihe tritt. Sie bekommt bewusst keine eigene
   Kachel-Optik: sie steht dort, wo sonst die Reihe steht, und soll nicht wie ein Formularfeld wirken. */
.pivot-bar-select[b-3bynpomb5k] {
    display: block;
    max-width: 22rem;
    overflow: visible;
}
/* /Components/Shared/PositionDimensionsGrid.razor.rz.scp.css */
/* One tile per dimension — wraps on narrow containers instead of squeezing the values. */
.pd-dimensions[b-tzz4lvkplx] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.pd-dimension-value[b-tzz4lvkplx] {
    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-0ekal3ga1m] {
    display: flex;
    align-items: center;
    gap: 0;
}

.prefixed-input__prefix[b-0ekal3ga1m] {
    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-0ekal3ga1m],
.prefixed-input__input:focus[b-0ekal3ga1m] {
    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/ScanSearchToggle.razor.rz.scp.css */
/* Scannen / Suchen segmented pill — a white thumb slides behind the active segment (active label in the app blue). */
.mode-toggle[b-4nnhwyqenc] {
    position: relative;
    display: flex;
    background: #e7edf3;
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
}

.mode-toggle-thumb[b-4nnhwyqenc] {
    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-4nnhwyqenc] {
        transform: translateX(calc(100% + 3px));
    }

    .mode-toggle button[b-4nnhwyqenc] {
        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-4nnhwyqenc] {
        color: var(--primary-color, #00385e);
    }

@media (prefers-reduced-motion: reduce) {
    .mode-toggle-thumb[b-4nnhwyqenc] {
        transition: none;
    }
}
/* /Components/Shared/ScrollShadow.razor.rz.scp.css */
.scroll-shadow-wrapper[b-dg3mxho08j] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scroll-shadow[b-dg3mxho08j] {
    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-dg3mxho08j]::-webkit-scrollbar {
    display: none;
}

.scroll-shadow-wrapper.has-scroll-top[b-dg3mxho08j]::before,
.scroll-shadow-wrapper.has-scroll-bottom[b-dg3mxho08j]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    z-index: 10;
}

.scroll-shadow-wrapper.has-scroll-top[b-dg3mxho08j]::before {
    top: 0;
    box-shadow: inset 0 14px 8px -4px rgba(0, 0, 0, 0.10);
}

.scroll-shadow-wrapper.has-scroll-bottom[b-dg3mxho08j]::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-ki49s399ga] {
    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-ki49s399ga] {
        background: #e2ebf4;
    }

    .select.is-disabled[b-ki49s399ga] {
        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-ki49s399ga] {
    min-width: 0;
    width: max-content;
}

    .select.placeholder-compact .selected-option[b-ki49s399ga] {
        gap: 0;
        padding: 8px 0 8px 10px;
    }

    .select.placeholder-compact .expander[b-ki49s399ga] {
        padding: 0 8px;
    }

    /* The panel no longer inherits the toggle's width here, so keep it readable. */
    .select.placeholder-compact .select-menu-panel[b-ki49s399ga] {
        min-width: 180px;
    }

.select-main[b-ki49s399ga] {
    display: grid;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.select.is-disabled .select-main[b-ki49s399ga] {
    cursor: default;
}

.select-center[b-ki49s399ga] {
    display: grid;
    grid-template-columns: 1fr auto;
}

.select-right[b-ki49s399ga] {
    display: grid;
}

[b-ki49s399ga] p {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: clip;
}

.selected-option[b-ki49s399ga] {
    display: flex;
    text-align: start;
    align-items: center;
    gap: 15px;
    padding: 8px 0 8px 12px;
    transition: all 0.3s;
}

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

    .expander:hover[b-ki49s399ga] {
        color: var(--primary-color)
    }

/* .is-open comes from SelectMenuIsOpen, which the server only learns about a round trip after the
   menu is already on screen; data-open is set by ContextMenu.razor.js in the same frame as the
   press, so the caret turns with the menu instead of after it. Both are kept: inline selects have
   no ContextMenu toggle at all and rely on .is-open. */
.is-open .expander[b-ki49s399ga],
.context-menu-toggle[data-open] .expander[b-ki49s399ga] {
    transform: rotate(180deg);
}

.select-menu-panel[b-ki49s399ga] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 2;
    animation: show-options-b-ki49s399ga 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-ki49s399ga] {
    display: flex;
    min-height: 0;
    min-width: 0;
    background: transparent;
    border: none;
    height: 100%;
}

    .select.select-inline:hover:not(.is-disabled)[b-ki49s399ga] {
        box-shadow: none;
    }

    .select-inline .select-menu-panel[b-ki49s399ga] {
        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-ki49s399ga] {
        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-ki49s399ga] {
        max-height: none;
        overflow-y: auto;
        flex: 1 1 auto;
    }

.select-options[b-ki49s399ga] {
    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-ki49s399ga] {
    display: flex;
    flex-direction: column;
}

.select-panel-drill[b-ki49s399ga] {
    animation: select-drill-in-b-ki49s399ga 0.28s ease both;
}

.select-panel.returning[b-ki49s399ga] {
    animation: select-drill-out-b-ki49s399ga 0.28s ease both;
}

@keyframes select-drill-in-b-ki49s399ga {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes select-drill-out-b-ki49s399ga {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.select-drill-back[b-ki49s399ga] {
    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-ki49s399ga] {
        background: var(--color-gray-200);
    }

    .select-drill-back i[b-ki49s399ga] {
        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-ki49s399ga] {
    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-ki49s399ga] {
    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-ki49s399ga]  .select-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s;
    animation: 0.3s show-option-b-ki49s399ga forwards ease-in-out;
    opacity: 0;
}

    .select-panel-drill[b-ki49s399ga]  .select-option:hover {
        background: var(--color-gray-200);
    }

    .select-panel-drill[b-ki49s399ga]  .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-ki49s399ga]  .select-option.selected:hover {
        background: #e2ebf4;
    }

/* Der Tab-Streifen ist eine eigene Komponente — seine Regeln stehen in SelectTabs.razor.css. */

.search[b-ki49s399ga] {
    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-ki49s399ga] {
    position: relative;
    display: grid;
}

    .search-field.has-aside input[b-ki49s399ga] {
        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-ki49s399ga] {
        padding-right: 4.4rem;
    }

/* Content that narrows the option list (e.g. a filter panel), between the search row and the options. */
/* Zuschnitt über der Suchzeile (HeaderTemplate): dieselben Seitenränder wie die Suche darunter, damit beide
   an derselben Kante stehen. */
.select-header[b-ki49s399ga] {
    padding: 10px 10px 0 10px;
}

.select-subheader[b-ki49s399ga] {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.25rem 15px 0.5rem;
}

.select-option[b-ki49s399ga] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    transition: all 0.3s;
    cursor: pointer;
    animation: 0.3s show-option-b-ki49s399ga forwards ease-in-out;
    opacity: 0;
    /* border-radius: var(--border-radius); */
}
.select-option.selected[b-ki49s399ga] {
    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.
   Not when the options open the panel (a short list hides its search box) — there the fill meets the rounded edge. */
.select-options:not(:first-child) .select-option.selected:first-child[b-ki49s399ga] {
    margin-top: 10px;
}

.select-option.selected:hover:not(.no-click)[b-ki49s399ga] {
    background: #e2ebf4;
}

.select-option.selected i[b-ki49s399ga] {
    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-ki49s399ga] {
    flex-shrink: 0;
}

.no-click.select-option[b-ki49s399ga] {
    cursor: default;
}

.select-option:hover:not(.no-click)[b-ki49s399ga] {
    background: var(--color-gray-200);
}

.select-option.loading[b-ki49s399ga] {
    padding: 8px 15px;
}

.select-footer[b-ki49s399ga] {
    border-top: 1px solid var(--color-gray-200);
    padding: 8px 10px;
}

.mouse-cap[b-ki49s399ga] {
    position: fixed;
    top: -1000px;
    left: -1000px;
    right: -1000px;
    bottom: -1000px;
    background: transparent;
    z-index: 1;
}

.no-options[b-ki49s399ga] {
    padding: 10px;
    text-align: center;
    color: var(--color-gray-300);
}

@keyframes show-options-b-ki49s399ga {
    from {
        margin-top: -20px;
        opacity: 0;
    }

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

@keyframes show-option-b-ki49s399ga {
    from {
        opacity: 0;
        margin-left: -10px
    }
    60% {
        margin-left: 3px
    }
    80% {
        margin-left: -1px
    }
    to {
        opacity: 1;
        margin-left: 0px
    }
}
/* /Components/Shared/SelectTabs.razor.rz.scp.css */
/* Aus Select.razor.css hierher gezogen, als der Tab-Streifen eine eigene Komponente wurde: Blazor
   stempelt das Scope-Attribut nur auf das Markup der Komponente, zu der die CSS-Datei gehört — die
   Regeln blieben sonst wirkungslos, sobald das Markup umzieht. */

.select-tabs[b-wznoriacun] {
    display: flex;
    gap: 4px;
    padding: 10px 10px 2px 10px;
}

.select-tab[b-wznoriacun] {
    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-wznoriacun] {
        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-wznoriacun] {
        background: #e2ebf4;
        color: var(--primary-color);
    }

    .select-tab.is-active[b-wznoriacun],
    .select-tab.is-active:hover[b-wznoriacun] {
        background: var(--primary-color);
        color: white;
    }
/* /Components/Shared/Table/ChildRow.razor.rz.scp.css */
.child-row[b-9q3blo92fv] {
    box-shadow: inset 0 2em 3em -4.5em black
                /* , inset 0 -2em 3em -4em black */
                ;
}

.title[b-9q3blo92fv] {
    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-9q3blo92fv] {
    position: relative;
    display: inline-flex;
    align-items: center;
}
@media (pointer: coarse) {
    .title-hit[b-9q3blo92fv]::after {
        content: "";
        position: absolute;
        inset: -10px -6px;
        cursor: pointer;
    }
}

.title-hit[b-9q3blo92fv]  .chip {
    background: #fff;
    color: var(--color-gray-400);
    font-size: var(--fs-2xs);
    font-weight: normal;
    padding: 0.1rem 0.45rem;
    min-width: 0;
    box-shadow: none;
}

.arrow[b-9q3blo92fv] {
    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-9q3blo92fv] {
    rotate: 90deg;
    translate: 0 -5%;
}

/* List-view variant: same anatomy without the table row wrapper. */
.child-block[b-9q3blo92fv] {
    padding: 0 0.9rem 0.5rem 3.25rem; /* aligns under the list item's title, past its icon */
}

.child-block .title[b-9q3blo92fv] {
    padding: 0.25rem 0;
}

.child-block .line-container[b-9q3blo92fv] {
    margin-left: 0.35rem;
    margin-bottom: 0;
    padding-left: 0.5rem;
}

/* Table mode's rail, on the same flush as the list variant's .child-block indent — a child row reads as
   belonging to the row above it, which it cannot do while the two modes indent differently. */
.line-container[b-9q3blo92fv] {
    margin-left: 3.25rem;
    margin-bottom: 0.75rem;
    border-left-width: 1px;
    border-left-style: solid;
}
.collapsed * .line-container[b-9q3blo92fv] {
    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-f7b8aq8cev] {
    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-f7b8aq8cev] {
  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-f7b8aq8cev] {
  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-f7b8aq8cev]  .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.data-card-grid[b-f7b8aq8cev] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem 1rem;
  font-size: var(--fs-base);
}
.data-card-label[b-f7b8aq8cev] {
  font-weight: 600;
  color: #555;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}
.data-card-value[b-f7b8aq8cev] {
  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-f7b8aq8cev] {
    grid-template-columns: 1fr;
    /* padding: 0 1rem; */
    font-size: var(--fs-base);
  }
  .data-card-label:not(:first-child)[b-f7b8aq8cev] {
    margin-top: 0.5rem;
  }
  .data-card-value[b-f7b8aq8cev] {
    margin-left: 0.1rem;
  }
}

.data-card-grid[b-f7b8aq8cev]  a { text-decoration: underline; }
.data-card-grid[b-f7b8aq8cev]  a:hover { color: #084a8a; }

/* Lists inside table cells */
[b-f7b8aq8cev] .data-card-value > ul,
[b-f7b8aq8cev] .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-f7b8aq8cev] {
    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-jt91r1l27t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
}

.compact-leading[b-jt91r1l27t] {
    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-jt91r1l27t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.compact-title[b-jt91r1l27t] {
    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-jt91r1l27t] {
    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-jt91r1l27t] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-subtitle-part:not(:first-child)[b-jt91r1l27t]::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-jt91r1l27t]  .chip,
.compact-subtitle-part[b-jt91r1l27t]  .chip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.compact-title[b-jt91r1l27t]  .chip i,
.compact-subtitle-part[b-jt91r1l27t]  .chip i {
    display: none;
}

/* Chip lists inside title/subtitle collapse to one micro-pill line. */
.compact-body[b-jt91r1l27t]  ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.compact-subtitle[b-jt91r1l27t]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.1rem 0.45rem;
    min-width: 0;
}

.compact-badge[b-jt91r1l27t] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    color: #222;
    white-space: nowrap;
}

.compact-actions[b-jt91r1l27t] {
    flex: none;
}

/* Per-item disclosure for Detail-role columns (chips, long text) that don't fit the two-line row. */
.compact-expander[b-jt91r1l27t] {
    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-jt91r1l27t] {
    transition: rotate 0.15s ease-in-out;
}

.compact-expander i.expanded[b-jt91r1l27t] {
    rotate: 90deg;
}

.compact-details[b-jt91r1l27t] {
    padding: 0 0.9rem 0.7rem 3.25rem;
    cursor: default;
}

.compact-details[b-jt91r1l27t]  .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-erg34h90sr] {
    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-erg34h90sr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.info-card-icon[b-erg34h90sr] {
    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-erg34h90sr] {
    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-erg34h90sr]  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

.info-card-title[b-erg34h90sr]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.1rem 0.45rem;
    font-weight: 400;
}

.info-card-badge[b-erg34h90sr] {
    flex: none;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: #222;
    white-space: nowrap;
}

.info-card-actions[b-erg34h90sr] {
    flex: none;
    align-self: flex-start;
    margin: -0.25rem -0.35rem 0 0;
}

.info-card-subtitle[b-erg34h90sr] {
    color: var(--color-gray-500, #5c7180);
    font-size: var(--fs-sm);
}

.info-card-body[b-erg34h90sr] {
    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-erg34h90sr]  .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-r4063ef3bi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.9rem;
    min-height: 44px;
    justify-content: center;
}

.terminal-line[b-r4063ef3bi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.terminal-icon[b-r4063ef3bi] {
    flex: none;
    color: var(--item-accent, var(--color-gray-500, #5c7180));
}

.terminal-title[b-r4063ef3bi] {
    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-r4063ef3bi] {
    flex: none;
}

.terminal-badge[b-r4063ef3bi]  .chip {
    font-size: var(--fs-2xs);
    padding: 0.2rem 0.6rem;
    min-width: 0;
    box-shadow: none;
}

.terminal-actions[b-r4063ef3bi] {
    flex: none;
}

/* Meta line: small gray, ·-separated; link chips flatten to accent-colored text. */
.terminal-meta[b-r4063ef3bi] {
    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-r4063ef3bi] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.terminal-meta-item:not(:first-child)[b-r4063ef3bi]::before {
    content: "·";
    margin-right: 0.4rem;
    color: var(--color-gray-400, #9aa8b5);
}

.terminal-meta-item[b-r4063ef3bi]  .chip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--accent-color);
}

.terminal-meta-item[b-r4063ef3bi]  .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-g8olv9p41n] {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

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

.page-filter-row + .page-filter-row[b-g8olv9p41n] {
    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-g8olv9p41n] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

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

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

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

.page-filter-reset[b-g8olv9p41n] {
    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-g8olv9p41n] {
    background: #f1f5f9;
}

.page-filter-reset:disabled[b-g8olv9p41n] {
    opacity: 0.4;
    cursor: default;
}
/* /Components/Shared/Table/Table.razor.rz.scp.css */
.table[b-o6e4ryj7gs] {
    display: grid;
    width: 100%;
    position: relative;
}

table[b-o6e4ryj7gs] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 1em;
    text-align: left;
}

.table-wrapper[b-o6e4ryj7gs] {
    /* border-radius: var(--border-radius); */
    overflow: auto;
    width: 100%;
    background: #f9f9f9;
}
.table.transparent .table-wrapper[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    max-height: var(--table-body-max-height, 62vh);
    min-height: 0;
    border-bottom: 1px solid #e5e7eb;
}
.table.scroll-body thead th[b-o6e4ryj7gs] {
    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-o6e4ryj7gs],
.list.scroll-body > .list-body[b-o6e4ryj7gs] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

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

.list.scroll-body .list-toolbar[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    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-o6e4ryj7gs]::-webkit-scrollbar,
.list.scroll-body .list-items[b-o6e4ryj7gs]::-webkit-scrollbar {
    background: transparent;
    height: 10px;
}

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

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

.table.scroll-body .table-wrapper[b-o6e4ryj7gs]::-webkit-scrollbar-thumb,
.list.scroll-body .list-items[b-o6e4ryj7gs]::-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-o6e4ryj7gs]::-webkit-scrollbar-thumb:hover,
.list.scroll-body .list-items[b-o6e4ryj7gs]::-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-o6e4ryj7gs],
    .list.scroll-body .list-items[b-o6e4ryj7gs] {
        scrollbar-width: thin;
        scrollbar-color: rgba(15, 42, 64, 0.25) transparent;
    }
}

table th[b-o6e4ryj7gs], table td[b-o6e4ryj7gs] {
    border: 0 solid #ddd;
    padding: 8px;
    transition: width 200ms ease, height 200ms ease;    
    will-change: width, height;
}

table td.main-column[b-o6e4ryj7gs] {
    font-weight: 500;
}

/* Full-width group divider row (Table GroupBy/GroupHeader) — light tinted + bold, overriding row striping. */
.group-header-row td[b-o6e4ryj7gs] {
    background-color: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
    font-weight: 600;
    color: #374151;
    padding: 8px 15px;
}

table th[b-o6e4ryj7gs] {
    background-color: var(--accent-color);
    color: white;
    font-weight: normal;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: clip;
}
.table.transparent th[b-o6e4ryj7gs] {
    /* --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-o6e4ryj7gs] {
    background-color: #f3f5f7;
    color: #374151;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

    table tr td:first-child[b-o6e4ryj7gs],
    table tr th:first-child[b-o6e4ryj7gs] {
        padding-left: 15px;
    }
    table tr td:last-child[b-o6e4ryj7gs],
    table tr th:last-child[b-o6e4ryj7gs] {
        padding-right: 15px;
    }

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

.table[b-o6e4ryj7gs]  a { text-decoration: underline; }
.table[b-o6e4ryj7gs]  a:hover { color: #084a8a; }

table.alternating:not(.transparent) > tbody[b-o6e4ryj7gs] >  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-o6e4ryj7gs]  .column-menu-anchor {
    width: 100%;
}

table tr:not(:has(th)):hover[b-o6e4ryj7gs] {
    background-color: #f1f1f1 !important;
}

.filter-btn[b-o6e4ryj7gs] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.5rem;
}

.filter-popup[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.pagination-controls button[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination-controls span[b-o6e4ryj7gs] {
    font-size: var(--fs-base);
}

/* Lists inside table cells */
[b-o6e4ryj7gs] table td > ul,
[b-o6e4ryj7gs] table th > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-o6e4ryj7gs] table tr:nth-child(even) .chip {
    background: #edf3f8;
}

span:has(.expander)[b-o6e4ryj7gs] {
    user-select: none;
}
.expander[b-o6e4ryj7gs] {
    width: 1rem;
    height: 1rem; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;    
}

.expander i[b-o6e4ryj7gs] {
    transition: transform 0.2s ease-in-out;
    font-size: 0.75rem;
}

.expander.expanded i[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    background: #f3f5f7;
    border-bottom: 1px solid #e5e7eb;
}

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

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

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

.list.subtle-header .list-header-part.is-badge[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-header-part:not(:first-child)[b-o6e4ryj7gs]::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-o6e4ryj7gs] {
    font-weight: 600;
}

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

.list-header-part.is-badge[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    position: sticky;
    right: 0;
    z-index: 3;
    text-align: center;
    overflow: visible;
}

.table.scroll-body thead th.has-toolbar[b-o6e4ryj7gs] {
    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 ActionGroup's .floating rule). */
.table th.with-inline-toolbar[b-o6e4ryj7gs] {
    position: relative;
    padding-right: 42px;
    overflow: visible;
}

/* ---- Auswahlmodus -------------------------------------------------------------------------------
   The selection column and bar only exist while the mode is on; both renderings share the bar markup,
   so its rules are written once and the two hosts (thead row / list toolbar sibling) only place it.
   The toggles are the app's Switch, i.e. the globally styled 2.75rem checkbox — hence the gutter the
   cell and the list items reserve for it. */
.table[b-o6e4ryj7gs],
.list[b-o6e4ryj7gs] {
    --selection-gutter: 0.9rem; /* the list item's own left padding: every toggle sits on that axis */
    --selection-row-height: 44px;
    /* The selection row pins itself at exactly this offset, so the header row's height cannot be left to
       its content. 38px is what .list-toolbar already stands at, which is what makes the two renderings
       start their rows on the same line. */
    --table-header-height: 38px;
}

/* Applied whether or not the mode is on: switching it on may not resize the header. On a table cell a
   height acts as a minimum, so a header that genuinely needs more still gets it. */
.table thead th[b-o6e4ryj7gs] {
    height: var(--table-header-height);
}

/* Width is the gutter, the 2.75rem switch and one more gutter, so the column ends where the bar's own
   content begins. !important: the generic first-/last-child cell padding is the more specific rule,
   and its 15px inset would push the toggle off the axis the bar's toggle sits on.

   ::deep, because not every cell of this column is drawn by this component: a hand-built row contributes
   its own through InstanceSelectionCell / TableSelectionCell, and those carry their own scope attribute.
   Scoped to itself the rule would skip exactly those cells, and their toggles would sit off the axis of
   the ones above and below them. */
.table[b-o6e4ryj7gs]  .select-cell {
    width: 4.55rem;
    padding-left: var(--selection-gutter) !important;
    padding-right: 0 !important;
}

/* One bar for both renderings — the list's flex row, which wraps rather than demanding width, is what
   the table hosts too. Its gap repeats the item's own left padding, so the text after the select-page
   toggle starts on the same axis as a row's leading icon. */
.selection-bar[b-o6e4ryj7gs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--selection-gutter);
    padding: 0.3rem var(--selection-gutter) 0.3rem 0;
    min-height: var(--selection-row-height);
}

/* The tint and blur ride a pseudo-element rather than the bar: a backdrop-filter on the bar itself
   would make it the containing block for the sticky halves inside it. Near-opaque because rows pass
   underneath it — see-through would leave the text competing with them. */
.selection-bar[b-o6e4ryj7gs]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--accent-color) 10%, rgba(255, 255, 255, 0.82));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

/* Table host: the cell contributes the span and the pinning, nothing else — !important because the
   generic first-/last-child cell padding is the more specific rule, and any inset here would push the
   bar off the axis its list counterpart sits on. */
.selection-row td[b-o6e4ryj7gs] {
    padding: 0 !important;
    background: none;
    border: 0;
}

.table.scroll-body thead .selection-row td[b-o6e4ryj7gs] {
    position: sticky;
    /* The column headers pin above it, so the offset is their height — the fixed one set at the top of
       this section. */
    top: var(--table-header-height);
    z-index: 3;
}

/* List host: a sibling of .list-toolbar, so it holds its place while only .list-items scrolls — and
   sticks to the top of the page scroller in the tables that hand their body height to the page. */
.list .selection-bar[b-o6e4ryj7gs] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.list.scroll-body .selection-bar[b-o6e4ryj7gs] {
    flex: 0 0 auto;
}

/* Wraps rather than squeezes: the actions' strip retracts to its ⋯ first (it measures itself against
   this bar), and only a bar too narrow even for that drops them to their own line instead of pushing
   the count out. */
/* Without the select-page toggle (a selection to be decided row by row) the gutter it contributed is
   gone and the count would sit flush against the edge. */
.selection-bar > .selection-bar-content:first-child[b-o6e4ryj7gs] {
    padding-left: var(--selection-gutter);
}

.selection-bar-content[b-o6e4ryj7gs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Each half holds its own edge of the scrollport — the row it lives in is as wide as the table, and
   scrolling sideways must not carry either of them out of view. */
.selection-info[b-o6e4ryj7gs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: sticky;
    left: 0;
}

.selection-actions[b-o6e4ryj7gs] {
    margin-left: auto;
    position: sticky;
    right: 0;
}

.selection-count[b-o6e4ryj7gs] {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.selection-link[b-o6e4ryj7gs] {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.selection-link:hover[b-o6e4ryj7gs] {
    color: #084a8a;
}

/* Selected rows read as picked without relying on the toggle alone. */
table tbody tr.is-selected > td[b-o6e4ryj7gs],
.list .item.is-selected[b-o6e4ryj7gs] {
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
}

/* List items grow a leading toggle: the item's own markup (whatever style it is) becomes the second
   flex child and keeps the rest of the row. */
.item.with-selection[b-o6e4ryj7gs] {
    display: flex;
    align-items: center;
}

.item.with-selection[b-o6e4ryj7gs] >  :not(.item-select) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Left inset matches the item's own padding, so the toggles line up with the list's left margin and
   with the select-page toggle in the bar above them. */
.item-select[b-o6e4ryj7gs] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: var(--selection-gutter);
    cursor: pointer;
}

/* Full-width group divider inside the list view (GroupBy/GroupHeader). */
.list-group-header[b-o6e4ryj7gs] {
    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-o6e4ryj7gs],
.list-style-terminal .item + .item[b-o6e4ryj7gs],
.list-style-compact .item-children + .item[b-o6e4ryj7gs],
.list-style-terminal .item-children + .item[b-o6e4ryj7gs] {
    border-top: 1px solid #f1f5f9;
}

/* Child rows of a list item: nested tables inside render as lists themselves. */
.item-children:empty[b-o6e4ryj7gs] {
    display: none;
}

.item-children[b-o6e4ryj7gs]  .list {
    background: transparent;
}

/* Info cards stack with gaps and breathing room inside a NoPadding host Card. */
.list-style-infocards .list-items[b-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    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-o6e4ryj7gs] {
    position: relative;
}

.is-reloading[b-o6e4ryj7gs] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.reload-overlay[b-o6e4ryj7gs] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

.reload-overlay-badge[b-o6e4ryj7gs] {
    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-j0la653p6d] {
    display: inline-flex;
    max-width: 100%;
    cursor: pointer;
    border-radius: 6px;
}

.column-menu-anchor:hover[b-j0la653p6d] {
    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-j0la653p6d]  .context-menu-toggle {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.column-menu-label[b-j0la653p6d] {
    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-j0la653p6d] {
    font-weight: 600;
}

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

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

.column-menu[b-j0la653p6d] {
    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-j0la653p6d] {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--primary-color);
    margin: 0 0 0.3rem;
}

.column-menu-option[b-j0la653p6d] {
    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-j0la653p6d] {
    background: #f1f5f9;
}

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

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

.column-menu-filter[b-j0la653p6d] {
    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-j0la653p6d] {
    border-top: 1px solid #f1f5f9;
    margin-top: 0.3rem;
}

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

.column-menu-reset[b-j0la653p6d] {
    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-vegad9orsa] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-pill[b-vegad9orsa] {
    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-vegad9orsa] {
    background: #d8e2ec;
}

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

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

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

.filter-range input[b-vegad9orsa] {
    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-vegad9orsa] {
    color: var(--color-gray-400, #94a3b8);
    flex: none;
}

.filter-entity-selected[b-vegad9orsa] {
    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-vegad9orsa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.filter-entity-clear[b-vegad9orsa] {
    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-vegad9orsa] {
    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-vegad9orsa] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

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

.filter-entity-select[b-vegad9orsa]  .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-vegad9orsa]  .select-options {
    max-height: 132px;
    overflow-y: auto;
}

.filter-entity-select[b-vegad9orsa]  .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-vegad9orsa]  .select-option.selected:first-child {
    margin-top: 0;
}
/* /Components/Shared/Table/TableToolbar.razor.rz.scp.css */
/* Only the panels live here — the strip itself (chips, badges, the retracted/expanded animation, the
   accent and floating surfaces) belongs to ActionGroup, which this toolbar fills.

   The panels teleport into the ContextMenu section outlet; they keep this component's CSS scope. */

.toolbar-panel[b-ffj3ck87oc] {
    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-ffj3ck87oc] {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--primary-color);
    margin: 0 0 0.3rem;
}

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

.toolbar-panel-reset[b-ffj3ck87oc] {
    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-ffj3ck87oc] {
    background: #f1f5f9;
}

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

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

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

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

.toolbar-filter-row + .toolbar-filter-row[b-ffj3ck87oc] {
    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-ffj3ck87oc] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

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

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

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

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

.toolbar-search-panel[b-ffj3ck87oc]  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-ffj3ck87oc] {
    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-ffj3ck87oc] {
    background: #f1f5f9;
}

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

.toolbar-option-reset[b-ffj3ck87oc] {
    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-dnh8cziben] {
    position: relative;
}

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

.scanner-inline-button[b-dnh8cziben] {
    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-dnh8cziben] {
    background: color-mix(in srgb, var(--primary-color) 12%, white);
}
/* /Components/Shared/TextInputSelect.razor.rz.scp.css */
.text-input-select[b-ptsowy8wp2] {
    position: relative;
}

.text-input-select-input[b-ptsowy8wp2] {
    width: 100%;
}

.text-input-select-panel[b-ptsowy8wp2] {
    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-ptsowy8wp2] {
    color: var(--color-gray-400);
}

.select-options[b-ptsowy8wp2] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
}

.select-option[b-ptsowy8wp2] {
    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-ptsowy8wp2] {
    background: var(--color-gray-200);
}

.select-option:focus[b-ptsowy8wp2] {
    outline: none;
    background: var(--color-gray-200);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.select-option.selected:focus[b-ptsowy8wp2] {
    background: color-mix(in srgb, var(--primary-color) 20%, white);
}

.select-option.selected[b-ptsowy8wp2] {
    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-ptsowy8wp2] {
    cursor: default;
}
/* /Components/Shared/TransferSummary.razor.rz.scp.css */
.ts[b-4nc7klk47g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ts.loading[b-4nc7klk47g] {
        opacity: 0.6;
        pointer-events: none;
    }

.ts-empty[b-4nc7klk47g] {
    padding: 16px 4px;
    font-size: var(--fs-sm);
    color: var(--color-gray-500, #6b7280);
}

/* ---- source group card ---- */
.ts-group[b-4nc7klk47g] {
    border: 1px solid #e4ebf2;
    border-radius: var(--border-radius, 8px);
    background: #fff;
    overflow: hidden;
}

.ts-group-head[b-4nc7klk47g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #f6f9fc;
    border-bottom: 1px solid #eef3f8;
}

.ts-group-icon[b-4nc7klk47g] {
    display: inline-flex;
    color: var(--primary-color, #00385e);
}

.ts-group-name[b-4nc7klk47g] {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--primary-color, #00385e);
}

.ts-group-section[b-4nc7klk47g] {
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--color-gray-400, #9aa8b5);
}

/* ---- rows ---- */
.ts-rows[b-4nc7klk47g] {
    display: flex;
    flex-direction: column;
}

.ts-row[b-4nc7klk47g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

    .ts-row + .ts-row[b-4nc7klk47g] {
        border-top: 1px solid #f1f5f9;
    }

    .ts-row.clickable[b-4nc7klk47g] {
        cursor: pointer;
        transition: background 0.12s;
    }

        .ts-row.clickable:hover[b-4nc7klk47g] {
            background: #f6f9fc;
        }

.ts-row-icon[b-4nc7klk47g] {
    flex: 0 0 auto;
    display: inline-flex;
    width: 1.1rem;
    justify-content: center;
    color: var(--color-gray-400, #9aa8b5);
}

.ts-row-name[b-4nc7klk47g] {
    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-4nc7klk47g] {
    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-4nc7klk47g] {
        font-size: 0.72rem;
    }

    /* incoming = stock arrives (green +), outgoing = stock leaves (red −) */
    .ts-pill.incoming[b-4nc7klk47g] {
        background: #e7f6ec;
        color: #15803d;
    }

    .ts-pill.outgoing[b-4nc7klk47g] {
        background: #fde8ea;
        color: #e63946;
    }

/* ---- optional per-row action (e.g. the destination-position button) ---- */
.ts-row-action[b-4nc7klk47g] {
    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-4nc7klk47g]  button {
        padding: 5px 10px;
        font-size: var(--fs-xs);
        white-space: nowrap;
    }

/* ---- delete ---- */
.ts-del[b-4nc7klk47g] {
    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-4nc7klk47g] {
        color: var(--accent-red, #e63946);
        background: #fde8ea;
    }

/* Die Kommission sitzt am Kopf der Quelle, nicht an jeder Zeile darunter: die ganze Gruppe gehört derselben
   Baustelle — sie ist Teil dessen, was die Quelle ist. ::deep, weil die Beschriftung eine eigene Komponente
   ist und ihr Wurzelelement nicht zu diesem Stylesheet gehört. */
.ts-group-head[b-4nc7klk47g]  .commission {
    margin-left: 0.35rem;
}
/* /Components/Shared/WarehouseSectionLink.razor.rz.scp.css */
.wsl[b-3pjypqpr9a] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
}

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

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

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

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

.wsl__section[b-3pjypqpr9a] {
    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-3pjypqpr9a] {
    color: var(--primary-color, #00385e);
    text-decoration: none;
    border-radius: 4px;
}

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

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

    .wsl--link:focus-visible[b-3pjypqpr9a] {
        outline: 2px solid var(--primary-color, #00385e);
        outline-offset: 2px;
    }
/* /Components/Supplier/ContactCard.razor.rz.scp.css */
.contact-card[b-zy8hkyk9f6] {
  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-zy8hkyk9f6] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.contact-card__name[b-zy8hkyk9f6] {
  font-weight: 600;
  font-size: var(--fs-lg);
  /* color: var(--text, #0f172a); */
}

.contact-card__dept[b-zy8hkyk9f6] {
  color: var(--muted, #64748b);
  font-size: var(--fs-sm);
}

.contact-card__body[b-zy8hkyk9f6] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-card__row[b-zy8hkyk9f6] {
  display: flex;
}

.contact-card__link[b-zy8hkyk9f6] {
  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-zy8hkyk9f6] {
  background: rgba(15,23,42,0.03);
}

.contact-card__text[b-zy8hkyk9f6] {
}

.contact-card__footer[b-zy8hkyk9f6] {
  margin-top: 8px;
}

.contact-card__meta[b-zy8hkyk9f6] {
  color: var(--muted, #64748b);
}

/* Slim variant */
.contact-card--slim[b-zy8hkyk9f6] {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-card--slim .contact-card__slim[b-zy8hkyk9f6] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.contact-card__slim-left[b-zy8hkyk9f6] {
  display: flex;
  flex-direction: column;
}

.contact-card__slim-right[b-zy8hkyk9f6] {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-top: 2px;
}

.contact-card--slim .contact-card__name[b-zy8hkyk9f6] {
  font-size: var(--fs-sm);
  font-weight: normal;
}

.contact-card--slim .contact-card__dept[b-zy8hkyk9f6] {
  font-size: var(--fs-xs);
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card--slim .contact-card__link[b-zy8hkyk9f6] {
  padding: 4px;
  display: inline-grid;
  place-items: center;
  font-size: 0.7em;
  color: #64748b99;
}
/* /Components/Toast/ToastHost.razor.rz.scp.css */
.toast-container[b-pywv48wnrn] {
    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-0lk73pkfj9] {
    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-0lk73pkfj9 0.3s;
}

.toast-info[b-0lk73pkfj9] { border-left: 5px solid #2196f3; }
.toast-success[b-0lk73pkfj9] { border-left: 5px solid #4caf50; }
.toast-warning[b-0lk73pkfj9] { border-left: 5px solid #ff9800; }
.toast-error[b-0lk73pkfj9] { border-left: 5px solid #f44336; }

.close-button[b-0lk73pkfj9] {
    margin-left: auto;
    cursor: pointer;
    font-size: 1.2rem;
    color: #888;
}

.icon[b-0lk73pkfj9] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.center[b-0lk73pkfj9] {
    flex: 1;
}

.message[b-0lk73pkfj9] {
    margin: 0;
}

@keyframes fadein-b-0lk73pkfj9 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Transfer/AddSourceDialog.razor.rz.scp.css */
/* Dieselbe Reihenfolge wie auf der Seite: Pille oben, darunter die Fläche. */
.add-source[b-vjlr7t8qdm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Derselbe Hinweisstreifen, den die Seite über der Kamera zeigt — ohne ihn stünde der Sucher kommentarlos da. */
.add-source-hint[b-vjlr7t8qdm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-color, #00385e);
    background: #eef5fb;
    border: 1px solid #cfe0ee;
}
/* /Components/Transfer/ContainerScanChoiceDialog.razor.rz.scp.css */
.container-choice[b-h2dkvurugl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 420px;
}

.cc-head[b-h2dkvurugl] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cc-icon[b-h2dkvurugl] {
    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-h2dkvurugl] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-gold, #b8860b);
}

.cc-name[b-h2dkvurugl] {
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-size: var(--fs-lg);
}

.cc-question[b-h2dkvurugl] {
    color: var(--color-gray-500, #4b5563);
    margin: 0;
}

.cc-options[b-h2dkvurugl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .cc-options[b-h2dkvurugl]  button {
        justify-content: flex-start;
        padding: 14px 16px;
    }

.cc-opt[b-h2dkvurugl] {
    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-h2dkvurugl] {
        grid-row: 1 / span 2;
        font-size: 1.2rem;
    }

.cc-opt-main[b-h2dkvurugl] {
    font-weight: 700;
}

.cc-opt-sub[b-h2dkvurugl] {
    grid-column: 2;
    font-size: var(--fs-xs);
    font-weight: 400;
    opacity: 0.85;
}

.cc-footer[b-h2dkvurugl] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Transfer/InstanceChoiceDialog.razor.rz.scp.css */
/* Die Stückzeile im eingebetteten Select: Häkchen, Name, Kommission. Die Auswahlfläche selbst (Suche,
   Scan-Knopf, Blättern, Hervorhebung der gewählten Zeilen) kommt von EntitySelect — hier steht nur, was in
   einer Zeile nebeneinander liegt. */
.instance-choice-opt[b-5f22haum51] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.instance-choice-check[b-5f22haum51] {
    flex: 0 0 auto;
    color: var(--color-gray-400, #9ca3af);
}

/* In einer gewählten Zeile trägt das Häkchen dieselbe Farbe wie die Zeile selbst. */
[b-5f22haum51] .select-option.selected .instance-choice-check {
    color: var(--accent-color);
}

/* Der Name gibt nach, die Kommission daneben bleibt lesbar. */
.instance-choice-name[b-5f22haum51] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Transfer/StockRowChoiceDialog.razor.rz.scp.css */
/* Eine Zeile je Bestandszeile: links wem sie gehört, rechts wie viel darauf liegt. Als Knöpfe, weil jede
   Zeile eine Wahl ist — die Antwort ist der Klick, es gibt nichts zu bestätigen. */
.stock-choice[b-4cjp670xu9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stock-choice-row[b-4cjp670xu9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    background: #f7fafd;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    font-size: var(--fs-base);
    transition: background 0.15s, border-color 0.15s;
}

.stock-choice-row:hover[b-4cjp670xu9] {
    background: #eef5fb;
    border-color: #cfe0ee;
}

.stock-choice-what[b-4cjp670xu9] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.stock-choice-free[b-4cjp670xu9] {
    font-weight: 600;
    color: var(--primary-color, #00385e);
}

/* Die Menge gibt nicht nach: sie ist kurz, und sie ist der zweite Teil der Antwort. */
.stock-choice-stock[b-4cjp670xu9] {
    flex: 0 0 auto;
    color: var(--color-gray-500, #5c7180);
    font-weight: 600;
    white-space: nowrap;
}
/* /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-85s64pzd53] {
    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-85s64pzd53] {
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gray-500, #6b7280);
}

.tf-landing-head:first-child[b-85s64pzd53] {
    margin-top: 0;
}
/* /Components/Transfer/TransferPositionDialog.razor.rz.scp.css */
.position-dialog[b-4za2wk5a1j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 420px;
}

.pd-head[b-4za2wk5a1j] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pd-icon[b-4za2wk5a1j] {
    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-4za2wk5a1j] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-400, #9aa8b5);
}

.pd-name[b-4za2wk5a1j] {
    font-weight: 700;
    color: var(--primary-color, #00385e);
    font-size: var(--fs-lg);
    overflow-wrap: anywhere;
}

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

.pd-footer[b-4za2wk5a1j] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* /Components/Transfer/TransferSearchPanel.razor.rz.scp.css */
.transfer-search[b-mak18kih0s] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

    .transfer-search[b-mak18kih0s]  .select {
        flex: 1 1 auto;
        min-height: 0;
    }

.art-opt[b-mak18kih0s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

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

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

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

.instance-check[b-mak18kih0s] {
    color: var(--primary-color, #00385e);
}

/* Die Baustelle, für die diese Bestandszeile reserviert ist. Steht neben dem Artikelnamen, weil sie zusammen mit
   ihm die Zeile identifiziert -- derselbe Artikel kann im selben Lager mehrfach stehen. */
.art-project[b-mak18kih0s] {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color, #00385e) 10%, transparent);
    color: var(--primary-color, #00385e);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

/* Der Kommissionsfilter steht über der Suchzeile: erst eingrenzen, für wen die Ware ist, dann darin suchen.
   Auf voller Breite wie das Suchfeld darunter — beide schneiden dieselbe Liste zu und stehen deshalb gleich
   da; flacher und kleiner gesetzt bleibt er trotzdem der zweite Zuschnitt neben der Artikelart. */
.art-commission-filter[b-mak18kih0s] {
    display: flex;
}

.art-commission-filter[b-mak18kih0s]  .cop-select {
    width: 100%;
    min-width: 0;
    min-height: 2.4em;
    font-size: var(--fs-sm);
}

.art-commission-filter[b-mak18kih0s]  .cop-selected {
    padding: 4px 0 4px 10px;
}

.art-commission-filter[b-mak18kih0s]  .cop-expander {
    padding: 0 8px;
}

/* Die Aufstellung im Artikeleintrag: je Zeile eine Kommission und was davon dasteht. Unter dem Bestand,
   weil sie ihn aufschlüsselt und nicht danebensteht. */
.art-stock-lines[b-mak18kih0s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.art-stock-line[b-mak18kih0s] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--color-gray-500, #5c7180);
}

.art-stock-free[b-mak18kih0s] {
    font-weight: 600;
}

/* Die Menge steht rechts und gibt nicht nach — sie ist kurz, der Name daneben ist es nicht. */
.art-stock-amount[b-mak18kih0s] {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
/* /Components/Transfer/TransferSourceBar.razor.rz.scp.css */
.source-bar[b-e5dkyjcy18] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Source chips */
.src-chips[b-e5dkyjcy18] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.src-chip[b-e5dkyjcy18] {
    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-e5dkyjcy18] {
        border-color: var(--primary-color, #00385e);
    }

    .src-chip.active[b-e5dkyjcy18] {
        background: var(--primary-color, #00385e);
        color: #fff;
        border-color: var(--primary-color, #00385e);
    }

        .src-chip.active i[b-e5dkyjcy18],
        .src-chip.active[b-e5dkyjcy18]  i {
            color: #cbe0f0;
        }

    .src-chip.add[b-e5dkyjcy18] {
        border-style: dashed;
        color: var(--primary-color, #00385e);
        border-color: #cfe0ee;
        background: #eef5fb;
    }

.src-chip-section[b-e5dkyjcy18] {
    opacity: 0.7;
    font-weight: 500;
}

/* Die Baustelle der Quelle. Kräftiger als der Bereich: sie entscheidet, welche Bestandszeile gemeint ist, der
   Bereich sagt nur, wo sie liegt. */
.src-chip-project[b-e5dkyjcy18] {
    opacity: 0.9;
    font-weight: 600;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-chip-count[b-e5dkyjcy18] {
    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-e5dkyjcy18] {
    background: rgba(255, 255, 255, 0.22);
}
/* /Components/Warehouse/PositionEditor.razor.rz.scp.css */
/* Die Position ist eine Zeile, kein Kasten: eine Schiene links (FormRail), die Angaben nebeneinander —
   dieselbe Form, die eine Auflistungszeile im Formular hat (Codes, Lieferanten). FormRail legt dafür seine
   Kinder als umbrechende Zeile aus, kennt als Feld aber nur die .mb-3-Blöcke der generierten Formulare; hier
   sind die Felder EntityFormFields, also bekommen sie dieselbe Breitenregel.
   Die 11rem sind die Untergrenze, unter der ein Bereichsname oder eine Koordinate abgeschnitten würde —
   darunter bricht das Feld lieber in die nächste Zeile. */
.position-editor[b-ny43cwhadu]  .form-rail .entity-form-field {
    flex: 1 1 11rem;
    min-width: 0;
    margin-bottom: 0;
}

/* Beide Blöcke — die Schiene und der Hinweis, wenn es nichts anzugeben gibt — sitzen unter der Beschriftung
   und nicht neben ihr. */
.position-editor[b-ny43cwhadu]  .form-rail {
    width: 100%;
}
/* /Components/WorkTask/WorkTaskArticleCard.razor.rz.scp.css */
/* WorkTaskArticleCard.razor.css */
.worktask-article-card[b-53da6zp23b] {
  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-53da6zp23b] {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.worktask-article-info[b-53da6zp23b] {
  flex: 1 1 0;
  min-width: 0;
}
.pack-action[b-53da6zp23b] {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 160px;
  justify-content: flex-end;
}
.packed-by[b-53da6zp23b] {
  color: #0bb68e;
  font-weight: 600;
}
@media (max-width: 800px) {
  .worktask-article-row[b-53da6zp23b] {
    flex-direction: column;
    gap: 0.5rem;
  }
  .pack-action[b-53da6zp23b] {
    justify-content: flex-start;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .worktask-article-card[b-53da6zp23b] {
    padding: 0.75rem 0.5rem;
    font-size: var(--fs-base);
  }
}
/* /Components/WorkTask/WorkTaskCard.razor.rz.scp.css */
/* WorkTaskCard.razor.css */
.worktask-title[b-e6ugh2ivpj] {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
  word-break: break-word;
}
.worktask-description[b-e6ugh2ivpj] {
  color: #444;
  font-size: var(--fs-base);
  margin-bottom: 0.5rem;
  word-break: break-word;
}
.worktask-meta[b-e6ugh2ivpj] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--fs-base);
  color: #666;
}
.worktask-meta-item[b-e6ugh2ivpj] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.worktask-users[b-e6ugh2ivpj] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.worktask-user-chip[b-e6ugh2ivpj] {
  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-e6ugh2ivpj] {
  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-e6ugh2ivpj] {
    font-size: var(--fs-lg);
  }
  .worktask-meta[b-e6ugh2ivpj] {
    flex-direction: column;
    gap: 0.5rem;
  }
  .worktask-users[b-e6ugh2ivpj] {
    gap: 0.3rem;
  }
  .worktask-completed-badge[b-e6ugh2ivpj] {
    font-size: var(--fs-sm);
    padding: 0.1rem 0.6rem 0.1rem 0.5rem;
    top: -0.5rem;
    right: 0.1rem;
  }
}