/* /Components/Account/Login.razor.rz.scp.css */
/* Login screen. Two panes on desktop: brand artwork and the form. On small
   screens the artwork collapses to a compact banner above the card. */

.auth[b-filom0og92] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-page);
}

/* ------------------------------------------------------------- brand pane */
.auth-brand[b-filom0og92] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 500px at 20% 10%, rgb(255 255 255 / 0.16), transparent 55%),
        linear-gradient(150deg, var(--brand-800) 0%, var(--brand-600) 45%, var(--accent-700) 100%);
}

.auth-brand-inner[b-filom0og92] {
    position: relative;
    z-index: 1;
    max-width: 420px;
    animation: slide-up 600ms var(--ease-out) both;
}

/* Solid white rather than the previous translucent glass: the mark is now a
   bitmap that cannot go monochrome, so it needs an opaque light plate to read
   against the gradient. */
.auth-logo[b-filom0og92] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: var(--space-2);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
    overflow: hidden;
}

.auth-brand-title[b-filom0og92] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: #fff;
}

.auth-brand-tagline[b-filom0og92] {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
    color: rgb(255 255 255 / 0.80);
}

.auth-features[b-filom0og92] {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-features li[b-filom0og92] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: rgb(255 255 255 / 0.88);
    animation: slide-up 600ms var(--ease-out) both;
}

.auth-features li:nth-child(1)[b-filom0og92] { animation-delay: 120ms; }
.auth-features li:nth-child(2)[b-filom0og92] { animation-delay: 200ms; }
.auth-features li:nth-child(3)[b-filom0og92] { animation-delay: 280ms; }

.auth-features[b-filom0og92]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent-400);
}

/* Drifting background orbs. */
.auth-orb[b-filom0og92] {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.auth-orb-1[b-filom0og92] {
    width: 420px; height: 420px;
    inset-block-start: -140px;
    inset-inline-end: -120px;
    background: radial-gradient(circle, rgb(255 255 255 / 0.18), transparent 68%);
    animation: float-slow 16s var(--ease-in-out) infinite;
}

.auth-orb-2[b-filom0og92] {
    width: 300px; height: 300px;
    inset-block-end: -90px;
    inset-inline-start: -70px;
    background: radial-gradient(circle, rgb(34 211 238 / 0.30), transparent 68%);
    animation: float-slow 20s var(--ease-in-out) infinite reverse;
}

.auth-orb-3[b-filom0og92] {
    width: 220px; height: 220px;
    inset-block-start: 42%;
    inset-inline-end: 12%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.12), transparent 68%);
    animation: float-slow 24s var(--ease-in-out) infinite;
}

/* -------------------------------------------------------------- form pane */
.auth-panel[b-filom0og92] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.auth-prefs[b-filom0og92] {
    position: absolute;
    inset-block-start: var(--space-6);
    inset-inline-end: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.auth-langs[b-filom0og92] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
}

.auth-lang[b-filom0og92] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-base);
}

.auth-lang:hover[b-filom0og92] {
    color: var(--text-primary);
    background: var(--surface-hover);
    text-decoration: none;
}

.auth-lang.is-active[b-filom0og92] {
    background: var(--surface-card);
    color: var(--text-brand);
    box-shadow: var(--shadow-xs);
}

.auth-card[b-filom0og92] {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .auth-card[b-filom0og92] {
    box-shadow: var(--shadow-lg);
}

/* Shown only when the brand pane is hidden on small screens. */
.auth-card-logo[b-filom0og92] {
    display: none;
    place-items: center;
    width: 68px;
    height: 68px;
    padding: var(--space-2);
    margin: 0 auto var(--space-5);
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.auth-title[b-filom0og92] {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
}

.auth-subtitle[b-filom0og92] {
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
    color: var(--text-muted);
}

.auth-form[b-filom0og92] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The error alert renders as a sibling before <EditForm>, not inside it —
   .auth-form .alert never matched anything, leaving the alert flush against
   the first field with no breathing room. */
.auth-card .alert[b-filom0og92] { margin-bottom: var(--space-4); }


/* The gap between this and the checkbox above now comes from .auth-form's
   own flex gap, now that it actually applies (see the comment on .auth-form
   in Login.razor) — an extra margin-top here on top of that gap was another
   leftover compensating for the broken layout, and made this one gap visibly
   larger than the others. */
.auth-submit[b-filom0og92] {
    animation: none;
}

.auth-submit[b-filom0og92]  .auth-submit-icon {
    width: 18px;
    height: 18px;
}

.auth-footer[b-filom0og92] {
    margin-top: var(--space-8);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .auth[b-filom0og92] { grid-template-columns: 1fr; }

    .auth-brand[b-filom0og92] { display: none; }

    .auth-card-logo[b-filom0og92] { display: grid; }

    .auth-panel[b-filom0og92] { padding: var(--space-6) var(--space-4); align-items: flex-start; }

    /* background/border/radius now come from the base rule above; only the
       spacing and shadow weight actually need to differ here, since a mobile
       card sits directly on the page with no brand panel beside it to
       separate it visually. */
    .auth-card[b-filom0og92] {
        margin-top: var(--space-16);
        padding: var(--space-6);
        box-shadow: var(--shadow-lg);
    }

    .auth-title[b-filom0og92], .auth-subtitle[b-filom0og92] { text-align: center; }

    .auth-prefs[b-filom0og92] {
        inset-block-start: var(--space-4);
        inset-inline-end: var(--space-4);
    }
}

@media (max-width: 420px) {
    .auth-card[b-filom0og92] { padding: var(--space-5); margin-top: var(--space-12); }
    .auth-title[b-filom0og92] { font-size: var(--text-2xl); }
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
.app-header[b-y8ggghcpa2] {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding-inline: var(--space-5);
    background: color-mix(in srgb, var(--surface-card) 85%, transparent);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .app-header[b-y8ggghcpa2] {
    background: color-mix(in srgb, #0d1527 80%, transparent);
    border-bottom-color: rgba(30, 43, 71, 0.7);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.header-burger[b-y8ggghcpa2] { display: none; }

.header-spacer[b-y8ggghcpa2] { flex: 1 1 auto; }

/* -------------------------------------------------------------- search */
.header-search[b-y8ggghcpa2] {
    position: relative;
    display: flex;
    align-items: center;
    width: min(340px, 34vw);
}

.header-search .input[b-y8ggghcpa2] {
    height: 38px;
    padding-inline-start: 2.35rem;
    background: var(--surface-sunken);
    border-color: var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: all 0.2s var(--ease-out);
}

.header-search .input:focus[b-y8ggghcpa2] {
    background: var(--surface-card);
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(91, 127, 232, 0.15);
}

.header-search-icon[b-y8ggghcpa2] {
    position: absolute;
    inset-inline-start: var(--space-3);
    display: grid;
    place-items: center;
    color: var(--text-subtle);
    pointer-events: none;
}

.header-search-icon[b-y8ggghcpa2]  svg { width: 16px; height: 16px; }

/* Room for the shortcut hint, and hide the browser's own clear (x) which
   would sit on top of it. */
.header-search .input[b-y8ggghcpa2] { padding-inline-end: 3.6rem; }
.header-search .input[b-y8ggghcpa2]::-webkit-search-cancel-button { display: none; }

.header-search-kbd[b-y8ggghcpa2] {
    position: absolute;
    inset-inline-end: var(--space-3);
    padding: 1px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-subtle);
    font-family: inherit;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    pointer-events: none;
    direction: ltr;
}

.header-search:focus-within .header-search-kbd[b-y8ggghcpa2] { display: none; }

/* ---------------------------------------------------------- page search */
.page-search-panel[b-y8ggghcpa2] {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline: 0;
    z-index: var(--z-modal);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xl);
}

.page-search-panel[hidden][b-y8ggghcpa2] { display: none; }

.page-search-item[b-y8ggghcpa2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
}

.page-search-item[hidden][b-y8ggghcpa2] { display: none; }

.page-search-item:hover[b-y8ggghcpa2],
.page-search-item.is-active[b-y8ggghcpa2] {
    background: var(--surface-hover);
    text-decoration: none;
}

.page-search-item.is-active[b-y8ggghcpa2] { box-shadow: inset 0 0 0 1px var(--brand-300); }

.page-search-icon[b-y8ggghcpa2] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--brand-500);
}

.page-search-icon[b-y8ggghcpa2]  svg { width: 16px; height: 16px; }

.page-search-text[b-y8ggghcpa2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.page-search-name[b-y8ggghcpa2] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-search-where[b-y8ggghcpa2] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-search-empty[b-y8ggghcpa2] {
    margin: 0;
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.header-actions[b-y8ggghcpa2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --------------------------------------------------------------- theme */
:root[data-theme="dark"] .theme-icon-light[b-y8ggghcpa2] { display: none; }
:root:not([data-theme="dark"]) .theme-icon-dark[b-y8ggghcpa2] { display: none; }

.theme-icon-light[b-y8ggghcpa2], .theme-icon-dark[b-y8ggghcpa2] { display: grid; place-items: center; }

/* ------------------------------------------------------------- account */
.header-account[b-y8ggghcpa2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding-inline: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}

.header-account:hover[b-y8ggghcpa2] {
    background: var(--surface-hover);
    border-color: var(--border-subtle);
    transform: translateY(-1px);
}

.header-avatar[b-y8ggghcpa2] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(91, 127, 232, 0.35);
}

.header-avatar-lg[b-y8ggghcpa2] { width: 42px; height: 42px; font-size: var(--text-base); }

.header-account-text[b-y8ggghcpa2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    max-width: 150px;
}

.header-account-name[b-y8ggghcpa2] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-role[b-y8ggghcpa2] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

.header-account[b-y8ggghcpa2]  .header-account-caret {
    width: 15px;
    height: 15px;
    color: var(--text-subtle);
    transition: transform var(--duration-base) var(--ease-out);
}

.menu.is-open .header-account[b-y8ggghcpa2]  .header-account-caret { transform: rotate(180deg); }

/* -------------------------------------------------------------- menus */
.menu[b-y8ggghcpa2] { position: relative; }

.menu-panel[b-y8ggghcpa2] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 220px;
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s var(--ease-out),
                transform 0.2s var(--ease-out),
                visibility 0.2s var(--ease-out);
    z-index: var(--z-modal);
}

[data-theme="dark"] .menu-panel[b-y8ggghcpa2] {
    background: #121c33;
    border-color: rgba(42, 58, 92, 0.8);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.menu-panel-end[b-y8ggghcpa2] { inset-inline-start: auto; inset-inline-end: 0; }

.menu.is-open .menu-panel[b-y8ggghcpa2] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-heading[b-y8ggghcpa2] {
    padding: var(--space-1) var(--space-3) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

.menu-item[b-y8ggghcpa2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.menu-item:hover[b-y8ggghcpa2] {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.menu-item.is-active[b-y8ggghcpa2] { color: var(--text-brand); font-weight: var(--weight-medium); }

.menu-item-danger[b-y8ggghcpa2] { color: var(--danger-ink); justify-content: flex-start; }
.menu-item-danger:hover[b-y8ggghcpa2] { background: var(--danger-50); color: var(--danger-ink); }
.menu-item-danger[b-y8ggghcpa2]  svg { width: 16px; height: 16px; }

.menu-item[b-y8ggghcpa2]  .menu-check { width: 15px; height: 15px; }

/* The picker fills the panel width rather than sitting as a pill inside it. */
.menu-theme-picker[b-y8ggghcpa2] {
    display: flex;
    width: 100%;
    margin-inline: var(--space-1);
}

.menu-theme-picker[b-y8ggghcpa2]  .theme-option { flex: 1; justify-content: center; }

.menu-note[b-y8ggghcpa2] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-2xs);
    color: var(--text-subtle);
    max-width: 210px;
    line-height: 1.4;
}

.menu-sep[b-y8ggghcpa2] {
    height: 1px;
    margin: var(--space-2) 0;
    background: var(--border-subtle);
}

.menu-identity[b-y8ggghcpa2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-width: 0;
}

.menu-identity-name[b-y8ggghcpa2] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.menu-identity-meta[b-y8ggghcpa2] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .header-burger[b-y8ggghcpa2] { display: inline-flex; }
}

@media (max-width: 768px) {
    .app-header[b-y8ggghcpa2] { padding-inline: var(--space-3); gap: var(--space-2); }
    .header-search[b-y8ggghcpa2] { display: none; }
    .header-account-text[b-y8ggghcpa2] { display: none; }
    .header-account[b-y8ggghcpa2]  .header-account-caret { display: none; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-3m1c9ssd86] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-page);
}

.app-main[b-3m1c9ssd86] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;                 /* lets wide tables scroll instead of stretching */
    margin-inline-start: var(--sidebar-width);
    transition: margin-inline-start var(--duration-base) var(--ease-out);
}

.app-shell.is-collapsed .app-main[b-3m1c9ssd86] {
    margin-inline-start: var(--sidebar-width-collapsed);
}

.app-content[b-3m1c9ssd86] {
    flex: 1;
    padding: var(--space-6);
    animation: fade-in var(--duration-slow) var(--ease-out) both;
}

/* Focusing <main> via the skip link should not draw a ring around the page. */
.app-content:focus[b-3m1c9ssd86] { outline: none; }

/* Full width at every screen size. The pages here are mostly wide data
   grids — Manage Orders alone runs to a dozen columns — and a cap left
   empty bands either side of a table that was scrolling sideways. Prose
   that would read badly at full width (.page-subtitle, .empty-text) keeps
   its own ch-based limit. */
.app-content-inner[b-3m1c9ssd86] {
    width: 100%;
    min-width: 0;
}

/* ------------------------------------------------------------- skip link */
.skip-link[b-3m1c9ssd86] {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: calc(var(--z-toast) + 1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--brand-600);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    box-shadow: var(--shadow-lg);

    /* Off-screen until focused, rather than display:none, so it stays in the
       tab order and can be reached by keyboard. */
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus[b-3m1c9ssd86] {
    transform: translateY(0);
    text-decoration: none;
}

/* -------------------------------------------------------------- backdrop */
.sidebar-backdrop[b-3m1c9ssd86] {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: var(--surface-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out);
}

.app-shell.is-open .sidebar-backdrop[b-3m1c9ssd86] {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1024px) {
    /* Below this width the sidebar becomes an overlay, so the main column
       always spans the full width. */
    .app-main[b-3m1c9ssd86],
    .app-shell.is-collapsed .app-main[b-3m1c9ssd86] {
        margin-inline-start: 0;
    }

    .app-content[b-3m1c9ssd86] { padding: var(--space-4); }
}

@media (min-width: 1025px) {
    .sidebar-backdrop[b-3m1c9ssd86] { display: none; }
}

/* ------------------------------------------------------------- error bar */
#blazor-error-ui[b-3m1c9ssd86] {
    display: none;
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    margin-inline: auto;
    max-width: 520px;
    z-index: var(--z-toast);

    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warning-100);
    border-inline-start: 3px solid var(--warning-500);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
    animation: slide-up var(--duration-base) var(--ease-spring) both;
}

/* Blazor sets display:block inline when an error occurs; flex layout has to
   win that back without fighting the framework. */
#blazor-error-ui[style*="display: block"][b-3m1c9ssd86],
#blazor-error-ui[style*="display:block"][b-3m1c9ssd86] {
    display: flex !important;
}

#blazor-error-ui .error-icon[b-3m1c9ssd86] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--warning-ink);
}

#blazor-error-ui .error-icon[b-3m1c9ssd86]  svg { width: 20px; height: 20px; }

#blazor-error-ui .error-text[b-3m1c9ssd86] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

#blazor-error-ui .error-body[b-3m1c9ssd86] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#blazor-error-ui .dismiss[b-3m1c9ssd86] {
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-muted);
}

#blazor-error-ui .dismiss:hover[b-3m1c9ssd86] { color: var(--text-primary); }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.app-sidebar[b-6uhvt2w4cx] {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    background: var(--surface-card);
    border-inline-end: 1px solid var(--border-subtle);
    box-shadow: 1px 0 10px rgba(0, 0, 0, 0.02);
    transition: width var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

[data-theme="dark"] .app-sidebar[b-6uhvt2w4cx] {
    background: #0d1527;
    border-inline-end-color: rgba(30, 43, 71, 0.7);
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------- brand */
.sidebar-brand[b-6uhvt2w4cx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-height);
    padding-inline: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-hover) 100%);
}

[data-theme="dark"] .sidebar-brand[b-6uhvt2w4cx] {
    background: linear-gradient(180deg, #0f1729 0%, #0d1527 100%);
    border-bottom-color: rgba(30, 43, 71, 0.7);
}

.sidebar-brand-link[b-6uhvt2w4cx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition-base);
}

.sidebar-brand-link:hover[b-6uhvt2w4cx] {
    background: var(--surface-hover);
    text-decoration: none;
}

.sidebar-logo[b-6uhvt2w4cx] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out);
}

.sidebar-brand-link:hover .sidebar-logo[b-6uhvt2w4cx] {
    transform: scale(1.05);
}

.sidebar-brand-text[b-6uhvt2w4cx] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.sidebar-brand-name[b-6uhvt2w4cx] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
}

.sidebar-brand-sub[b-6uhvt2w4cx] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sidebar-close[b-6uhvt2w4cx] { display: none; flex-shrink: 0; }

/* --------------------------------------------------------------- nav */
.sidebar-nav[b-6uhvt2w4cx] {
    flex: 1;
    padding: var(--space-3) var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sidebar-nav[b-6uhvt2w4cx]::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav[b-6uhvt2w4cx]::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

.sidebar-divider[b-6uhvt2w4cx] {
    display: none;
    height: 1px;
    margin: var(--space-3) var(--space-2);
    border: 0;
    background: var(--border-subtle);
}

.sidebar-section[b-6uhvt2w4cx] {
    padding: var(--space-4) var(--space-3) var(--space-2);
    font-size: 11px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
    white-space: nowrap;
}

.sidebar-nav > .sidebar-section:first-of-type[b-6uhvt2w4cx] { padding-top: var(--space-2); }

.sidebar-link[b-6uhvt2w4cx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem 0.85rem;
    margin-bottom: 3px;
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s var(--ease-out);
}

.sidebar-link:hover[b-6uhvt2w4cx] {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateX(2px);
}

[dir="rtl"] .sidebar-link:hover[b-6uhvt2w4cx] {
    transform: translateX(-2px);
}

.sidebar-link.active[b-6uhvt2w4cx] {
    background: linear-gradient(90deg, var(--brand-50), rgba(91, 127, 232, 0.05));
    color: var(--brand-600);
    font-weight: var(--weight-semibold);
    box-shadow: 0 1px 3px rgba(91, 127, 232, 0.1);
}

[data-theme="dark"] .sidebar-link.active[b-6uhvt2w4cx] {
    background: linear-gradient(90deg, rgba(91, 127, 232, 0.18), rgba(91, 127, 232, 0.04));
    color: var(--brand-300);
}

/* Accent rail indicator */
.sidebar-link.active[b-6uhvt2w4cx]::before {
    content: "";
    position: absolute;
    inset-block: 15%;
    inset-inline-start: 0;
    width: 3.5px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 0 8px rgba(91, 127, 232, 0.6);
}

[dir="rtl"] .sidebar-link.active[b-6uhvt2w4cx]::before {
    border-radius: 4px 0 0 4px;
}

.sidebar-link-icon[b-6uhvt2w4cx] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-md);
    transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.sidebar-link:hover .sidebar-link-icon[b-6uhvt2w4cx] {
    transform: scale(1.1);
    color: var(--brand-500);
}

.sidebar-link.active .sidebar-link-icon[b-6uhvt2w4cx] {
    color: var(--brand-500);
}

[data-theme="dark"] .sidebar-link.active .sidebar-link-icon[b-6uhvt2w4cx] {
    color: var(--brand-300);
}

.sidebar-link-icon[b-6uhvt2w4cx]  svg { width: 18px; height: 18px; }

.sidebar-link-text[b-6uhvt2w4cx] { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }

/* -------------------------------------------------------- sub-menus
   A <details> per group: the <summary> wears .sidebar-link so it lines up
   with the plain links, and the items fold out beneath it on an indent rail. */
.sidebar-group[b-6uhvt2w4cx] { margin-bottom: 3px; }

.sidebar-group-toggle[b-6uhvt2w4cx] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sidebar-group-toggle[b-6uhvt2w4cx]::-webkit-details-marker { display: none; }

.sidebar-group-toggle:focus-visible[b-6uhvt2w4cx] {
    outline: 2px solid var(--brand-400);
    outline-offset: -2px;
}

.sidebar-group-toggle[b-6uhvt2w4cx]  .sidebar-group-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}

.sidebar-group[open] > .sidebar-group-toggle[b-6uhvt2w4cx]  .sidebar-group-chevron { transform: rotate(180deg); }

/* The current page is inside: say so on the heading too, so a closed group
   still shows where you are. */
.sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx],
.sidebar-group.has-active > .sidebar-group-toggle .sidebar-link-icon[b-6uhvt2w4cx] {
    color: var(--brand-600);
}

[data-theme="dark"] .sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx],
[data-theme="dark"] .sidebar-group.has-active > .sidebar-group-toggle .sidebar-link-icon[b-6uhvt2w4cx] {
    color: var(--brand-300);
}

.sidebar-group-items[b-6uhvt2w4cx] {
    margin-inline-start: 1.3rem;
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--border-subtle);
}

.sidebar-sublink[b-6uhvt2w4cx] {
    padding-block: 0.45rem;
    font-size: var(--text-sm);
}

.sidebar-sublink .sidebar-link-icon[b-6uhvt2w4cx] { width: 18px; height: 18px; }
.sidebar-sublink .sidebar-link-icon[b-6uhvt2w4cx]  svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ footer */
.sidebar-footer[b-6uhvt2w4cx] {
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--surface-card);
}

[data-theme="dark"] .sidebar-footer[b-6uhvt2w4cx] {
    background: #0d1527;
    border-top-color: rgba(30, 43, 71, 0.7);
}

.sidebar-collapse[b-6uhvt2w4cx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}

.sidebar-collapse:hover[b-6uhvt2w4cx] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.sidebar-collapse[b-6uhvt2w4cx]  .sidebar-collapse-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

:root[dir="rtl"] .sidebar-collapse[b-6uhvt2w4cx]  .sidebar-collapse-icon { transform: rotate(180deg); }

/* ---------------------------------------------------- collapsed state */
.app-shell.is-collapsed .app-sidebar[b-6uhvt2w4cx] { width: var(--sidebar-width-collapsed); }

.app-shell.is-collapsed .sidebar-brand-text[b-6uhvt2w4cx],
.app-shell.is-collapsed .sidebar-link-text[b-6uhvt2w4cx],
.app-shell.is-collapsed .sidebar-section[b-6uhvt2w4cx] {
    display: none;
}

.app-shell.is-collapsed .sidebar-divider[b-6uhvt2w4cx] { display: block; }

/* Icon rail: a group is just its icon. Its items fold away (the rail peeks
   open on hover, which brings them back), and a group holding the current
   page takes the active look the page's own link would have had. */
.app-shell.is-collapsed .sidebar-group-items[b-6uhvt2w4cx],
.app-shell.is-collapsed .sidebar-group-toggle[b-6uhvt2w4cx]  .sidebar-group-chevron {
    display: none;
}

.app-shell.is-collapsed .sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx] {
    background: linear-gradient(90deg, var(--brand-50), rgba(91, 127, 232, 0.05));
}

[data-theme="dark"] .app-shell.is-collapsed .sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx] {
    background: linear-gradient(90deg, rgba(91, 127, 232, 0.18), rgba(91, 127, 232, 0.04));
}
.app-shell.is-collapsed .sidebar-nav > .sidebar-divider:first-child[b-6uhvt2w4cx] { display: none; }

.app-shell.is-collapsed .sidebar-brand[b-6uhvt2w4cx] { justify-content: center; padding-inline: 0; }
.app-shell.is-collapsed .sidebar-brand-link[b-6uhvt2w4cx] { justify-content: center; flex: 0; margin-inline: 0; padding: var(--space-1); }
.app-shell.is-collapsed .sidebar-link[b-6uhvt2w4cx] { justify-content: center; padding-inline: 0; }
.app-shell.is-collapsed .sidebar-collapse[b-6uhvt2w4cx] { justify-content: center; padding-inline: 0; }
.app-shell.is-collapsed .sidebar-collapse[b-6uhvt2w4cx]  .sidebar-collapse-icon { transform: rotate(180deg); }
:root[dir="rtl"] .app-shell.is-collapsed .sidebar-collapse[b-6uhvt2w4cx]  .sidebar-collapse-icon { transform: rotate(0deg); }

.app-shell.is-collapsed .sidebar-link[b-6uhvt2w4cx]::after {
    content: attr(data-tip);
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    inset-block-start: 50%;
    transform: translateY(-50%) scale(0.95);
    transform-origin: center left;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-inverse);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s var(--ease-out);
    z-index: var(--z-modal);
}

:root[dir="rtl"] .app-shell.is-collapsed .sidebar-link[b-6uhvt2w4cx]::after {
    transform-origin: center right;
}

.app-shell.is-collapsed .sidebar-link:hover[b-6uhvt2w4cx]::after,
.app-shell.is-collapsed .sidebar-link:focus-visible[b-6uhvt2w4cx]::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* ------------------------------------- hover-to-expand while collapsed
   Peeking the full rail on hover, the usual mini-rail pattern (VS Code's
   Activity Bar, Notion's sidebar). The rail is already position: fixed, and
   .app-main's margin only ever matches the *collapsed* width while
   is-collapsed is set — so widening it here overlays it on top of the page
   instead of reflowing anything; only the deeper shadow signals that it's
   floating rather than genuinely expanded.

   The trigger is :hover OR :has(:focus-visible) — deliberately NOT
   :focus-within. Clicking a nav link with the mouse focuses that link, and
   :focus-within would then hold the rail open long after the pointer left,
   so a single click effectively pinned the rail expanded. :focus-visible
   only matches focus the browser attributes to the keyboard, so tabbing in
   still reveals the labels while a mouse click no longer does.

   Wrapped in :where() for two reasons. It keeps the pair on one selector
   instead of duplicating ten declaration blocks, and :where() is forgiving:
   on a browser without :has() support the inner selector is ignored and the
   rule still applies for :hover, rather than the whole rule being thrown
   out. A plain comma list has no such tolerance — one unknown selector in
   the list drops every rule in it, which would have taken hover down too.
   :where() contributes no specificity, but the surrounding compound still
   outranks the plain collapsed-width rule, so the peek continues to win.

   Desktop only (see the drawer's own max-width: 1024px block below): a
   drawer already shows full labels regardless of is-collapsed, so there is
   nothing left here to expand.

   Every property is given its own explicit value rather than `revert` on
   principle: `.sidebar-brand-text` is a flex item of `.sidebar-brand-link`,
   and a flex item's `display` is blockified — `revert` doesn't restore its
   own `display: flex` above but falls through to the span's plain `inline`
   default, which then reads back as `block` once blockified. That silently
   dropped this exact element's flex-column stacking in the one place this
   file already used `revert` for it (fixed just below, in the drawer rules,
   for the same reason).

   :not(.no-peek) gates every rule below. Clicking "Collapse" leaves the
   pointer sitting on the button that was just clicked, so :hover is still
   true on the very next frame and immediately re-expands the rail the click
   just collapsed — it looks exactly like the button did nothing until the
   mouse moves away. app.js adds .no-peek in that moment and removes it once
   the pointer or focus actually leaves the rail (see toggleCollapse). */
.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible))[b-6uhvt2w4cx] {
    width: var(--sidebar-width);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.14);
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-brand-text[b-6uhvt2w4cx] {
    display: flex;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-link-text[b-6uhvt2w4cx] {
    display: inline;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-section[b-6uhvt2w4cx] {
    display: block;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-brand[b-6uhvt2w4cx] {
    justify-content: flex-start;
    padding-inline: var(--space-4);
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-brand-link[b-6uhvt2w4cx] {
    justify-content: flex-start;
    flex: 1;
    margin-inline: 0;
    padding: var(--space-1) var(--space-2);
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-link[b-6uhvt2w4cx] {
    justify-content: flex-start;
    padding-inline: 0.85rem;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-collapse[b-6uhvt2w4cx] {
    justify-content: flex-start;
    padding-inline: var(--space-3);
}

/* The section dividers stand in for the (hidden) section labels only while
   truly collapsed; once labels reappear on hover they'd just duplicate the
   grouping the label already shows. */
.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-divider[b-6uhvt2w4cx] {
    display: none;
}

/* The per-item tooltip exists to name an icon-only link; with the label back
   on screen right next to it, a floating tooltip would just repeat it. */
.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-link[b-6uhvt2w4cx]::after {
    content: none;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-group-items[b-6uhvt2w4cx] {
    display: block;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-group-toggle[b-6uhvt2w4cx]  .sidebar-group-chevron {
    display: block;
}

.app-shell.is-collapsed .app-sidebar:not(.no-peek):where(:hover, :has(:focus-visible)) .sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx] {
    background: none;
}

/* ------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    /* Off-canvas drawer. translateX(-100%) is direction-aware once the
       document is RTL, so one rule covers both. */
    .app-sidebar[b-6uhvt2w4cx] {
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }

    :root[dir="rtl"] .app-sidebar[b-6uhvt2w4cx] { transform: translateX(100%); }

    .app-shell.is-open .app-sidebar[b-6uhvt2w4cx] { transform: translateX(0); }

    .sidebar-close[b-6uhvt2w4cx] { display: inline-flex; }

    /* Collapsing is a desktop affordance only. */
    .app-shell.is-collapsed .app-sidebar[b-6uhvt2w4cx] { width: var(--sidebar-width); }

    /* Explicit values, not `revert`: `.sidebar-brand-text` is a flex item of
       `.sidebar-brand-link`, and `revert` on a flex item's `display` doesn't
       restore its own `display: flex` two rules up — it falls through to the
       span's plain `inline` default, which blockification then reports back
       as `block`. A block `.sidebar-brand-text` is no longer a flex
       container for its own children, so the brand name and "Admin Console"
       subtitle stop stacking and run together on one line instead. */
    .app-shell.is-collapsed .sidebar-brand-text[b-6uhvt2w4cx] { display: flex; }
    .app-shell.is-collapsed .sidebar-link-text[b-6uhvt2w4cx] { display: inline; }
    .app-shell.is-collapsed .sidebar-section[b-6uhvt2w4cx] { display: block; }
    .app-shell.is-collapsed .sidebar-brand-link[b-6uhvt2w4cx] { justify-content: flex-start; flex: 1; }
    .app-shell.is-collapsed .sidebar-link[b-6uhvt2w4cx] { justify-content: flex-start; padding-inline: var(--space-3); }
    .app-shell.is-collapsed .sidebar-divider[b-6uhvt2w4cx] { display: none; }
    .app-shell.is-collapsed .sidebar-link[b-6uhvt2w4cx]::after { content: none; }
    .app-shell.is-collapsed .sidebar-group-items[b-6uhvt2w4cx] { display: block; }
    .app-shell.is-collapsed .sidebar-group-toggle[b-6uhvt2w4cx]  .sidebar-group-chevron { display: block; }
    .app-shell.is-collapsed .sidebar-group.has-active > .sidebar-group-toggle[b-6uhvt2w4cx] { background: none; }

    .sidebar-footer[b-6uhvt2w4cx] { display: none; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-134c7wuxbg],
.components-reconnect-repeated-attempt-visible[b-134c7wuxbg],
.components-reconnect-failed-visible[b-134c7wuxbg],
.components-pause-visible[b-134c7wuxbg],
.components-resume-failed-visible[b-134c7wuxbg],
.components-rejoining-animation[b-134c7wuxbg] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-134c7wuxbg {
    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/Pages/DsStockEntry.razor.rz.scp.css */
/* Drug-store stock recording.

   Everything here is either a layout the shared sheet has no class for (the
   sticky save bar, the import panel) or a density tweak for controls sitting
   inside table cells. Colour, radius and spacing all come from the tokens in
   app.css so this stays on-theme in both light and dark, and every offset is
   a logical property so the Arabic and Kurdish RTL layouts mirror correctly. */

/* ------------------------------------------------------------- addressing */

.dse-hint[b-92ykcvuxhm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    line-height: var(--leading-normal, 1.5);
}

/* ::deep, because Icon renders the svg from inside its own component and the
   scope attribute on this stylesheet only lands on elements written here. A
   plain `.dse-hint svg` matches nothing and the icon falls back to filling
   its container. */
.dse-hint[b-92ykcvuxhm]  svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-block-start: 1px;
    color: var(--text-muted);
}

/* The two buttons sit in the filter grid alongside the selects, so they need
   the same column treatment plus a label-height offset to line their tops up
   with the inputs rather than the labels. */
.field-actions[b-92ykcvuxhm] {
    display: flex;
    align-items: flex-end;
}

.field-actions .btn[b-92ykcvuxhm] {
    width: 100%;
    justify-content: center;
}

.dse-alert-close[b-92ykcvuxhm] {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Every plain .btn on this page that wraps an <Icon> needs its own svg rule:
   .btn only sizes .btn-icon's children (app.css), so an icon inside a regular
   .btn — "View report", "Remove empty", the import actions — is otherwise
   left with no width or height at all and renders at the SVG default, ~20x
   too big for the button that contains it. */
.page-header-actions .btn[b-92ykcvuxhm]  svg,
.field-actions .btn[b-92ykcvuxhm]  svg,
.dse-toolbar .btn-ghost[b-92ykcvuxhm]  svg,
.dse-import-actions .btn[b-92ykcvuxhm]  svg,
.dse-import-apply .btn[b-92ykcvuxhm]  svg,
.dse-savebar .btn[b-92ykcvuxhm]  svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------- toolbar */

.dse-toolbar[b-92ykcvuxhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
}

.dse-count[b-92ykcvuxhm] {
    display: inline-block;
    margin-inline-start: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
}

.preset.is-active .dse-count[b-92ykcvuxhm] {
    background: rgb(255 255 255 / 0.22);
}

/* ------------------------------------------------------------------- sheet */

/* Fixed widths on the editable columns stop the inputs from resizing as the
   product names change length down the page — a moving target to type into. */
.dse-col-code[b-92ykcvuxhm] { width: 8.5rem; }
.dse-col-expiry[b-92ykcvuxhm] { width: 10rem; }
.dse-col-qty[b-92ykcvuxhm] { width: 8rem; }
.dse-col-actions[b-92ykcvuxhm] { width: 5.5rem; text-align: end; white-space: nowrap; }

.dse-item[b-92ykcvuxhm] {
    font-weight: var(--font-medium, 500);
    margin-inline-end: var(--space-2);
}

.dse-table td[b-92ykcvuxhm] { vertical-align: middle; }

.dse-table .badge[b-92ykcvuxhm] {
    margin-inline-start: var(--space-1);
    vertical-align: middle;
}

/* A tinted row rather than a red border: the sheet can have hundreds of rows
   and a border weight change reflows the whole table as values are typed. */
.dse-row-issue > td[b-92ykcvuxhm] {
    background: var(--warning-50);
}

.input-sm[b-92ykcvuxhm] {
    min-height: 2rem;
    padding-block: var(--space-1);
    font-size: var(--text-sm, 0.8125rem);
}

.dse-qty[b-92ykcvuxhm] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* MM/YYYY reads the same way round in every language, so it stays
   left-to-right even on the Arabic and Kurdish pages. */
.dse-expiry[b-92ykcvuxhm] {
    direction: ltr;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Spinners inside a count column are a mis-click waiting to happen when the
   real target is the number itself. */
.dse-qty[b-92ykcvuxhm]::-webkit-outer-spin-button,
.dse-qty[b-92ykcvuxhm]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dse-qty[b-92ykcvuxhm] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The whole sheet in one box that scrolls on its own. The page-level table
   wrapper only scrolls sideways, so its sticky header had nothing to stick
   to; with a height of its own the column titles stay above the rows while
   a long count is typed, and the save bar below stays in reach. */
.dse-sheet-scroll[b-92ykcvuxhm] {
    max-height: max(22rem, calc(100vh - 17rem));
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 3rem 1rem;
}

/* -------------------------------------------------------------- keyboard */

.dse-kbd[b-92ykcvuxhm] {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.45em;
    border: 1px solid var(--border-default);
    border-block-end-width: 2px;
    border-radius: var(--radius-xs, 4px);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78em;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.dse-toolbar .btn-ghost .dse-kbd[b-92ykcvuxhm] {
    margin-inline-start: var(--space-1);
}

.dse-kb-tip[b-92ykcvuxhm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.9;
}

.dse-kb-tip[b-92ykcvuxhm]  svg,
.dse-toolbar .btn-ghost[b-92ykcvuxhm]  svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* The row being typed into, so the eye can follow Enter down the sheet. */
.dse-table tbody tr:focus-within > td[b-92ykcvuxhm] {
    background: var(--brand-50);
}

.dse-table tbody tr:focus-within > td:first-child[b-92ykcvuxhm] {
    box-shadow: inset 3px 0 0 var(--brand-500);
}

/* Scoping only tags the last element of a selector, so the page's own dir
   attribute can be matched as an ordinary ancestor. */
[dir="rtl"] .dse-table tbody tr:focus-within > td:first-child[b-92ykcvuxhm] {
    box-shadow: inset -3px 0 0 var(--brand-500);
}

/* ------------------------------------------------------- shortcut dialog */

.dse-help[b-92ykcvuxhm] {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
}

.dse-help[b-92ykcvuxhm]::backdrop {
    background: rgb(15 23 42 / 0.45);
    backdrop-filter: blur(2px);
}

.dse-help-body[b-92ykcvuxhm] {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.dse-help-head[b-92ykcvuxhm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dse-help-title[b-92ykcvuxhm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
}

.dse-help-title[b-92ykcvuxhm]  svg {
    width: 20px;
    height: 20px;
    color: var(--brand-500);
}

.dse-help-intro[b-92ykcvuxhm] {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.dse-help-groups[b-92ykcvuxhm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5) var(--space-6);
}

.dse-help-group-title[b-92ykcvuxhm] {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dse-help-list[b-92ykcvuxhm] {
    margin: 0;
}

.dse-help-row[b-92ykcvuxhm] {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-block: 0.4rem;
    border-block-end: 1px dashed var(--border-subtle);
}

.dse-help-row:last-child[b-92ykcvuxhm] {
    border-block-end: 0;
}

.dse-help-keys[b-92ykcvuxhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
}

.dse-help-plus[b-92ykcvuxhm],
.dse-help-or[b-92ykcvuxhm] {
    color: var(--text-subtle);
    font-size: var(--text-xs, 0.75rem);
}

.dse-help-or[b-92ykcvuxhm] {
    margin-inline: 0.2rem;
}

.dse-help-label[b-92ykcvuxhm] {
    margin: 0;
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- save bar */

.dse-savebar[b-92ykcvuxhm] {
    position: sticky;
    inset-block-end: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
}

.dse-savebar-state[b-92ykcvuxhm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ import */

.dse-import[b-92ykcvuxhm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}

.dse-import-help[b-92ykcvuxhm] {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.dse-import-title[b-92ykcvuxhm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    font-weight: 600;
}

.dse-import-title[b-92ykcvuxhm]  svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--brand-500);
}

.dse-steps[b-92ykcvuxhm] {
    margin: 0;
    padding-inline-start: var(--space-5);
    line-height: var(--leading-relaxed, 1.7);
}

.dse-cols[b-92ykcvuxhm] {
    margin: var(--space-2) 0;
    padding-inline-start: var(--space-5);
}

.dse-cols code[b-92ykcvuxhm] {
    padding: 0 var(--space-1);
    border-radius: var(--radius-xs);
    background: var(--surface-card);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

/* The warning note reuses the hint layout but keeps its amber cue. */
.dse-note[b-92ykcvuxhm] {
    margin-block-start: var(--space-3);
}

.dse-note[b-92ykcvuxhm]  svg {
    color: var(--warning-500);
}

.dse-import-actions[b-92ykcvuxhm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* The file input is driven by its label so it can wear the button styling;
   hiding it outright would take it out of the tab order with it. */
.dse-file[b-92ykcvuxhm] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.dse-file[b-92ykcvuxhm]  .dse-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dse-import-result[b-92ykcvuxhm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dse-import-summary[b-92ykcvuxhm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dse-errors[b-92ykcvuxhm] {
    margin: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    padding-inline-start: var(--space-5);
    border: 1px solid var(--danger-100);
    border-radius: var(--radius-md);
    background: var(--danger-50);
    color: var(--danger-ink);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
}

.dse-errors strong[b-92ykcvuxhm] {
    margin-inline-end: var(--space-2);
}

.dse-preview[b-92ykcvuxhm] {
    max-height: 24rem;
    overflow-y: auto;
}

.dse-import-apply[b-92ykcvuxhm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .dse-toolbar[b-92ykcvuxhm] {
        flex-direction: column;
        align-items: stretch;
    }

    .dse-col-code[b-92ykcvuxhm] {
        display: none;
    }

    .dse-savebar[b-92ykcvuxhm] {
        flex-direction: column;
        align-items: stretch;
    }

    .dse-savebar .btn[b-92ykcvuxhm] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Gallery.razor.rz.scp.css */
/* Product image gallery — the card grid and its lightbox. */

.gallery-card-wrap[b-43vdfsnq9a] { padding: var(--space-5); }

.gallery-grid[b-43vdfsnq9a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.gallery-tile[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: start;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.gallery-tile:hover[b-43vdfsnq9a] {
    transform: translateY(-3px);
    border-color: var(--border-default);
    box-shadow: var(--shadow-lg);
}

.gallery-tile:focus-visible[b-43vdfsnq9a] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--border-brand);
}

/* --- thumbnail ----------------------------------------------------------- */
.gallery-thumb[b-43vdfsnq9a] {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface-sunken);
    overflow: hidden;
}

.gallery-thumb img[b-43vdfsnq9a] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-tile:hover .gallery-thumb img[b-43vdfsnq9a] { transform: scale(1.05); }

/* Swapped in by the img's own onerror, so a missing file on the image CDN
   leaves a placeholder rather than the browser's broken-image glyph. */
.gallery-thumb-fallback[b-43vdfsnq9a] {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    color: var(--text-subtle);
}

.gallery-thumb-fallback[b-43vdfsnq9a]  svg { width: 40px; height: 40px; }

.gallery-thumb.is-broken img[b-43vdfsnq9a] { visibility: hidden; }
.gallery-thumb.is-broken .gallery-thumb-fallback[b-43vdfsnq9a] { display: grid; }

.gallery-zoom[b-43vdfsnq9a] {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: rgb(15 23 42 / 0.55);
    color: #fff;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.gallery-zoom[b-43vdfsnq9a]  svg { width: 15px; height: 15px; }
.gallery-tile:hover .gallery-zoom[b-43vdfsnq9a] { opacity: 1; }

/* --- meta ---------------------------------------------------------------- */
.gallery-meta[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-subtle);

    /* Takes the tile's spare height so the foot's margin-top:auto has room to
       push against — without it a one-line product name leaves its price
       riding higher than its neighbours'. */
    flex: 1;
}

.gallery-company[b-43vdfsnq9a] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--text-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gallery-product[b-43vdfsnq9a] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;

    /* Two lines keeps every tile the same height whatever the name's length. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stacked and pushed to the tile's foot, so every card's price sits on the
   same line however long its product name ran. */
.gallery-foot[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: auto;
    padding-top: var(--space-2);
}

.gallery-price[b-43vdfsnq9a] {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.2;
}

/* A quiet pill instead of loose grey text: it reads as one label rather than
   running into the price above it. */
.gallery-province[b-43vdfsnq9a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    line-height: 1.5;
}

.gallery-province[b-43vdfsnq9a]  svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* --- lightbox ------------------------------------------------------------ */
.lightbox[b-43vdfsnq9a] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--surface-overlay);
    backdrop-filter: blur(3px);
    animation: lightbox-in-b-43vdfsnq9a var(--duration-base) var(--ease-out);
}

.lightbox-panel[b-43vdfsnq9a] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1000px, 100%);
    max-height: 92vh;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* A bar rather than a floating close button: the counter needs somewhere to
   sit, and over the image it would have fought whatever was underneath it. */
.lightbox-bar[b-43vdfsnq9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
}

.lightbox-counter[b-43vdfsnq9a] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Stacked by default; the two-column split is the wide-screen case below. */
.lightbox-body[b-43vdfsnq9a] {
    display: grid;
    min-height: 0;
}

/* A fixed stage rather than one sized to its picture: product shots vary from
   wide boxes to tall strips, and letting each set the height made the whole
   panel jump every time the reader stepped to the next one. */
.lightbox-stage[b-43vdfsnq9a] {
    position: relative;
    display: grid;
    place-items: center;
    height: 46vh;
    min-height: 220px;
    padding: var(--space-6);
    background: var(--surface-sunken);
}

/* Scaled to the stage rather than capped at its natural size. Many of these
   files are only a couple of hundred pixels wide, and left unscaled they sat
   as a stamp in the middle of a half-panel of empty grey. The tiles already
   scale the same files the same way. */
.lightbox-stage img[b-43vdfsnq9a] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------- slideshow nav */

.lightbox-nav[b-43vdfsnq9a] {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                scale var(--duration-fast) var(--ease-out);
}

.lightbox-nav:hover:not(:disabled)[b-43vdfsnq9a] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
    scale: 1.06;
}

.lightbox-nav:disabled[b-43vdfsnq9a] { opacity: 0; pointer-events: none; }

.lightbox-nav[b-43vdfsnq9a]  svg { width: 18px; height: 18px; }

/* Logical insets, so the pair swaps sides under RTL along with the strip. */
.lightbox-prev[b-43vdfsnq9a] { inset-inline-start: var(--space-3); }
.lightbox-next[b-43vdfsnq9a] { inset-inline-end: var(--space-3); }

/* The arrows point at screen edges, not at reading order, so under RTL they
   are mirrored back — otherwise "previous" would show a right-pointing mark
   on the left-hand side. */
[dir="rtl"] .lightbox-nav[b-43vdfsnq9a]  svg { scale: -1 1; }

.lightbox-info[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    overflow-y: auto;
}

.lightbox-company[b-43vdfsnq9a] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lightbox-product[b-43vdfsnq9a] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.3;
}

/* Price and reach on one baseline, the figure carrying the weight and the
   province trailing it quietly — one fact, not two competing badges. */
.lightbox-price[b-43vdfsnq9a] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lightbox-price-value[b-43vdfsnq9a] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.lightbox-price-scope[b-43vdfsnq9a] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --------------------------------------------------- price by group ------
   A price is set per group, so the range above is a fold of these rows. Most
   images span seven groups but only two or three distinct prices, which is
   exactly what the collapsed range hid. */

.price-groups[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-subtle);
}

.price-groups-head[b-43vdfsnq9a] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-group-list[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.price-group[b-43vdfsnq9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
}

/* Zebra rather than rules: seven full-width lines read as a fence, and the
   price column needs to be scannable straight down. */
.price-group:nth-child(odd)[b-43vdfsnq9a] { background: var(--surface-sunken); }

.price-group-main[b-43vdfsnq9a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.price-group-name[b-43vdfsnq9a] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.price-group-scope[b-43vdfsnq9a] {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.price-group-value[b-43vdfsnq9a] {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

.lightbox-facts[b-43vdfsnq9a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lightbox-action[b-43vdfsnq9a] { align-self: flex-start; }

/* ----------------------------------------------------------- filmstrip */

.lightbox-strip[b-43vdfsnq9a] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
    overflow-x: auto;
    scrollbar-width: thin;
}

.lightbox-thumb[b-43vdfsnq9a] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.lightbox-thumb img[b-43vdfsnq9a] { width: 100%; height: 100%; object-fit: cover; }

.lightbox-thumb:hover[b-43vdfsnq9a] { opacity: 1; }

.lightbox-thumb.is-current[b-43vdfsnq9a] {
    opacity: 1;
    border-color: var(--brand);
}

/* Side by side once there is room. Stacked, the breakdown's seven rows pushed
   the picture off the top of a 92vh panel — the reader had to scroll back up
   to see what they were pricing. */
@media (min-width: 880px) {
    /* The row carries the height, not each column, so the two always agree.
       It is fixed rather than content-driven for the same reason the stacked
       stage is: otherwise whichever image is open sets it, and the panel jumps
       on every step. */
    .lightbox-body[b-43vdfsnq9a] {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
        grid-template-rows: 58vh;
    }

    .lightbox-stage[b-43vdfsnq9a] {
        height: 100%;
        border-inline-end: 1px solid var(--border-subtle);
    }

    /* Only the group list scrolls, not the whole column. Scrolling the column
       carried the product name off the top and the download button off the
       bottom — the two things that should never move. */
    .lightbox-info[b-43vdfsnq9a] {
        min-height: 0;
        overflow: hidden;
    }

    .price-groups[b-43vdfsnq9a],
    .price-group-list[b-43vdfsnq9a] {
        flex: 1;
        min-height: 0;
    }

    .price-group-list[b-43vdfsnq9a] {
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

@keyframes lightbox-in-b-43vdfsnq9a {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 640px) {
    .gallery-grid[b-43vdfsnq9a] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    /* Tighter padding so the arrows are not sitting on top of the picture at
       phone widths, and a smaller strip to leave the image its height. */
    .lightbox-stage[b-43vdfsnq9a] { padding: var(--space-4) var(--space-5); }
    .lightbox-nav[b-43vdfsnq9a] { width: 34px; height: 34px; }
    .lightbox-prev[b-43vdfsnq9a] { inset-inline-start: 4px; }
    .lightbox-next[b-43vdfsnq9a] { inset-inline-end: 4px; }
    .lightbox-thumb[b-43vdfsnq9a] { width: 44px; height: 44px; }
}
/* /Components/Pages/HelpCenter.razor.rz.scp.css */
/* Help Center — a video library: platform tabs and filters on top, the
   newest guide featured, then one card per topic under the sidebar's own
   headings. Colours, radii and spacing all come from the app.css tokens, so
   it follows light/dark, and offsets are logical for the RTL languages. */

/* --------------------------------------------------------------- controls */

.hc-bar[b-ew6u6yk6n9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
    padding: var(--space-4);
}

.hc-tabs[b-ew6u6yk6n9] {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.hc-tab[b-ew6u6yk6n9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.hc-tab:hover[b-ew6u6yk6n9] { color: var(--text-primary); }

.hc-tab.is-active[b-ew6u6yk6n9] {
    background: var(--surface-card);
    color: var(--brand-600);
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(15 23 42 / 0.12));
}

.hc-tab[b-ew6u6yk6n9]  svg { width: 17px; height: 17px; }

.hc-tab-count[b-ew6u6yk6n9],
.hc-lang-count[b-ew6u6yk6n9] {
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-2xs, 0.6875rem);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.hc-bar-row[b-ew6u6yk6n9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.hc-langs[b-ew6u6yk6n9] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hc-lang[b-ew6u6yk6n9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms ease;
}

.hc-lang:hover[b-ew6u6yk6n9] { border-color: var(--brand-400); color: var(--text-primary); }

.hc-lang.is-active[b-ew6u6yk6n9] {
    border-color: var(--brand-500);
    background: var(--brand-500);
    color: #fff;
}

.hc-lang.is-active .hc-lang-count[b-ew6u6yk6n9] {
    background: rgb(255 255 255 / 0.22);
    color: #fff;
}

.hc-search[b-ew6u6yk6n9] {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.hc-search[b-ew6u6yk6n9]  svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.75rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.hc-search .input[b-ew6u6yk6n9] {
    width: 100%;
    padding-inline-start: 2.3rem;
}

/* A small switch rather than a bare checkbox. */
.hc-switch[b-ew6u6yk6n9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
}

.hc-switch input[b-ew6u6yk6n9] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hc-switch-track[b-ew6u6yk6n9] {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--border-default);
    transition: background 160ms ease;
}

.hc-switch-track[b-ew6u6yk6n9]::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    transition: transform 160ms ease;
}

.hc-switch input:checked + .hc-switch-track[b-ew6u6yk6n9] { background: var(--brand-500); }
.hc-switch input:checked + .hc-switch-track[b-ew6u6yk6n9]::after { transform: translateX(16px); }
[dir="rtl"] .hc-switch input:checked + .hc-switch-track[b-ew6u6yk6n9]::after { transform: translateX(-16px); }
.hc-switch input:focus-visible + .hc-switch-track[b-ew6u6yk6n9] { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* --------------------------------------------------------------- coverage */

.hc-summary[b-ew6u6yk6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.hc-summary-text[b-ew6u6yk6n9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hc-summary-text span[b-ew6u6yk6n9] {
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
}

.hc-meter[b-ew6u6yk6n9] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-sunken);
    overflow: hidden;
}

.hc-meter > span[b-ew6u6yk6n9] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    transition: width 400ms var(--ease-out);
}

.hc-summary-pct[b-ew6u6yk6n9] {
    color: var(--brand-600);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- featured */

.hc-featured[b-ew6u6yk6n9] {
    display: grid;
    /* The video is capped so a wide screen gives the extra room to the text
       rather than to a poster that would fill the whole first screen. */
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    margin-block-end: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(600px 220px at 100% 0%, var(--brand-50), transparent 70%),
        var(--surface-card);
    box-shadow: var(--shadow-md);
}

.hc-featured-thumb[b-ew6u6yk6n9] {
    position: relative;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: #0b1220;
    overflow: hidden;
    cursor: pointer;
}

.hc-featured-thumb video[b-ew6u6yk6n9],
.hc-thumb video[b-ew6u6yk6n9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 400ms var(--ease-out);
}

.hc-featured-thumb:hover video[b-ew6u6yk6n9] { transform: scale(1.03); }

.hc-featured-body[b-ew6u6yk6n9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.hc-featured-title[b-ew6u6yk6n9] {
    margin: 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
}

.hc-featured-desc[b-ew6u6yk6n9] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.hc-featured-actions[b-ew6u6yk6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}

.hc-featured-actions .btn[b-ew6u6yk6n9]  svg { width: 16px; height: 16px; }

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

.hc-section[b-ew6u6yk6n9] { margin-block-end: var(--space-6); }

.hc-section-title[b-ew6u6yk6n9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: 700;
}

.hc-section-icon[b-ew6u6yk6n9] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
}

.hc-section-icon[b-ew6u6yk6n9]  svg { width: 16px; height: 16px; }

.hc-section-count[b-ew6u6yk6n9] {
    margin-inline-start: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cards */

.hc-grid[b-ew6u6yk6n9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
}

.hc-card[b-ew6u6yk6n9] {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: inherit;
    font: inherit;
    text-align: start;
    overflow: hidden;
    transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}

.hc-card.is-ready[b-ew6u6yk6n9] { cursor: pointer; }

.hc-card.is-ready:hover[b-ew6u6yk6n9],
.hc-card.is-ready:focus-visible[b-ew6u6yk6n9] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.hc-card.is-ready:hover video[b-ew6u6yk6n9] { transform: scale(1.05); }

.hc-card.is-ready:focus-visible[b-ew6u6yk6n9] { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.hc-thumb[b-ew6u6yk6n9] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #0b1220;
    overflow: hidden;
}

.hc-thumb.is-empty[b-ew6u6yk6n9] {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 0.35) 12px 13px),
        linear-gradient(135deg, var(--surface-sunken), var(--brand-50));
}

.hc-thumb-icon[b-ew6u6yk6n9] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--text-subtle);
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(15 23 42 / 0.12));
}

.hc-thumb-icon[b-ew6u6yk6n9]  svg { width: 22px; height: 22px; }

/* The play button over a thumbnail. */
.hc-play[b-ew6u6yk6n9] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    color: var(--brand-600);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
    transform: translate(-50%, -50%);
    transition: transform 200ms var(--ease-out), background 200ms ease, color 200ms ease;
}

[dir="rtl"] .hc-play[b-ew6u6yk6n9] { transform: translate(50%, -50%); }

/* A play triangle points right in every language; nudged right to look centred. */
.hc-play[b-ew6u6yk6n9]  svg { width: 20px; height: 20px; margin-left: 3px; }

.hc-play-lg[b-ew6u6yk6n9] { width: 68px; height: 68px; }
.hc-play-lg[b-ew6u6yk6n9]  svg { width: 28px; height: 28px; }

.hc-card.is-ready:hover .hc-play[b-ew6u6yk6n9],
.hc-featured-thumb:hover .hc-play[b-ew6u6yk6n9] {
    background: var(--brand-500);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

[dir="rtl"] .hc-card.is-ready:hover .hc-play[b-ew6u6yk6n9],
[dir="rtl"] .hc-featured-thumb:hover .hc-play[b-ew6u6yk6n9] {
    transform: translate(50%, -50%) scale(1.08);
}

.hc-card-body[b-ew6u6yk6n9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.hc-card-topic[b-ew6u6yk6n9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand-600);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
}

.hc-card-topic[b-ew6u6yk6n9]  svg { width: 13px; height: 13px; }

.hc-card-title[b-ew6u6yk6n9] {
    font-weight: 700;
    line-height: 1.35;
}

.hc-card-title.hc-muted[b-ew6u6yk6n9] { color: var(--text-muted); font-weight: 600; }

.hc-card-desc[b-ew6u6yk6n9] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hc-card.is-soon[b-ew6u6yk6n9] { background: var(--surface-sunken); border-style: dashed; }
.hc-card.is-soon .hc-card-topic[b-ew6u6yk6n9] { color: var(--text-muted); }

.hc-elsewhere[b-ew6u6yk6n9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
}

.hc-elsewhere-chip[b-ew6u6yk6n9] {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--brand-200);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--brand-700);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hc-elsewhere-chip:hover[b-ew6u6yk6n9] { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

.hc-badge[b-ew6u6yk6n9] {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hc-badge-new[b-ew6u6yk6n9] {
    background: var(--success-500);
    color: #fff;
}

.hc-thumb-badge[b-ew6u6yk6n9] {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
}

.hc-skeleton .hc-thumb[b-ew6u6yk6n9] { border-radius: 0; }
.hc-skeleton .hc-card-body[b-ew6u6yk6n9] { gap: var(--space-2); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .hc-featured[b-ew6u6yk6n9] { grid-template-columns: 1fr; gap: var(--space-4); }
    .hc-switch[b-ew6u6yk6n9] { margin-inline-start: 0; }
    .hc-search[b-ew6u6yk6n9] { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-card[b-ew6u6yk6n9], .hc-play[b-ew6u6yk6n9], .hc-thumb video[b-ew6u6yk6n9], .hc-featured-thumb video[b-ew6u6yk6n9] { transition: none; }
}
/* /Components/Pages/HelpVideoUpload.razor.rz.scp.css */
/* Help videos (management) — the upload form beside the coverage grid, then
   the library. */

/* Form and coverage side by side on a wide screen; the form takes the larger
   share because it is where the work happens. */
.hv-layout[b-gjx7k7hg3s] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    margin-block-end: var(--space-4);
}

@media (max-width: 1100px) {
    .hv-layout[b-gjx7k7hg3s] { grid-template-columns: 1fr; }
}

.hv-card[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    scroll-margin-top: var(--space-6);
}

.hv-card-head[b-gjx7k7hg3s] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.hv-card-icon[b-gjx7k7hg3s] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
}

.hv-card-icon.is-success[b-gjx7k7hg3s] {
    background: var(--success-50);
    color: var(--success-600);
}

.hv-card-icon[b-gjx7k7hg3s]  svg { width: 20px; height: 20px; }

.hv-card-title[b-gjx7k7hg3s] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
}

.hv-card-sub[b-gjx7k7hg3s] {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.hv-form[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Numbered steps: where it goes, what it is, the file. */
.hv-step[b-gjx7k7hg3s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.hv-step-num[b-gjx7k7hg3s] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
}

.hv-step[b-gjx7k7hg3s]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

/* Segmented choice for platform and language. */
.hv-seg[b-gjx7k7hg3s] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.hv-seg-sm[b-gjx7k7hg3s] { align-self: flex-start; }

.hv-seg-btn[b-gjx7k7hg3s] {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.hv-seg-btn:hover:not(:disabled)[b-gjx7k7hg3s] { color: var(--text-primary); }

.hv-seg-btn.is-active[b-gjx7k7hg3s] {
    background: var(--surface-card);
    color: var(--brand-600);
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(15 23 42 / 0.12));
}

.hv-seg-btn:disabled[b-gjx7k7hg3s] { opacity: 0.6; cursor: default; }
.hv-seg-btn[b-gjx7k7hg3s]  svg { width: 15px; height: 15px; }

.hv-textarea[b-gjx7k7hg3s] {
    min-height: 4.2rem;
    resize: vertical;
    line-height: 1.5;
}

.hv-replace[b-gjx7k7hg3s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    color: var(--warning-ink);
    font-size: var(--text-sm);
}

.hv-replace[b-gjx7k7hg3s]  svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Coverage grid ──────────────────────────────────────────────────────── */
.hv-cov-wrap[b-gjx7k7hg3s] {
    max-height: 560px;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.hv-cov[b-gjx7k7hg3s] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.hv-cov thead th[b-gjx7k7hg3s] {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: start;
    text-transform: uppercase;
}

.hv-cov thead th.hv-cov-lang[b-gjx7k7hg3s] { text-align: center; }

.hv-cov-group th[b-gjx7k7hg3s] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    text-align: start;
}

.hv-cov td[b-gjx7k7hg3s] {
    padding: 0.35rem var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
}

.hv-cov tr:last-child td[b-gjx7k7hg3s] { border-block-end: 0; }

.hv-cov-topic[b-gjx7k7hg3s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hv-cov-topic[b-gjx7k7hg3s]  svg {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.hv-cov-cell[b-gjx7k7hg3s] { width: 4.5rem; text-align: center; }

.hv-cov-dot[b-gjx7k7hg3s] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px dashed var(--border-default);
    border-radius: 50%;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    transition: all 150ms ease;
}

.hv-cov-dot:hover:not(:disabled)[b-gjx7k7hg3s] {
    border-color: var(--brand-500);
    border-style: solid;
    background: var(--brand-50);
    color: var(--brand-600);
}

.hv-cov-dot.is-done[b-gjx7k7hg3s] {
    border: 0;
    background: var(--success-500);
    color: #fff;
}

.hv-cov-dot.is-done:hover[b-gjx7k7hg3s] {
    background: var(--success-600);
    color: #fff;
    transform: scale(1.08);
}

.hv-cov-dot[b-gjx7k7hg3s]  svg { width: 14px; height: 14px; }

/* ── Library ────────────────────────────────────────────────────────────── */
.hv-library[b-gjx7k7hg3s] { padding: 0; overflow: hidden; }

.hv-library-head[b-gjx7k7hg3s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--border-subtle);
}

.hv-library-tools[b-gjx7k7hg3s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.hv-library-tools .select[b-gjx7k7hg3s] { width: auto; min-width: 9rem; }

.hv-search[b-gjx7k7hg3s] { position: relative; }

.hv-search[b-gjx7k7hg3s]  svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.7rem;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.hv-search .input[b-gjx7k7hg3s] { width: 15rem; padding-inline-start: 2.2rem; }

.hv-row-title[b-gjx7k7hg3s] { display: block; font-weight: 600; }

.hv-row-desc[b-gjx7k7hg3s] {
    display: block;
    max-width: 42ch;
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv-col-actions[b-gjx7k7hg3s] { width: 1%; text-align: end; white-space: nowrap; }

.hv-col-actions .btn-icon[b-gjx7k7hg3s]  svg { width: 15px; height: 15px; }

.hv-confirm[b-gjx7k7hg3s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--danger-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.hv-btn-danger[b-gjx7k7hg3s] {
    background: var(--danger-600);
    color: #fff;
}

.hv-btn-danger:not(:disabled):hover[b-gjx7k7hg3s] { background: var(--danger-700); }

.hv-tag.is-app[b-gjx7k7hg3s] {
    background: var(--purple-50, rgb(147 51 234 / 0.1));
    color: var(--purple-ink, #7e22ce);
}

@media (max-width: 720px) {
    .hv-search .input[b-gjx7k7hg3s] { width: 100%; }
    .hv-library-tools[b-gjx7k7hg3s], .hv-search[b-gjx7k7hg3s] { width: 100%; }
}

/* The four short answers pair up two-per-row; description and the drop zone
   stay full width because their content is long. */
.hv-grid[b-gjx7k7hg3s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 720px) {
    .hv-grid[b-gjx7k7hg3s] { grid-template-columns: 1fr; }
}

/* ── Drop zone ──────────────────────────────────────────────────────────── */
.hv-drop[b-gjx7k7hg3s] {
    position: relative;
    display: grid;
    place-items: center;
    padding: 26px 18px;
    border: 2px dashed var(--border-default, #d6deea);
    border-radius: 14px;
    background: var(--surface-raised, #f8fafc);
    transition: border-color 160ms ease, background 160ms ease;
}

.hv-drop:hover:not(.is-disabled)[b-gjx7k7hg3s] {
    border-color: var(--brand-500, #4f70d8);
    background: var(--surface-card, #fff);
}

.hv-drop.is-filled[b-gjx7k7hg3s] {
    border-style: solid;
    border-color: var(--success-500, #2ab28e);
    background: var(--surface-card, #fff);
}

.hv-drop.is-disabled[b-gjx7k7hg3s] {
    opacity: .6;
    pointer-events: none;
}

/* The real input covers the panel so the whole area is the target, not just
   the browser's own small button.
   ::deep is required: InputFile is a child component, so its <input> never
   carries this component's scope attribute and a plain .hv-drop-input rule
   silently matches nothing — which is exactly why the native
   "Choose File / No file chosen" button was still showing. */
.hv-drop[b-gjx7k7hg3s]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.hv-drop-body[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
}

.hv-drop-icon[b-gjx7k7hg3s] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-50, rgba(79, 112, 216, .12));
    color: var(--brand-500, #4f70d8);
}

.hv-drop-icon.is-filled[b-gjx7k7hg3s] {
    background: rgba(42, 178, 142, .14);
    color: var(--success-500, #2ab28e);
}

.hv-drop-title[b-gjx7k7hg3s] {
    font-weight: 600;
    color: var(--text-primary, #162033);
    word-break: break-all;
}

.hv-drop-hint[b-gjx7k7hg3s] {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.hv-progress[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--surface-raised, #f8fafc);
}

.hv-progress-head[b-gjx7k7hg3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #162033);
}

.hv-progress-pct[b-gjx7k7hg3s] {
    font-variant-numeric: tabular-nums;
    color: var(--brand-500, #4f70d8);
}

.hv-progress-track[b-gjx7k7hg3s] {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border-default, #e4e9f2);
}

.hv-progress-fill[b-gjx7k7hg3s] {
    height: 100%;
    border-radius: inherit;
    background: var(--brand-500, #4f70d8);
    transition: width 160ms linear;
}

/* Bytes moved on the left, speed and time left on the right. Tabular figures
   so the numbers don't jitter as they tick. */
.hv-progress-meta[b-gjx7k7hg3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #64748b);
}

/* Shown once every byte is sent and the API is still writing the file and its
   row: there is no number to report for that wait, so the bar slides instead
   of pretending to know a percentage. */
.hv-progress-fill.is-indeterminate[b-gjx7k7hg3s] {
    width: 38%;
    animation: hvSlide-b-gjx7k7hg3s 1.1s ease-in-out infinite;
}

@keyframes hvSlide-b-gjx7k7hg3s {
    from { transform: translateX(-110%); }
    to   { transform: translateX(300%); }
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.hv-actions[b-gjx7k7hg3s] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle, #edf1f6);
    margin-top: 4px;
}

/* The management table is usually short or empty; the shared empty state is
   sized for a full page of results and left a screenful of nothing here. */
.hv-empty[b-gjx7k7hg3s] { padding-block: 26px; }

.hv-spinner[b-gjx7k7hg3s] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hvSpin-b-gjx7k7hg3s .7s linear infinite;
}

@keyframes hvSpin-b-gjx7k7hg3s { to { transform: rotate(360deg); } }

.hv-tag[b-gjx7k7hg3s] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-50, rgba(79, 112, 216, .12));
    color: var(--brand-500, #4f70d8);
    font-size: 11px;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .hv-progress-fill.is-indeterminate[b-gjx7k7hg3s],
    .hv-spinner[b-gjx7k7hg3s] { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Form guidance: required marks, counters, field errors, finished steps.
   ═════════════════════════════════════════════════════════════════════════ */

.hv-alert[b-gjx7k7hg3s] { align-items: center; flex-wrap: wrap; }
.hv-alert .btn[b-gjx7k7hg3s]  svg { width: 14px; height: 14px; }

.hv-req[b-gjx7k7hg3s] { color: var(--danger-600); font-weight: 700; }

.hv-label-row[b-gjx7k7hg3s] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.hv-count[b-gjx7k7hg3s] {
    color: var(--text-subtle);
    font-size: var(--text-xs, 0.75rem);
    font-variant-numeric: tabular-nums;
}

.hv-count.is-near[b-gjx7k7hg3s] { color: var(--warning-ink); font-weight: 600; }

.hv-form .is-invalid[b-gjx7k7hg3s],
.hv-drop.is-invalid[b-gjx7k7hg3s] {
    border-color: var(--danger-500) !important;
    box-shadow: 0 0 0 3px var(--danger-50);
}

.hv-error[b-gjx7k7hg3s] {
    margin: var(--space-1) 0 0;
    color: var(--danger-ink);
    font-size: var(--text-sm);
    font-weight: 500;
}

.hv-link[b-gjx7k7hg3s] {
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-600);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.hv-step.is-done .hv-step-num[b-gjx7k7hg3s] { background: var(--success-500); }
.hv-step.is-done .hv-step-label[b-gjx7k7hg3s] { color: var(--text-primary); }
.hv-step-num[b-gjx7k7hg3s]  svg { width: 13px; height: 13px; }

/* ═════════════════════════════════════════════════════════════════════════
   The file: drag highlight, picked state, local preview.
   ═════════════════════════════════════════════════════════════════════════ */

.hv-drop.is-dragover[b-gjx7k7hg3s] {
    border-style: solid;
    border-color: var(--brand-500);
    background: var(--brand-50);
    transform: scale(1.01);
}

.hv-drop[b-gjx7k7hg3s] { transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }

/* Once a file is in, the zone shrinks to a one-line "replace" bar and the
   preview below takes the attention. */
.hv-drop.is-filled[b-gjx7k7hg3s] { padding: var(--space-3) var(--space-4); }

.hv-drop-body.is-row[b-gjx7k7hg3s] {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.hv-drop-body.is-row .hv-drop-icon[b-gjx7k7hg3s] { width: 32px; height: 32px; border-radius: 9px; }

.hv-file[b-gjx7k7hg3s] {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.hv-file-video[b-gjx7k7hg3s] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background: #000;
}

.hv-file-info[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.hv-file-facts[b-gjx7k7hg3s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
}

.hv-file-facts dt[b-gjx7k7hg3s] {
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
}

.hv-file-facts dd[b-gjx7k7hg3s] {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hv-check[b-gjx7k7hg3s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.hv-check[b-gjx7k7hg3s]  svg { width: 16px; height: 16px; flex-shrink: 0; }
.hv-check.is-pending[b-gjx7k7hg3s] { background: var(--surface-card); color: var(--text-secondary); }
.hv-check.is-ok[b-gjx7k7hg3s] { background: var(--success-50); color: var(--success-ink); }
.hv-check.is-bad[b-gjx7k7hg3s] { background: var(--warning-50); color: var(--warning-ink); }

.hv-file-info .btn[b-gjx7k7hg3s]  svg { width: 14px; height: 14px; }

/* The shared spinner is white for buttons; this one sits on a light card. */
.hv-spinner.is-dark[b-gjx7k7hg3s] {
    border-color: var(--border-default);
    border-top-color: var(--brand-500);
}

@media (max-width: 720px) {
    .hv-file[b-gjx7k7hg3s] { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Library: live / removed tabs, thumbnails, in-place editing.
   ═════════════════════════════════════════════════════════════════════════ */

.hv-tabs[b-gjx7k7hg3s] {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}

.hv-tab[b-gjx7k7hg3s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hv-tab.is-active[b-gjx7k7hg3s] {
    background: var(--surface-card);
    color: var(--brand-600);
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(15 23 42 / 0.12));
}

.hv-tab[b-gjx7k7hg3s]  svg { width: 15px; height: 15px; }

.hv-tab-count[b-gjx7k7hg3s] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-2xs, 0.6875rem);
    text-align: center;
}

.hv-library-note[b-gjx7k7hg3s] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-5);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--info-50);
    color: var(--info-ink);
    font-size: var(--text-sm);
}

.hv-library-note[b-gjx7k7hg3s]  svg { width: 15px; height: 15px; flex-shrink: 0; }

.hv-table td[b-gjx7k7hg3s] { vertical-align: middle; }

.hv-col-thumb[b-gjx7k7hg3s] { width: 104px; }

.hv-thumb[b-gjx7k7hg3s] {
    position: relative;
    display: block;
    width: 88px;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: #0b1220;
    overflow: hidden;
    cursor: pointer;
}

.hv-thumb video[b-gjx7k7hg3s] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hv-thumb-play[b-gjx7k7hg3s] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(2 8 23 / 0.25);
    color: #fff;
    opacity: 0.85;
    transition: background 150ms ease, opacity 150ms ease;
}

.hv-thumb:hover .hv-thumb-play[b-gjx7k7hg3s] { background: rgb(2 8 23 / 0.45); opacity: 1; }
.hv-thumb-play[b-gjx7k7hg3s]  svg { width: 18px; height: 18px; }

.hv-col-title[b-gjx7k7hg3s] { min-width: 16rem; }

.hv-row-flag[b-gjx7k7hg3s] {
    display: inline-block;
    margin-block-start: 0.2rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--warning-50);
    color: var(--warning-ink);
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 700;
}

.hv-edit[b-gjx7k7hg3s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hv-edit-actions[b-gjx7k7hg3s] { display: flex; gap: var(--space-2); }
.hv-edit-actions .btn[b-gjx7k7hg3s]  svg,
.hv-col-actions .btn[b-gjx7k7hg3s]  svg { width: 14px; height: 14px; }

/* The row an upload just wrote, so the eye finds it in a long list. */
.hv-row-new > td[b-gjx7k7hg3s] { animation: hv-flash-b-gjx7k7hg3s 2.4s ease-out 1; background: var(--success-50); }

@keyframes hv-flash-b-gjx7k7hg3s {
    0%, 30% { background: var(--success-100); }
    100%    { background: var(--success-50); }
}

@media (prefers-reduced-motion: reduce) {
    .hv-row-new > td[b-gjx7k7hg3s] { animation: none; }
    .hv-drop.is-dragover[b-gjx7k7hg3s] { transform: none; }
}
/* /Components/Pages/ManageOrders.razor.rz.scp.css */
/* Manage Orders.

   Only what the shared sheet has no class for: the status tiles, the order
   panel's layout, the line editor. Colour, radius and spacing come from the
   app.css tokens so light and dark both hold, and every offset is a logical
   property so Arabic and Kurdish mirror correctly.

   ::deep wherever an <Icon> is sized: the svg is rendered by the Icon
   component, so this sheet's scope attribute never lands on it. */

.visually-hidden[b-4l06phfp0k] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.btn[b-4l06phfp0k]  svg { width: 16px; height: 16px; flex-shrink: 0; }
.alert[b-4l06phfp0k]  svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ------------------------------------------------------------ status tiles */

.mo-tiles[b-4l06phfp0k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.mo-tile[b-4l06phfp0k] {
    --tile-accent: var(--brand-500);
    --tile-soft: var(--brand-50);
    --tile-ink: var(--brand-ink);

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-base);
}

.mo-tile[b-4l06phfp0k]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--tile-accent);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.mo-tile:hover[b-4l06phfp0k] { border-color: var(--border-default); box-shadow: var(--shadow-md); }
.mo-tile:focus-visible[b-4l06phfp0k] { outline: 2px solid var(--tile-accent); outline-offset: 2px; }

.mo-tile.is-active[b-4l06phfp0k] {
    border-color: var(--tile-accent);
    background: color-mix(in srgb, var(--tile-soft) 55%, var(--surface-card));
    box-shadow: var(--shadow-md);
}

.mo-tile.is-active[b-4l06phfp0k]::before { opacity: 1; }

.mo-tile-warning[b-4l06phfp0k] { --tile-accent: var(--warning-500); --tile-soft: var(--warning-50); --tile-ink: var(--warning-ink); }
.mo-tile-success[b-4l06phfp0k] { --tile-accent: var(--success-500); --tile-soft: var(--success-50); --tile-ink: var(--success-ink); }
.mo-tile-danger[b-4l06phfp0k]  { --tile-accent: var(--danger-500);  --tile-soft: var(--danger-50);  --tile-ink: var(--danger-ink); }

.mo-tile-icon[b-4l06phfp0k] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--tile-soft);
    color: var(--tile-ink);
}

.mo-tile-icon[b-4l06phfp0k]  svg { width: 20px; height: 20px; }

.mo-tile-body[b-4l06phfp0k] { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.mo-tile-count[b-4l06phfp0k] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.mo-tile-label[b-4l06phfp0k] {
    margin-top: 2px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mo-tile-value[b-4l06phfp0k] {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--tile-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mo-tile-value small[b-4l06phfp0k] { font-weight: var(--weight-medium); opacity: 0.7; }

@media (max-width: 900px) {
    .mo-tiles[b-4l06phfp0k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mo-requests[b-4l06phfp0k] { align-items: center; }

/* -------------------------------------------------------------------- grid */

.mo-grid td[b-4l06phfp0k] { vertical-align: top; }

/* "No orders" sits inside the table so the header filters stay reachable. */
.mo-grid .mo-empty-row td[b-4l06phfp0k] { vertical-align: middle; }
.mo-grid .mo-empty-row:hover td[b-4l06phfp0k] { background: transparent; }

.mo-cell-main[b-4l06phfp0k] {
    display: block;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: 1.35;
}

.mo-cell-sub[b-4l06phfp0k] {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

/* Ids run to 27 characters; the full one is in the tooltip and the panel. */
.mo-id[b-4l06phfp0k] {
    max-width: 150px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mo-col-wide[b-4l06phfp0k] { min-width: 180px; }

/* Cancel reason and comment: one line, cut off, full text in the tooltip. */
.mo-col-text[b-4l06phfp0k] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-to-pending[b-4l06phfp0k] { white-space: nowrap; }

.mo-ds-chips[b-4l06phfp0k] { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.mo-ds-chip[b-4l06phfp0k] {
    display: inline-block;
    max-width: 200px;
    padding: 2px var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mo-request-badge[b-4l06phfp0k] { margin-top: var(--space-1); }

.badge[b-4l06phfp0k]  svg { width: 12px; height: 12px; }

.mo-row-actions[b-4l06phfp0k] {
    display: inline-flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.mo-row-actions[b-4l06phfp0k]  svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ order panel */

.mo-panel[b-4l06phfp0k] {
    width: min(72rem, 100%);
    height: min(92vh, 100%);
    max-height: min(92vh, 100%);
}

.mo-head[b-4l06phfp0k] { align-items: flex-start; }
.mo-head-main[b-4l06phfp0k] { min-width: 0; }

.mo-eyebrow-id[b-4l06phfp0k] { font-family: var(--font-mono); text-transform: none; letter-spacing: 0.01em; }

.mo-head .drill-title[b-4l06phfp0k] {
    font-size: var(--text-xl);
    overflow-wrap: anywhere;
}

.mo-head-meta[b-4l06phfp0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
}

.mo-meta-item[b-4l06phfp0k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.mo-meta-item[b-4l06phfp0k]  svg { width: 14px; height: 14px; color: var(--text-muted); }

.mo-head .btn-icon[b-4l06phfp0k]  svg { width: 17px; height: 17px; }

.mo-body[b-4l06phfp0k] { flex: 1 1 auto; background: var(--surface-page); }

.mo-inline-loading[b-4l06phfp0k] { padding-block: var(--space-6); }

.mo-alert-actions[b-4l06phfp0k] { align-items: center; flex-wrap: wrap; }

/* Cancel reason, shown on a canceled order. */
.mo-note[b-4l06phfp0k] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.mo-note-danger[b-4l06phfp0k] { border-color: var(--danger-100); background: var(--danger-50); color: var(--danger-ink); }

.mo-note-label[b-4l06phfp0k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mo-note-label[b-4l06phfp0k]  svg { width: 14px; height: 14px; }
.mo-note p[b-4l06phfp0k] { margin: var(--space-1) 0 0; white-space: pre-wrap; }

/* Four facts across the top of an order. */
.mo-summary[b-4l06phfp0k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    overflow: hidden;
}

.mo-summary-cell[b-4l06phfp0k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}

.mo-summary-cell + .mo-summary-cell[b-4l06phfp0k] { border-inline-start: 1px solid var(--border-subtle); }

.mo-summary-label[b-4l06phfp0k] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mo-summary-value[b-4l06phfp0k] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mo-summary-value small[b-4l06phfp0k] { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); }
.mo-summary-text[b-4l06phfp0k] { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.mo-summary-total .mo-summary-value[b-4l06phfp0k] { color: var(--text-brand); }

@media (max-width: 700px) {
    .mo-summary[b-4l06phfp0k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mo-summary-cell:nth-child(3)[b-4l06phfp0k] { border-inline-start: 0; }
    .mo-summary-cell:nth-child(n + 3)[b-4l06phfp0k] { border-top: 1px solid var(--border-subtle); }
}

.mo-section[b-4l06phfp0k] {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
}

.mo-section-head[b-4l06phfp0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mo-section-title[b-4l06phfp0k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.mo-section-head .mo-section-title[b-4l06phfp0k] { margin: 0; }
.mo-section-title[b-4l06phfp0k]  svg { width: 17px; height: 17px; color: var(--text-brand); }

/* Header, read-only: label over value, three to a row. */
.mo-facts[b-4l06phfp0k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: 0;
}

.mo-facts dt[b-4l06phfp0k] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mo-facts dd[b-4l06phfp0k] {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.mo-facts-wide[b-4l06phfp0k] { grid-column: 1 / -1; }

/* Header, editing. */
.mo-form[b-4l06phfp0k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.mo-form-wide[b-4l06phfp0k] { grid-column: 1 / -1; }

@media (max-width: 800px) {
    .mo-form[b-4l06phfp0k] { grid-template-columns: minmax(0, 1fr); }
}

.mo-textarea[b-4l06phfp0k] {
    height: auto;
    min-height: 64px;
    padding-block: var(--space-2);
    resize: vertical;
    line-height: 1.45;
    font-family: inherit;
}

.mo-counter[b-4l06phfp0k] {
    align-self: flex-end;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- lines */

.mo-bulk[b-4l06phfp0k] { display: flex; align-items: center; gap: var(--space-2); }

.mo-add[b-4l06phfp0k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px auto;
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.mo-add-pick[b-4l06phfp0k] { min-width: 0; }
.mo-add-btn[b-4l06phfp0k] { white-space: nowrap; }

@media (max-width: 700px) {
    .mo-add[b-4l06phfp0k] { grid-template-columns: 1fr 1fr; }
    .mo-add-pick[b-4l06phfp0k], .mo-add-btn[b-4l06phfp0k] { grid-column: 1 / -1; }
}

.input-sm[b-4l06phfp0k], .select-sm[b-4l06phfp0k] {
    height: 32px;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
}

.select-sm[b-4l06phfp0k] { padding-inline-end: var(--space-6); }

.mo-lines-wrap[b-4l06phfp0k] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: auto;
}

.mo-lines tbody td[b-4l06phfp0k] { padding-block: var(--space-2); }

.mo-col-n[b-4l06phfp0k] {
    width: 36px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.mo-num[b-4l06phfp0k] { width: 84px; text-align: end; font-variant-numeric: tabular-nums; }

.mo-ds-select[b-4l06phfp0k] { min-width: 160px; max-width: 240px; }

.mo-ds-select.is-missing[b-4l06phfp0k] {
    border-color: var(--warning-500);
    background-color: var(--warning-50);
    color: var(--warning-ink);
}

/* Edited, not yet saved: a tint on the row's leading edge. */
.mo-lines tr.mo-line-changed > td:first-child[b-4l06phfp0k] { box-shadow: inset 3px 0 0 var(--warning-500); }
.mo-lines tr.mo-line-new > td:first-child[b-4l06phfp0k] { box-shadow: inset 3px 0 0 var(--success-500); }

[dir="rtl"] .mo-lines tr.mo-line-changed > td:first-child[b-4l06phfp0k] { box-shadow: inset -3px 0 0 var(--warning-500); }
[dir="rtl"] .mo-lines tr.mo-line-new > td:first-child[b-4l06phfp0k] { box-shadow: inset -3px 0 0 var(--success-500); }

.mo-mini-badge[b-4l06phfp0k] { margin-inline-start: var(--space-1); padding-block: 0; font-size: var(--text-2xs); }

.mo-lines tfoot td[b-4l06phfp0k] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-default);
    background: var(--surface-sunken);
    font-variant-numeric: tabular-nums;
}

.mo-foot-label[b-4l06phfp0k] {
    text-align: end;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mo-lines .btn-icon[b-4l06phfp0k]  svg { width: 15px; height: 15px; }

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

.mo-foot[b-4l06phfp0k] { background: var(--surface-card); }

.mo-foot-actions[b-4l06phfp0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-inline-start: auto;
}

.mo-dirty[b-4l06phfp0k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.mo-dirty.is-dirty[b-4l06phfp0k] { color: var(--warning-ink); font-weight: var(--weight-medium); }
.mo-dirty[b-4l06phfp0k]  svg { width: 16px; height: 16px; }

.mo-foot .u-small[b-4l06phfp0k]  svg { width: 14px; height: 14px; vertical-align: -2px; }

.mo-btn-success[b-4l06phfp0k] { background: var(--success-600); border-color: var(--success-600); color: #fff; }
.mo-btn-success:not(:disabled):hover[b-4l06phfp0k] { background: var(--success-700); border-color: var(--success-700); }

.mo-btn-danger[b-4l06phfp0k] { color: var(--danger-ink); }
.mo-btn-danger:not(:disabled):hover[b-4l06phfp0k] { background: var(--danger-50); color: var(--danger-ink); }

.btn-primary.mo-btn-danger[b-4l06phfp0k] { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn-primary.mo-btn-danger:not(:disabled):hover[b-4l06phfp0k] { background: var(--danger-700); border-color: var(--danger-700); color: #fff; }

/* ------------------------------------------------------------------ confirm */

.mo-confirm-backdrop[b-4l06phfp0k] {
    z-index: calc(var(--z-modal) + 10);
    align-items: center;
    padding: var(--space-4);
}

.mo-confirm[b-4l06phfp0k] {
    --confirm-soft: var(--brand-50);
    --confirm-ink: var(--brand-ink);

    width: min(28rem, 100%);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    box-shadow: var(--shadow-xl);
    text-align: center;
    animation: mo-pop-b-4l06phfp0k var(--duration-base) var(--ease-spring) both;
}

.mo-confirm-success[b-4l06phfp0k] { --confirm-soft: var(--success-50); --confirm-ink: var(--success-ink); }
.mo-confirm-danger[b-4l06phfp0k]  { --confirm-soft: var(--danger-50);  --confirm-ink: var(--danger-ink); }

.mo-confirm-icon[b-4l06phfp0k] {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--confirm-soft);
    color: var(--confirm-ink);
}

.mo-confirm-icon[b-4l06phfp0k]  svg { width: 26px; height: 26px; }

.mo-confirm-title[b-4l06phfp0k] {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.mo-confirm-text[b-4l06phfp0k] { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }

.mo-confirm-field[b-4l06phfp0k] { margin-top: var(--space-4); text-align: start; }

.mo-confirm-actions[b-4l06phfp0k] {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.mo-confirm-actions .btn[b-4l06phfp0k] { min-width: 120px; justify-content: center; }

@keyframes mo-pop-b-4l06phfp0k {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mo-confirm[b-4l06phfp0k] { animation: none; }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-grid[b-yvtsy1sdpx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.setting-heading[b-yvtsy1sdpx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.setting-icon[b-yvtsy1sdpx] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--setting-bg, var(--brand-50));
    color: var(--setting-color, var(--brand-ink));
}

.setting-icon[b-yvtsy1sdpx]  svg { width: 19px; height: 19px; }

.setting-icon-brand[b-yvtsy1sdpx]  { --setting-bg: var(--brand-50);  --setting-color: var(--brand-ink); }
.setting-icon-info[b-yvtsy1sdpx]   { --setting-bg: var(--info-50);   --setting-color: var(--info-ink); }
.setting-icon-purple[b-yvtsy1sdpx] { --setting-bg: var(--purple-50); --setting-color: var(--purple-ink); }

.setting-note[b-yvtsy1sdpx] { margin-top: var(--space-3); }

/* ------------------------------------------------------------- language */
.lang-options[b-yvtsy1sdpx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lang-option[b-yvtsy1sdpx] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    padding-inline-end: var(--space-10);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-base);
}

.lang-option:hover[b-yvtsy1sdpx] {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.lang-option.is-active[b-yvtsy1sdpx] {
    border-color: var(--brand-500);
    background: var(--brand-50);
}

.lang-native[b-yvtsy1sdpx] {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.lang-meta[b-yvtsy1sdpx] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.lang-option[b-yvtsy1sdpx]  .lang-check {
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--brand-ink);
}

/* --------------------------------------------------------------- detail */
.detail-list[b-yvtsy1sdpx] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-row[b-yvtsy1sdpx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.detail-row:last-child[b-yvtsy1sdpx] { border-bottom: 0; }

.detail-row dt[b-yvtsy1sdpx] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.detail-row dd[b-yvtsy1sdpx] {
    margin: 0;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/BrandMark.razor.rz.scp.css */
/* The logo is a bitmap with its own baked-in colours, so it always needs a
   light plate behind it — including in dark mode, where a white-background
   PNG would otherwise sit as a bright square on a dark panel. Callers supply
   the plate; this rule just makes the image itself behave inside it. */
.brand-mark[b-ni796o9vtc] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
/* /Components/Shared/ExportButton.razor.rz.scp.css */
/* ---------------------------------------------------------------- dialog */

/* The <dialog> is only the frame; .export-body carries the padding so a
   click on the frame itself can only be a click on the backdrop. */
.export-dialog[b-yfphgc7xef] {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: export-pop-b-yfphgc7xef 260ms var(--ease-out);
}

.export-dialog[b-yfphgc7xef]::backdrop {
    background: rgb(15 23 42 / 0.45);
    backdrop-filter: blur(3px);
    animation: export-fade-b-yfphgc7xef 200ms ease-out;
}

.export-body[b-yfphgc7xef] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
}

.export-title[b-yfphgc7xef] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
}

.export-text[b-yfphgc7xef] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.export-actions[b-yfphgc7xef] {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ------------------------------------------------------------- the ring */

.export-ring[b-yfphgc7xef] {
    position: relative;
    width: 88px;
    height: 88px;
}

.export-ring-spin[b-yfphgc7xef] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: export-spin-b-yfphgc7xef 1.1s linear infinite;
}

.export-ring-track[b-yfphgc7xef],
.export-ring-arc[b-yfphgc7xef] {
    fill: none;
    stroke-width: 5;
}

.export-ring-track[b-yfphgc7xef] { stroke: var(--brand-100); }

.export-ring-arc[b-yfphgc7xef] {
    stroke: var(--brand-500);
    stroke-linecap: round;
    stroke-dasharray: 60 176;
    animation: export-arc-b-yfphgc7xef 1.6s ease-in-out infinite;
}

/* A spreadsheet in the middle, breathing gently while the server works. */
.export-sheet[b-yfphgc7xef] {
    position: absolute;
    inset: 26px;
    width: 36px;
    height: 36px;
    fill: var(--success-50);
    stroke: var(--success-600);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: export-breathe-b-yfphgc7xef 1.8s ease-in-out infinite;
}

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

.export-bar[b-yfphgc7xef] {
    position: relative;
    width: 100%;
    height: 8px;
    margin-top: var(--space-2);
    border-radius: 999px;
    background: var(--brand-50);
    overflow: hidden;
}

.export-bar > span[b-yfphgc7xef] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    transition: width 300ms var(--ease-out);
}

/* No length to measure against yet — the server is still building — so a
   band sweeps across instead of pretending to know how far along it is. */
.export-bar.is-indeterminate > span[b-yfphgc7xef] {
    position: absolute;
    inset-block: 0;
    animation: export-sweep-b-yfphgc7xef 1.4s ease-in-out infinite;
}

.export-meta[b-yfphgc7xef] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.export-meta > span[b-yfphgc7xef] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.export-meta[b-yfphgc7xef]  svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------- badges */

.export-badge[b-yfphgc7xef] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    animation: export-pop-b-yfphgc7xef 320ms var(--ease-out);
}

.export-badge[b-yfphgc7xef]  svg { width: 30px; height: 30px; }

.export-badge.is-success[b-yfphgc7xef] { background: var(--success-50); color: var(--success-600); }
.export-badge.is-warning[b-yfphgc7xef] { background: var(--warning-50); color: var(--warning-600); }
.export-badge.is-danger[b-yfphgc7xef]  { background: var(--danger-50);  color: var(--danger-600); }

/* ---------------------------------------------------------- animations */

@keyframes export-spin-b-yfphgc7xef { to { transform: rotate(360deg); } }

@keyframes export-arc-b-yfphgc7xef {
    0%   { stroke-dasharray: 20 176; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 100 176; stroke-dashoffset: -30; }
    100% { stroke-dasharray: 20 176; stroke-dashoffset: -176; }
}

@keyframes export-breathe-b-yfphgc7xef {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes export-sweep-b-yfphgc7xef {
    0%   { inset-inline-start: -35%; }
    100% { inset-inline-start: 100%; }
}

@keyframes export-pop-b-yfphgc7xef {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes export-fade-b-yfphgc7xef { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .export-dialog[b-yfphgc7xef],
    .export-dialog[b-yfphgc7xef]::backdrop,
    .export-badge[b-yfphgc7xef],
    .export-sheet[b-yfphgc7xef],
    .export-ring-arc[b-yfphgc7xef] { animation: none; }

    .export-ring-spin[b-yfphgc7xef] { animation-duration: 3s; }
    .export-bar.is-indeterminate > span[b-yfphgc7xef] { animation-duration: 3s; }
}
/* /Components/Shared/HelpPlayer.razor.rz.scp.css */
/* Help video player — a modal dialog: video and its details on one side, the
   playlist on the other, stacking on narrow screens. */

.hp[b-klgu77y1ks] {
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: 0 30px 80px rgb(2 8 23 / 0.45);
    overflow: hidden;
    animation: hp-in-b-klgu77y1ks 260ms var(--ease-out);
}

.hp[b-klgu77y1ks]::backdrop {
    background: rgb(2 8 23 / 0.72);
    backdrop-filter: blur(4px);
    animation: hp-fade-b-klgu77y1ks 200ms ease-out;
}

.hp-shell[b-klgu77y1ks] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    max-height: calc(100vh - 32px);
}

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

.hp-main[b-klgu77y1ks] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

.hp-stage[b-klgu77y1ks] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.hp-video[b-klgu77y1ks] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.hp-info[b-klgu77y1ks] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.hp-info-text[b-klgu77y1ks] {
    min-width: 0;
}

.hp-topic[b-klgu77y1ks] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--brand-600);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hp-topic[b-klgu77y1ks]  svg {
    width: 14px;
    height: 14px;
}

.hp-title[b-klgu77y1ks] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
}

.hp-desc[b-klgu77y1ks] {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.hp-info-actions[b-klgu77y1ks] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.hp-info-actions .btn[b-klgu77y1ks]  svg {
    width: 16px;
    height: 16px;
}

.hp-chip[b-klgu77y1ks] {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

/* -------------------------------------------------------------- playlist */

.hp-side[b-klgu77y1ks] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-inline-start: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
}

.hp-side-head[b-klgu77y1ks] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-subtle);
    font-weight: 700;
}

.hp-side-count[b-klgu77y1ks] {
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hp-close[b-klgu77y1ks] {
    margin-inline-start: auto;
}

.hp-list[b-klgu77y1ks] {
    flex: 1;
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    list-style: none;
}

.hp-item[b-klgu77y1ks] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background 140ms ease;
}

.hp-item:hover[b-klgu77y1ks] {
    background: var(--surface-card);
}

.hp-item.is-current[b-klgu77y1ks] {
    background: var(--brand-50);
}

.hp-item-icon[b-klgu77y1ks] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--brand-500);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.hp-item.is-current .hp-item-icon[b-klgu77y1ks] {
    background: var(--brand-500);
    color: #fff;
    box-shadow: none;
}

.hp-item-icon[b-klgu77y1ks]  svg {
    width: 16px;
    height: 16px;
}

.hp-item-text[b-klgu77y1ks] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-item-title[b-klgu77y1ks] {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-item-topic[b-klgu77y1ks] {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .hp-shell[b-klgu77y1ks] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .hp-main[b-klgu77y1ks] {
        overflow: visible;
    }

    .hp-side[b-klgu77y1ks] {
        border-inline-start: 0;
        border-block-start: 1px solid var(--border-subtle);
    }

    .hp-list[b-klgu77y1ks] {
        max-height: 40vh;
    }

    .hp-info[b-klgu77y1ks] {
        flex-direction: column;
    }
}

@keyframes hp-in-b-klgu77y1ks {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes hp-fade-b-klgu77y1ks { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .hp[b-klgu77y1ks], .hp[b-klgu77y1ks]::backdrop { animation: none; }
}
/* /Components/Shared/MultiSelectFilter.razor.rz.scp.css */
.ms-field[b-vbim31hjj9] { min-width: 190px; flex: 1 1 190px; }

.ms[b-vbim31hjj9] { position: relative; }

.ms-trigger[b-vbim31hjj9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: start;
    cursor: pointer;
}

.ms-trigger[b-vbim31hjj9]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.ms-trigger[b-vbim31hjj9]  .ms-caret { margin-inline-start: auto; }

.ms.is-open .ms-trigger[b-vbim31hjj9] {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

.ms-count[b-vbim31hjj9] {
    flex-shrink: 0;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--brand-50);
    color: var(--brand-ink);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
}

.ms-panel[b-vbim31hjj9] {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    width: min(340px, 86vw);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    max-height: 400px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xl);
    animation: scale-in var(--duration-fast) var(--ease-out) both;
    overflow: hidden;
}

/* Keep the panel on screen when the filter sits at the trailing edge. */
.ms-field:last-child .ms-panel[b-vbim31hjj9],
.ms-field:nth-last-child(2) .ms-panel[b-vbim31hjj9] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.ms-head[b-vbim31hjj9] {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.ms-list[b-vbim31hjj9] {
    overflow-y: auto;
    padding: var(--space-1);
    overscroll-behavior: contain;
}

.ms-option[b-vbim31hjj9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.ms-option:hover[b-vbim31hjj9] { background: var(--surface-hover); }

.ms-option input[b-vbim31hjj9] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--brand-500);
    cursor: pointer;
}

/* Colour dot, so status reads at a glance in the list as well as the table. */
.ms-dot[b-vbim31hjj9] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text-subtle);
}

.ms-dot.dot-warning[b-vbim31hjj9] { background: var(--warning-500); }
.ms-dot.dot-success[b-vbim31hjj9] { background: var(--success-500); }
.ms-dot.dot-danger[b-vbim31hjj9] { background: var(--danger-500); }

.ms-option-text[b-vbim31hjj9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ms-secondary[b-vbim31hjj9] {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.ms-option-all[b-vbim31hjj9] {
    margin: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ms-empty[b-vbim31hjj9] {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

.ms-foot[b-vbim31hjj9] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
}
/* /Components/Shared/SearchSelect.razor.rz.scp.css */
/* Searchable single-select.

   Deliberately shaped like MultiSelectFilter so the two read as one control
   family: same trigger height, same panel, same click-away. The differences
   are the ones that follow from picking one value — no checkboxes, no footer
   Apply, and a check mark against the current choice. */

.ss-field[b-chl2909o0j] { min-width: 190px; flex: 1 1 190px; }

.ss[b-chl2909o0j] { position: relative; }

.ss-trigger[b-chl2909o0j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: start;
    cursor: pointer;
}

.ss-trigger:disabled[b-chl2909o0j] {
    cursor: not-allowed;
    opacity: 0.6;
}

.ss-trigger[b-chl2909o0j]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.ss-trigger[b-chl2909o0j]  .ss-caret { margin-inline-start: auto; }

.ss.is-open .ss-trigger[b-chl2909o0j] {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

.ss-value[b-chl2909o0j] { font-weight: var(--weight-medium, 500); }
.ss-placeholder[b-chl2909o0j] { color: var(--text-subtle); }

.ss-panel[b-chl2909o0j] {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    width: min(340px, 86vw);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    max-height: 400px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xl);
    animation: scale-in var(--duration-fast) var(--ease-out) both;
    overflow: hidden;
}

/* Keep the panel on screen when the picker sits at the trailing edge. */
.ss-field:last-child .ss-panel[b-chl2909o0j],
.ss-field:nth-last-child(2) .ss-panel[b-chl2909o0j] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.ss-head[b-chl2909o0j] {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.ss-list[b-chl2909o0j] {
    overflow-y: auto;
    padding: var(--space-1);
    overscroll-behavior: contain;
}

.ss-option[b-chl2909o0j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-base);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.ss-option:hover[b-chl2909o0j] { background: var(--surface-hover); }

.ss-option:focus-visible[b-chl2909o0j] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.ss-option.is-current[b-chl2909o0j] {
    background: var(--brand-50);
    color: var(--brand-ink);
}

.ss-option[b-chl2909o0j]  .ss-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.ss-option-text[b-chl2909o0j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ss-secondary[b-chl2909o0j] {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.ss-empty[b-chl2909o0j] {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

.ss-foot[b-chl2909o0j] {
    display: flex;
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
}
/* /Components/Shared/ThemePicker.razor.rz.scp.css */
/* Segmented control. The active segment is set by app.js adding .is-active,
   not by Blazor, so it survives static rendering and enhanced navigation. */

.theme-picker[b-ox4l33ewrf] {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
}

.theme-option[b-ox4l33ewrf] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min); /* WCAG 2.2 SC 2.5.8 minimum target size */
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-base);
}

.theme-option:hover[b-ox4l33ewrf] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.theme-option.is-active[b-ox4l33ewrf] {
    background: var(--surface-card);
    color: var(--text-brand);
    box-shadow: var(--shadow-xs);
}

.theme-option[b-ox4l33ewrf]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Icon-only variant. */
.theme-picker.is-compact .theme-option[b-ox4l33ewrf] {
    padding: var(--space-2);
}