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

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

/* Caps the measure on ultrawide displays. Without this a 3440px monitor
   stretches tables and headings to an unreadable line length. */
.app-content-inner[b-3m1c9ssd86] {
    max-width: 1600px;
    margin-inline: auto;
}

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

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

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

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

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

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

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

.gallery-foot[b-43vdfsnq9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-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);
}

.gallery-province[b-43vdfsnq9a] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-province[b-43vdfsnq9a]  svg { width: 11px; height: 11px; flex-shrink: 0; }

/* --- 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(760px, 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;
}

.lightbox-close[b-43vdfsnq9a] {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    z-index: 1;
    background: var(--surface-card);
}

.lightbox-stage[b-43vdfsnq9a] {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: var(--space-6);
    background: var(--surface-sunken);
}

.lightbox-stage img[b-43vdfsnq9a] {
    max-width: 100%;
    max-height: 58vh;
    object-fit: contain;
}

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

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

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

@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)); }
    .lightbox-stage[b-43vdfsnq9a] { padding: var(--space-4); }
}
/* /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/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);
}