/* /Components/Shared/AppBadge.razor.rz.scp.css */
.app-badge[b-uls9ah3sou] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--pos-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
}

.app-badge--pill[b-uls9ah3sou] { border-radius: var(--pos-radius-full); }

/* ── Sizes ── */
.app-badge--sm[b-uls9ah3sou] { font-size: 0.6875rem; padding: 2px 6px; }
.app-badge--lg[b-uls9ah3sou] { font-size: 0.875rem;  padding: 5px 12px; }

/* ── Colors ──
   Text darkened from the raw brand hues to clear WCAG 2.2 AA's 4.5:1 body-text threshold
   against each badge's own tinted background (badges render at 12px/600 weight, which
   doesn't qualify for the "large text" 3:1 exception) — verified via relative-luminance
   contrast math, not eyeballed. Solid-fill uses of the same hues (buttons, filled chips)
   keep the original brand color since white-on-color already clears AA there. This file is
   the Blazor CSS-isolation copy of the same rules in layout.css (its scoped [b-xxxx]
   attribute selector wins the cascade over layout.css's plain class selector, so both copies
   must stay in sync or this one silently overrides the other). */
.app-badge--primary[b-uls9ah3sou]  { background: rgba(79, 70, 229, 0.12);  color: var(--pos-primary); }
.app-badge--success[b-uls9ah3sou]  { background: rgba(25, 135, 84, 0.12);   color: #177b4c; }
.app-badge--danger[b-uls9ah3sou]   { background: rgba(220, 53, 69, 0.12);   color: #cd2334; }
.app-badge--warning[b-uls9ah3sou]  { background: rgba(255, 193, 7, 0.15);   color: #8e6c04; }
.app-badge--info[b-uls9ah3sou]     { background: rgba(13, 202, 240, 0.12);  color: #087990; }
.app-badge--muted[b-uls9ah3sou]    { background: var(--pos-surface);        color: var(--pos-muted); border: 1px solid var(--pos-border); }
.app-badge--accent[b-uls9ah3sou]   { background: rgba(13, 148, 136, 0.10);  color: #0b7b71; }

[data-bs-theme="dark"] .app-badge--warning[b-uls9ah3sou] { color: #ffc107; }
[data-bs-theme="dark"] .app-badge--info[b-uls9ah3sou]    { color: #84d8e8; }
[data-bs-theme="dark"] .app-badge--success[b-uls9ah3sou] { color: #1ea265; }
[data-bs-theme="dark"] .app-badge--danger[b-uls9ah3sou]  { color: #e35d6a; }
[data-bs-theme="dark"] .app-badge--accent[b-uls9ah3sou]  { color: #0e9e91; }

/* ── Dismiss ── */
.app-badge__dismiss[b-uls9ah3sou] {
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    font-size: 0.85em;
    line-height: 1;
    transition: opacity var(--pos-duration-fast) var(--pos-ease-out);
}
.app-badge__dismiss:hover[b-uls9ah3sou] { opacity: 1; }
/* /Components/Shared/AppButton.razor.rz.scp.css */
/* No color reset here — every variant below sets its own explicit color, and an anchor-scoped
   `color: inherit` would out-specificity those variant rules (element + class beats class alone),
   silently reverting primary/danger/success link-rendered buttons to the surrounding text color. */
a.app-btn[b-r7mosdhbc3] { text-decoration: none; }

.app-btn[b-r7mosdhbc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--pos-radius-full);
    border: none;
    font-family: var(--pos-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    min-height: 38px;
    position: relative;
    overflow: hidden;
    user-select: none;
    transition:
        background      var(--pos-duration-fast) var(--pos-ease-out),
        box-shadow      var(--pos-duration-base) var(--pos-ease-out),
        transform       var(--pos-duration-fast) var(--pos-ease-spring),
        border-color    var(--pos-duration-fast) var(--pos-ease-out),
        opacity         var(--pos-duration-fast) var(--pos-ease-out);
}
/* Liquid shine sweep on hover */
.app-btn[b-r7mosdhbc3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 20%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 80%
    );
    transform: translateX(-130%);
    pointer-events: none;
    border-radius: inherit;
    transition: transform 0.50s var(--pos-ease-out);
}
.app-btn:hover:not(:disabled)[b-r7mosdhbc3]::after { transform: translateX(150%); }

.app-btn:active[b-r7mosdhbc3] { transform: scale(0.96); }

.app-btn:focus-visible[b-r7mosdhbc3] {
    outline: 2px solid var(--pos-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--pos-focus-ring);
}

/* ── Variants ──
   Flat by design: solid/tonal fills instead of animated gradients, a single soft
   shadow instead of stacked glows, and a small lift (no scale) on hover — modern
   and plain, not a glossy 3D bevel. */
.app-btn--primary[b-r7mosdhbc3] {
    background: var(--pos-primary);
    color: #fff;
    box-shadow: var(--pos-shadow-sm);
}
.app-btn--primary:hover:not(:disabled)[b-r7mosdhbc3] {
    background: var(--pos-primary-dark);
    box-shadow: var(--pos-shadow-md);
    transform: translateY(-1px);
}

.app-btn--secondary[b-r7mosdhbc3] {
    background: var(--pos-glass-bg);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    color: var(--pos-ink);
    border: 1px solid var(--pos-glass-border);
    box-shadow: var(--pos-specular), var(--pos-shadow-xs);
}
.app-btn--secondary:hover:not(:disabled)[b-r7mosdhbc3] {
    border-color: rgba(79, 70, 229, 0.40);
    box-shadow: var(--pos-specular), var(--pos-shadow-sm);
    transform: translateY(-1px);
}

.app-btn--outline[b-r7mosdhbc3] {
    background: transparent;
    color: var(--pos-primary);
    border: 1.5px solid rgba(79,70,229,0.55);
}
.app-btn--outline:hover:not(:disabled)[b-r7mosdhbc3] {
    background: rgba(79,70,229,0.08);
    border-color: var(--pos-primary);
    transform: translateY(-1px);
}

.app-btn--danger-outline[b-r7mosdhbc3] {
    background: transparent;
    color: #dc2626;
    border: 1.5px solid rgba(220,38,38,0.50);
}
.app-btn--danger-outline:hover:not(:disabled)[b-r7mosdhbc3] {
    background: rgba(220, 38, 38, 0.07);
    border-color: #dc2626;
    transform: translateY(-1px);
}

.app-btn--danger[b-r7mosdhbc3] {
    background: #dc2626;
    color: #fff;
    box-shadow: var(--pos-shadow-sm);
}
.app-btn--danger:hover:not(:disabled)[b-r7mosdhbc3] {
    background: #b91c1c;
    box-shadow: var(--pos-shadow-md);
    transform: translateY(-1px);
}

.app-btn--success[b-r7mosdhbc3] {
    background: #059669;
    color: #fff;
    box-shadow: var(--pos-shadow-sm);
}
.app-btn--success:hover:not(:disabled)[b-r7mosdhbc3] {
    background: #047857;
    box-shadow: var(--pos-shadow-md);
    transform: translateY(-1px);
}

.app-btn--ghost[b-r7mosdhbc3] {
    background: transparent;
    color: var(--pos-ink);
    border: 1px solid transparent;
}
.app-btn--ghost:hover:not(:disabled)[b-r7mosdhbc3] {
    background: var(--pos-glass-bg);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-color: var(--pos-glass-border);
    box-shadow: var(--pos-glass-shadow);
}

.app-btn--link[b-r7mosdhbc3] {
    background: transparent;
    color: var(--pos-primary);
    padding-left: 0;
    padding-right: 0;
    min-height: auto;
    border-radius: 0;
    font-weight: 500;
    overflow: visible;
}
.app-btn--link[b-r7mosdhbc3]::after { display: none; }
.app-btn--link:hover:not(:disabled)[b-r7mosdhbc3] {
    color: var(--pos-primary-dark);
    text-decoration: underline;
}

/* ── Sizes ── */
.app-btn--sm[b-r7mosdhbc3] {
    font-size: 0.8125rem;
    padding: 5px 12px;
    min-height: 30px;
    gap: 4px;
}

.app-btn--lg[b-r7mosdhbc3] {
    font-size: 1rem;
    padding: 11px 24px;
    min-height: 46px;
    gap: 8px;
}

/* ── Modifiers ── */
.app-btn--full[b-r7mosdhbc3] { width: 100%; }

.app-btn--icon-only[b-r7mosdhbc3] {
    padding: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.app-btn--sm.app-btn--icon-only[b-r7mosdhbc3] { width: 30px; height: 30px; }
.app-btn--lg.app-btn--icon-only[b-r7mosdhbc3] { width: 46px; height: 46px; }

.app-btn:disabled[b-r7mosdhbc3],
.app-btn--loading[b-r7mosdhbc3] {
    opacity: 0.52;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Spinner ── */
.app-btn__spinner[b-r7mosdhbc3] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.app-btn--sm .app-btn__spinner[b-r7mosdhbc3] { width: 11px; height: 11px; }
.app-btn--lg .app-btn__spinner[b-r7mosdhbc3] { width: 17px; height: 17px; }
/* /Components/Shared/AppCard.razor.rz.scp.css */
.app-card[b-l9j0xqdb5l] {
    background: var(--pos-card-bg);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-lg);
    box-shadow: var(--pos-shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        box-shadow  var(--pos-duration-base) var(--pos-ease-out),
        transform   var(--pos-duration-base) var(--pos-ease-out),
        border-color var(--pos-duration-base) var(--pos-ease-out);
}

.app-card--clickable[b-l9j0xqdb5l] {
    cursor: pointer;
}
@media (hover: hover) {
    .app-card--clickable:hover[b-l9j0xqdb5l] {
        box-shadow: var(--pos-shadow-lg);
        border-color: rgba(79, 70, 229, 0.20);
        transform: translateY(-2px);
    }
}
.app-card--clickable:active[b-l9j0xqdb5l] {
    transform: translateY(0);
    box-shadow: var(--pos-shadow-xs);
}

.app-card--clickable:focus-visible[b-l9j0xqdb5l] {
    outline: 2px solid var(--pos-primary);
    outline-offset: 2px;
}

.app-card--glass[b-l9j0xqdb5l] {
    background: var(--pos-glass-bg);
    backdrop-filter: var(--pos-blur-md);
    -webkit-backdrop-filter: var(--pos-blur-md);
    border-color: var(--pos-glass-border);
    box-shadow: var(--pos-glass-shadow);
}

.app-card--flush > .app-card__body[b-l9j0xqdb5l] {
    padding: 0;
}

/* ── Sections ── */
.app-card__header[b-l9j0xqdb5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-4);
    padding: var(--pos-space-5) var(--pos-space-6);
    border-bottom: 1px solid var(--pos-border);
}

.app-card__title[b-l9j0xqdb5l] {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pos-ink);
    margin: 0;
    line-height: 1.3;
}

.app-card__header-slot[b-l9j0xqdb5l] {
    display: flex;
    align-items: center;
    gap: var(--pos-space-2);
    flex-shrink: 0;
}

.app-card__body[b-l9j0xqdb5l] {
    padding: var(--pos-space-6);
    flex: 1;
}

.app-card__footer[b-l9j0xqdb5l] {
    padding: var(--pos-space-4) var(--pos-space-6);
    border-top: 1px solid var(--pos-border);
    background: var(--pos-surface);
    border-radius: 0 0 var(--pos-radius-lg) var(--pos-radius-lg);
}
/* /Components/Shared/AppEmptyState.razor.rz.scp.css */
.app-empty-state[b-lvmlq1s026] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--pos-space-16) var(--pos-space-8);
    gap: var(--pos-space-3);
}

.app-empty-state__icon-wrap[b-lvmlq1s026] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--pos-radius-2xl);
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    margin-bottom: var(--pos-space-2);
    animation: float 4s ease-in-out infinite;
}

.app-empty-state__icon[b-lvmlq1s026] {
    font-size: 2rem;
    color: var(--pos-muted);
    opacity: 0.7;
}

.app-empty-state__title[b-lvmlq1s026] {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pos-ink);
    margin: 0;
}

.app-empty-state__desc[b-lvmlq1s026] {
    font-size: 0.9rem;
    color: var(--pos-muted);
    margin: 0;
    max-width: 340px;
    line-height: 1.6;
}

.app-empty-state__action[b-lvmlq1s026] {
    margin-top: var(--pos-space-2);
}