/* /Components/Base/Badge.razor.rz.scp.css */
/**
 * Badge Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.1, 21.1, 21.2, 21.3, 21.4, 21.7, 21.8
 */

/* ── Base Badge Styles ── */
.badge[b-t1al0yx1ms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
}

/* ── Badge Variants (Colors) ── */
.badge--primary[b-t1al0yx1ms] {
    background: var(--color-primary, #2F6FED);
    color: var(--color-text-inverse, #FFFFFF);
}

.badge--success[b-t1al0yx1ms] {
    background: var(--color-success, #10B981);
    color: var(--color-text-inverse, #FFFFFF);
}

.badge--warning[b-t1al0yx1ms] {
    background: var(--color-warning, #F59E0B);
    color: var(--color-text-inverse, #FFFFFF);
}

.badge--error[b-t1al0yx1ms] {
    background: var(--color-error, #EF4444);
    color: var(--color-text-inverse, #FFFFFF);
}

.badge--neutral[b-t1al0yx1ms] {
    background: var(--color-neutral-200, #E5E7EB);
    color: var(--color-text-primary, #111827);
}

/* ── Badge Sizes ── */
.badge--small[b-t1al0yx1ms] {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--font-size-xs, 12px);
    line-height: var(--line-height-tight, 1.2);
}

.badge--medium[b-t1al0yx1ms] {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--font-size-sm, 13px);
    line-height: var(--line-height-tight, 1.2);
}

.badge--large[b-t1al0yx1ms] {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--font-size-base, 14px);
    line-height: var(--line-height-tight, 1.2);
}

/* ── Dot Variant ── */
.badge--dot[b-t1al0yx1ms] {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: var(--radius-full, 9999px);
}

/* ── Badge Positioning ── */
.badge--topright[b-t1al0yx1ms] {
    position: absolute;
    top: -4px;
    right: -4px;
}

.badge--topleft[b-t1al0yx1ms] {
    position: absolute;
    top: -4px;
    left: -4px;
}

.badge--bottomright[b-t1al0yx1ms] {
    position: absolute;
    bottom: -4px;
    right: -4px;
}

.badge--bottomleft[b-t1al0yx1ms] {
    position: absolute;
    bottom: -4px;
    left: -4px;
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .badge--neutral[b-t1al0yx1ms] {
    background: var(--color-neutral-700, #374151);
    color: var(--color-text-primary, #F9FAFB);
}
/* /Components/Base/Button.razor.rz.scp.css */
/**
 * Button Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.1, 2.6, 2.7, 3.3, 4.5, 8.1, 8.4
 */

/* ── Base Button Styles ── */
.btn[b-n6q2g2zf0q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold, 600);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    min-height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
}

.btn:focus-visible[b-n6q2g2zf0q] {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-primary));
    outline-offset: var(--focus-ring-offset, 2px);
}

/* ── Button Variants ── */

/* Primary */
.btn--primary[b-n6q2g2zf0q] {
    background: var(--color-primary, #2F6FED);
    color: var(--color-text-inverse, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 4px 12px rgba(47, 111, 237, 0.25);
}

.btn--primary:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-primary-hover, #2563EB);
    box-shadow: 0 6px 16px rgba(47, 111, 237, 0.3);
}

.btn--primary:active:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-primary-active, #1D4ED8);
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(47, 111, 237, 0.2);
}

/* Secondary */
.btn--secondary[b-n6q2g2zf0q] {
    background: var(--color-neutral-100, #F3F4F6);
    color: var(--color-text-primary, #111827);
    border-radius: var(--radius-lg, 12px);
}

.btn--secondary:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-200, #E5E7EB);
}

.btn--secondary:active:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-300, #D1D5DB);
    transform: scale(0.98);
}

/* Outline */
.btn--outline[b-n6q2g2zf0q] {
    background: transparent;
    color: var(--color-primary, #2F6FED);
    border: var(--border-width-medium, 2px) solid var(--color-primary, #2F6FED);
    border-radius: var(--radius-lg, 12px);
}

.btn--outline:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-primary-light, #EEF2FF);
}

.btn--outline:active:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-primary-light, #EEF2FF);
    transform: scale(0.98);
}

/* Ghost */
.btn--ghost[b-n6q2g2zf0q] {
    background: transparent;
    color: var(--color-text-primary, #111827);
    border-radius: var(--radius-lg, 12px);
}

.btn--ghost:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-100, #F3F4F6);
}

.btn--ghost:active:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-200, #E5E7EB);
    transform: scale(0.98);
}

/* ── Button Sizes ── */

/* Small */
.btn--small[b-n6q2g2zf0q] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--font-size-sm, 13px);
    gap: var(--space-1, 4px);
}

.btn--small .btn__icon[b-n6q2g2zf0q] {
    font-size: 16px;
}

/* Medium */
.btn--medium[b-n6q2g2zf0q] {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: var(--font-size-base, 14px);
}

.btn--medium .btn__icon[b-n6q2g2zf0q] {
    font-size: 20px;
}

/* Large */
.btn--large[b-n6q2g2zf0q] {
    padding: var(--space-4, 16px) var(--space-6, 24px);
    font-size: var(--font-size-lg, 16px);
}

.btn--large .btn__icon[b-n6q2g2zf0q] {
    font-size: 24px;
}

/* ── Button States ── */

/* Full Width */
.btn--full-width[b-n6q2g2zf0q] {
    width: 100%;
}

/* Disabled */
.btn--disabled[b-n6q2g2zf0q] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Icon Styles ── */
.btn__icon[b-n6q2g2zf0q] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn__text[b-n6q2g2zf0q] {
    display: flex;
    align-items: center;
}

/* ── Ripple Effect ── */
.btn[b-n6q2g2zf0q]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full, 9999px);
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--transition-fast, 150ms) var(--easing-ease-out),
                height var(--transition-fast, 150ms) var(--easing-ease-out);
}

.btn:active:not(.btn--disabled)[b-n6q2g2zf0q]::after {
    width: 300px;
    height: 300px;
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .btn[b-n6q2g2zf0q] {
        transition: none;
    }

    .btn:active:not(.btn--disabled)[b-n6q2g2zf0q] {
        transform: none;
    }

    .btn[b-n6q2g2zf0q]::after {
        display: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .btn--secondary[b-n6q2g2zf0q] {
    background: var(--color-neutral-800, #1F2937);
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .btn--secondary:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-700, #374151);
}

[data-theme="dark"] .btn--ghost[b-n6q2g2zf0q] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .btn--ghost:hover:not(.btn--disabled)[b-n6q2g2zf0q] {
    background: var(--color-neutral-800, #1F2937);
}
/* /Components/Base/Card.razor.rz.scp.css */
/**
 * Card Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.1, 16.1, 16.2, 16.3, 16.4, 16.6, 16.7, 16.8
 */

/* ── Base Card Styles ── */
.card[b-r61tla6bvx] {
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: all var(--transition-base, 200ms) var(--easing-ease-in-out);
}

/* ── Card Elevation Levels ── */
.card--flat[b-r61tla6bvx] {
    box-shadow: var(--shadow-none);
    border: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
}

.card--raised[b-r61tla6bvx] {
    box-shadow: var(--shadow-sm);
}

.card--elevated[b-r61tla6bvx] {
    box-shadow: var(--shadow-md);
}

/* ── Card Layout ── */
.card--vertical[b-r61tla6bvx] {
    display: flex;
    flex-direction: column;
}

.card--horizontal[b-r61tla6bvx] {
    display: flex;
    flex-direction: row;
}

.card--horizontal .card__body[b-r61tla6bvx] {
    flex: 1;
}

/* ── Card Sections ── */
.card__header[b-r61tla6bvx] {
    padding: var(--space-4, 16px);
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
}

.card__body[b-r61tla6bvx] {
    padding: var(--space-4, 16px);
}

.card__footer[b-r61tla6bvx] {
    padding: var(--space-4, 16px);
    border-top: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: flex-end;
}

/* ── Interactive Card ── */
.card--interactive[b-r61tla6bvx] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.card--interactive:hover[b-r61tla6bvx] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card--interactive:active[b-r61tla6bvx] {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* Ripple effect for interactive cards */
.card--interactive[b-r61tla6bvx]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full, 9999px);
    background: rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -50%);
    transition: width var(--transition-fast, 150ms) var(--easing-ease-out),
                height var(--transition-fast, 150ms) var(--easing-ease-out);
    pointer-events: none;
}

.card--interactive:active[b-r61tla6bvx]::after {
    width: 300px;
    height: 300px;
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .card[b-r61tla6bvx] {
        transition: none;
    }

    .card--interactive:hover[b-r61tla6bvx] {
        transform: none;
    }

    .card--interactive:active[b-r61tla6bvx] {
        transform: none;
    }

    .card--interactive[b-r61tla6bvx]::after {
        display: none;
    }
}

/* ── Responsive Adjustments ── */
@media (max-width: 768px) {
    .card--horizontal[b-r61tla6bvx] {
        flex-direction: column;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .card[b-r61tla6bvx] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .card--flat[b-r61tla6bvx] {
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .card__header[b-r61tla6bvx],
[data-theme="dark"] .card__footer[b-r61tla6bvx] {
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .card--interactive[b-r61tla6bvx]::after {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/Base/Icon.razor.rz.scp.css */
/**
 * Icon Component Styles
 * Using Material Symbols icon library
 * Requirements: 15.1, 15.2, 15.3, 15.4, 15.8
 */

/* ── Base Icon Styles ── */
.icon[b-2vse2nmnpz] {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    color: inherit; /* Inherit color from parent by default */
}

/* ── Icon Variants ── */
.icon--filled[b-2vse2nmnpz] {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon--outlined[b-2vse2nmnpz] {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Icon Sizes ── */
.icon--small[b-2vse2nmnpz] {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.icon--medium[b-2vse2nmnpz] {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.icon--large[b-2vse2nmnpz] {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.icon--xlarge[b-2vse2nmnpz] {
    font-size: 32px;
    width: 32px;
    height: 32px;
}
/* /Components/Base/MainHeader.razor.rz.scp.css */
.app-header[b-klkm83mt0k] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--color-surface, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.header-brand[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.brand-logo[b-klkm83mt0k] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.brand-name[b-klkm83mt0k] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #2F6FED);
    letter-spacing: 0.3px;
}

.icon-button[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary, #6B7280);
    -webkit-tap-highlight-color: transparent;
}

.icon-button:active[b-klkm83mt0k] {
    background: var(--color-primary-light, #EEF2FF);
}

.icon-button.back .material-symbols-outlined[b-klkm83mt0k] {
    font-size: 20px;
}

.header-actions[b-klkm83mt0k] {
    position: relative;
    display: flex;
    gap: var(--space-2, 8px);
}

.header-action[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary, #6B7280);
    -webkit-tap-highlight-color: transparent;
}

.header-action:active[b-klkm83mt0k] {
    background: var(--color-primary-light, #EEF2FF);
}

/* ── Dropdown Menu ── */
.menu-backdrop[b-klkm83mt0k] {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.dropdown-menu[b-klkm83mt0k] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 31;
    min-width: 200px;
    margin-top: var(--space-1, 4px);
    padding: var(--space-2, 8px) 0;
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    animation: menuFadeIn-b-klkm83mt0k 200ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes menuFadeIn-b-klkm83mt0k {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: none;
    background: transparent;
    color: var(--color-text-primary, #1F2937);
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-medium, 500);
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
}

.menu-item:active[b-klkm83mt0k] {
    background: var(--color-primary-light, #EEF2FF);
}

.menu-item .material-symbols-outlined[b-klkm83mt0k] {
    font-size: 20px;
    color: var(--color-text-secondary, #6B7280);
}

.menu-item-danger[b-klkm83mt0k] {
    color: #EF4444;
}

.menu-item-danger .material-symbols-outlined[b-klkm83mt0k] {
    color: #EF4444;
}

.menu-divider[b-klkm83mt0k] {
    height: 1px;
    background: var(--color-border, #E5E7EB);
    margin: var(--space-2, 8px) 0;
}

/* ── Modal Sobre ── */
.modal-backdrop[b-klkm83mt0k] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn-b-klkm83mt0k 200ms ease-out;
}

@keyframes fadeIn-b-klkm83mt0k {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-klkm83mt0k] {
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    animation: slideUp-b-klkm83mt0k 300ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slideUp-b-klkm83mt0k {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.modal-title[b-klkm83mt0k] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary, #1F2937);
    margin: 0;
}

.modal-close[b-klkm83mt0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary, #6B7280);
}

.modal-close:active[b-klkm83mt0k] {
    background: var(--color-primary-light, #EEF2FF);
}

.modal-body[b-klkm83mt0k] {
    padding: 24px 20px;
    text-align: center;
}

.sobre-logo[b-klkm83mt0k] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 12px;
}

.sobre-app-name[b-klkm83mt0k] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary, #1F2937);
    margin: 0 0 8px;
}

.sobre-version[b-klkm83mt0k] {
    font-size: 12px;
    color: var(--color-text-secondary, #6B7280);
    margin: 0 0 12px;
    white-space: pre-line;
}

.sobre-description[b-klkm83mt0k] {
    font-size: 14px;
    color: var(--color-text-secondary, #6B7280);
    margin: 0;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu[b-klkm83mt0k],
    .modal-backdrop[b-klkm83mt0k],
    .modal-content[b-klkm83mt0k] {
        animation: none;
    }
}
/* /Components/Base/OptimizedImage.razor.rz.scp.css */
/**
 * Optimized Image Component Styles
 * Requirements: 6.5, 6.7, 12.2, 12.5, 12.6
 */

/* ── Container ── */
.optimized-image-container[b-vuzih8oxx7] {
    display: block;
    position: relative;
    overflow: hidden;
}

/* ── Base Image Styles ── */
.optimized-image[b-vuzih8oxx7] {
    display: block;
    max-width: 100%;
    height: auto;
    transition: filter var(--transition-medium, 300ms) var(--easing-ease-out);
}

/* ── Lazy Loading States ── */
.optimized-image[data-src][b-vuzih8oxx7] {
    filter: blur(10px);
    transform: scale(1.05);
}

.optimized-image.lazy-loaded[b-vuzih8oxx7] {
    filter: blur(0);
    transform: scale(1);
}

.optimized-image.lazy-error[b-vuzih8oxx7] {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .optimized-image[b-vuzih8oxx7] {
        transition: opacity var(--transition-fast, 150ms);
        transform: none !important;
    }
    
    .optimized-image[data-src][b-vuzih8oxx7] {
        filter: none;
        opacity: 0.5;
    }
    
    .optimized-image.lazy-loaded[b-vuzih8oxx7] {
        opacity: 1;
    }
}
/* /Components/Base/Spinner.razor.rz.scp.css */
/**
 * Spinner Component Styles
 * Using CSS isolation and design tokens
 * Optimized for 60fps performance
 * Requirements: 2.1, 10.7, 13.1
 */

/* ── Base Spinner Styles ── */
.spinner[b-dgk6k3m4am] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.spinner__ring[b-dgk6k3m4am] {
    display: block;
    border-radius: var(--radius-full, 9999px);
    border: 3px solid var(--color-border, #E5E7EB);
    border-top-color: var(--spinner-color, var(--color-primary));
    animation: spin-b-dgk6k3m4am 0.8s linear infinite;
    /* Use transform for GPU acceleration (60fps) */
    will-change: transform;
}

/* ── Spinner Sizes ── */
.spinner--small .spinner__ring[b-dgk6k3m4am] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner--medium .spinner__ring[b-dgk6k3m4am] {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.spinner--large .spinner__ring[b-dgk6k3m4am] {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* ── Spin Animation ── */
@keyframes spin-b-dgk6k3m4am {
    to {
        transform: rotate(360deg);
    }
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .spinner__ring[b-dgk6k3m4am] {
        animation: none;
        border-top-color: var(--color-border, #E5E7EB);
    }
    
    /* Show pulsing effect instead of spinning */
    .spinner__ring[b-dgk6k3m4am] {
        animation: pulse-b-dgk6k3m4am 1.5s ease-in-out infinite;
    }
    
    @keyframes pulse-b-dgk6k3m4am {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .spinner__ring[b-dgk6k3m4am] {
    border-color: var(--color-neutral-700, #374151);
}
/* /Components/Cards/ItemCard.razor.rz.scp.css */
.item-card[b-bubqlgyco4] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
}

.item-card:hover[b-bubqlgyco4] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.item-card:active[b-bubqlgyco4] {
    transform: scale(0.98);
}

.item-card__icon[b-bubqlgyco4] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: white;
    border-radius: var(--radius-md);
    font-size: 24px;
}

.item-card__content[b-bubqlgyco4] {
    flex: 1;
    min-width: 0;
}

.item-card__name[b-bubqlgyco4] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-card__code[b-bubqlgyco4] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.item-card__date[b-bubqlgyco4] {
    font-size: var(--font-size-xs);
    color: var(--text-disabled);
}

.item-card__status[b-bubqlgyco4] {
    flex-shrink: 0;
}

.status-indicator[b-bubqlgyco4] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-synced[b-bubqlgyco4] {
    background-color: var(--success-color);
}

.status-pending[b-bubqlgyco4] {
    background-color: var(--text-disabled);
}

@media (prefers-reduced-motion: reduce) {
    .item-card[b-bubqlgyco4] {
        transition: none;
    }
    
    .item-card:hover[b-bubqlgyco4] {
        transform: none;
    }
    
    .item-card:active[b-bubqlgyco4] {
        transform: none;
    }
}
/* /Components/Cards/ObservacaoModal.razor.rz.scp.css */
.obs-backdrop[b-uf59q8vkf3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 60;
    animation: obs-fade-in-b-uf59q8vkf3 200ms ease-out;
}

.obs-modal[b-uf59q8vkf3] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: min(480px, calc(100vw - 32px));
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    z-index: 70;
    padding: 24px;
    max-height: 80vh;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: obs-slide-up-b-uf59q8vkf3 300ms ease-out;
}

@keyframes obs-fade-in-b-uf59q8vkf3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes obs-slide-up-b-uf59q8vkf3 {
    from { transform: translateX(-50%) translateY(100%); }
    to   { transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .obs-backdrop[b-uf59q8vkf3], .obs-modal[b-uf59q8vkf3] {
        animation: none;
    }
}

.obs-modal-header[b-uf59q8vkf3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.obs-modal-title[b-uf59q8vkf3] {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.obs-modal-subtitle[b-uf59q8vkf3] {
    font-size: 12px;
    color: #94A3B8;
    margin: 4px 0 0;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.obs-close-btn[b-uf59q8vkf3] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.obs-close-btn:active[b-uf59q8vkf3] {
    background: #F1F5F9;
}

.obs-modal-body[b-uf59q8vkf3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.obs-textarea[b-uf59q8vkf3] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 16px;
    color: #1E293B;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

.obs-textarea:focus[b-uf59q8vkf3] {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.obs-char-count[b-uf59q8vkf3] {
    font-size: 11px;
    color: #94A3B8;
    text-align: right;
}

.obs-modal-footer[b-uf59q8vkf3] {
    display: flex;
    gap: 12px;
}

.obs-btn-cancel[b-uf59q8vkf3] {
    flex: 1;
    padding: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.obs-btn-cancel:active[b-uf59q8vkf3] {
    background: #F8FAFC;
}

.obs-btn-save[b-uf59q8vkf3] {
    flex: 2;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #1E3A5F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.obs-btn-save:disabled[b-uf59q8vkf3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.obs-btn-save:active:not(:disabled)[b-uf59q8vkf3] {
    background: #16324F;
}

.obs-spinner[b-uf59q8vkf3] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: obs-spin-b-uf59q8vkf3 0.7s linear infinite;
}

@keyframes obs-spin-b-uf59q8vkf3 {
    to { transform: rotate(360deg); }
}
/* /Components/Cards/PatrimonioCard.razor.rz.scp.css */
.card-wrapper[b-lrcqp2ziop] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-card[b-lrcqp2ziop] {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.15s, transform 0.15s;
    user-select: none;
    flex: 1;
    min-width: 0;
}

.item-card:active[b-lrcqp2ziop] {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-accent[b-lrcqp2ziop] {
    width: 4px;
    flex-shrink: 0;
    border-radius: 12px 0 0 12px;
}

.card-accent.accent-green[b-lrcqp2ziop]  { background: #10B981; }
.card-accent.accent-yellow[b-lrcqp2ziop] { background: #F59E0B; }
.card-accent.accent-red[b-lrcqp2ziop]    { background: #EF4444; }
.card-accent.accent-gray[b-lrcqp2ziop]   { background: #94A3B8; }

.card-body[b-lrcqp2ziop] {
    flex: 1;
    padding: 12px 10px 12px 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-row[b-lrcqp2ziop] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-meta-row[b-lrcqp2ziop] {
    justify-content: flex-start;
}

.code-tag[b-lrcqp2ziop] {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-color);
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.card-name[b-lrcqp2ziop] {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.card-location[b-lrcqp2ziop] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.loc-icon[b-lrcqp2ziop] {
    font-size: 13px;
    color: #94A3B8;
}

.loc-text[b-lrcqp2ziop] {
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-chevron[b-lrcqp2ziop] {
    display: flex;
    align-items: center;
    padding: 0 10px 0 4px;
    color: #CBD5E1;
    flex-shrink: 0;
}

.card-chevron .material-symbols-outlined[b-lrcqp2ziop] {
    font-size: 20px;
}

.obs-bubble[b-lrcqp2ziop] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border-radius: 18px;
    border: none;
    background: #E2E8F0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease-in-out, transform 0.1s ease-out;
    box-sizing: border-box;
}

.obs-bubble:active[b-lrcqp2ziop] {
    transform: scale(0.92);
}

.obs-bubble--active[b-lrcqp2ziop] {
    background: #25D366;
}

.obs-bubble--active:active[b-lrcqp2ziop] {
    background: #1DA851;
}

.obs-bubble-tail[b-lrcqp2ziop] {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #E2E8F0;
    transition: border-right-color 0.2s ease-in-out;
}

.obs-bubble--active .obs-bubble-tail[b-lrcqp2ziop] {
    border-right-color: #25D366;
}

.obs-bubble-icon[b-lrcqp2ziop] {
    font-size: 18px;
    color: #94A3B8;
    transition: color 0.2s ease-in-out;
}

.obs-bubble--active .obs-bubble-icon[b-lrcqp2ziop] {
    color: #FFFFFF;
}

.obs-bubble-text[b-lrcqp2ziop] {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.02em;
    transition: color 0.2s ease-in-out;
}

.obs-bubble--active .obs-bubble-text[b-lrcqp2ziop] {
    color: #FFFFFF;
}

.obs-bubble:focus-visible[b-lrcqp2ziop] {
    outline: 2px solid #25D366;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .item-card[b-lrcqp2ziop],
    .obs-bubble[b-lrcqp2ziop] {
        transition: none;
    }

    .obs-bubble:active[b-lrcqp2ziop],
    .item-card:active[b-lrcqp2ziop] {
        transform: none;
    }
}
/* /Components/Cards/StatisticsCard.razor.rz.scp.css */
.statistics-card[b-mulujzgy9h] {
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statistics-card:hover[b-mulujzgy9h] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.statistics-card__value[b-mulujzgy9h] {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.statistics-card__label[b-mulujzgy9h] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .statistics-card[b-mulujzgy9h] {
        transition: none;
    }
    
    .statistics-card:hover[b-mulujzgy9h] {
        transform: none;
    }
}
/* /Components/Common/AssetListItem.razor.rz.scp.css */
.asset-list-item[b-wtz89nkumf] {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-bottom: 1px solid var(--color-border);
    gap: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.asset-list-item:active[b-wtz89nkumf] {
    background-color: #F8FAFC;
}

.asset-icon[b-wtz89nkumf] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.asset-info[b-wtz89nkumf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asset-name[b-wtz89nkumf] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.asset-code[b-wtz89nkumf] {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}
/* /Components/Common/PrimaryButton.razor.rz.scp.css */
.primary-button[b-rl8qvmecgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-input);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover:not(:disabled)[b-rl8qvmecgi] {
    background-color: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.primary-button:active:not(:disabled)[b-rl8qvmecgi] {
    transform: scale(0.98);
}

.primary-button:disabled[b-rl8qvmecgi] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

.primary-button.w-full[b-rl8qvmecgi] {
    width: 100%;
}
/* /Components/Common/PrimaryCard.razor.rz.scp.css */
.primary-card[b-dlkdz697vu] {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
    width: 100%;
}
/* /Components/Common/StatusBadge.razor.rz.scp.css */
.status-badge[b-tax46ibn62] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.completo[b-tax46ibn62] { background-color: #DCFCE7; color: var(--color-success); }
.status-badge.pendente[b-tax46ibn62] { background-color: #FEE2E2; color: var(--color-danger); }
.status-badge.neutro[b-tax46ibn62] { background-color: #F1F5F9; color: var(--color-text-secondary); }
.status-badge.alerta[b-tax46ibn62] { background-color: #FEF3C7; color: #D97706; }
.status-badge.erro[b-tax46ibn62] { background-color: #FEE2E2; color: #DC2626; }
/* /Components/Configuration/BarcodeConfigurationComponent.razor.rz.scp.css */
.barcode-config-container[b-2b6i50pbes] {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}

.config-section[b-2b6i50pbes] {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.config-header h3[b-2b6i50pbes] {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 20px;
    font-weight: 600;
}

.config-description[b-2b6i50pbes] {
    margin: 0 0 24px 0;
    color: #64748b;
    font-size: 14px;
}

.loading-container[b-2b6i50pbes] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 40px;
    color: #64748b;
}

.config-item[b-2b6i50pbes] {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.config-item:last-child[b-2b6i50pbes] {
    border-bottom: none;
    margin-bottom: 0;
}

.config-item-header h4[b-2b6i50pbes] {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}

.config-item-description[b-2b6i50pbes] {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 14px;
}

.format-checkboxes[b-2b6i50pbes] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.confidence-settings[b-2b6i50pbes] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.confidence-item label[b-2b6i50pbes] {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.advanced-settings[b-2b6i50pbes] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-description[b-2b6i50pbes] {
    margin: 4px 0 0 32px;
    color: #6b7280;
    font-size: 12px;
}

.numeric-setting[b-2b6i50pbes] {
    margin-top: 16px;
}

.numeric-setting label[b-2b6i50pbes] {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.config-actions[b-2b6i50pbes] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.config-alert[b-2b6i50pbes] {
    margin-top: 16px;
}

/* Custom slider styling */
.slider-primary[b-2b6i50pbes]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00327d;
    cursor: pointer;
}

.slider-primary[b-2b6i50pbes]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00327d;
    cursor: pointer;
    border: none;
}

@media (max-width: 640px) {
    .barcode-config-container[b-2b6i50pbes] {
        padding: 8px;
    }

    .config-section[b-2b6i50pbes] {
        padding: 16px;
    }

    .config-actions[b-2b6i50pbes] {
        flex-direction: column;
    }

    .format-checkboxes[b-2b6i50pbes] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Feedback/Alert.razor.rz.scp.css */
/**
 * Alert Component Styles
 * Requirements: 2.5, 8.2, 8.3
 */

/* ── Base Alert Styles ── */
.alert[b-sq0nuuavsp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border-radius: var(--radius-lg, 12px);
    border-left: 4px solid;
}

.alert__icon[b-sq0nuuavsp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert__icon .material-symbols-outlined[b-sq0nuuavsp] {
    font-size: 24px;
}

.alert__content[b-sq0nuuavsp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.alert__title[b-sq0nuuavsp] {
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-normal, 1.5);
}

.alert__message[b-sq0nuuavsp] {
    font-size: var(--font-size-sm, 13px);
    line-height: var(--line-height-normal, 1.5);
}

.alert__dismiss[b-sq0nuuavsp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
}

.alert__dismiss .material-symbols-outlined[b-sq0nuuavsp] {
    font-size: 20px;
}

/* ── Alert Variants ── */

/* Success */
.alert--success[b-sq0nuuavsp] {
    background: var(--color-success-light, #D1FAE5);
    border-left-color: var(--color-success, #10B981);
    color: var(--color-success-dark, #059669);
}

.alert--success .alert__dismiss:hover[b-sq0nuuavsp] {
    background: rgba(5, 150, 105, 0.1);
}

/* Error */
.alert--error[b-sq0nuuavsp] {
    background: var(--color-error-light, #FEE2E2);
    border-left-color: var(--color-error, #EF4444);
    color: var(--color-error-dark, #DC2626);
}

.alert--error .alert__dismiss:hover[b-sq0nuuavsp] {
    background: rgba(220, 38, 38, 0.1);
}

/* Warning */
.alert--warning[b-sq0nuuavsp] {
    background: var(--color-warning-light, #FEF3C7);
    border-left-color: var(--color-warning, #F59E0B);
    color: var(--color-warning-dark, #D97706);
}

.alert--warning .alert__dismiss:hover[b-sq0nuuavsp] {
    background: rgba(217, 119, 6, 0.1);
}

/* Info */
.alert--info[b-sq0nuuavsp] {
    background: var(--color-info-light, #DBEAFE);
    border-left-color: var(--color-info, #3B82F6);
    color: var(--color-info-dark, #2563EB);
}

.alert--info .alert__dismiss:hover[b-sq0nuuavsp] {
    background: rgba(37, 99, 235, 0.1);
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .alert--success[b-sq0nuuavsp] {
    background: var(--color-success-light, #064E3B);
    color: var(--color-success, #34D399);
}

[data-theme="dark"] .alert--error[b-sq0nuuavsp] {
    background: var(--color-error-light, #7F1D1D);
    color: var(--color-error, #F87171);
}

[data-theme="dark"] .alert--warning[b-sq0nuuavsp] {
    background: var(--color-warning-light, #78350F);
    color: var(--color-warning, #FBBF24);
}

[data-theme="dark"] .alert--info[b-sq0nuuavsp] {
    background: var(--color-info-light, #1E3A8A);
    color: var(--color-info, #60A5FA);
}
/* /Components/Feedback/BottomSheet.razor.rz.scp.css */
/**
 * BottomSheet Component Styles
 * Requirements: 19.1, 19.2, 19.3, 19.4, 19.5, 19.6, 19.7, 19.8
 */

/* ── BottomSheet Overlay ── */
.bottom-sheet-overlay[b-cgsme38oyk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.5));
    z-index: var(--z-index-modal-backdrop, 1040);
    animation: fadeIn-b-cgsme38oyk var(--transition-base, 200ms) var(--easing-ease-in-out);
}

@keyframes fadeIn-b-cgsme38oyk {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Base BottomSheet Styles ── */
.bottom-sheet[b-cgsme38oyk] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-modal, 1050);
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--transition-slow, 300ms) var(--easing-ease-out);
}

/* ── Open State ── */
.bottom-sheet--open[b-cgsme38oyk] {
    transform: translateY(0);
}

/* ── Snap Points ── */
.bottom-sheet--collapsed[b-cgsme38oyk] {
    max-height: 30vh;
}

.bottom-sheet--half[b-cgsme38oyk] {
    max-height: 50vh;
}

.bottom-sheet--full[b-cgsme38oyk] {
    max-height: 90vh;
}

/* ── Handle Container ── */
.bottom-sheet__handle-container[b-cgsme38oyk] {
    display: flex;
    justify-content: center;
    padding: var(--space-3, 12px) 0;
    flex-shrink: 0;
}

/* ── Drag Handle ── */
.bottom-sheet__handle[b-cgsme38oyk] {
    width: 40px;
    height: 4px;
    background: var(--color-neutral-300, #D1D5DB);
    border-radius: var(--radius-full, 9999px);
}

/* ── Content ── */
.bottom-sheet__content[b-cgsme38oyk] {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
    padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom));
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .bottom-sheet[b-cgsme38oyk] {
        transition: none;
    }
    
    .bottom-sheet-overlay[b-cgsme38oyk] {
        animation: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .bottom-sheet[b-cgsme38oyk] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .bottom-sheet__handle[b-cgsme38oyk] {
    background: var(--color-neutral-600, #4B5563);
}
/* /Components/Feedback/ConfirmDialog.razor.rz.scp.css */
.confirm-backdrop[b-24qa46n79i] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    animation: confirmFadeIn-b-24qa46n79i 200ms ease-out;
}

.confirm-dialog[b-24qa46n79i] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: var(--color-surface, #FFFFFF);
    border-radius: 16px;
    padding: 24px;
    width: calc(100% - 48px);
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    animation: confirmSlideUp-b-24qa46n79i 300ms cubic-bezier(0, 0, 0.2, 1);
}

.confirm-title[b-24qa46n79i] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary, #1F2937);
    margin: 0 0 8px;
}

.confirm-message[b-24qa46n79i] {
    font-size: 14px;
    color: var(--color-text-secondary, #6B7280);
    margin: 0 0 24px;
    line-height: 1.5;
}

.confirm-actions[b-24qa46n79i] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-btn-cancel[b-24qa46n79i] {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--color-border, #E2E8F0);
    background: transparent;
    color: var(--color-text-secondary, #6B7280);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background 150ms ease;
}

.confirm-btn-cancel:active[b-24qa46n79i] {
    background: var(--color-primary-light, #F1F5F9);
}

.confirm-btn-confirm[b-24qa46n79i] {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background 150ms ease;
}

.confirm-btn-confirm:active[b-24qa46n79i] {
    background: #DC2626;
}

@keyframes confirmFadeIn-b-24qa46n79i {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirmSlideUp-b-24qa46n79i {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-backdrop[b-24qa46n79i],
    .confirm-dialog[b-24qa46n79i] {
        animation: none;
    }
}
/* /Components/Feedback/EmptyState.razor.rz.scp.css */
/* EmptyState Component Styles
 * 
 * Displays empty state with centered icon, title, and subtitle.
 * NO action button per Requirement 26.3, 26.7
 * 
 * Requirements: 2.5, 13.7, 18.8, 26.7, 26.19
 */

.empty-state[b-rr5hf5rj4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8, 32px) var(--space-4, 16px);
    min-height: 300px;
}

.empty-state__icon[b-rr5hf5rj4e] {
    font-size: 64px;
    line-height: 1;
    margin-bottom: var(--space-4, 16px);
    opacity: 0.8;
}

.empty-state__title[b-rr5hf5rj4e] {
    font-size: var(--font-size-xl, 18px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    margin: 0 0 var(--space-2, 8px) 0;
    line-height: var(--line-height-tight, 1.2);
}

.empty-state__subtitle[b-rr5hf5rj4e] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #6B7280);
    margin: 0;
    line-height: var(--line-height-normal, 1.5);
    max-width: 400px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .empty-state[b-rr5hf5rj4e] {
        padding: var(--space-6, 24px) var(--space-4, 16px);
        min-height: 250px;
    }
}
/* /Components/Feedback/InstallPrompt.razor.rz.scp.css */
/**
 * Install Prompt Component Styles
 * Requirements: 25.3
 */

/* ── Base Install Prompt Styles ── */
.install-prompt[b-73su1zhflb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-toast, 1060);
    background: var(--color-surface, #FFFFFF);
    border-top: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    padding: var(--space-4, 16px);
    padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom));
    animation: slide-up-b-73su1zhflb var(--transition-medium, 300ms) var(--easing-ease-out);
}

@keyframes slide-up-b-73su1zhflb {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ── Content ── */
.install-prompt__content[b-73su1zhflb] {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* ── Header ── */
.install-prompt__header[b-73su1zhflb] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

/* ── Icon ── */
.install-prompt__icon[b-73su1zhflb] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    flex-shrink: 0;
}

/* ── Info ── */
.install-prompt__info[b-73su1zhflb] {
    flex: 1;
}

.install-prompt__title[b-73su1zhflb] {
    font-size: var(--font-size-lg, 16px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    margin: 0 0 var(--space-1, 4px) 0;
}

.install-prompt__description[b-73su1zhflb] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #6B7280);
    margin: 0;
}

/* ── Actions ── */
.install-prompt__actions[b-73su1zhflb] {
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: flex-end;
}

/* ── Buttons ── */
.install-prompt__button[b-73su1zhflb] {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
    min-height: var(--touch-target-min, 44px);
    -webkit-tap-highlight-color: transparent;
}

.install-prompt__button--primary[b-73su1zhflb] {
    background: var(--color-primary, #2F6FED);
    color: var(--color-white, #FFFFFF);
}

.install-prompt__button--primary:hover[b-73su1zhflb] {
    background: var(--color-primary-dark, #1E5DD8);
}

.install-prompt__button--secondary[b-73su1zhflb] {
    background: transparent;
    color: var(--color-text-secondary, #6B7280);
}

.install-prompt__button--secondary:hover[b-73su1zhflb] {
    background: var(--color-neutral-100, #F3F4F6);
}

/* ── Desktop Styles ── */
@media (min-width: 768px) {
    .install-prompt[b-73su1zhflb] {
        bottom: var(--space-6, 24px);
        left: var(--space-6, 24px);
        right: auto;
        max-width: 400px;
        border-radius: var(--radius-lg, 12px);
        border: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    }
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .install-prompt[b-73su1zhflb] {
        animation: fade-in-b-73su1zhflb var(--transition-fast, 150ms);
    }
    
    @keyframes fade-in-b-73su1zhflb {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .install-prompt[b-73su1zhflb] {
    background: var(--color-surface, #1F2937);
    border-top-color: var(--color-border, #374151);
}

[data-theme="dark"] .install-prompt__title[b-73su1zhflb] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .install-prompt__description[b-73su1zhflb] {
    color: var(--color-text-secondary, #D1D5DB);
}

[data-theme="dark"] .install-prompt__button--primary[b-73su1zhflb] {
    background: var(--color-primary, #3B82F6);
}

[data-theme="dark"] .install-prompt__button--primary:hover[b-73su1zhflb] {
    background: var(--color-primary-dark, #2563EB);
}

[data-theme="dark"] .install-prompt__button--secondary[b-73su1zhflb] {
    color: var(--color-text-secondary, #D1D5DB);
}

[data-theme="dark"] .install-prompt__button--secondary:hover[b-73su1zhflb] {
    background: var(--color-neutral-800, #1F2937);
}
/* /Components/Feedback/Modal.razor.rz.scp.css */
/**
 * Modal Component Styles
 * Requirements: 2.5, 17.1, 17.2, 17.4, 17.5, 17.6, 17.7, 17.8, 17.9, 17.10
 */

/* ── Modal Overlay ── */
.modal-overlay[b-slkziav7en] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.5));
    z-index: var(--z-index-modal-backdrop, 1040);
    animation: fadeIn-b-slkziav7en var(--transition-base, 200ms) var(--easing-ease-in-out);
}

@keyframes fadeIn-b-slkziav7en {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Base Modal Styles ── */
.modal[b-slkziav7en] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-modal, 1050);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--transition-slow, 300ms) var(--easing-ease-out),
                transform var(--transition-slow, 300ms) var(--easing-ease-out);
}

/* ── Open State ── */
.modal--open[b-slkziav7en] {
    opacity: 1;
    transform: translateY(0);
}

/* ── Modal Container ── */
.modal__container[b-slkziav7en] {
    width: 100%;
    max-height: 100%;
    background: var(--color-surface, #FFFFFF);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Modal Header ── */
.modal__header[b-slkziav7en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px);
    padding-top: calc(var(--space-4, 16px) + env(safe-area-inset-top));
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    flex-shrink: 0;
}

.modal__header--no-title[b-slkziav7en] {
    justify-content: flex-end;
}

.modal__title[b-slkziav7en] {
    font-size: var(--font-size-xl, 18px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    margin: 0;
    flex: 1;
}

.modal__close[b-slkziav7en] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.modal__close:hover[b-slkziav7en] {
    background: var(--color-neutral-100, #F3F4F6);
}

.modal__close .material-symbols-outlined[b-slkziav7en] {
    font-size: 24px;
}

/* ── Modal Content ── */
.modal__content[b-slkziav7en] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 16px);
    padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom));
}

/* ── Desktop Styles (>= 768px) ── */
@media (min-width: 768px) {
    .modal[b-slkziav7en] {
        align-items: center;
        padding: var(--space-6, 24px);
        transform: scale(0.95);
    }
    
    .modal--open[b-slkziav7en] {
        transform: scale(1);
    }
    
    .modal__container[b-slkziav7en] {
        max-width: 600px;
        max-height: 90vh;
        border-radius: var(--radius-xl, 16px);
        box-shadow: var(--shadow-2xl);
    }
    
    .modal__header[b-slkziav7en] {
        padding-top: var(--space-4, 16px);
    }
    
    .modal__content[b-slkziav7en] {
        padding-bottom: var(--space-4, 16px);
    }
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .modal[b-slkziav7en] {
        transition: opacity var(--transition-base, 200ms);
        transform: none;
    }
    
    .modal--open[b-slkziav7en] {
        transform: none;
    }
    
    .modal-overlay[b-slkziav7en] {
        animation: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .modal__container[b-slkziav7en] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .modal__header[b-slkziav7en] {
    border-bottom-color: var(--color-border, #374151);
}

[data-theme="dark"] .modal__title[b-slkziav7en] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .modal__close[b-slkziav7en] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .modal__close:hover[b-slkziav7en] {
    background: var(--color-neutral-800, #1F2937);
}
/* /Components/Feedback/OfflineIndicator.razor.rz.scp.css */
/**
 * Offline Indicator Component Styles
 * Requirements: 7.4
 */

/* ── Base Offline Indicator Styles ── */
.offline-indicator[b-i1krdubfq9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-toast, 1060);
    background: var(--color-warning, #F59E0B);
    color: var(--color-white, #FFFFFF);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    padding-top: calc(var(--space-3, 12px) + env(safe-area-inset-top));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-100%);
    transition: transform var(--transition-medium, 300ms) var(--easing-ease-out);
}

/* ── Visible State ── */
.offline-indicator--visible[b-i1krdubfq9] {
    transform: translateY(0);
}

/* ── Content ── */
.offline-indicator__content[b-i1krdubfq9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Icon ── */
.offline-indicator__icon[b-i1krdubfq9] {
    font-size: 20px;
    flex-shrink: 0;
}

/* ── Text ── */
.offline-indicator__text[b-i1krdubfq9] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .offline-indicator[b-i1krdubfq9] {
        transition: opacity var(--transition-fast, 150ms);
        transform: translateY(0);
        opacity: 0;
    }
    
    .offline-indicator--visible[b-i1krdubfq9] {
        opacity: 1;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .offline-indicator[b-i1krdubfq9] {
    background: var(--color-warning, #D97706);
}
/* /Components/Feedback/ProgressBar.razor.rz.scp.css */
/**
 * ProgressBar Component Styles
 * Requirements: 2.5, 13.3
 */

/* ── Base ProgressBar Styles ── */
.progress-bar[b-ytonubaiwv] {
    width: 100%;
    --progress-color: var(--color-primary, #2F6FED);
}

.progress-bar__track[b-ytonubaiwv] {
    width: 100%;
    background: var(--color-neutral-200, #E5E7EB);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
}

.progress-bar__fill[b-ytonubaiwv] {
    height: 100%;
    background: var(--progress-color);
    border-radius: var(--radius-full, 9999px);
    transition: width var(--transition-slow, 300ms) var(--easing-ease-out);
}

/* ── ProgressBar Sizes ── */
.progress-bar--small .progress-bar__track[b-ytonubaiwv] {
    height: 4px;
}

.progress-bar--medium .progress-bar__track[b-ytonubaiwv] {
    height: 8px;
}

.progress-bar--large .progress-bar__track[b-ytonubaiwv] {
    height: 12px;
}

/* ── Indeterminate State ── */
.progress-bar--indeterminate .progress-bar__fill[b-ytonubaiwv] {
    width: 40%;
    animation: indeterminate-b-ytonubaiwv 1.5s ease-in-out infinite;
}

@keyframes indeterminate-b-ytonubaiwv {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(250%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .progress-bar__fill[b-ytonubaiwv] {
        transition: none;
    }
    
    .progress-bar--indeterminate .progress-bar__fill[b-ytonubaiwv] {
        animation: none;
        width: 100%;
        transform: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .progress-bar__track[b-ytonubaiwv] {
    background: var(--color-neutral-700, #374151);
}
/* /Components/Feedback/Skeleton.razor.rz.scp.css */
/**
 * Skeleton Component Styles
 * Requirements: 2.5, 10.8, 13.2, 22.1, 22.2, 22.3, 22.4, 22.6, 22.7, 22.8
 */

/* ── Base Skeleton Styles ── */
.skeleton[b-g2rahz24na] {
    background: linear-gradient(
        90deg,
        var(--color-neutral-200, #E5E7EB) 0%,
        var(--color-neutral-100, #F3F4F6) 50%,
        var(--color-neutral-200, #E5E7EB) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-g2rahz24na 1.5s ease-in-out infinite;
    opacity: 1;
    transition: opacity var(--transition-base, 200ms) var(--easing-ease-in-out);
}

/* ── Skeleton Shapes ── */
.skeleton--text[b-g2rahz24na] {
    height: 16px;
    border-radius: var(--radius-sm, 4px);
}

.skeleton--circle[b-g2rahz24na] {
    border-radius: var(--radius-full, 9999px);
    width: 48px;
    height: 48px;
}

.skeleton--rectangle[b-g2rahz24na] {
    border-radius: var(--radius-md, 8px);
    width: 100%;
    height: 100px;
}

/* ── Skeleton Group ── */
.skeleton-group[b-g2rahz24na] {
    display: flex;
    flex-direction: column;
}

/* ── Shimmer Animation ── */
@keyframes shimmer-b-g2rahz24na {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ── Fade Out (when content loads) ── */
.skeleton--fade-out[b-g2rahz24na] {
    opacity: 0;
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .skeleton[b-g2rahz24na] {
        animation: none;
        background: var(--color-neutral-200, #E5E7EB);
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .skeleton[b-g2rahz24na] {
    background: linear-gradient(
        90deg,
        var(--color-neutral-800, #1F2937) 0%,
        var(--color-neutral-700, #374151) 50%,
        var(--color-neutral-800, #1F2937) 100%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] @media (prefers-reduced-motion: reduce)[b-g2rahz24na] {
    .skeleton {
        background: var(--color-neutral-800, #1F2937);
    }
}
/* /Components/Feedback/Toast.razor.rz.scp.css */
/**
 * Toast Component Styles
 * Requirements: 2.5, 13.4, 13.5, 13.6, 23.1-23.10
 */

/* ── Base Toast Styles ── */
.toast[b-zkshnmwe6d] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
    min-width: 320px;
    max-width: 480px;
    border-left: 4px solid;
}

.toast__icon[b-zkshnmwe6d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast__icon .material-symbols-outlined[b-zkshnmwe6d] {
    font-size: 24px;
}

.toast__content[b-zkshnmwe6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.toast__message[b-zkshnmwe6d] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-primary, #111827);
    line-height: var(--line-height-normal, 1.5);
}

.toast__action[b-zkshnmwe6d] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: none;
    border: none;
    color: var(--toast-color);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    border-radius: var(--radius-md, 8px);
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
}

.toast__action:hover[b-zkshnmwe6d] {
    background: rgba(0, 0, 0, 0.05);
}

.toast__close[b-zkshnmwe6d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-secondary, #6B7280);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
}

.toast__close:hover[b-zkshnmwe6d] {
    background: var(--color-neutral-100, #F3F4F6);
}

.toast__close .material-symbols-outlined[b-zkshnmwe6d] {
    font-size: 20px;
}

/* ── Toast Variants ── */
.toast--success[b-zkshnmwe6d] {
    border-left-color: var(--color-success, #10B981);
    --toast-color: var(--color-success, #10B981);
}

.toast--success .toast__icon[b-zkshnmwe6d] {
    color: var(--color-success, #10B981);
}

.toast--error[b-zkshnmwe6d] {
    border-left-color: var(--color-error, #EF4444);
    --toast-color: var(--color-error, #EF4444);
}

.toast--error .toast__icon[b-zkshnmwe6d] {
    color: var(--color-error, #EF4444);
}

.toast--warning[b-zkshnmwe6d] {
    border-left-color: var(--color-warning, #F59E0B);
    --toast-color: var(--color-warning, #F59E0B);
}

.toast--warning .toast__icon[b-zkshnmwe6d] {
    color: var(--color-warning, #F59E0B);
}

.toast--info[b-zkshnmwe6d] {
    border-left-color: var(--color-info, #3B82F6);
    --toast-color: var(--color-info, #3B82F6);
}

.toast--info .toast__icon[b-zkshnmwe6d] {
    color: var(--color-info, #3B82F6);
}

/* ── Toast Animations ── */
.toast--entering[b-zkshnmwe6d] {
    animation: slideDown-b-zkshnmwe6d var(--transition-slow, 300ms) var(--easing-ease-out);
}

.toast--exiting[b-zkshnmwe6d] {
    animation: slideUp-b-zkshnmwe6d var(--transition-base, 200ms) var(--easing-ease-in);
}

@keyframes slideDown-b-zkshnmwe6d {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp-b-zkshnmwe6d {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* ── Responsive Positioning ── */
@media (max-width: 767px) {
    .toast[b-zkshnmwe6d] {
        min-width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .toast--entering[b-zkshnmwe6d],
    .toast--exiting[b-zkshnmwe6d] {
        animation: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .toast[b-zkshnmwe6d] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .toast__message[b-zkshnmwe6d] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .toast__close:hover[b-zkshnmwe6d] {
    background: var(--color-neutral-800, #1F2937);
}
/* /Components/Filters/BemFilterPanel.razor.rz.scp.css */
.filter-panel-wrapper[b-jhmfdrvqjw] {
    background: var(--surface-color);
    border-bottom: 2px solid var(--divider-color);
    position: sticky;
    top: 167px;
    z-index: 18;
    padding: 16px;
}

.filter-panel[b-jhmfdrvqjw] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto;
}

.filter-section[b-jhmfdrvqjw] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-jhmfdrvqjw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-label .material-symbols-outlined[b-jhmfdrvqjw] {
    font-size: 16px;
    color: #94A3B8;
}

.filter-select[b-jhmfdrvqjw] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #1E293B;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.filter-select:hover[b-jhmfdrvqjw] {
    border-color: #CBD5E1;
}

.filter-select:focus[b-jhmfdrvqjw] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-actions[b-jhmfdrvqjw] {
    display: flex;
    align-items: flex-end;
}

.btn-clear[b-jhmfdrvqjw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-clear:hover[b-jhmfdrvqjw] {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #475569;
}

.btn-clear:active[b-jhmfdrvqjw] {
    transform: scale(0.98);
}

.btn-clear .material-symbols-outlined[b-jhmfdrvqjw] {
    font-size: 18px;
}

@media (max-width: 768px) {
    .filter-panel[b-jhmfdrvqjw] {
        flex-direction: column;
        gap: 12px;
    }

    .filter-section[b-jhmfdrvqjw] {
        min-width: 100%;
    }

    .filter-actions[b-jhmfdrvqjw] {
        width: 100%;
    }

    .btn-clear[b-jhmfdrvqjw] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Forms/Checkbox.razor.rz.scp.css */
/**
 * Checkbox Component Styles
 * Requirements: 2.4, 3.3, 8.1, 8.4
 */

.checkbox[b-3b2oc3xpin] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
    padding: var(--space-2, 8px) 0;
}

.checkbox__input[b-3b2oc3xpin] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox__box[b-3b2oc3xpin] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: var(--border-width-medium, 2px) solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface, #FFFFFF);
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
}

.checkbox__check[b-3b2oc3xpin] {
    font-size: 16px;
    color: var(--color-text-inverse, #FFFFFF);
}

/* Checked state */
.checkbox__input:checked + .checkbox__box[b-3b2oc3xpin] {
    background: var(--color-primary, #2F6FED);
    border-color: var(--color-primary, #2F6FED);
}

/* Focus state */
.checkbox__input:focus-visible + .checkbox__box[b-3b2oc3xpin] {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-primary));
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Hover state */
.checkbox:hover .checkbox__box[b-3b2oc3xpin] {
    border-color: var(--color-primary, #2F6FED);
}

/* Label */
.checkbox__label[b-3b2oc3xpin] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-primary, #111827);
    user-select: none;
}

/* Disabled state */
.checkbox--disabled[b-3b2oc3xpin] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark mode */
[data-theme="dark"] .checkbox__box[b-3b2oc3xpin] {
    background: var(--color-surface, #1F2937);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .checkbox__label[b-3b2oc3xpin] {
    color: var(--color-text-primary, #F9FAFB);
}
/* /Components/Forms/ConservationStateChip.razor.rz.scp.css */
.conservation-chip[b-xq890vh74j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    border: 2px solid transparent;
}

.conservation-chip:active[b-xq890vh74j] {
    transform: scale(0.95);
}

.conservation-chip--selected[b-xq890vh74j] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.conservation-chip--unselected[b-xq890vh74j] {
    background-color: var(--background-color);
    color: var(--text-primary);
    border-color: var(--divider-color);
}

.conservation-chip--unselected:hover[b-xq890vh74j] {
    background-color: var(--surface-color);
    border-color: var(--primary-light);
}

@media (prefers-reduced-motion: reduce) {
    .conservation-chip[b-xq890vh74j] {
        transition: none;
    }
    
    .conservation-chip:active[b-xq890vh74j] {
        transform: none;
    }
}
/* /Components/Forms/FilterChip.razor.rz.scp.css */
/* FilterChip Component Styles */

.filter-chip[b-41529pp60r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-full); /* 9999px - pill shape */
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--easing-ease-in-out),
                color var(--transition-fast) var(--easing-ease-in-out),
                transform var(--transition-fast) var(--easing-ease-in-out),
                box-shadow var(--transition-fast) var(--easing-ease-in-out);
    user-select: none;
    white-space: nowrap;
    
    /* Ensure minimum touch target size */
    min-height: var(--touch-target-min);
}

/* Inactive State */
.filter-chip--inactive[b-41529pp60r] {
    background-color: #EEF2FF; /* Light blue background for inactive */
    color: var(--color-text-primary);
}

.filter-chip--inactive:hover[b-41529pp60r] {
    background-color: #E0E7FF; /* Slightly darker on hover */
    box-shadow: var(--shadow-sm);
}

.filter-chip--inactive:active[b-41529pp60r] {
    transform: scale(0.97);
}

/* Active State */
.filter-chip--active[b-41529pp60r] {
    background-color: #2F6FED; /* Primary blue for active */
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.filter-chip--active:hover[b-41529pp60r] {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.filter-chip--active:active[b-41529pp60r] {
    transform: scale(0.97);
}

/* Label */
.filter-chip__label[b-41529pp60r] {
    line-height: 1;
}

/* Remove Button */
.filter-chip__remove[b-41529pp60r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    margin-left: var(--space-1);
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast) var(--easing-ease-in-out),
                transform var(--transition-fast) var(--easing-ease-in-out);
    width: 20px;
    height: 20px;
}

.filter-chip__remove:hover[b-41529pp60r] {
    background-color: rgba(255, 255, 255, 0.2);
}

.filter-chip__remove:active[b-41529pp60r] {
    transform: scale(0.9);
}

.filter-chip__remove .material-symbols-outlined[b-41529pp60r] {
    font-size: 16px;
    line-height: 1;
}

/* Focus States for Accessibility */
.filter-chip:focus-visible[b-41529pp60r] {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.filter-chip__remove:focus-visible[b-41529pp60r] {
    outline: var(--focus-ring-width) solid rgba(255, 255, 255, 0.8);
    outline-offset: 1px;
}

/* Disabled State (optional, for future use) */
.filter-chip:disabled[b-41529pp60r] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .filter-chip[b-41529pp60r],
    .filter-chip__remove[b-41529pp60r] {
        transition: none;
    }
    
    .filter-chip--inactive:active[b-41529pp60r],
    .filter-chip--active:active[b-41529pp60r],
    .filter-chip__remove:active[b-41529pp60r] {
        transform: none;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .filter-chip--inactive[b-41529pp60r] {
    background-color: #1E3A8A; /* Darker blue for dark mode inactive */
    color: var(--color-text-primary);
}

[data-theme="dark"] .filter-chip--inactive:hover[b-41529pp60r] {
    background-color: #1E40AF;
}

[data-theme="dark"] .filter-chip--active[b-41529pp60r] {
    background-color: #3B82F6; /* Brighter blue for dark mode active */
    color: #FFFFFF;
}

[data-theme="dark"] .filter-chip--active:hover[b-41529pp60r] {
    background-color: #60A5FA;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .filter-chip[b-41529pp60r] {
        /* Ensure comfortable touch targets on mobile */
        padding: var(--space-2) var(--space-3);
    }
}
/* /Components/Forms/HierarchicalDropdown.razor.rz.scp.css */
.hierarchical-dropdown[b-38hwj8awhv] {
    margin-bottom: var(--spacing-md);
}

.hierarchical-dropdown__label[b-38hwj8awhv] {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hierarchical-dropdown__wrapper[b-38hwj8awhv] {
    position: relative;
}

.hierarchical-dropdown__select[b-38hwj8awhv] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: var(--spacing-xl);
    border: 1px solid var(--divider-color);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background-color: var(--surface-color);
    cursor: pointer;
    min-height: var(--touch-target-min);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    transition: border-color var(--transition-fast);
}

.hierarchical-dropdown__select:focus[b-38hwj8awhv] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 58, 95, 0.1);
}

.hierarchical-dropdown__select:disabled[b-38hwj8awhv] {
    background-color: var(--background-color);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.hierarchical-dropdown__select.loading[b-38hwj8awhv] {
    padding-right: 48px;
}

.hierarchical-dropdown__spinner[b-38hwj8awhv] {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
/* /Components/Forms/Radio.razor.rz.scp.css */
/**
 * Radio Component Styles
 * Requirements: 2.4, 3.3, 8.1, 8.4
 */

.radio[b-gul0zr4nxp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
    padding: var(--space-2, 8px) 0;
}

.radio__input[b-gul0zr4nxp] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio__circle[b-gul0zr4nxp] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: var(--border-width-medium, 2px) solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-surface, #FFFFFF);
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
}

.radio__dot[b-gul0zr4nxp] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary, #2F6FED);
}

/* Checked state */
.radio__input:checked + .radio__circle[b-gul0zr4nxp] {
    border-color: var(--color-primary, #2F6FED);
}

/* Focus state */
.radio__input:focus-visible + .radio__circle[b-gul0zr4nxp] {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-primary));
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Hover state */
.radio:hover .radio__circle[b-gul0zr4nxp] {
    border-color: var(--color-primary, #2F6FED);
}

/* Label */
.radio__label[b-gul0zr4nxp] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-primary, #111827);
    user-select: none;
}

/* Disabled state */
.radio--disabled[b-gul0zr4nxp] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark mode */
[data-theme="dark"] .radio__circle[b-gul0zr4nxp] {
    background: var(--color-surface, #1F2937);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .radio__label[b-gul0zr4nxp] {
    color: var(--color-text-primary, #F9FAFB);
}
/* /Components/Forms/SearchBar.razor.rz.scp.css */
/* SearchBar Component Styles */

.search-bar[b-n2nxwnervv] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    transition: border-color var(--transition-base) var(--easing-ease-in-out),
                box-shadow var(--transition-base) var(--easing-ease-in-out);
}

.search-bar:focus-within[b-n2nxwnervv] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Search Icon */
.search-bar__icon[b-n2nxwnervv] {
    position: absolute;
    left: var(--space-4);
    color: var(--color-text-secondary);
    font-size: 20px;
    pointer-events: none;
    user-select: none;
}

/* Input Field */
.search-bar__input[b-n2nxwnervv] {
    flex: 1;
    width: 100%;
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + 20px + var(--space-2)); /* icon width + spacing */
    padding-right: calc(var(--space-4) + 20px + var(--space-2)); /* clear button space */
    border: none;
    border-radius: 9999px;
    background-color: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    outline: none;
}

.search-bar__input[b-n2nxwnervv]::placeholder {
    color: var(--color-text-tertiary);
}

/* Remove default search input styling */
.search-bar__input[b-n2nxwnervv]::-webkit-search-decoration,
.search-bar__input[b-n2nxwnervv]::-webkit-search-cancel-button,
.search-bar__input[b-n2nxwnervv]::-webkit-search-results-button,
.search-bar__input[b-n2nxwnervv]::-webkit-search-results-decoration {
    display: none;
}

/* Clear Button */
.search-bar__clear[b-n2nxwnervv] {
    position: absolute;
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast) var(--easing-ease-in-out),
                color var(--transition-fast) var(--easing-ease-in-out);
}

.search-bar__clear:hover[b-n2nxwnervv] {
    background-color: var(--color-neutral-100);
    color: var(--color-text-primary);
}

.search-bar__clear:active[b-n2nxwnervv] {
    transform: scale(0.95);
}

.search-bar__clear .material-symbols-outlined[b-n2nxwnervv] {
    font-size: 20px;
}

/* Disabled State */
.search-bar--disabled[b-n2nxwnervv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.search-bar--disabled .search-bar__input[b-n2nxwnervv] {
    cursor: not-allowed;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .search-bar[b-n2nxwnervv],
    .search-bar__clear[b-n2nxwnervv] {
        transition: none;
    }
    
    .search-bar__clear:active[b-n2nxwnervv] {
        transform: none;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .search-bar__clear:hover[b-n2nxwnervv] {
    background-color: var(--color-neutral-700);
}
/* /Components/Forms/Switch.razor.rz.scp.css */
/**
 * Switch Component Styles
 * Requirements: 2.4, 3.3, 8.1, 8.4
 */

.switch[b-epca4dv2en] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
    padding: var(--space-2, 8px) 0;
}

.switch__input[b-epca4dv2en] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__track[b-epca4dv2en] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--color-neutral-300, #D1D5DB);
    border-radius: var(--radius-full, 9999px);
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
}

.switch__thumb[b-epca4dv2en] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-full, 9999px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast, 150ms) var(--easing-ease-in-out);
}

/* Checked state */
.switch__input:checked + .switch__track[b-epca4dv2en] {
    background: var(--color-primary, #2F6FED);
}

.switch__input:checked + .switch__track .switch__thumb[b-epca4dv2en] {
    transform: translateX(20px);
}

/* Focus state */
.switch__input:focus-visible + .switch__track[b-epca4dv2en] {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-primary));
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Hover state */
.switch:hover .switch__track[b-epca4dv2en] {
    background: var(--color-neutral-400, #9CA3AF);
}

.switch:hover .switch__input:checked + .switch__track[b-epca4dv2en] {
    background: var(--color-primary-hover, #2563EB);
}

/* Label */
.switch__label[b-epca4dv2en] {
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-primary, #111827);
    user-select: none;
}

/* Disabled state */
.switch--disabled[b-epca4dv2en] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .switch__track[b-epca4dv2en],
    .switch__thumb[b-epca4dv2en] {
        transition: none;
    }
}

/* Dark mode */
[data-theme="dark"] .switch__track[b-epca4dv2en] {
    background: var(--color-neutral-700, #374151);
}

[data-theme="dark"] .switch__label[b-epca4dv2en] {
    color: var(--color-text-primary, #F9FAFB);
}
/* /Components/Forms/TextField.razor.rz.scp.css */
/**
 * TextField Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.4, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.10
 */

/* ── Base TextField Styles ── */
.text-field[b-16zf8qow0s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    width: 100%;
}

.text-field__container[b-16zf8qow0s] {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Input Styles ── */
.text-field__input[b-16zf8qow0s] {
    width: 100%;
    padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-2, 8px);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-primary, #111827);
    background: var(--color-surface, #FFFFFF);
    border: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    outline: none;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
    min-height: var(--touch-target-min, 44px);
}

.text-field__input:focus[b-16zf8qow0s] {
    border-color: var(--color-primary, #2F6FED);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.1);
}

.text-field__input[b-16zf8qow0s]::placeholder {
    color: var(--color-text-tertiary, #9CA3AF);
}

/* ── Floating Label ── */
.text-field__label[b-16zf8qow0s] {
    position: absolute;
    left: var(--space-3, 12px);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-base, 14px);
    color: var(--color-text-secondary, #6B7280);
    pointer-events: none;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-out);
    background: var(--color-surface, #FFFFFF);
    padding: 0 var(--space-1, 4px);
}

/* Label moves up when input is focused or filled */
.text-field--filled .text-field__label[b-16zf8qow0s],
.text-field__input:focus + .text-field__label[b-16zf8qow0s] {
    top: 0;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-primary, #2F6FED);
}

/* ── Clear Button ── */
.text-field__clear[b-16zf8qow0s] {
    position: absolute;
    right: var(--space-2, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-secondary, #6B7280);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
}

.text-field__clear:hover[b-16zf8qow0s] {
    background: var(--color-neutral-100, #F3F4F6);
}

.text-field__clear:active[b-16zf8qow0s] {
    transform: scale(0.95);
}

.text-field__clear .material-symbols-outlined[b-16zf8qow0s] {
    font-size: 18px;
}

/* ── Helper Text ── */
.text-field__helper[b-16zf8qow0s] {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary, #6B7280);
    padding-left: var(--space-3, 12px);
}

/* ── Error State ── */
.text-field--error .text-field__input[b-16zf8qow0s] {
    border-color: var(--color-error, #EF4444);
}

.text-field--error .text-field__input:focus[b-16zf8qow0s] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.text-field--error .text-field__label[b-16zf8qow0s] {
    color: var(--color-error, #EF4444);
}

.text-field__error[b-16zf8qow0s] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--font-size-xs, 12px);
    color: var(--color-error, #EF4444);
    padding-left: var(--space-3, 12px);
}

.text-field__error .material-symbols-outlined[b-16zf8qow0s] {
    font-size: 16px;
}

/* ── Disabled State ── */
.text-field--disabled .text-field__input[b-16zf8qow0s] {
    background: var(--color-neutral-50, #F9FAFB);
    color: var(--color-text-disabled, #D1D5DB);
    cursor: not-allowed;
}

.text-field--disabled .text-field__label[b-16zf8qow0s] {
    color: var(--color-text-disabled, #D1D5DB);
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .text-field__input[b-16zf8qow0s] {
    background: var(--color-surface, #1F2937);
    color: var(--color-text-primary, #F9FAFB);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .text-field__label[b-16zf8qow0s] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .text-field__clear:hover[b-16zf8qow0s] {
    background: var(--color-neutral-800, #1F2937);
}

[data-theme="dark"] .text-field--disabled .text-field__input[b-16zf8qow0s] {
    background: var(--color-neutral-900, #111827);
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
.app-header[b-52j751dcki] {
    background-color: var(--color-primary);
    color: white;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-top[b-52j751dcki] {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 12px;
}

.back-button[b-52j751dcki] {
    background: none;
    border: none;
    color: white;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.municipality-info[b-52j751dcki] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.municipality-name[b-52j751dcki] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-title-md);
}

.offline-badge[b-52j751dcki] {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
}

.header-bottom[b-52j751dcki] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-info[b-52j751dcki] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

.mini-progress-bar[b-52j751dcki] {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.mini-progress-fill[b-52j751dcki] {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.3s ease;
}
/* /Components/Layout/AppLayout.razor.rz.scp.css */
.app-layout[b-qvzpparxns] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
}

.app-layout__content[b-qvzpparxns] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: calc(var(--safe-area-inset-bottom) + 16px);
}

.toast-container[b-qvzpparxns] {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: 100%;
    max-width: 480px;
    padding: 0 16px;
    box-sizing: border-box;
}

.toast[b-qvzpparxns] {
    margin-left: 20px;
    padding: 12px 20px;
    border-radius: 10px;
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    pointer-events: auto;
    min-width: 200px;
    max-width: min(90vw, 360px);
    text-align: center;
    animation: toastSlideUp-b-qvzpparxns 300ms ease-out;
}

@keyframes toastSlideUp-b-qvzpparxns {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.success[b-qvzpparxns] { background-color: var(--success-color); }
.toast.error[b-qvzpparxns] { background-color: var(--error-color); }
.toast.warning[b-qvzpparxns] { background-color: var(--warning-color); }
.toast.info[b-qvzpparxns] { background-color: var(--info-color); }

.nav-progress[b-qvzpparxns] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2500;
    background: transparent;
    pointer-events: none;
}

.nav-progress__bar[b-qvzpparxns] {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: navProgress-b-qvzpparxns 700ms ease-in-out infinite;
}

@keyframes navProgress-b-qvzpparxns {
    0% { transform: translateX(-40%); opacity: 0.4; }
    50% { opacity: 1; }
    100% { transform: translateX(140%); opacity: 0.4; }
}
/* /Components/Layout/AuthMinimalLayout.razor.rz.scp.css */
.auth-layout[b-et60rgcfv5] {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 40px;
}
/* /Components/Layout/Container.razor.rz.scp.css */
/**
 * Container Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.2, 3.4
 */

/* ── Base Container Styles ── */
.container[b-1gvth7nsdg] {
    width: 100%;
    /* Respect safe area insets on devices with notches */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ── Container with Padding ── */
.container--padded[b-1gvth7nsdg] {
    padding-left: calc(var(--space-4, 16px) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4, 16px) + env(safe-area-inset-right));
}

/* ── Centered Container ── */
.container--centered[b-1gvth7nsdg] {
    margin-left: auto;
    margin-right: auto;
}

/* ── Max Width Constraints ── */
.container--small[b-1gvth7nsdg] {
    max-width: 640px;
}

.container--medium[b-1gvth7nsdg] {
    max-width: 768px;
}

.container--large[b-1gvth7nsdg] {
    max-width: 1024px;
}

.container--xlarge[b-1gvth7nsdg] {
    max-width: 1280px;
}

.container--full[b-1gvth7nsdg] {
    max-width: 100%;
}

/* ── Responsive Padding ── */
@media (min-width: 768px) {
    .container--padded[b-1gvth7nsdg] {
        padding-left: calc(var(--space-6, 24px) + env(safe-area-inset-left));
        padding-right: calc(var(--space-6, 24px) + env(safe-area-inset-right));
    }
}

@media (min-width: 1024px) {
    .container--padded[b-1gvth7nsdg] {
        padding-left: calc(var(--space-8, 32px) + env(safe-area-inset-left));
        padding-right: calc(var(--space-8, 32px) + env(safe-area-inset-right));
    }
}
/* /Components/Layout/Divider.razor.rz.scp.css */
/**
 * Divider Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.2, 18.5
 */

/* ── Base Divider Styles ── */
.divider[b-xaxdjndtad] {
    border: none;
    background: var(--color-divider, #E5E7EB);
}

/* ── Horizontal Divider ── */
.divider--horizontal[b-xaxdjndtad] {
    width: 100%;
    height: var(--border-width-thin, 1px);
    margin: var(--space-4, 16px) 0;
}

/* ── Vertical Divider ── */
.divider--vertical[b-xaxdjndtad] {
    width: var(--border-width-thin, 1px);
    height: 100%;
    margin: 0 var(--space-4, 16px);
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .divider[b-xaxdjndtad] {
    background: var(--color-divider, #374151);
}
/* /Components/Layout/Grid.razor.rz.scp.css */
/**
 * Grid Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.2, 3.2, 18.2, 18.6
 */

/* ── Base Grid Styles ── */
.grid[b-ywgkbx20xw] {
    display: grid;
    gap: var(--grid-gap, var(--space-4, 16px));
    width: 100%;
}

/* ── Responsive Columns ── */
/* Mobile: 1 column */
.grid[b-ywgkbx20xw] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Tablet and above: use specified columns */
@media (min-width: 768px) {
    .grid[b-ywgkbx20xw] {
        grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
    }
}

/* ── Auto-fit variant for flexible columns ── */
.grid--auto-fit[b-ywgkbx20xw] {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ── Auto-fill variant for flexible columns ── */
.grid--auto-fill[b-ywgkbx20xw] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.main-layout[b-hkhk5luznp] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--background-color);
}

.app-header[b-hkhk5luznp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 24px 20px;
    background: var(--surface-color);
}

.user-info[b-hkhk5luznp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar[b-hkhk5luznp] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
}

.user-details[b-hkhk5luznp] {
    display: flex;
    flex-direction: column;
}

.user-greeting[b-hkhk5luznp] {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.app-sublabel[b-hkhk5luznp] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.icon-button[b-hkhk5luznp] {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
}

.unit-selector[b-hkhk5luznp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    margin: 0 24px 24px;
    background: var(--surface-color);
    border: 1px solid var(--divider-color);
    border-radius: 12px;
}

.unit-info[b-hkhk5luznp] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.unit-info .material-symbols-outlined[b-hkhk5luznp] {
    font-size: 18px;
}

.text-button[b-hkhk5luznp] {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: 0;
}

.content[b-hkhk5luznp] {
    flex: 1;
    padding: 0 24px;
    padding-bottom: calc(var(--safe-area-inset-bottom) + 24px);
    min-height: 0;
    overflow-y: auto;
}

.toast-container[b-hkhk5luznp] {
    position: fixed;
    top: 24px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast[b-hkhk5luznp] {
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    min-width: 200px;
    max-width: 90vw;
}

.toast.success[b-hkhk5luznp] {
    background-color: #16A34A;
}

.toast.error[b-hkhk5luznp] {
    background-color: #DC2626;
}

.toast.warning[b-hkhk5luznp] {
    background-color: #F59E0B;
}

.toast.info[b-hkhk5luznp] {
    background-color: #1E3A5F;
}
/* /Components/Layout/MinimalLayout.razor.rz.scp.css */
.app-viewport[b-y5n3b6qqe3] {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    width: 100%;
}

.mobile-frame[b-y5n3b6qqe3] {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.minimal-page[b-y5n3b6qqe3] {
    background: #F8FAFC;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    width: 100%;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-profile[b-lejsa1zlz1] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-color: #f1f5f9;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
    width: 100%;
}

.avatar[b-lejsa1zlz1] {
    border-radius: 50%;
    background: #003366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border: 2px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.display-name[b-lejsa1zlz1] {
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.email-display[b-lejsa1zlz1] {
    font-size: 12px;
    color: #64748b;
    margin-top: -4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.nav-menu[b-lejsa1zlz1] {
    display: flex;
    flex-direction: column;
}

.session-info[b-lejsa1zlz1] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-label[b-lejsa1zlz1] {
    font-size: 12px;
    color: #64748b;
}

.session-value[b-lejsa1zlz1] {
    font-size: 14px;
    color: #475569;
}

.nav-divider[b-lejsa1zlz1] {
    margin: 8px 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.nav-item[b-lejsa1zlz1] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.nav-item:hover[b-lejsa1zlz1] {
    background-color: #f1f5f9;
}

.nav-link[b-lejsa1zlz1] {
    text-decoration: none;
}

.nav-icon[b-lejsa1zlz1] {
    margin-right: 12px;
    color: #475569;
}

.logout-icon[b-lejsa1zlz1] {
    color: #ef4444;
}

.nav-text[b-lejsa1zlz1] {
    font-size: 14px;
    color: #1e293b;
}
/* /Components/Layout/ShellLayout.razor.rz.scp.css */
.shell-layout[b-bbmb7rn7lv] {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #F5F7FA;
    display: flex;
    justify-content: center;
    width: 100%;
}

.mobile-frame[b-bbmb7rn7lv] {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
    overflow-x: hidden;
}
/* /Components/Layout/Spacer.razor.rz.scp.css */
/**
 * Spacer Component Styles
 * Requirements: 2.2, 18.5
 */

.spacer[b-hpng65mbg0] {
    flex-shrink: 0;
}

.spacer--vertical[b-hpng65mbg0] {
    width: 100%;
}

.spacer--horizontal[b-hpng65mbg0] {
    height: 100%;
}
/* /Components/Layout/Stack.razor.rz.scp.css */
/**
 * Stack Component Styles
 * Using CSS isolation and design tokens
 * Requirements: 2.2, 3.2
 */

/* ── Base Stack Styles ── */
.stack[b-5vn42aqyet] {
    display: flex;
    width: 100%;
}

/* ── Stack Direction ── */
.stack--row[b-5vn42aqyet] {
    flex-direction: row;
}

.stack--column[b-5vn42aqyet] {
    flex-direction: column;
}

/* ── Stack Wrap ── */
.stack--wrap[b-5vn42aqyet] {
    flex-wrap: wrap;
}

/* ── Responsive Direction Changes ── */
@media (max-width: 767px) {
    .stack--row.stack--responsive[b-5vn42aqyet] {
        flex-direction: column;
    }
}
/* /Components/Navigation/BottomNav.razor.rz.scp.css */
/**
 * BottomNav Component Styles
 * Requirements: 2.3, 5.1, 5.2, 5.3, 5.6, 5.7, 5.8, 8.4
 */

/* ── Base BottomNav Styles ── */
.bottom-nav[b-iqi2ps2sqb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface, #FFFFFF);
    border-top: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: var(--z-index-fixed, 1030);
}

/* ── Nav Item ── */
.bottom-nav__item[b-iqi2ps2sqb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: none;
    border: none;
    color: var(--color-text-secondary, #6B7280);
    cursor: pointer;
    transition: color var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
    flex: 1;
    max-width: 120px;
}

.bottom-nav__item:hover[b-iqi2ps2sqb] {
    color: var(--color-primary, #2F6FED);
}

.bottom-nav__item:focus-visible[b-iqi2ps2sqb] {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-primary));
    outline-offset: var(--focus-ring-offset, 2px);
    border-radius: var(--radius-md, 8px);
}

/* ── Active Item ── */
.bottom-nav__item--active[b-iqi2ps2sqb] {
    color: var(--color-primary, #2F6FED);
}

.bottom-nav__item--active .bottom-nav__icon[b-iqi2ps2sqb] {
    font-variation-settings: 'FILL' 1;
}

/* ── Icon ── */
.bottom-nav__icon[b-iqi2ps2sqb] {
    font-size: 24px;
    transition: font-variation-settings var(--transition-fast, 150ms) var(--easing-ease-in-out);
}

/* ── Label ── */
.bottom-nav__label[b-iqi2ps2sqb] {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 500);
    text-align: center;
}

/* ── Hide on Desktop ── */
@media (min-width: 768px) {
    .bottom-nav[b-iqi2ps2sqb] {
        display: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .bottom-nav[b-iqi2ps2sqb] {
    background: var(--color-surface, #1F2937);
    border-top-color: var(--color-border, #374151);
}

[data-theme="dark"] .bottom-nav__item[b-iqi2ps2sqb] {
    color: var(--color-text-secondary, #D1D5DB);
}

[data-theme="dark"] .bottom-nav__item:hover[b-iqi2ps2sqb] {
    color: var(--color-primary, #3B82F6);
}

[data-theme="dark"] .bottom-nav__item--active[b-iqi2ps2sqb] {
    color: var(--color-primary, #3B82F6);
}
/* /Components/Navigation/BottomNavigation.razor.rz.scp.css */
.bottom-navigation[b-uo6r52eigz] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--surface-color);
    border-top: 1px solid var(--divider-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    height: var(--bottom-nav-height);
    z-index: var(--z-fixed);
    padding: 0 var(--spacing-sm);
}

.bottom-navigation__item[b-uo6r52eigz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    flex: 1;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--spacing-xs);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
    font-family: var(--font-family);
}

.bottom-navigation__item:hover[b-uo6r52eigz] {
    color: var(--primary-light);
}

.bottom-navigation__item.active[b-uo6r52eigz] {
    color: var(--primary-color);
}

.bottom-navigation__item i[b-uo6r52eigz] {
    font-size: 24px;
}

.bottom-navigation__label[b-uo6r52eigz] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hide on desktop (tablet and above) */
@media (min-width: 768px) {
    .bottom-navigation[b-uo6r52eigz] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-navigation__item[b-uo6r52eigz] {
        transition: none;
    }
}
/* /Components/Navigation/Drawer.razor.rz.scp.css */
/**
 * Drawer Component Styles
 * Requirements: 2.3, 5.5
 */

/* ── Overlay ── */
.drawer-overlay[b-d9poq6w4k1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.5));
    z-index: var(--z-index-modal-backdrop, 1040);
    animation: fadeIn-b-d9poq6w4k1 var(--transition-base, 200ms) var(--easing-ease-in-out);
}

@keyframes fadeIn-b-d9poq6w4k1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Base Drawer Styles ── */
.drawer[b-d9poq6w4k1] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--color-surface, #FFFFFF);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-index-modal, 1050);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--transition-slow, 300ms) var(--easing-ease-out);
}

/* ── Drawer Positions ── */
.drawer--left[b-d9poq6w4k1] {
    left: 0;
    transform: translateX(-100%);
}

.drawer--right[b-d9poq6w4k1] {
    right: 0;
    transform: translateX(100%);
}

/* ── Open State ── */
.drawer--open.drawer--left[b-d9poq6w4k1] {
    transform: translateX(0);
}

.drawer--open.drawer--right[b-d9poq6w4k1] {
    transform: translateX(0);
}

/* ── Drawer Header ── */
.drawer__header[b-d9poq6w4k1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-4, 16px);
    padding-top: calc(var(--space-4, 16px) + env(safe-area-inset-top));
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
}

.drawer__close[b-d9poq6w4k1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
}

.drawer__close:hover[b-d9poq6w4k1] {
    background: var(--color-neutral-100, #F3F4F6);
}

.drawer__close .material-symbols-outlined[b-d9poq6w4k1] {
    font-size: 24px;
}

/* ── Drawer Content ── */
.drawer__content[b-d9poq6w4k1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 16px);
}

/* ── Accessibility - Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .drawer[b-d9poq6w4k1] {
        transition: none;
    }
    
    .drawer-overlay[b-d9poq6w4k1] {
        animation: none;
    }
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .drawer[b-d9poq6w4k1] {
    background: var(--color-surface, #1F2937);
}

[data-theme="dark"] .drawer__header[b-d9poq6w4k1] {
    border-bottom-color: var(--color-border, #374151);
}

[data-theme="dark"] .drawer__close[b-d9poq6w4k1] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .drawer__close:hover[b-d9poq6w4k1] {
    background: var(--color-neutral-800, #1F2937);
}
/* /Components/Navigation/TopBar.razor.rz.scp.css */
/**
 * TopBar Component Styles
 * Requirements: 2.3
 */

/* ── Base TopBar Styles ── */
.top-bar[b-qw28qf7pay] {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    padding-top: calc(var(--space-4, 16px) + env(safe-area-inset-top));
    background: var(--color-surface, #FFFFFF);
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #E5E7EB);
    min-height: 64px;
}

/* ── Back Button ── */
.top-bar__back[b-qw28qf7pay] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms) var(--easing-ease-in-out);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.top-bar__back:hover[b-qw28qf7pay] {
    background: var(--color-neutral-100, #F3F4F6);
}

.top-bar__back:active[b-qw28qf7pay] {
    transform: scale(0.95);
}

.top-bar__back .material-symbols-outlined[b-qw28qf7pay] {
    font-size: 24px;
}

/* ── Title ── */
.top-bar__title[b-qw28qf7pay] {
    flex: 1;
    font-size: var(--font-size-xl, 18px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #111827);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Actions ── */
.top-bar__actions[b-qw28qf7pay] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

/* ── Dark Mode Support ── */
[data-theme="dark"] .top-bar[b-qw28qf7pay] {
    background: var(--color-surface, #1F2937);
    border-bottom-color: var(--color-border, #374151);
}

[data-theme="dark"] .top-bar__back[b-qw28qf7pay] {
    color: var(--color-text-primary, #F9FAFB);
}

[data-theme="dark"] .top-bar__back:hover[b-qw28qf7pay] {
    background: var(--color-neutral-800, #1F2937);
}

[data-theme="dark"] .top-bar__title[b-qw28qf7pay] {
    color: var(--color-text-primary, #F9FAFB);
}
/* /Components/Operations/OperationsContainer.razor.rz.scp.css */
.operations-backdrop[b-j5l10i54c7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-in-out;
}

.operations-backdrop.active[b-j5l10i54c7] {
    opacity: 1;
    pointer-events: auto;
}

.operations-container[b-j5l10i54c7] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 50vh;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-radius: 24px 24px 0 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: ops-slide-up-b-j5l10i54c7 300ms ease-out;
}

@keyframes ops-slide-up-b-j5l10i54c7 {
    from { transform: translateX(-50%) translateY(100%); }
    to   { transform: translateX(-50%) translateY(0); }
}

.operations-container.active[b-j5l10i54c7] {
    transform: translateX(-50%) translateY(0);
}

.operations-top-bar[b-j5l10i54c7] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.operations-handle[b-j5l10i54c7] {
    width: 40px;
    height: 4px;
    background: #CBD5E1;
    border-radius: 2px;
}

.operations-close-btn[b-j5l10i54c7] {
    position: absolute;
    right: 12px;
    top: 8px;
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.operations-close-btn:active[b-j5l10i54c7] {
    background: #F1F5F9;
}

.operations-content[b-j5l10i54c7] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.empty-state[b-j5l10i54c7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 12px;
    min-height: 200px;
}

.empty-icon[b-j5l10i54c7] {
    font-size: 64px;
    color: #CBD5E1;
}

.empty-message[b-j5l10i54c7] {
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.empty-submessage[b-j5l10i54c7] {
    font-size: 14px;
    color: #64748B;
    margin: 0;
}

.btn-empty-cta[b-j5l10i54c7] {
    margin-top: 8px;
    padding: 12px 24px;
    background: #1E3A5F;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background 200ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.btn-empty-cta:active[b-j5l10i54c7] {
    background: #16324F;
}

@media (prefers-reduced-motion: reduce) {
    .operations-backdrop[b-j5l10i54c7],
    .operations-container[b-j5l10i54c7] {
        transition: none;
        animation: none;
    }
}

.loading-state[b-j5l10i54c7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 12px;
    min-height: 200px;
}

.spinner-ring[b-j5l10i54c7] {
    width: 36px;
    height: 36px;
    border: 3px solid #E2E8F0;
    border-top-color: #1E3A5F;
    border-radius: 50%;
    animation: spin-b-j5l10i54c7 0.8s linear infinite;
}

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

.loading-text[b-j5l10i54c7] {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.operations-list[b-j5l10i54c7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.operations-header[b-j5l10i54c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 4px;
}

.operations-title[b-j5l10i54c7] {
    font-size: 16px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.btn-nova-operacao[b-j5l10i54c7] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #1E3A5F;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background 200ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.btn-nova-operacao:active[b-j5l10i54c7] {
    background: #16324F;
}

.btn-nova-operacao .material-symbols-outlined[b-j5l10i54c7] {
    font-size: 18px;
}

.operation-card[b-j5l10i54c7] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.operation-card:active[b-j5l10i54c7] {
    background: #F8FAFC;
    transform: scale(0.98);
}

.operation-header[b-j5l10i54c7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.operation-type[b-j5l10i54c7] {
    font-size: 14px;
    font-weight: 700;
    color: #1E3A5F;
}

.operation-date[b-j5l10i54c7] {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
}

.operation-justificativa[b-j5l10i54c7] {
    font-size: 14px;
    color: #475569;
    margin: 0 0 8px;
    line-height: 1.4;
}

.operation-photos[b-j5l10i54c7] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
}

.operation-photos .material-symbols-outlined[b-j5l10i54c7] {
    font-size: 16px;
}
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast[b-lcy70r8o87] {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--spacing-md));
    left: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-tooltip);
    animation: slideUp-b-lcy70r8o87 var(--transition-base);
}

@keyframes slideUp-b-lcy70r8o87 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast__content[b-lcy70r8o87] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.toast__icon[b-lcy70r8o87] {
    font-size: 24px;
    flex-shrink: 0;
}

.toast__message[b-lcy70r8o87] {
    flex: 1;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.toast-success[b-lcy70r8o87] {
    background-color: var(--success-color);
    color: white;
}

.toast-error[b-lcy70r8o87] {
    background-color: var(--error-color);
    color: white;
}

.toast-warning[b-lcy70r8o87] {
    background-color: var(--warning-color);
    color: white;
}

.toast-info[b-lcy70r8o87] {
    background-color: var(--info-color);
    color: white;
}

@media (min-width: 768px) {
    .toast[b-lcy70r8o87] {
        left: auto;
        right: var(--spacing-lg);
        max-width: 400px;
        bottom: var(--spacing-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-lcy70r8o87] {
        animation: none;
    }
}
/* /Components/Theme/ThemeProvider.razor.rz.scp.css */
/**
 * ThemeProvider Component Styles
 * 
 * This component uses CSS isolation to scope styles.
 * The ThemeProvider itself is a logical component and doesn't render visible UI,
 * so this file is minimal and primarily serves as a placeholder for any
 * future component-specific styling needs.
 */

/* 
 * Smooth theme transitions are handled globally in design-tokens.css
 * This ensures all elements transition smoothly when theme changes.
 */

/* 
 * No additional styles needed for ThemeProvider component itself
 * as it's a logical wrapper that provides theme context via CascadingValue
 */
/* /Pages/Bens.razor.rz.scp.css */
.search-section[b-6xpbmyopv5] {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
}

.cta-section[b-6xpbmyopv5] {
    padding: 0 var(--space-4, 16px) var(--space-3, 12px);
    background: var(--color-surface, #FFFFFF);
}

.primary-cta[b-6xpbmyopv5] {
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-primary, #2F6FED);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-xl, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    box-shadow: 0 4px 12px rgba(47, 111, 237, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast, 150ms) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)),
                box-shadow var(--transition-fast, 150ms) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    min-height: var(--touch-target-min, 44px);
}

.primary-cta:active[b-6xpbmyopv5] {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(47, 111, 237, 0.2);
}

.primary-cta .material-symbols-outlined[b-6xpbmyopv5] {
    font-size: 20px;
}

.primary-cta-text[b-6xpbmyopv5] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-chips-section[b-6xpbmyopv5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-bg, #F8FAFC);
}

.clear-filters-btn[b-6xpbmyopv5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text-secondary, #6B7280);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
}

.clear-filters-btn:hover[b-6xpbmyopv5] {
    background: var(--color-neutral-50, #F9FAFB);
    border-color: var(--color-neutral-300, #D1D5DB);
}

.clear-filters-btn:active[b-6xpbmyopv5] {
    transform: scale(0.97);
}

.clear-filters-btn .material-symbols-outlined[b-6xpbmyopv5] {
    font-size: 16px;
}

.summary-bar[b-6xpbmyopv5] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    background: var(--color-bg, #F8FAFC);
}

.summary-count[b-6xpbmyopv5] {
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #2F6FED);
}

.summary-divider[b-6xpbmyopv5] {
    color: var(--color-text-secondary, #6B7280);
    font-size: var(--font-size-sm, 13px);
}

.summary-uo[b-6xpbmyopv5] {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text-secondary, #6B7280);
    font-weight: var(--font-weight-medium, 500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-area[b-6xpbmyopv5] {
    flex: 1;
    padding: var(--space-3, 12px) var(--space-3, 12px) 120px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    background: var(--color-bg, #F8FAFC);
}

.loading-state[b-6xpbmyopv5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8, 32px) var(--space-6, 24px);
    text-align: center;
    gap: var(--space-3, 12px);
    min-height: 300px;
}

.spinner-ring[b-6xpbmyopv5] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border, #E5E7EB);
    border-top-color: var(--color-primary, #2F6FED);
    border-radius: var(--radius-full, 9999px);
    animation: spin-b-6xpbmyopv5 0.8s linear infinite;
}

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

.loading-text[b-6xpbmyopv5] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pagination[b-6xpbmyopv5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px) 0;
    margin-top: var(--space-2, 8px);
}

.pag-btn[b-6xpbmyopv5] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #FFFFFF);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #2F6FED);
    cursor: pointer;
    transition: all var(--transition-base, 200ms) var(--easing-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target-min, 44px);
}

.pag-btn:hover:not(:disabled)[b-6xpbmyopv5] {
    background: var(--color-neutral-50, #F9FAFB);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.pag-btn:active:not(:disabled)[b-6xpbmyopv5] {
    transform: scale(0.97);
}

.pag-btn:disabled[b-6xpbmyopv5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pag-btn .material-symbols-outlined[b-6xpbmyopv5] {
    font-size: 16px;
}

.pag-info[b-6xpbmyopv5] {
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #6B7280);
}

@media (prefers-reduced-motion: reduce) {
    .primary-cta[b-6xpbmyopv5],
    .clear-filters-btn[b-6xpbmyopv5],
    .pag-btn[b-6xpbmyopv5],
    .header-action[b-6xpbmyopv5] {
        transition: none;
    }

    .primary-cta:active[b-6xpbmyopv5],
    .clear-filters-btn:active[b-6xpbmyopv5],
    .pag-btn:active[b-6xpbmyopv5] {
        transform: none;
    }

    .spinner-ring[b-6xpbmyopv5] {
        animation: none;
        border-top-color: var(--color-border, #E5E7EB);
    }
}

@media (min-width: 768px) {
    .content-area[b-6xpbmyopv5] {
        padding: var(--space-4, 16px) var(--space-4, 16px) 120px;
    }

    .filter-chips-section[b-6xpbmyopv5] {
        padding: var(--space-4, 16px);
    }
}
/* /Pages/Camera.razor.rz.scp.css */
.camera-page[b-r8sqk29n1d] {
    position: fixed;
    inset: 0;
    background-color: black;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    color: white;
}

.viewfinder-container[b-r8sqk29n1d] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.video-feed[b-r8sqk29n1d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viewfinder-top[b-r8sqk29n1d] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    z-index: 10;
}

.viewfinder-title[b-r8sqk29n1d] {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
}

.icon-btn[b-r8sqk29n1d] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.recognition-tabs[b-r8sqk29n1d] {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    backdrop-filter: blur(8px);
    z-index: 20;
}

.tab-item[b-r8sqk29n1d] {
    padding: 8px 16px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-item.active[b-r8sqk29n1d] {
    background: var(--color-primary);
    color: white;
}

.scan-boundary-layer[b-r8sqk29n1d] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.scan-frame[b-r8sqk29n1d] {
    width: 250px;
    height: 250px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s;
}

.scan-frame.detecting .corner[b-r8sqk29n1d] { border-color: #F59E0B; }
.scan-frame.found .corner[b-r8sqk29n1d] { border-color: #10B981; }
.scan-frame.error .corner[b-r8sqk29n1d] { border-color: #EF4444; }

.corner[b-r8sqk29n1d] {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-primary);
}

.top-left[b-r8sqk29n1d] { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.top-right[b-r8sqk29n1d] { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 12px; }
.bottom-left[b-r8sqk29n1d] { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 12px; }
.bottom-right[b-r8sqk29n1d] { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }

.scan-hint[b-r8sqk29n1d] {
    margin-top: 24px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-align: center;
    max-width: 200px;
}

.status-indicator-badge[b-r8sqk29n1d] {
    margin-top: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: #94a3b8;
    transition: background 0.3s, color 0.3s;
}

.status-indicator-badge.scanning[b-r8sqk29n1d] { color: #94a3b8; }
.status-indicator-badge.detecting[b-r8sqk29n1d] { background: rgba(245, 158, 11, 0.3); color: #F59E0B; }
.status-indicator-badge.found[b-r8sqk29n1d] { background: rgba(16, 185, 129, 0.3); color: #10B981; }
.status-indicator-badge.error[b-r8sqk29n1d] { background: rgba(239, 68, 68, 0.3); color: #EF4444; }

.side-controls[b-r8sqk29n1d] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 20;
}

.side-btn[b-r8sqk29n1d] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.last-capture-overlay[b-r8sqk29n1d] {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 20;
}

.capture-info[b-r8sqk29n1d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capture-label[b-r8sqk29n1d] {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.capture-value[b-r8sqk29n1d] {
    font-size: 16px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
}

.capture-status-line[b-r8sqk29n1d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot[b-r8sqk29n1d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.status-dot.scanning[b-r8sqk29n1d] { background-color: #94a3b8; box-shadow: none; }
.status-dot.detecting[b-r8sqk29n1d] { background-color: #F59E0B; box-shadow: 0 0 8px #F59E0B; }
.status-dot.found[b-r8sqk29n1d] { background-color: #10B981; box-shadow: 0 0 8px #10B981; }
.status-dot.error[b-r8sqk29n1d] { background-color: #EF4444; box-shadow: 0 0 8px #EF4444; }

.status-msg[b-r8sqk29n1d] {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-success);
}

.capture-controls[b-r8sqk29n1d] {
    height: 160px;
    background-color: black;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 20px;
    padding-bottom: env(safe-area-inset-bottom);
}

.capture-trigger[b-r8sqk29n1d] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.trigger-inner[b-r8sqk29n1d] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: white;
}

.capture-trigger:active .trigger-inner[b-r8sqk29n1d] {
    transform: scale(0.9);
}

.photo-thumbnails[b-r8sqk29n1d] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.mini-thumb[b-r8sqk29n1d] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.mini-thumb img[b-r8sqk29n1d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.finish-btn[b-r8sqk29n1d] {
    background-color: var(--color-success);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: var(--font-weight-bold);
    font-size: 12px;
}

.details-form-container[b-r8sqk29n1d] {
    padding: 16px;
    overflow-y: auto;
    background-color: var(--color-background);
    min-height: 100vh;
}

.details-header[b-r8sqk29n1d] {
    text-align: center;
    margin-bottom: 20px;
}

.details-title[b-r8sqk29n1d] {
    font-size: var(--font-size-title-md);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.details-subtitle[b-r8sqk29n1d] {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

.photo-strip[b-r8sqk29n1d] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 4px;
}

.strip-item[b-r8sqk29n1d] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.strip-item.active[b-r8sqk29n1d] {
    border-color: var(--color-primary);
}

.strip-item img[b-r8sqk29n1d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-photo-btn[b-r8sqk29n1d] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: #F1F5F9;
    border: 2px dashed var(--color-border);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-fields[b-r8sqk29n1d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.input-with-icon[b-r8sqk29n1d] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .material-symbols-outlined[b-r8sqk29n1d] {
    position: absolute;
    left: 12px;
    color: var(--color-text-secondary);
}

.input-with-icon .form-input[b-r8sqk29n1d] {
    padding-left: 44px;
}

.form-input[b-r8sqk29n1d] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
}

.form-actions[b-r8sqk29n1d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cancel-btn[b-r8sqk29n1d] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-bold);
    padding: 12px;
    cursor: pointer;
}

.controls-right[b-r8sqk29n1d] {
    display: flex;
    justify-content: flex-end;
}
/* /Pages/ConfiguracaoSessao.razor.rz.scp.css */
.config-page[b-rwtrovg8u2] {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 16px;
}

.header-wrapper[b-rwtrovg8u2] {
    align-self: stretch;
    margin: 0 -24px;
}

.config-header[b-rwtrovg8u2] {
    margin-top: 20px;
    margin-bottom: 40px;
}

.config-title[b-rwtrovg8u2] {
    font-size: 28px;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 8px;
}

.config-subtitle[b-rwtrovg8u2] {
    font-size: 14px;
    color: #94A3B8;
    margin: 0;
}

.config-form[b-rwtrovg8u2] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-group[b-rwtrovg8u2] {
    margin-bottom: 20px;
}

.input-label[b-rwtrovg8u2] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.select-wrapper[b-rwtrovg8u2] {
    position: relative;
}

.input-field[b-rwtrovg8u2] {
    width: 100%;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 16px;
    color: #1E293B;
    appearance: none;
    cursor: pointer;
}

.input-field:focus[b-rwtrovg8u2] {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.05);
}

.input-field:disabled[b-rwtrovg8u2] {
    background: #F8FAFC;
    cursor: not-allowed;
    color: #CBD5E1;
}

.select-icon[b-rwtrovg8u2] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
}

.config-note[b-rwtrovg8u2] {
    font-size: 12px;
    color: #CBD5E1;
    text-align: center;
    margin: 40px 0 24px;
    line-height: 1.5;
}

.start-session-button[b-rwtrovg8u2] {
    width: 100%;
    padding: 18px;
    background: #1E293B;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: 20px;
}

.start-session-button:disabled[b-rwtrovg8u2] {
    background: #CBD5E1;
    cursor: not-allowed;
}
/* /Pages/ItemDetails.razor.rz.scp.css */
.details-page[b-bx2k0ndced] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #FFFFFF;
}

.app-header[b-bx2k0ndced] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.header-brand[b-bx2k0ndced] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo[b-bx2k0ndced] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.brand-name[b-bx2k0ndced] {
    font-size: 13px;
    font-weight: 700;
    color: #2F6FED;
    letter-spacing: 0.3px;
}

.icon-button.back[b-bx2k0ndced] {
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 8px;
    margin-left: -8px;
    display: flex;
    align-items: center;
}

.header-info[b-bx2k0ndced] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.header-title[b-bx2k0ndced] {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
}

.header-subtitle[b-bx2k0ndced] {
    font-size: 10px;
    color: #6B7280;
    letter-spacing: 0.05em;
}

.details-main[b-bx2k0ndced] {
    flex: 1;
    padding-bottom: 100px;
}

.image-section[b-bx2k0ndced] {
    padding: 24px;
}

.image-container[b-bx2k0ndced] {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #F8FAFC;
    border-radius: 24px;
    overflow: hidden;
}

.bem-image[b-bx2k0ndced] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-bx2k0ndced] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
}

.image-placeholder .material-symbols-outlined[b-bx2k0ndced] {
    font-size: 64px;
}

.camera-fab[b-bx2k0ndced] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E3A5F;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.image-dots[b-bx2k0ndced] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}

.dot[b-bx2k0ndced] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.dot.active[b-bx2k0ndced] {
    width: 16px;
    border-radius: 3px;
    background: #FFFFFF;
}

.details-form[b-bx2k0ndced] {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card Informações do Bem (Read-Only) */
.bem-info-card[b-bx2k0ndced] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    margin: 24px 0;
}

.bem-info-header[b-bx2k0ndced] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.bem-info-header .material-symbols-outlined[b-bx2k0ndced] {
    font-size: 16px;
    color: #94A3B8;
}

.bem-info-title[b-bx2k0ndced] {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Divisor Visual */
.section-divider[b-bx2k0ndced] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 24px;
    color: #94A3B8;
}

.section-divider[b-bx2k0ndced]::before,
.section-divider[b-bx2k0ndced]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

.section-divider-label[b-bx2k0ndced] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-label[b-bx2k0ndced] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.description-text[b-bx2k0ndced] {
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
    line-height: 1.4;
}

.form-row[b-bx2k0ndced] {
    display: flex;
    gap: 24px;
}

.form-group[b-bx2k0ndced] {
    margin-bottom: 0;
}

.form-group.half[b-bx2k0ndced] {
    flex: 1;
}

.value-text[b-bx2k0ndced] {
    font-size: 16px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

/* Dropdown (Tipo de Operação) */
.form-select[b-bx2k0ndced] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 14px;
    color: #1E293B;
    background: #FFFFFF;
    min-height: 44px;
}

.form-select:focus[b-bx2k0ndced] {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Checkboxes (Situação Atual) */
.checkbox-group[b-bx2k0ndced] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-item[b-bx2k0ndced] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.2s;
}

.checkbox-item:hover[b-bx2k0ndced] {
    background: #F8FAFC;
}

.checkbox-item input[type="checkbox"][b-bx2k0ndced] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #1E3A5F;
}

.checkbox-item span[b-bx2k0ndced] {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    flex: 1;
}

/* Textarea (Justificativa) */
.form-textarea[b-bx2k0ndced] {
    width: 100%;
    min-height: 100px;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 14px;
    color: #1E293B;
    resize: vertical;
}

.form-textarea:focus[b-bx2k0ndced] {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.save-button[b-bx2k0ndced] {
    width: 100%;
    padding: 18px;
    background: #1E3A5F;
    color: #FFFFFF;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
    box-shadow: 0 8px 16px rgba(30, 58, 95, 0.15);
}

.loading-overlay[b-bx2k0ndced] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.error-state[b-bx2k0ndced] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
}

.error-state .material-symbols-outlined[b-bx2k0ndced] {
    font-size: 64px;
    color: #CBD5E1;
}

.back-button[b-bx2k0ndced] {
    padding: 12px 24px;
    background: #1E3A5F;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
/* /Pages/Login.razor.rz.scp.css */
.login-page[b-oli0mewb6e] {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.login-header[b-oli0mewb6e] {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
}

.logo-container[b-oli0mewb6e] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.logo-icon[b-oli0mewb6e] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
}

.logo-icon .material-symbols-outlined[b-oli0mewb6e] {
    font-size: 40px;
}

.aspec-logo[b-oli0mewb6e] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.aspec-logo--small[b-oli0mewb6e] {
    width: 34px;
    height: 34px;
}

.app-title[b-oli0mewb6e] {
    font-size: 24px;
    font-weight: 700;
    color: #1E3A5F;
    margin: 0 0 4px;
}

.app-subtitle[b-oli0mewb6e] {
    font-size: 14px;
    color: #94A3B8;
    margin: 0;
}

.login-form[b-oli0mewb6e] {
    width: 100%;
    margin-bottom: auto;
}

.form-group[b-oli0mewb6e] {
    margin-bottom: 24px;
}

.input-label[b-oli0mewb6e] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.input-field[b-oli0mewb6e] {
    width: 100%;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 16px;
    color: #1E293B;
    transition: all 0.2s ease;
}

.input-field:focus[b-oli0mewb6e] {
    outline: none;
    border-color: #1E3A5F;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.05);
}

.input-field[b-oli0mewb6e]::placeholder {
    color: #CBD5E1;
}

.login-button[b-oli0mewb6e] {
    width: 100%;
    padding: 16px;
    background: #1E3A5F;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 12px;
}

.login-button:hover[b-oli0mewb6e] {
    background: #16324F;
}

.login-button:disabled[b-oli0mewb6e] {
    background: #CBD5E1;
    cursor: not-allowed;
}

.login-footer[b-oli0mewb6e] {
    padding: 40px 0;
    text-align: center;
}

.version-text[b-oli0mewb6e] {
    font-size: 12px;
    color: #CBD5E1;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.alert[b-oli0mewb6e] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.alert.error[b-oli0mewb6e] {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.validation-error[b-oli0mewb6e] {
    color: #DC2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Loading Workflow Styles */
.loading-workflow[b-oli0mewb6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 40px 0;
}

.logo-icon.small[b-oli0mewb6e] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
}

.logo-icon.small .material-symbols-outlined[b-oli0mewb6e] {
    font-size: 32px;
}

.progress-card[b-oli0mewb6e] {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
}

.progress-title[b-oli0mewb6e] {
    font-size: 16px;
    font-weight: 600;
    color: #1E3A5F;
    margin: 0 0 16px;
}

.progress-bar-container[b-oli0mewb6e] {
    height: 8px;
    background: #F1F5F9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 24px;
}

.progress-bar-fill[b-oli0mewb6e] {
    height: 100%;
    background: #1E3A5F;
    transition: width 0.3s ease;
}

.loading-steps[b-oli0mewb6e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loading-step[b-oli0mewb6e] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.loading-step.completed[b-oli0mewb6e] {
    color: #16A34A;
}

.loading-step.pending[b-oli0mewb6e] {
    color: #94A3B8;
}

.mb-xl[b-oli0mewb6e] {
    margin-bottom: 24px;
}
/* /Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-bf2v5usayz] {
    min-height: 100vh;
    background-color: var(--background-color);
}

.notifications-page__header[b-bf2v5usayz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--divider-color);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.btn-back[b-bf2v5usayz] {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.btn-back:hover[b-bf2v5usayz] {
    background-color: var(--background-color);
}

.notifications-page__title[b-bf2v5usayz] {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.notifications-page__loading[b-bf2v5usayz],
.notifications-page__empty[b-bf2v5usayz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    color: var(--text-secondary);
}

.notifications-page__empty i[b-bf2v5usayz] {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.notifications-page__list[b-bf2v5usayz] {
    padding: var(--spacing-md);
}

.notification-group[b-bf2v5usayz] {
    margin-bottom: var(--spacing-lg);
}

.notification-group__title[b-bf2v5usayz] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.notification-item[b-bf2v5usayz] {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.notification-item:hover[b-bf2v5usayz] {
    background-color: var(--background-color);
}

.notification-item--unread[b-bf2v5usayz] {
    background-color: rgba(27, 58, 95, 0.05);
    border-left: 4px solid var(--primary-color);
}

.notification-item__icon[b-bf2v5usayz] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.notification-item__icon--success[b-bf2v5usayz] {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
}

.notification-item__icon--error[b-bf2v5usayz] {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--error-color);
}

.notification-item__icon--warning[b-bf2v5usayz] {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--warning-color);
}

.notification-item__icon--info[b-bf2v5usayz] {
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--info-color);
}

.notification-item__content[b-bf2v5usayz] {
    flex: 1;
    min-width: 0;
}

.notification-item__header[b-bf2v5usayz] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.notification-item__title[b-bf2v5usayz] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0;
}

.notification-item__time[b-bf2v5usayz] {
    font-size: var(--font-size-xs);
    color: var(--text-disabled);
    white-space: nowrap;
}

.notification-item__message[b-bf2v5usayz] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.notification-item__priority[b-bf2v5usayz] {
    display: inline-block;
    margin-top: var(--spacing-xs);
    padding: 2px 8px;
    background-color: var(--error-color);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
}

.notifications-page__load-more[b-bf2v5usayz] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md);
}
/* /Pages/Profile.razor.rz.scp.css */
.profile-container[b-exhrdqm9xr] {
    max-width: 500px;
    margin: 0 auto;
    padding: 32px 24px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.profile-card[b-exhrdqm9xr] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
}

.profile-header[b-exhrdqm9xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.profile-avatar[b-exhrdqm9xr] {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #003366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
}

.profile-name[b-exhrdqm9xr] {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.profile-email[b-exhrdqm9xr] {
    font-size: 14px;
    color: #64748B;
    margin: 4px 0 0;
}

.form-group[b-exhrdqm9xr] {
    margin-bottom: 20px;
}

.form-label[b-exhrdqm9xr] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input[b-exhrdqm9xr] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.form-input:focus[b-exhrdqm9xr] {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.btn-save[b-exhrdqm9xr] {
    width: 100%;
    background: #003366;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 24px;
}

.btn-save:hover[b-exhrdqm9xr] {
    background: #002244;
}

.btn-back[b-exhrdqm9xr] {
    width: 100%;
    background: transparent;
    color: #003366;
    padding: 12px 24px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
}

.btn-back:hover[b-exhrdqm9xr] {
    background: #F8FAFC;
}

.divider[b-exhrdqm9xr] {
    height: 1px;
    background: #E2E8F0;
    margin: 24px 0;
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-page[b-gbut8ann2d] {
    min-height: 100vh;
    background: var(--background-color);
    display: flex;
    flex-direction: column;
}

.settings-header[b-gbut8ann2d] {
    display: flex;
    align-items: center;
    padding: 48px 16px 16px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-title[b-gbut8ann2d] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 1px;
    margin-left: 8px;
}

.back-btn[b-gbut8ann2d] {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

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

.settings-content[b-gbut8ann2d] {
    padding: 24px 16px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-hint[b-gbut8ann2d] {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.settings-section[b-gbut8ann2d] {
    margin-bottom: 32px;
}

.section-label[b-gbut8ann2d] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.section-label .material-symbols-outlined[b-gbut8ann2d] {
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.config-list[b-gbut8ann2d] {
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.config-item[b-gbut8ann2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--divider-color);
}

.config-item:last-child[b-gbut8ann2d] {
    border-bottom: none;
}

.config-label[b-gbut8ann2d] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.8;
}

.about-card[b-gbut8ann2d] {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
}

.about-header[b-gbut8ann2d] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.about-logo[b-gbut8ann2d] {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}

.about-name[b-gbut8ann2d] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.about-version[b-gbut8ann2d] {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin: 0;
}

.about-grid[b-gbut8ann2d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-top: 1px solid var(--divider-color);
    padding-top: 16px;
}

.about-item[b-gbut8ann2d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-label[b-gbut8ann2d] {
    font-size: 8px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.about-value[b-gbut8ann2d] {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
}

.status-ok[b-gbut8ann2d] {
    color: #10B981;
}

.logout-btn[b-gbut8ann2d] {
    width: 100%;
    height: 48px;
    background: var(--surface-color);
    border: 1px solid #fee2e2;
    color: #ef4444;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 1px;
}

/* Switch Styling */
.switch[b-gbut8ann2d] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input[b-gbut8ann2d] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-gbut8ann2d] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider[b-gbut8ann2d]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider[b-gbut8ann2d] {
    background-color: var(--color-primary);
}

input:checked + .slider[b-gbut8ann2d]:before {
    transform: translateX(20px);
}

.slider.round[b-gbut8ann2d] {
    border-radius: 20px;
}

.slider.round[b-gbut8ann2d]:before {
    border-radius: 50%;
}
/* /Pages/TombamentosSync.razor.rz.scp.css */
.sync-page[b-neugbg3iai] {
    padding: 24px;
}

.sync-card[b-neugbg3iai] {
    padding: 24px;
    max-width: 600px;
    margin: 32px auto;
    border: 1px solid #E2E8F0;
    background: white;
    border-radius: 16px;
}

.sync-title[b-neugbg3iai] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.sync-status[b-neugbg3iai] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-header[b-neugbg3iai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.progress-label[b-neugbg3iai] {
    font-size: 12px;
    color: #64748b;
}

.progress-track[b-neugbg3iai] {
    width: 100%;
    background: #f1f5f9;
    border-radius: 9999px;
    height: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.progress-fill[b-neugbg3iai] {
    background: #003366;
    height: 100%;
    border-radius: 9999px;
}

.progress-fill:not(.progress-fill--indeterminate)[b-neugbg3iai] {
    will-change: width;
}

.progress-fill--indeterminate[b-neugbg3iai] {
    width: 100%;
    animation: indeterminate-b-neugbg3iai 1.5s ease-in-out infinite;
    transform-origin: left;
}

.error-actions[b-neugbg3iai] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.btn-retry[b-neugbg3iai] {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

.btn-back[b-neugbg3iai] {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: #003366;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

@keyframes indeterminate-b-neugbg3iai {
    0% {
        transform: translateX(-100%);
        width: 60%;
    }
    50% {
        transform: translateX(60%);
        width: 60%;
    }
    100% {
        transform: translateX(200%);
        width: 60%;
    }
}

@keyframes spin-b-neugbg3iai {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner-validation[b-neugbg3iai] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #003366;
    border-radius: 50%;
    animation: spin-b-neugbg3iai 0.8s linear infinite;
    flex-shrink: 0;
}

.sync-validation-hint[b-neugbg3iai] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}