/* /Components/Common/GifPicker.razor.rz.scp.css */
/* ============================================================
   GifPicker — Twitter/X-style bottom sheet (mobile) / modal (desktop)
   ============================================================ */

/* Overlay */
.gp-overlay[b-2aphfpren4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: gpFadeIn 0.2s ease-out;
}

/* Sheet / Modal */
.gp-sheet[b-2aphfpren4] {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: gpSlideUp 0.25s ease-out;
}

/* Header */
.gp-header[b-2aphfpren4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.gp-close[b-2aphfpren4] {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: background 0.15s, color 0.15s;
}

.gp-close:hover[b-2aphfpren4] {
    background: #f3f4f6;
    color: #1f2937;
}

.gp-title[b-2aphfpren4] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Search */
.gp-search[b-2aphfpren4] {
    padding: 10px 16px;
    flex-shrink: 0;
}

.gp-search-box[b-2aphfpren4] {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0 12px;
    transition: background 0.2s, box-shadow 0.2s;
}

.gp-search-box:focus-within[b-2aphfpren4] {
    background: #fff;
    box-shadow: 0 0 0 2px var(--bs-primary, #0056b3);
}

.gp-search-icon[b-2aphfpren4] {
    color: #9ca3af;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.gp-search-input[b-2aphfpren4] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    color: #1f2937;
    padding: 9px 8px;
    flex: 1;
    width: 100%;
}

.gp-search-input[b-2aphfpren4]::placeholder {
    color: #9ca3af;
}

.gp-search-clear[b-2aphfpren4] {
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    display: flex;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.gp-search-clear:hover[b-2aphfpren4] {
    color: #6b7280;
}

/* Category chips */
.gp-categories[b-2aphfpren4] {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
    overflow-x: auto;
    flex-shrink: 0;
    /* Slim scrollbar for horizontal scroll */
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.gp-categories[b-2aphfpren4]::-webkit-scrollbar {
    height: 3px;
}

.gp-categories[b-2aphfpren4]::-webkit-scrollbar-track {
    background: transparent;
}

.gp-categories[b-2aphfpren4]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 999px;
}

.gp-cat[b-2aphfpren4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.gp-cat:hover[b-2aphfpren4] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
}

.gp-cat.active[b-2aphfpren4] {
    background: var(--bs-primary, #0056b3);
    color: #fff;
    border-color: var(--bs-primary, #0056b3);
}

.gp-cat-emoji[b-2aphfpren4] {
    font-size: 0.82rem;
    line-height: 1;
}

/* Content area — slim scrollbar */
.gp-content[b-2aphfpren4] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    min-height: 280px;
    max-height: 55vh;

    /* Slim scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.gp-content[b-2aphfpren4]::-webkit-scrollbar {
    width: 5px;
}

.gp-content[b-2aphfpren4]::-webkit-scrollbar-track {
    background: transparent;
}

.gp-content[b-2aphfpren4]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

.gp-content[b-2aphfpren4]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* GIF Grid */
.gp-grid[b-2aphfpren4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

/* GIF Item */
.gp-item[b-2aphfpren4] {
    border: none;
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    aspect-ratio: 1 / 1;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gp-item:hover[b-2aphfpren4] {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.gp-item:active[b-2aphfpren4] {
    transform: scale(0.98);
}

.gp-item:focus-visible[b-2aphfpren4] {
    outline: 2px solid var(--bs-primary, #0056b3);
    outline-offset: 2px;
}

.gp-item img[b-2aphfpren4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover overlay with title */
.gp-item-hover[b-2aphfpren4] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: flex-end;
    padding: 8px;
}

.gp-item:hover .gp-item-hover[b-2aphfpren4] {
    opacity: 1;
}

.gp-item-label[b-2aphfpren4] {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Skeleton loading */
.gp-skeleton[b-2aphfpren4] {
    background: linear-gradient(90deg, #f0f0f0 0%, #fafafa 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: gpShimmer 1.5s ease-in-out infinite;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
}

/* Empty state */
.gp-empty[b-2aphfpren4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
}

.gp-empty i[b-2aphfpren4] {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

.gp-empty p[b-2aphfpren4] {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.gp-empty span[b-2aphfpren4] {
    font-size: 0.78rem;
    margin-top: 4px;
}

/* Footer */
.gp-footer[b-2aphfpren4] {
    padding: 8px 16px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: #fafafa;
    color: #9ca3af;
    font-size: 0.72rem;
}

.gp-giphy-logo[b-2aphfpren4] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
}

/* Animations */
@@keyframes gpFadeIn {
    from[b-2aphfpren4] { opacity: 0; }
    to[b-2aphfpren4] { opacity: 1; }
}

@@keyframes gpSlideUp {
    from[b-2aphfpren4] { transform: translateY(100%); }
    to[b-2aphfpren4] { transform: translateY(0); }
}

@@keyframes gpShimmer {
    0%[b-2aphfpren4] { background-position: 200% 0; }
    100%[b-2aphfpren4] { background-position: -200% 0; }
}

/* Desktop: center the sheet as a modal */
@@media (min-width: 576px) {
    .gp-overlay[b-2aphfpren4] {
        align-items: center;
    }

    .gp-sheet[b-2aphfpren4] {
        border-radius: 16px;
        max-height: 85vh;
        margin: 0 16px;
        animation: gpModalDrop 0.25s ease-out;
    }

    .gp-grid[b-2aphfpren4] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@@keyframes gpModalDrop {
    from[b-2aphfpren4] {
        opacity: 0;
        transform: translateY(-16px) scale(0.97);
    }
    to[b-2aphfpren4] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Reduced motion */
@@media (prefers-reduced-motion: reduce) {
    .gp-overlay[b-2aphfpren4],
    .gp-sheet[b-2aphfpren4] {
        animation: none;
    }

    .gp-item:hover[b-2aphfpren4] {
        transform: none;
    }

    .gp-skeleton[b-2aphfpren4] {
        animation: none;
        background: #f0f0f0;
    }
}
/* /Components/Common/OrgLogo.razor.rz.scp.css */
.org-logo-wrap[b-22l4bidbot] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.org-logo-dark[b-22l4bidbot] {
    display: none;
}

:global([data-bs-theme="dark"]) .org-logo-light[b-22l4bidbot] {
    display: none;
}

:global([data-bs-theme="dark"]) .org-logo-dark[b-22l4bidbot] {
    display: inline-block;
}

.org-logo-name[b-22l4bidbot] {
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    line-height: 1.2;
}

:global([data-bs-theme="dark"]) .org-logo-name[b-22l4bidbot] {
    color: #f3f4f6;
}
/* /Components/Common/OtpInput.razor.rz.scp.css */
.otp-container[b-7l099rr4y3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.otp-input-group[b-7l099rr4y3] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.otp-input[b-7l099rr4y3] {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    transition: all 0.2s ease;
    caret-color: transparent;
}

.otp-input:focus[b-7l099rr4y3] {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.otp-input.filled[b-7l099rr4y3] {
    background: #f0f7ff;
    border-color: #86b7fe;
}

.otp-input:disabled[b-7l099rr4y3] {
    background: #e9ecef;
    cursor: not-allowed;
}

.otp-clear-btn[b-7l099rr4y3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #6c757d;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.otp-clear-btn:hover[b-7l099rr4y3] {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .otp-input-group[b-7l099rr4y3] {
        gap: 6px;
    }
    
    .otp-input[b-7l099rr4y3] {
        width: 36px;
        height: 44px;
        font-size: 1.25rem;
        border-radius: 8px;
    }
}

/* /Components/Common/Pagination.razor.rz.scp.css */
/* Pagination Component Styles */

.pagination .page-link[b-5ko7uq1mzg] {
    border-radius: 0.375rem;
    margin: 0 2px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
}

.pagination-sm .page-link[b-5ko7uq1mzg] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-width: 28px;
}

.pagination-lg .page-link[b-5ko7uq1mzg] {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    min-width: 42px;
}

.pagination .page-item.active .page-link[b-5ko7uq1mzg] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.25);
}

.pagination .page-link:hover:not(.disabled)[b-5ko7uq1mzg] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    transform: translateY(-1px);
}

.pagination .page-item.disabled .page-link[b-5ko7uq1mzg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* /Components/Common/PlanCard.razor.rz.scp.css */
/* ============ PLAN CARD COMPONENT ============ */
.plan-card[b-ar9jgcg7l5] {
    padding: 36px 28px;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 16px;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    height: 100%;
}

.plan-card:hover[b-ar9jgcg7l5] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.plan-card-featured[b-ar9jgcg7l5] {
    background: white;
    border-color: var(--bs-primary, #0056b3);
    box-shadow: 0 8px 30px rgba(0, 86, 179, 0.15);
}

.plan-card-current[b-ar9jgcg7l5] {
    border-color: var(--bs-primary, #0056b3);
    border-width: 3px;
}

.plan-card-compact[b-ar9jgcg7l5] {
    padding: 20px 16px;
}

.plan-popular-badge[b-ar9jgcg7l5] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--bs-primary, #0056b3);
    color: white;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.plan-header[b-ar9jgcg7l5] {
    text-align: center;
    margin-bottom: 24px;
}

.plan-header h4[b-ar9jgcg7l5] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    margin-bottom: 12px;
}

.plan-amount[b-ar9jgcg7l5] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}

.plan-currency[b-ar9jgcg7l5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.plan-price[b-ar9jgcg7l5] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--theme-text-main, #212529);
    line-height: 1;
}

.plan-price.custom[b-ar9jgcg7l5] {
    font-size: 1.75rem;
}

.plan-period[b-ar9jgcg7l5] {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6c757d);
}

.plan-yearly-note[b-ar9jgcg7l5] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
    text-align: center;
    margin-bottom: 4px;
}

.plan-desc[b-ar9jgcg7l5] {
    font-size: 0.88rem;
    color: var(--theme-text-muted, #6c757d);
    margin: 8px 0 0;
}

.plan-features[b-ar9jgcg7l5] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}

.plan-features li[b-ar9jgcg7l5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--theme-text-main, #212529);
}

.plan-features i[b-ar9jgcg7l5] {
    color: var(--bs-success, #198754);
    font-size: 1rem;
    flex-shrink: 0;
}

.plan-card-compact .plan-header[b-ar9jgcg7l5] {
    margin-bottom: 12px;
}

.plan-card-compact .plan-header h4[b-ar9jgcg7l5] {
    font-size: 1rem;
}

.plan-card-compact .plan-price[b-ar9jgcg7l5] {
    font-size: 1.75rem;
}

.plan-card-compact .plan-features li[b-ar9jgcg7l5] {
    padding: 4px 0;
    font-size: 0.82rem;
}

.plan-card-compact .plan-features[b-ar9jgcg7l5] {
    margin-bottom: 16px;
}

.plan-btn[b-ar9jgcg7l5] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.plan-btn.primary[b-ar9jgcg7l5] {
    background: linear-gradient(135deg, var(--bs-primary, #0056b3) 0%, #004494 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(0, 86, 179, 0.3);
}

.plan-btn.primary:hover[b-ar9jgcg7l5] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
    color: white;
}

.plan-btn.outline[b-ar9jgcg7l5] {
    background: white;
    color: var(--bs-primary, #0056b3);
    border: 1px solid rgba(0, 86, 179, 0.3);
}

.plan-btn.outline:hover[b-ar9jgcg7l5] {
    background: rgba(0, 86, 179, 0.05);
    transform: translateY(-2px);
    color: var(--bs-primary, #0056b3);
}

.plan-btn:disabled[b-ar9jgcg7l5] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .plan-card[b-ar9jgcg7l5] {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .plan-header h4[b-ar9jgcg7l5] {
        font-size: 1.1rem;
    }

    .plan-price[b-ar9jgcg7l5] {
        font-size: 2rem;
    }

    .plan-price.custom[b-ar9jgcg7l5] {
        font-size: 1.5rem;
    }
}

/* /Components/Common/SearchableSelect.razor.rz.scp.css */
/* SearchableSelect – Scoped CSS */

.searchable-select-container[b-3chi0nuzkp] {
    position: relative;
}

.searchable-select-dropdown[b-3chi0nuzkp] {
    position: absolute;
    z-index: 1050;
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    margin-top: 2px;
    list-style: none;
    padding: 4px 0;
    scrollbar-width: thin;
}

.searchable-select-dropdown[b-3chi0nuzkp]::-webkit-scrollbar {
    width: 6px;
}

.searchable-select-dropdown[b-3chi0nuzkp]::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 3px;
}

.searchable-select-item[b-3chi0nuzkp] {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s ease;
    border-radius: 4px;
    margin: 0 4px;
}

.searchable-select-item:hover[b-3chi0nuzkp],
.searchable-select-item.active[b-3chi0nuzkp] {
    background: #e9ecef;
}

.searchable-select-item.selected[b-3chi0nuzkp] {
    background: #0d6efd;
    color: #fff;
}

.searchable-select-item.selected:hover[b-3chi0nuzkp],
.searchable-select-item.selected.active[b-3chi0nuzkp] {
    background: #0b5ed7;
    color: #fff;
}

.searchable-select-empty[b-3chi0nuzkp] {
    padding: 16px 12px;
    text-align: center;
    color: #6c757d;
    font-size: 0.85rem;
}

/* /Components/Common/SkeletonLoader.razor.rz.scp.css */
/* Skeleton loader with shimmer animation */
.skeleton[b-bn12wpxyuf] {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #fafafa 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-bn12wpxyuf 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-bn12wpxyuf {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Variant styles */
.skeleton-text[b-bn12wpxyuf] {
    border-radius: 4px;
    height: 14px;
}

.skeleton-circle[b-bn12wpxyuf] {
    border-radius: 50%;
}

.skeleton-rectangle[b-bn12wpxyuf] {
    border-radius: 8px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .skeleton[b-bn12wpxyuf] {
        background: linear-gradient(
            90deg,
            #3a3a3a 0%,
            #4a4a4a 50%,
            #3a3a3a 100%
        );
        background-size: 200% 100%;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton[b-bn12wpxyuf] {
        animation: none;
        background: #f0f0f0;
    }
    
    @media (prefers-color-scheme: dark) {
        .skeleton[b-bn12wpxyuf] {
            background: #3a3a3a;
        }
    }
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Minimal styles, relying on global theme */
main[b-auxf1c3trh] {
    /* Ensure content doesn't get hidden behind fixed headers/footers if needed */
}

/* Adjust for mobile bottom nav space */
@media (max-width: 767.98px) {
    main[b-auxf1c3trh] {
        padding-bottom: 70px; /* Height of bottom nav */
    }
}

#blazor-error-ui[b-auxf1c3trh] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss[b-auxf1c3trh] {
    cursor: pointer;
    right: 0.75rem;
    top: 0.5rem;
    position: absolute;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vmjbgs5hzm],
.components-reconnect-repeated-attempt-visible[b-vmjbgs5hzm],
.components-reconnect-failed-visible[b-vmjbgs5hzm],
.components-pause-visible[b-vmjbgs5hzm],
.components-resume-failed-visible[b-vmjbgs5hzm],
.components-rejoining-animation[b-vmjbgs5hzm] {
    display: none;
}

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


#components-reconnect-modal[b-vmjbgs5hzm] {
    background-color: #fff;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vmjbgs5hzm 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-vmjbgs5hzm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* === Dark mode === */
:global([data-bs-theme="dark"]) #components-reconnect-modal[b-vmjbgs5hzm] {
    background-color: #1e2028;
    color: #e1e3e8;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.5);
}

:global([data-bs-theme="dark"]) #components-reconnect-modal[b-vmjbgs5hzm]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

:global([data-bs-theme="dark"]) #components-reconnect-modal p[b-vmjbgs5hzm] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) #components-reconnect-modal button[b-vmjbgs5hzm] {
    background-color: #4a7ab5;
}

:global([data-bs-theme="dark"]) #components-reconnect-modal button:hover[b-vmjbgs5hzm] {
    background-color: #3b6ea2;
}

:global([data-bs-theme="dark"]) .components-rejoining-animation div[b-vmjbgs5hzm] {
    border-color: #4a9eff;
}
/* /Features/AdminPortal/AdminDashboard.razor.rz.scp.css */
.welcome-panel[b-b6rgvg198y] {
    background: linear-gradient(135deg, #1e1e2d 0%, #2c3e50 100%) !important;
}

/* Stat Cards */
.card-hover-transform[b-b6rgvg198y] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 12px !important;
}

.card-hover-transform:hover[b-b6rgvg198y] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.07) !important;
}

.stat-card[b-b6rgvg198y] {
    position: relative;
}

.stat-card .card-body[b-b6rgvg198y] {
    padding: 0.875rem 1rem !important;
}

.stat-card-icon[b-b6rgvg198y] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}

.counter-value[b-b6rgvg198y] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

/* Quick Actions */
.quick-action-card[b-b6rgvg198y] {
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    transition: all 0.2s ease;
}

.quick-action-card:hover[b-b6rgvg198y] {
    border-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
    transform: translateY(-2px);
}

.quick-action-icon[b-b6rgvg198y] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action-card:hover .quick-action-icon[b-b6rgvg198y] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Live Dot */
.live-dot[b-b6rgvg198y] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse-dot-b-b6rgvg198y 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-b6rgvg198y {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Recent Sessions */
.date-box[b-b6rgvg198y] {
    width: 52px;
    padding: 8px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
}

.date-box .day[b-b6rgvg198y] {
    font-size: 1.25rem;
    line-height: 1;
}

.date-box .month[b-b6rgvg198y] {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

.session-item[b-b6rgvg198y] {
    transition: background-color 0.15s ease, padding-left 0.15s ease;
    margin: 0 -1rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 10px;
}

.session-item:hover[b-b6rgvg198y] {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.03);
    padding-left: 1.15rem !important;
}

.session-item:last-child[b-b6rgvg198y] {
    border-bottom: none !important;
}

/* Recent Activity */
.avatar-circle[b-b6rgvg198y] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    transition: box-shadow 0.2s ease;
}

.attendance-item[b-b6rgvg198y] {
    transition: background-color 0.15s ease;
    margin: 0 -1rem;
    padding: 0.75rem 1rem !important;
    border-radius: 8px;
}

.attendance-item:hover[b-b6rgvg198y] {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.02);
}

.attendance-item:hover .avatar-circle[b-b6rgvg198y] {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}

.attendance-item:last-child[b-b6rgvg198y] {
    border-bottom: none !important;
}

.checkin-indicator[b-b6rgvg198y] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: transform 0.15s ease;
}

.attendance-item:hover .checkin-indicator[b-b6rgvg198y] {
    transform: scale(1.08);
}

.checkin-indicator.checkin[b-b6rgvg198y] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.checkin-indicator.checkout[b-b6rgvg198y] {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Utilities */
.min-width-0[b-b6rgvg198y] {
    min-width: 0;
}

.step-circle[b-b6rgvg198y] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.bg-purple[b-b6rgvg198y] {
    background-color: rgba(111, 66, 193, 0.1) !important;
}

.text-purple[b-b6rgvg198y] {
    color: #6f42c1 !important;
}

.bg-success-subtle[b-b6rgvg198y] { background-color: rgba(25, 135, 84, 0.1) !important; }
.border-success-subtle[b-b6rgvg198y] { border-color: rgba(25, 135, 84, 0.2) !important; }
.bg-warning-subtle[b-b6rgvg198y] { background-color: rgba(255, 193, 7, 0.1) !important; }
.border-warning-subtle[b-b6rgvg198y] { border-color: rgba(255, 193, 7, 0.2) !important; }
.bg-secondary-subtle[b-b6rgvg198y] { background-color: rgba(108, 117, 125, 0.1) !important; }
.border-secondary-subtle[b-b6rgvg198y] { border-color: rgba(108, 117, 125, 0.2) !important; }

.hover-primary:hover[b-b6rgvg198y] {
    color: var(--bs-primary) !important;
}

/* Entrance Animations */
@keyframes fadeSlideUp-b-b6rgvg198y {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card[b-b6rgvg198y] {
    animation: fadeSlideUp-b-b6rgvg198y 0.4s ease forwards;
}

.stat-card:nth-child(2)[b-b6rgvg198y] { animation-delay: 0.05s; }
.stat-card:nth-child(3)[b-b6rgvg198y] { animation-delay: 0.1s; }
.stat-card:nth-child(4)[b-b6rgvg198y] { animation-delay: 0.15s; }
.stat-card:nth-child(5)[b-b6rgvg198y] { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .stat-card[b-b6rgvg198y],
    .quick-action-card[b-b6rgvg198y] {
        animation: none;
        opacity: 1;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .stat-card .card-body[b-b6rgvg198y] {
        padding: 0.75rem !important;
    }
    .counter-value[b-b6rgvg198y] {
        font-size: 1.25rem;
    }
    .stat-card-icon[b-b6rgvg198y] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 0.85rem;
    }
    .quick-action-icon[b-b6rgvg198y] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .date-box[b-b6rgvg198y] {
        width: 44px;
    }
    .avatar-circle[b-b6rgvg198y] {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }
}
/* /Features/AdminPortal/AttendanceView.razor.rz.scp.css */
/* AttendanceView Component Styles */

/* Card hover animation for stats cards */
.card-hover-transform[b-wwmow9mzxv] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover-transform:hover[b-wwmow9mzxv] {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Stats card icon container */
.stat-card-icon[b-wwmow9mzxv] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

/* Avatar circle for user initials */
.avatar-circle[b-wwmow9mzxv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Delete button hover state */
.btn-hover-danger:hover[b-wwmow9mzxv] {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Employee dropdown custom styling */
.dropdown-item-custom[b-wwmow9mzxv] {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.dropdown-item-custom:hover[b-wwmow9mzxv] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* Utility classes */
.cursor-pointer[b-wwmow9mzxv] {
    cursor: pointer;
}

.min-width-0[b-wwmow9mzxv] {
    min-width: 0;
}

/* Loading spinner animation */
.spin-animation[b-wwmow9mzxv] {
    animation: spin-b-wwmow9mzxv 1s linear infinite;
}

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

/* ===== Summary View Enhanced Styles ===== */

/* Summary table styling */
.summary-table[b-wwmow9mzxv] {
    border-collapse: separate;
    border-spacing: 0;
}

.summary-table tbody tr[b-wwmow9mzxv] {
    transition: all 0.2s ease-in-out;
}

.summary-table tbody tr:hover[b-wwmow9mzxv] {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.summary-table tbody tr.table-active[b-wwmow9mzxv] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* Expanded row animation */
.expanded-row td[b-wwmow9mzxv] {
    animation: expandRow-b-wwmow9mzxv 0.3s ease-out;
}

@keyframes expandRow-b-wwmow9mzxv {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Session link hover effect */
.session-link[b-wwmow9mzxv] {
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
    margin: -2px -6px;
}

.session-link:hover[b-wwmow9mzxv] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    text-decoration: none !important;
}

.session-link:hover i.bi-box-arrow-up-right[b-wwmow9mzxv] {
    transform: translate(2px, -2px);
}

.session-link i.bi-box-arrow-up-right[b-wwmow9mzxv] {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

/* Transition utilities */
.transition-all[b-wwmow9mzxv] {
    transition: all 0.2s ease-in-out;
}

/* Progress bar in table */
.summary-table .progress[b-wwmow9mzxv] {
    background-color: rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
}

/* Badge improvements */
.summary-table .badge[b-wwmow9mzxv] {
    font-weight: 500;
}

/* Mobile card improvements */
@media (max-width: 767.98px) {
    .avatar-circle[b-wwmow9mzxv] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    /* Better touch targets on mobile */
    .btn-sm[b-wwmow9mzxv] {
        min-height: 38px;
    }
    
    /* Card shadow on mobile */
    .card.shadow-sm[b-wwmow9mzxv] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
}

/* Button group responsiveness */
@media (max-width: 575.98px) {
    .btn-group .btn[b-wwmow9mzxv] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Nested table in expanded row */
.expanded-row .table-responsive[b-wwmow9mzxv] {
    max-height: 400px;
    overflow-y: auto;
}

.expanded-row .table-sm td[b-wwmow9mzxv],
.expanded-row .table-sm th[b-wwmow9mzxv] {
    padding: 0.5rem 0.75rem;
}

/* Hover effect for nested table rows */
.expanded-row .table tbody tr:hover[b-wwmow9mzxv] {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

/* Badge with icon alignment */
.badge i[b-wwmow9mzxv] {
    vertical-align: -1px;
}

/* Action button group on mobile */
@media (max-width: 991.98px) {
    .w-lg-auto[b-wwmow9mzxv] {
        width: 100% !important;
    }
}

/* ===== Modal Animations ===== */

/* Modal backdrop fade-in */
.modal-backdrop-animate[b-wwmow9mzxv] {
    animation: fadeIn-b-wwmow9mzxv 0.2s ease-out;
}

/* Modal content slide and scale animation */
.modal-animate-in[b-wwmow9mzxv] {
    animation: modalSlideIn-b-wwmow9mzxv 0.3s ease-out;
}

@keyframes modalSlideIn-b-wwmow9mzxv {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

/* Icon bounce animation for delete modal */
.icon-bounce[b-wwmow9mzxv] {
    animation: iconBounce-b-wwmow9mzxv 0.6s ease-out;
}

@keyframes iconBounce-b-wwmow9mzxv {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Subtle pulse for warning icon */
.icon-pulse[b-wwmow9mzxv] {
    animation: iconPulse-b-wwmow9mzxv 2s ease-in-out infinite;
}

@keyframes iconPulse-b-wwmow9mzxv {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Button hover effects */
.btn-animate[b-wwmow9mzxv] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-animate:hover:not(:disabled)[b-wwmow9mzxv] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-animate:active:not(:disabled)[b-wwmow9mzxv] {
    transform: translateY(0);
}

/* Edit button hover state */
.btn-hover-primary:hover[b-wwmow9mzxv] {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* View details button hover state */
.btn-hover-info:hover[b-wwmow9mzxv] {
    background-color: var(--bs-info) !important;
    color: white !important;
}

/* Details modal table */
.details-table tr td[b-wwmow9mzxv] {
    padding: 0.4rem 0;
    vertical-align: middle;
}

.details-table tr:first-child td[b-wwmow9mzxv] {
    padding-top: 0;
}

.details-table tr:last-child td[b-wwmow9mzxv] {
    padding-bottom: 0;
}

/* /Features/AdminPortal/OrganizationSettings.razor.rz.scp.css */
/* ============ ORGANIZATION SETTINGS — SIDEBAR NAV LAYOUT ============ */

.os-page[b-5q8dc2rxxf] {
    max-width: 1100px;
    margin: 0 auto;
}

/* Layout: sidebar + content */
.os-layout[b-5q8dc2rxxf] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ── Sidebar ── */
.os-sidebar[b-5q8dc2rxxf] {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

:global([data-bs-theme="dark"]) .os-sidebar[b-5q8dc2rxxf] {
    background: #1a1d23;
    border-color: rgba(255, 255, 255, 0.06);
}

.os-sidebar-item[b-5q8dc2rxxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.os-sidebar-item:hover[b-5q8dc2rxxf] {
    background: #f3f4f6;
    color: #1f2937;
}

.os-sidebar-item.active[b-5q8dc2rxxf] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

.os-sidebar-item i[b-5q8dc2rxxf] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.os-sidebar-item.danger[b-5q8dc2rxxf] {
    color: #dc3545;
}

.os-sidebar-item.danger:hover[b-5q8dc2rxxf] {
    background: rgba(220, 53, 69, 0.06);
}

.os-sidebar-item.danger.active[b-5q8dc2rxxf] {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

:global([data-bs-theme="dark"]) .os-sidebar-item[b-5q8dc2rxxf] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .os-sidebar-item:hover[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
}

:global([data-bs-theme="dark"]) .os-sidebar-item.active[b-5q8dc2rxxf] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
    color: var(--bs-primary, #6ea8fe);
}

.os-sidebar-divider[b-5q8dc2rxxf] {
    height: 1px;
    background: #f0f0f0;
    margin: 8px 4px;
}

:global([data-bs-theme="dark"]) .os-sidebar-divider[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.06);
}

.os-sidebar-wizard[b-5q8dc2rxxf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.os-sidebar-wizard:hover[b-5q8dc2rxxf] {
    background: #f3f4f6;
    color: #374151;
}

:global([data-bs-theme="dark"]) .os-sidebar-wizard[b-5q8dc2rxxf] {
    color: #6b7280;
}

:global([data-bs-theme="dark"]) .os-sidebar-wizard:hover[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
}

/* ── Content Area ── */
.os-content[b-5q8dc2rxxf] {
    flex: 1;
    min-width: 0;
}

/* ── Section ── */
.os-section[b-5q8dc2rxxf] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 24px;
}

:global([data-bs-theme="dark"]) .os-section[b-5q8dc2rxxf] {
    background: #1a1d23;
    border-color: rgba(255, 255, 255, 0.06);
}

.os-section-header[b-5q8dc2rxxf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

:global([data-bs-theme="dark"]) .os-section-header[b-5q8dc2rxxf] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.os-section-header i[b-5q8dc2rxxf] {
    font-size: 1.2rem;
    color: var(--bs-primary, #0d6efd);
}

.os-section-header h5[b-5q8dc2rxxf] {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1f2937;
}

:global([data-bs-theme="dark"]) .os-section-header h5[b-5q8dc2rxxf] {
    color: #f3f4f6;
}

.os-section-header p[b-5q8dc2rxxf] {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
}

/* ── Form Elements ── */
.os-form-group[b-5q8dc2rxxf] {
    margin-bottom: 18px;
}

.os-form-label[b-5q8dc2rxxf] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

:global([data-bs-theme="dark"]) .os-form-label[b-5q8dc2rxxf] {
    color: #9ca3af;
}

.os-form-input[b-5q8dc2rxxf] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.os-form-input:focus[b-5q8dc2rxxf] {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}

.os-form-input[b-5q8dc2rxxf]::placeholder {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .os-form-input[b-5q8dc2rxxf] {
    background: #16181c;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

:global([data-bs-theme="dark"]) .os-form-input:focus[b-5q8dc2rxxf] {
    border-color: var(--bs-primary, #6ea8fe);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
}

.os-form-row[b-5q8dc2rxxf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.os-form-textarea[b-5q8dc2rxxf] {
    resize: vertical;
    min-height: 80px;
}

/* ── Save Button ── */
.os-save-btn[b-5q8dc2rxxf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.os-save-btn:hover:not(:disabled)[b-5q8dc2rxxf] {
    background: var(--bs-primary, #0b5ed7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.os-save-btn:disabled[b-5q8dc2rxxf] {
    opacity: 0.6;
    cursor: default;
}

/* ── Char Counter ── */
.os-char-counter[b-5q8dc2rxxf] {
    text-align: right;
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 4px;
}

.os-char-counter.warn[b-5q8dc2rxxf] {
    color: #f59e0b;
}

.os-char-counter.over[b-5q8dc2rxxf] {
    color: #ef4444;
}

/* ── Logo Upload ── */
.os-logo-section[b-5q8dc2rxxf] {
    margin-bottom: 24px;
}

.os-logo-label[b-5q8dc2rxxf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

:global([data-bs-theme="dark"]) .os-logo-label[b-5q8dc2rxxf] {
    color: #d1d5db;
}

.os-logo-preview[b-5q8dc2rxxf] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px dashed #e5e7eb;
}

.os-logo-preview.light[b-5q8dc2rxxf] {
    background: #f8f9fa;
}

.os-logo-preview.dark[b-5q8dc2rxxf] {
    background: #1a1a2e;
    border-color: rgba(255, 255, 255, 0.1);
}

.os-logo-preview img[b-5q8dc2rxxf] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── Divider ── */
.os-divider[b-5q8dc2rxxf] {
    height: 1px;
    background: #f3f4f6;
    margin: 24px 0;
}

:global([data-bs-theme="dark"]) .os-divider[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Rest Days Grid ── */
.os-rest-days-grid[b-5q8dc2rxxf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.os-rest-day-toggle[b-5q8dc2rxxf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    transition: background 0.15s;
}

.os-rest-day-toggle:hover[b-5q8dc2rxxf] {
    background: #f3f4f6;
}

:global([data-bs-theme="dark"]) .os-rest-day-toggle[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Danger Section ── */
.os-danger-section[b-5q8dc2rxxf] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.2);
    box-shadow: 0 1px 4px rgba(220, 53, 69, 0.06);
    padding: 24px;
}

:global([data-bs-theme="dark"]) .os-danger-section[b-5q8dc2rxxf] {
    background: rgba(220, 53, 69, 0.04);
    border-color: rgba(220, 53, 69, 0.15);
}

.os-danger-section .os-section-header[b-5q8dc2rxxf] {
    border-bottom-color: rgba(220, 53, 69, 0.12);
}

.os-danger-section .os-section-header i[b-5q8dc2rxxf] {
    color: #dc3545;
}

.os-danger-section .os-section-header h5[b-5q8dc2rxxf] {
    color: #dc3545;
}

/* ── Join Code ── */
.os-join-code[b-5q8dc2rxxf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--bs-primary, #0d6efd);
}

:global([data-bs-theme="dark"]) .os-join-code[b-5q8dc2rxxf] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-primary, #6ea8fe);
}

/* ── Night Differential Card ── */
.os-nd-grid[b-5q8dc2rxxf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ── Error Messages ── */
.os-error[b-5q8dc2rxxf] {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 6px;
}

/* ── Mobile Responsive ── */
@@media (max-width: 991.98px) {
    .os-layout[b-5q8dc2rxxf] {
        flex-direction: column;
        gap: 16px;
    }

    .os-sidebar[b-5q8dc2rxxf] {
        width: 100%;
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .os-sidebar-item[b-5q8dc2rxxf] {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .os-sidebar-item span[b-5q8dc2rxxf] {
        display: inline;
    }

    .os-sidebar-divider[b-5q8dc2rxxf] {
        width: 1px;
        height: 24px;
        margin: 0 4px;
    }

    .os-sidebar-wizard[b-5q8dc2rxxf] {
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .os-section[b-5q8dc2rxxf] {
        padding: 20px 16px;
    }

    .os-form-row[b-5q8dc2rxxf] {
        grid-template-columns: 1fr;
    }

    .os-nd-grid[b-5q8dc2rxxf] {
        grid-template-columns: 1fr;
    }
}

@@media (max-width: 575.98px) {
    .os-sidebar-item[b-5q8dc2rxxf] {
        padding: 6px 10px;
        font-size: 0.78rem;
        gap: 6px;
    }

    .os-sidebar-item i[b-5q8dc2rxxf] {
        font-size: 0.9rem;
    }

    .os-section[b-5q8dc2rxxf] {
        padding: 16px 14px;
    }

    .os-section-header[b-5q8dc2rxxf] {
        margin-bottom: 18px;
        padding-bottom: 12px;
    }
}
/* /Features/AttendanceLogging/ScanQR.razor.rz.scp.css */
/* SweetAlert-style warning icon */
.swal-icon-wrapper[b-722yha0yw6] {
    display: flex;
    justify-content: center;
}

.swal-icon[b-722yha0yw6] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.swal-warning[b-722yha0yw6] {
    border: 4px solid #f8bb86;
    animation: swal-warning-pulse-b-722yha0yw6 0.75s infinite alternate;
}

.swal-warning-body[b-722yha0yw6] {
    position: absolute;
    width: 5px;
    height: 30px;
    background-color: #f8bb86;
    border-radius: 3px;
    top: 15px;
}

.swal-warning-dot[b-722yha0yw6] {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #f8bb86;
    border-radius: 50%;
    bottom: 15px;
}

@keyframes swal-warning-pulse-b-722yha0yw6 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* SweetAlert-style success icon */
.swal-success[b-722yha0yw6] {
    border: 4px solid #a5dc86;
    animation: swal-success-pulse-b-722yha0yw6 0.75s ease-in-out;
}

.swal-success-line[b-722yha0yw6] {
    position: absolute;
    height: 5px;
    background-color: #a5dc86;
    border-radius: 3px;
}

.swal-success-line-tip[b-722yha0yw6] {
    width: 25px;
    transform: rotate(45deg);
    left: 8px;
    top: 40px;
}

.swal-success-line-long[b-722yha0yw6] {
    width: 45px;
    transform: rotate(-45deg);
    right: 4px;
    top: 33px;
}

@keyframes swal-success-pulse-b-722yha0yw6 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Modal backdrop animation */
[b-722yha0yw6] .modal.show {
    animation: modal-fade-in-b-722yha0yw6 0.3s ease-out;
}

@keyframes modal-fade-in-b-722yha0yw6 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal content animation */
[b-722yha0yw6] .modal-content {
    animation: modal-scale-in-b-722yha0yw6 0.3s ease-out;
}

@keyframes modal-scale-in-b-722yha0yw6 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Button hover effects */
[b-722yha0yw6] .btn-lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* SweetAlert-style buttons */
.swal-btn[b-722yha0yw6] {
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.swal-btn:hover[b-722yha0yw6] {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.swal-btn:active[b-722yha0yw6] {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.swal-btn-cancel[b-722yha0yw6] {
    background: linear-gradient(180deg, #7c858c 0%, #6e7881 100%);
    color: white;
}

.swal-btn-cancel:hover[b-722yha0yw6] {
    background: linear-gradient(180deg, #8a939b 0%, #7c858c 100%);
    color: white;
}

.swal-btn-confirm[b-722yha0yw6] {
    background: linear-gradient(180deg, #f9c97c 0%, #f8bb86 100%);
    color: #945a1c;
}

.swal-btn-confirm:hover[b-722yha0yw6] {
    background: linear-gradient(180deg, #fad48e 0%, #f9c97c 100%);
    color: #7a4a17;
}

.swal-btn-confirm:disabled[b-722yha0yw6] {
    background: linear-gradient(180deg, #e0e0e0 0%, #cccccc 100%);
    color: #888888;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* /Features/Authentication/ForgotPassword.razor.rz.scp.css */
.forgot-card[b-plhmssaqf6] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.forgot-card:hover[b-plhmssaqf6] {
    transform: translateY(-2px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.logo-container[b-plhmssaqf6] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: float-b-plhmssaqf6 3s ease-in-out infinite;
}

.logo-inner[b-plhmssaqf6] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes float-b-plhmssaqf6 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.form-floating-custom[b-plhmssaqf6] {
    position: relative;
}

.form-floating-custom .form-control[b-plhmssaqf6] {
    height: 56px;
    padding-left: 52px !important;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-floating-custom .form-control[b-plhmssaqf6]::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-floating-custom .form-control:focus[b-plhmssaqf6] {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-floating-custom .input-icon[b-plhmssaqf6] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.form-floating-custom:focus-within .input-icon[b-plhmssaqf6] {
    color: #667eea;
}

.btn-login[b-plhmssaqf6] {
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff !important;
}

.btn-login span[b-plhmssaqf6],
.btn-login i[b-plhmssaqf6] {
    color: #fff !important;
}

.btn-login[b-plhmssaqf6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover:not(:disabled)[b-plhmssaqf6]::before {
    left: 100%;
}

.btn-login:hover:not(:disabled)[b-plhmssaqf6] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
    color: #fff !important;
}

.btn-login:disabled[b-plhmssaqf6] {
    opacity: 0.7;
    cursor: not-allowed;
}

.validation-message[b-plhmssaqf6] {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.validation-message[b-plhmssaqf6]::before {
    content: '\F33A';
    font-family: 'bootstrap-icons', sans-serif;
}

@media (max-width: 576px) {
    .forgot-card[b-plhmssaqf6] {
        border-radius: 20px;
        padding: 20px !important;
    }

    .btn-login[b-plhmssaqf6] {
        height: 50px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .form-floating-custom .form-control[b-plhmssaqf6] {
        height: 50px;
        font-size: 16px;
        border-radius: 12px;
    }

    .logo-container[b-plhmssaqf6] {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }

    .logo-inner[b-plhmssaqf6] {
        border-radius: 14px;
    }

    .logo-inner img[b-plhmssaqf6] {
        width: 46px !important;
        height: 46px !important;
    }
}

/* /Features/Authentication/Login.razor.rz.scp.css */
.login-card[b-lydpgy8rto] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover[b-lydpgy8rto] {
    transform: translateY(-2px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.logo-container[b-lydpgy8rto] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: float-b-lydpgy8rto 3s ease-in-out infinite;
}

.logo-inner[b-lydpgy8rto] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes float-b-lydpgy8rto {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.form-floating-custom[b-lydpgy8rto] {
    position: relative;
}

.form-floating-custom .form-control[b-lydpgy8rto] {
    height: 56px;
    padding-left: 52px !important;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-floating-custom .form-control[b-lydpgy8rto]::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-floating-custom .form-control:focus[b-lydpgy8rto] {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-floating-custom .form-control:focus[b-lydpgy8rto]::placeholder {
    color: #c4c9cf;
}

.form-floating-custom .form-control.is-invalid[b-lydpgy8rto],
.form-floating-custom .form-control:invalid[b-lydpgy8rto] {
    border-color: #dc3545;
}

.form-floating-custom .input-icon[b-lydpgy8rto] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.form-floating-custom:focus-within .input-icon[b-lydpgy8rto] {
    color: #667eea;
}

.form-floating-custom .password-toggle[b-lydpgy8rto] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    z-index: 4;
    transition: color 0.2s ease;
}

.form-floating-custom .password-toggle:hover[b-lydpgy8rto] {
    color: #667eea;
}

.btn-login[b-lydpgy8rto] {
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff !important;
}

.btn-login span[b-lydpgy8rto],
.btn-login i[b-lydpgy8rto] {
    color: #fff !important;
}

.btn-login .spinner-border[b-lydpgy8rto] {
    animation: spinner-border-b-lydpgy8rto 0.75s linear infinite;
}

@keyframes spinner-border-b-lydpgy8rto {
    to { transform: rotate(360deg); }
}

.btn-login[b-lydpgy8rto]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover:not(:disabled)[b-lydpgy8rto]::before {
    left: 100%;
}

.btn-login:hover:not(:disabled)[b-lydpgy8rto] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
    color: #fff !important;
}

.btn-login:active:not(:disabled)[b-lydpgy8rto] {
    transform: translateY(0);
}

.btn-login:disabled[b-lydpgy8rto] {
    opacity: 0.7;
    cursor: not-allowed;
}

.remember-check[b-lydpgy8rto] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remember-check .form-check-input[b-lydpgy8rto] {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remember-check .form-check-input:checked[b-lydpgy8rto] {
    background-color: #667eea;
    border-color: #667eea;
}

.remember-check .form-check-input:focus[b-lydpgy8rto] {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.divider[b-lydpgy8rto] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #adb5bd;
    font-size: 0.85rem;
}

.divider[b-lydpgy8rto]::before,
.divider[b-lydpgy8rto]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dee2e6, transparent);
}

.signup-options-compact[b-lydpgy8rto] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-signup-compact[b-lydpgy8rto] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    color: #495057;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-signup-compact i[b-lydpgy8rto] {
    font-size: 1rem;
    color: #667eea;
    transition: color 0.25s ease;
}

.btn-signup-compact:hover[b-lydpgy8rto] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.12);
    text-decoration: none;
}

.btn-signup-compact:hover i[b-lydpgy8rto] {
    color: #764ba2;
}

.btn-signup-compact:active[b-lydpgy8rto] {
    transform: translateY(0);
}

.signup-sep[b-lydpgy8rto] {
    color: #adb5bd;
    font-size: 0.78rem;
    font-weight: 500;
}

.back-home-link[b-lydpgy8rto] {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-home-link:hover[b-lydpgy8rto] {
    color: #667eea;
    text-decoration: none;
}

.forgot-link[b-lydpgy8rto] {
    color: #667eea;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-link:hover[b-lydpgy8rto] {
    color: #764ba2;
    text-decoration: underline;
}

.validation-message[b-lydpgy8rto] {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.validation-message[b-lydpgy8rto]::before {
    content: '\F33A';
    font-family: 'bootstrap-icons', sans-serif;
}

@media (max-width: 576px) {
    .signup-options-compact[b-lydpgy8rto] {
        gap: 8px;
    }
    
    .btn-signup-compact[b-lydpgy8rto] {
        padding: 7px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
    }
    
    .btn-signup-compact i[b-lydpgy8rto] {
        font-size: 0.9rem;
    }
    
    .login-card[b-lydpgy8rto] {
        border-radius: 20px;
        padding: 20px !important;
    }
    
    .btn-login[b-lydpgy8rto] {
        height: 50px;
        font-size: 0.95rem;
        border-radius: 12px;
    }
    
    .form-floating-custom .form-control[b-lydpgy8rto] {
        height: 50px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        border-radius: 12px;
    }
    
    .remember-check .form-check-input[b-lydpgy8rto] {
        width: 18px;
        height: 18px;
    }
    
    .remember-check .form-check-label[b-lydpgy8rto] {
        font-size: 0.85rem;
    }
    
    .forgot-link[b-lydpgy8rto] {
        font-size: 0.85rem;
    }
    
    .logo-container[b-lydpgy8rto] {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }
    
    .logo-inner[b-lydpgy8rto] {
        border-radius: 14px;
    }
    
    .logo-inner img[b-lydpgy8rto] {
        width: 46px !important;
        height: 46px !important;
    }
    
    .divider[b-lydpgy8rto] {
        margin: 16px 0 !important;
        font-size: 0.8rem;
    }
}

/* Tablet breakpoint */
@media (min-width: 577px) and (max-width: 768px) {
    .btn-signup-compact[b-lydpgy8rto] {
        padding: 8px 14px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn-signup-compact[b-lydpgy8rto] {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    }
    
    .btn-signup-compact:active[b-lydpgy8rto] {
        transform: scale(0.98);
        background: rgba(102, 126, 234, 0.08);
        border-color: #667eea;
    }
    
    .btn-login:active:not(:disabled)[b-lydpgy8rto] {
        transform: scale(0.98);
    }
    
    .form-floating-custom .password-toggle:active[b-lydpgy8rto] {
        color: #667eea;
    }
}

/* /Features/Authentication/ResetPassword.razor.rz.scp.css */
.reset-card[b-cf7fkv1ki6] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reset-card:hover[b-cf7fkv1ki6] {
    transform: translateY(-2px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.logo-container[b-cf7fkv1ki6] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: float-b-cf7fkv1ki6 3s ease-in-out infinite;
}

.logo-inner[b-cf7fkv1ki6] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes float-b-cf7fkv1ki6 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.btn-login[b-cf7fkv1ki6] {
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-login span[b-cf7fkv1ki6],
.btn-login i[b-cf7fkv1ki6] {
    color: #fff !important;
}

.btn-login[b-cf7fkv1ki6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover:not(:disabled)[b-cf7fkv1ki6]::before {
    left: 100%;
}

.btn-login:hover:not(:disabled)[b-cf7fkv1ki6] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
    color: #fff !important;
    text-decoration: none;
}

.btn-login:disabled[b-cf7fkv1ki6] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .reset-card[b-cf7fkv1ki6] {
        border-radius: 20px;
        padding: 20px !important;
    }

    .btn-login[b-cf7fkv1ki6] {
        height: 50px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .logo-container[b-cf7fkv1ki6] {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }

    .logo-inner[b-cf7fkv1ki6] {
        border-radius: 14px;
    }

    .logo-inner img[b-cf7fkv1ki6] {
        width: 46px !important;
        height: 46px !important;
    }
}

/* /Features/Billing/Pages/ManualPayment.razor.rz.scp.css */
/* ====================================================
   Manual Payment Page – Mobile-First Enhanced Styles
   Prefixed with 'mp-' to avoid collisions.
   ==================================================== */

/* ===== Container ===== */
.mp-container[b-qhgqmzdifg] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
}

/* ===== Back Link ===== */
.mp-back-link[b-qhgqmzdifg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    background: white;
    transition: all 0.15s;
    margin-bottom: 1.25rem;
}
.mp-back-link:hover[b-qhgqmzdifg] {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

/* ===== Loading ===== */
.mp-loading[b-qhgqmzdifg] {
    text-align: center;
    padding: 4rem 1rem;
}
.mp-loading p[b-qhgqmzdifg] {
    color: #9ca3af;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

/* ===== Page Title ===== */
.mp-page-title[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.mp-page-title-icon[b-qhgqmzdifg] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mp-page-title h1[b-qhgqmzdifg] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.1rem;
}
.mp-page-title p[b-qhgqmzdifg] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* ===== Empty State ===== */
.mp-empty-state[b-qhgqmzdifg] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mp-empty-icon[b-qhgqmzdifg] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}
.mp-empty-state h5[b-qhgqmzdifg] {
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.35rem;
}
.mp-empty-state p[b-qhgqmzdifg] {
    font-size: 0.88rem;
    color: #9ca3af;
    max-width: 320px;
    margin: 0 auto 1.25rem;
}

/* ===== Progress Indicator ===== */
.mp-progress[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
    padding: 1rem 0.5rem;
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mp-progress-step[b-qhgqmzdifg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.mp-progress-dot[b-qhgqmzdifg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.mp-step-active .mp-progress-dot[b-qhgqmzdifg] {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #4f46e5;
}
.mp-step-done .mp-progress-dot[b-qhgqmzdifg] {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}
.mp-progress-label[b-qhgqmzdifg] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.mp-step-active .mp-progress-label[b-qhgqmzdifg] {
    color: #4f46e5;
}
.mp-step-done .mp-progress-label[b-qhgqmzdifg] {
    color: #059669;
}
.mp-progress-line[b-qhgqmzdifg] {
    width: 40px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 0.35rem;
    margin-bottom: 1.25rem; /* align with dot center */
    border-radius: 2px;
    transition: background 0.3s;
}
.mp-line-active[b-qhgqmzdifg] {
    background: #4f46e5;
}

/* ===== Cards ===== */
.mp-card[b-qhgqmzdifg] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    transition: opacity 0.2s;
}
.mp-card-dimmed[b-qhgqmzdifg] {
    opacity: 0.5;
    pointer-events: none;
}
.mp-card-header[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.mp-card-header h5[b-qhgqmzdifg] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0;
    flex: 1;
}
.mp-card-body[b-qhgqmzdifg] {
    padding: 1rem;
}
.mp-step-badge[b-qhgqmzdifg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Payment Method Grid ===== */
.mp-method-grid[b-qhgqmzdifg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mp-method-card[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}
.mp-method-card:hover[b-qhgqmzdifg] {
    border-color: #c7d2fe;
    background: #fafafe;
}
.mp-method-selected[b-qhgqmzdifg] {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: 0 0 0 1px #4f46e5;
}
.mp-method-icon-wrap[b-qhgqmzdifg] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mp-method-icon-active[b-qhgqmzdifg] {
    background: #4f46e5;
    color: white;
}
.mp-method-info[b-qhgqmzdifg] {
    flex: 1;
    min-width: 0;
}
.mp-method-name[b-qhgqmzdifg] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-method-type[b-qhgqmzdifg] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}
.mp-method-check[b-qhgqmzdifg] {
    flex-shrink: 0;
    font-size: 1.15rem;
}

/* ===== Account Details ===== */
.mp-account-details[b-qhgqmzdifg] {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 0.85rem;
}
.mp-account-header[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.mp-account-icon[b-qhgqmzdifg] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #4f46e5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mp-account-title[b-qhgqmzdifg] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
}
.mp-account-body[b-qhgqmzdifg] {
    padding: 0.85rem;
}
.mp-account-text[b-qhgqmzdifg] {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.88rem;
    color: #374151;
    margin-bottom: 0;
    line-height: 1.6;
    background: none;
    border: none;
    padding: 0;
}

/* ===== Instructions ===== */
.mp-instructions[b-qhgqmzdifg] {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    color: #92400e;
    align-items: flex-start;
}
.mp-instructions i[b-qhgqmzdifg] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ===== QR Code Section ===== */
.mp-qr-section[b-qhgqmzdifg] {
    text-align: center;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    background: #fafafa;
}
.mp-qr-label[b-qhgqmzdifg] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mp-qr-wrapper[b-qhgqmzdifg] {
    max-width: 280px;
    margin: 0 auto;
}
.mp-qr-image[b-qhgqmzdifg] {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ===== Upload Placeholder ===== */
.mp-upload-placeholder[b-qhgqmzdifg] {
    text-align: center;
    padding: 2rem 1rem;
    color: #d1d5db;
}
.mp-upload-placeholder i[b-qhgqmzdifg] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}
.mp-upload-placeholder p[b-qhgqmzdifg] {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 0;
}

/* ===== Form Fields ===== */
.mp-form-field[b-qhgqmzdifg] {
    margin-bottom: 1rem;
}
.mp-form-field label[b-qhgqmzdifg] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mp-input[b-qhgqmzdifg] {
    border-color: #e5e7eb;
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mp-input:focus[b-qhgqmzdifg] {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}
.mp-input-prefix[b-qhgqmzdifg] {
    border-radius: 10px 0 0 10px !important;
    background: #f9fafb;
    border-color: #e5e7eb;
    font-weight: 700;
    color: #6b7280;
}
.mp-file-upload[b-qhgqmzdifg] {
    position: relative;
}
.mp-file-hint[b-qhgqmzdifg] {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 0.35rem;
}

/* ===== Receipt Preview ===== */
.mp-receipt-preview[b-qhgqmzdifg] {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #f9fafb;
    text-align: center;
}
.mp-receipt-preview img[b-qhgqmzdifg] {
    max-height: 200px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0.5rem auto;
}
.mp-receipt-preview-label[b-qhgqmzdifg] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #059669;
    padding: 0.5rem;
    background: #ecfdf5;
    border-top: 1px solid #d1fae5;
}
.mp-receipt-file[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 600;
}
.mp-receipt-file i[b-qhgqmzdifg] {
    font-size: 1.5rem;
}

/* ===== Submit Button ===== */
.mp-submit-btn[b-qhgqmzdifg] {
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.65rem 1rem;
    transition: all 0.15s;
    margin-top: 0.25rem;
}
.mp-submit-btn:not(:disabled):hover[b-qhgqmzdifg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.mp-submit-btn:disabled[b-qhgqmzdifg] {
    opacity: 0.55;
}

/* ===== Review Notice ===== */
.mp-review-notice[b-qhgqmzdifg] {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    margin-top: 1rem;
    align-items: flex-start;
}
.mp-review-notice > i[b-qhgqmzdifg] {
    font-size: 1.1rem;
    color: #0284c7;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.mp-review-notice strong[b-qhgqmzdifg] {
    font-size: 0.82rem;
    color: #0c4a6e;
    display: block;
    margin-bottom: 0.15rem;
}
.mp-review-notice p[b-qhgqmzdifg] {
    font-size: 0.78rem;
    color: #0369a1;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ===== Proof Count Badge ===== */
.mp-proof-count[b-qhgqmzdifg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 20px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 0.4rem;
    margin-left: auto;
}

/* ===== Previous Submissions ===== */
.mp-proof-item[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}
.mp-proof-item:last-child[b-qhgqmzdifg] {
    border-bottom: none;
}
.mp-proof-item:hover[b-qhgqmzdifg] {
    background: #f9fafb;
}
.mp-proof-status[b-qhgqmzdifg] {
    flex-shrink: 0;
}
.mp-proof-badge[b-qhgqmzdifg] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.mp-proof-pending_review[b-qhgqmzdifg] {
    background: #fffbeb;
    color: #d97706;
}
.mp-proof-approved[b-qhgqmzdifg] {
    background: #ecfdf5;
    color: #059669;
}
.mp-proof-rejected[b-qhgqmzdifg] {
    background: #fef2f2;
    color: #dc2626;
}
.mp-proof-details[b-qhgqmzdifg] {
    flex: 1;
    min-width: 0;
}
.mp-proof-amount[b-qhgqmzdifg] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
}
.mp-proof-ref[b-qhgqmzdifg] {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-proof-date[b-qhgqmzdifg] {
    font-size: 0.72rem;
    color: #9ca3af;
}
.mp-proof-view-btn[b-qhgqmzdifg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.15s;
    flex-shrink: 0;
}
.mp-proof-view-btn:hover[b-qhgqmzdifg] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

/* ===== Responsive / Mobile ===== */
@media (max-width: 991.98px) {
    .mp-container[b-qhgqmzdifg] {
        padding: 0.75rem 0.75rem 3rem;
    }

    .mp-page-title[b-qhgqmzdifg] {
        margin-bottom: 1.25rem;
    }
    .mp-page-title-icon[b-qhgqmzdifg] {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }
    .mp-page-title h1[b-qhgqmzdifg] {
        font-size: 1.15rem;
    }
    .mp-page-title p[b-qhgqmzdifg] {
        font-size: 0.78rem;
    }

    /* Stack progress steps tighter */
    .mp-progress[b-qhgqmzdifg] {
        padding: 0.75rem 0.35rem;
        margin-bottom: 1.25rem;
    }
    .mp-progress-line[b-qhgqmzdifg] {
        width: 24px;
    }
    .mp-progress-dot[b-qhgqmzdifg] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .mp-progress-label[b-qhgqmzdifg] {
        font-size: 0.6rem;
    }

    /* Cards tighter */
    .mp-card-header[b-qhgqmzdifg] {
        padding: 0.75rem 0.85rem;
    }
    .mp-card-body[b-qhgqmzdifg] {
        padding: 0.85rem;
    }

    /* Method cards more compact */
    .mp-method-card[b-qhgqmzdifg] {
        padding: 0.65rem;
    }
    .mp-method-icon-wrap[b-qhgqmzdifg] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .mp-method-name[b-qhgqmzdifg] {
        font-size: 0.82rem;
    }

    /* QR code responsive */
    .mp-qr-wrapper[b-qhgqmzdifg] {
        max-width: 220px;
    }
    .mp-qr-section[b-qhgqmzdifg] {
        padding: 0.85rem;
    }

    /* Account details tighter */
    .mp-account-text[b-qhgqmzdifg] {
        font-size: 0.82rem;
    }

    /* Form fields */
    .mp-input[b-qhgqmzdifg] {
        font-size: 0.85rem;
        padding: 0.5rem 0.65rem;
    }

    /* Receipt preview smaller */
    .mp-receipt-preview img[b-qhgqmzdifg] {
        max-height: 160px;
    }

    /* Submit button */
    .mp-submit-btn[b-qhgqmzdifg] {
        font-size: 0.88rem;
        padding: 0.6rem 0.85rem;
    }

    /* Proof items compact */
    .mp-proof-item[b-qhgqmzdifg] {
        padding: 0.7rem 0.85rem;
        gap: 0.6rem;
    }
    .mp-proof-amount[b-qhgqmzdifg] {
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .mp-container[b-qhgqmzdifg] {
        padding: 0.5rem 0.5rem 3rem;
    }

    .mp-back-link[b-qhgqmzdifg] {
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
    }

    .mp-page-title[b-qhgqmzdifg] {
        gap: 0.65rem;
    }
    .mp-page-title-icon[b-qhgqmzdifg] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .mp-page-title h1[b-qhgqmzdifg] {
        font-size: 1.05rem;
    }

    /* Progress even tighter */
    .mp-progress[b-qhgqmzdifg] {
        gap: 0;
        padding: 0.6rem 0.25rem;
    }
    .mp-progress-line[b-qhgqmzdifg] {
        width: 16px;
        margin: 0 0.2rem;
    }
    .mp-progress-dot[b-qhgqmzdifg] {
        width: 26px;
        height: 26px;
    }
    .mp-progress-label[b-qhgqmzdifg] {
        font-size: 0.55rem;
        max-width: 60px;
        text-align: center;
        line-height: 1.2;
    }

    /* Cards minimal padding */
    .mp-card[b-qhgqmzdifg] {
        border-radius: 12px;
    }
    .mp-card-header[b-qhgqmzdifg] {
        padding: 0.65rem 0.75rem;
    }
    .mp-card-header h5[b-qhgqmzdifg] {
        font-size: 0.88rem;
    }
    .mp-card-body[b-qhgqmzdifg] {
        padding: 0.75rem;
    }
    .mp-step-badge[b-qhgqmzdifg] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    /* Method cards stacked */
    .mp-method-card[b-qhgqmzdifg] {
        padding: 0.55rem;
        border-radius: 10px;
    }
    .mp-method-icon-wrap[b-qhgqmzdifg] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 0.95rem;
    }
    .mp-method-name[b-qhgqmzdifg] {
        font-size: 0.8rem;
    }
    .mp-method-type[b-qhgqmzdifg] {
        font-size: 0.7rem;
    }
    .mp-method-check[b-qhgqmzdifg] {
        font-size: 1rem;
    }

    /* QR even smaller */
    .mp-qr-wrapper[b-qhgqmzdifg] {
        max-width: 180px;
    }

    /* Form */
    .mp-form-field label[b-qhgqmzdifg] {
        font-size: 0.72rem;
    }
    .mp-input[b-qhgqmzdifg] {
        font-size: 0.82rem;
        border-radius: 8px !important;
    }

    /* Review notice compact */
    .mp-review-notice[b-qhgqmzdifg] {
        padding: 0.6rem;
        gap: 0.5rem;
    }
    .mp-review-notice strong[b-qhgqmzdifg] {
        font-size: 0.78rem;
    }
    .mp-review-notice p[b-qhgqmzdifg] {
        font-size: 0.72rem;
    }

    /* Proof items */
    .mp-proof-item[b-qhgqmzdifg] {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }
    .mp-proof-badge[b-qhgqmzdifg] {
        font-size: 0.62rem;
        padding: 0.15rem 0.4rem;
    }
    .mp-proof-amount[b-qhgqmzdifg] {
        font-size: 0.82rem;
    }
    .mp-proof-date[b-qhgqmzdifg] {
        font-size: 0.68rem;
    }
    .mp-proof-view-btn[b-qhgqmzdifg] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
}

/* /Features/DemoPreview/Components/DemoModeBanner.razor.rz.scp.css */
.demo-mode-banner[b-au0uhb2uda] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.4);
}

.demo-banner-content[b-au0uhb2uda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 12px;
    flex-wrap: wrap;
}

.demo-banner-left[b-au0uhb2uda] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-banner-icon[b-au0uhb2uda] {
    font-size: 1.2rem;
}

.demo-banner-text[b-au0uhb2uda] {
    font-size: 0.85rem;
    white-space: nowrap;
}

.demo-banner-text strong[b-au0uhb2uda] {
    font-weight: 700;
}

.demo-banner-actions[b-au0uhb2uda] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.demo-banner-link[b-au0uhb2uda] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.demo-banner-link:hover[b-au0uhb2uda] {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.demo-banner-cta[b-au0uhb2uda] {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: white;
    color: #667eea;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s;
    white-space: nowrap;
}

.demo-banner-cta:hover[b-au0uhb2uda] {
    background: #f0f0ff;
    color: #5a4fcf;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767.98px) {
    .demo-banner-content[b-au0uhb2uda] {
        justify-content: center;
        text-align: center;
    }

    .demo-banner-left[b-au0uhb2uda] {
        width: 100%;
        justify-content: center;
    }

    .demo-banner-actions[b-au0uhb2uda] {
        width: 100%;
        justify-content: center;
    }

    .demo-banner-link[b-au0uhb2uda] {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .demo-banner-text[b-au0uhb2uda] {
        font-size: 0.8rem;
    }
}

/* /Features/DemoPreview/Pages/DemoGallery.razor.rz.scp.css */
/* ============ DEMO GALLERY PAGE ============ */
.demo-gallery-page[b-9achw2gpr3] {
    min-height: 100vh;
    background: #f8f9fa;
}

/* ── Hero ── */
.dg-hero[b-9achw2gpr3] {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 80px 24px 60px;
    text-align: center;
    overflow: hidden;
}

.dg-hero-bg[b-9achw2gpr3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dg-orb[b-9achw2gpr3] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.dg-orb-1[b-9achw2gpr3] {
    width: 400px;
    height: 400px;
    background: #667eea;
    top: -100px;
    left: -100px;
}

.dg-orb-2[b-9achw2gpr3] {
    width: 300px;
    height: 300px;
    background: #764ba2;
    bottom: -80px;
    right: -60px;
}

.dg-orb-3[b-9achw2gpr3] {
    width: 200px;
    height: 200px;
    background: #0d6efd;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dg-container[b-9achw2gpr3] {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.dg-hero-badge[b-9achw2gpr3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.dg-hero-title[b-9achw2gpr3] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.dg-hero-desc[b-9achw2gpr3] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* ── Stats Bar ── */
.dg-stats-bar[b-9achw2gpr3] {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
    justify-content: center;
}

.dg-stat-item[b-9achw2gpr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dg-stat-number[b-9achw2gpr3] {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
}

.dg-stat-label[b-9achw2gpr3] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dg-stat-divider[b-9achw2gpr3] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
}

/* ── Sections ── */
.dg-section[b-9achw2gpr3] {
    padding: 48px 24px;
}

.dg-section-header[b-9achw2gpr3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.dg-section-badge[b-9achw2gpr3] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dg-section-badge.employee[b-9achw2gpr3] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.dg-section-badge.admin[b-9achw2gpr3] {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.dg-section-header h2[b-9achw2gpr3] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.dg-section-header p[b-9achw2gpr3] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 2px 0 0;
}

/* ── Card Grid ── */
.dg-card-grid[b-9achw2gpr3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}

.dg-card[b-9achw2gpr3] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dg-card:hover[b-9achw2gpr3] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: rgba(13, 110, 253, 0.2);
}

.dg-card-icon[b-9achw2gpr3] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.dg-card-content[b-9achw2gpr3] {
    flex: 1;
    min-width: 0;
}

.dg-card-content h3[b-9achw2gpr3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 6px;
}

.dg-card-content p[b-9achw2gpr3] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0 10px;
    line-height: 1.5;
}

.dg-card-tags[b-9achw2gpr3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dg-tag[b-9achw2gpr3] {
    font-size: 0.68rem;
    padding: 3px 10px;
    background: #f0f2f5;
    color: #6c757d;
    border-radius: 20px;
    font-weight: 500;
}

.dg-card-arrow[b-9achw2gpr3] {
    color: #adb5bd;
    font-size: 1.2rem;
    transition: all 0.3s;
    flex-shrink: 0;
}

.dg-card:hover .dg-card-arrow[b-9achw2gpr3] {
    color: #0d6efd;
    transform: translateX(4px);
}

/* ── CTA ── */
.dg-cta[b-9achw2gpr3] {
    padding: 60px 24px 80px;
    text-align: center;
}

.dg-cta-content[b-9achw2gpr3] {
    max-width: 600px;
    margin: 0 auto;
    padding: 48px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    color: white;
}

.dg-cta-content h2[b-9achw2gpr3] {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.dg-cta-content p[b-9achw2gpr3] {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 28px;
}

.dg-cta-actions[b-9achw2gpr3] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.dg-cta-btn[b-9achw2gpr3] {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.dg-cta-btn.primary[b-9achw2gpr3] {
    background: white;
    color: #667eea;
}

.dg-cta-btn.primary:hover[b-9achw2gpr3] {
    background: #f0f0ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.dg-cta-btn.secondary[b-9achw2gpr3] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dg-cta-btn.secondary:hover[b-9achw2gpr3] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .dg-hero[b-9achw2gpr3] {
        padding: 60px 16px 48px;
    }

    .dg-hero-title[b-9achw2gpr3] {
        font-size: 1.75rem;
    }

    .dg-hero-desc[b-9achw2gpr3] {
        font-size: 0.95rem;
    }

    .dg-stats-bar[b-9achw2gpr3] {
        padding: 12px 20px;
        gap: 16px;
    }

    .dg-stat-number[b-9achw2gpr3] {
        font-size: 1rem;
    }

    .dg-stat-divider[b-9achw2gpr3] {
        height: 24px;
    }

    .dg-section[b-9achw2gpr3] {
        padding: 32px 16px;
    }

    .dg-card-grid[b-9achw2gpr3] {
        grid-template-columns: 1fr;
    }

    .dg-card[b-9achw2gpr3] {
        padding: 18px;
        gap: 16px;
    }

    .dg-card-icon[b-9achw2gpr3] {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .dg-cta-content[b-9achw2gpr3] {
        padding: 36px 24px;
    }

    .dg-cta-content h2[b-9achw2gpr3] {
        font-size: 1.4rem;
    }
}

/* /Features/EmployeePortal/AttendanceAnalytics.razor.rz.scp.css */
/* ============ PAGE LAYOUT ============ */
.analytics-page[b-2784sv1bc5] {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}

/* ============ PERIOD TOGGLE ============ */
.period-toggle-container[b-2784sv1bc5] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.period-toggle[b-2784sv1bc5] {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    gap: 4px;
}

.period-btn[b-2784sv1bc5] {
    padding: 8px 20px;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6c757d);
    cursor: pointer;
    transition: all 0.2s;
}

.period-btn:hover[b-2784sv1bc5] {
    color: var(--bs-primary, #0056b3);
}

.period-btn.active[b-2784sv1bc5] {
    background: var(--bs-primary, #0056b3);
    color: white;
}

/* ============ STATS SUMMARY GRID ============ */
.stats-summary-grid[b-2784sv1bc5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.summary-stat-card[b-2784sv1bc5] {
    background: white;
    border-radius: 14px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
}

.summary-stat-card:hover[b-2784sv1bc5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.summary-stat-icon[b-2784sv1bc5] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.summary-stat-card.on-time .summary-stat-icon[b-2784sv1bc5] {
    background: rgba(25, 135, 84, 0.12);
    color: var(--bs-success, #198754);
}

.summary-stat-card.late .summary-stat-icon[b-2784sv1bc5] {
    background: rgba(253, 126, 20, 0.12);
    color: #fd7e14;
}

.summary-stat-card.absent .summary-stat-icon[b-2784sv1bc5] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger, #dc3545);
}

.summary-stat-card.streak .summary-stat-icon[b-2784sv1bc5] {
    background: rgba(255, 193, 7, 0.15);
    font-size: 1.2rem;
}

.summary-stat-value[b-2784sv1bc5] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    line-height: 1.2;
}

.summary-stat-label[b-2784sv1bc5] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============ ANALYTICS CARDS ============ */
.analytics-card[b-2784sv1bc5] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.analytics-card-title[b-2784sv1bc5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.empty-chart-state[b-2784sv1bc5] {
    text-align: center;
    padding: 40px 20px;
    color: var(--theme-text-muted, #6c757d);
}

.empty-chart-state i[b-2784sv1bc5] {
    font-size: 2rem;
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}

.empty-chart-state p[b-2784sv1bc5] {
    margin: 0;
    font-size: 0.85rem;
}

/* ============ DAY-OF-WEEK GRID ============ */
.dow-grid[b-2784sv1bc5] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.dow-cell[b-2784sv1bc5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    border-radius: 10px;
    transition: all 0.2s;
    min-height: 64px;
}

.dow-name[b-2784sv1bc5] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dow-stat[b-2784sv1bc5] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #6c757d);
    margin-top: 4px;
}

.dow-legend[b-2784sv1bc5] {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 4px;
}

.dow-legend-item[b-2784sv1bc5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6c757d);
}

.dow-legend-dot[b-2784sv1bc5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dow-legend-dot.good[b-2784sv1bc5] {
    background: rgba(25, 135, 84, 0.4);
}

.dow-legend-dot.bad[b-2784sv1bc5] {
    background: rgba(220, 53, 69, 0.4);
}

/* ============ CHECK-IN TIME CARD ============ */
.checkin-time-card[b-2784sv1bc5] {
    text-align: center;
}

.checkin-time-main[b-2784sv1bc5] {
    margin-bottom: 16px;
}

.checkin-time-value[b-2784sv1bc5] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-primary, #0056b3);
    letter-spacing: -0.02em;
}

.checkin-time-range[b-2784sv1bc5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 12px;
}

.checkin-time-stat[b-2784sv1bc5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.checkin-time-label[b-2784sv1bc5] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.checkin-time-sub[b-2784sv1bc5] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.checkin-time-divider[b-2784sv1bc5] {
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
}

/* ============ SKELETON ============ */
.skeleton-stats-grid[b-2784sv1bc5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.skeleton-stat-card[b-2784sv1bc5] {
    height: 100px;
    border-radius: 14px;
}

.skeleton-chart[b-2784sv1bc5] {
    height: 320px;
    border-radius: 16px;
    margin-bottom: 16px;
}

/* ============ RESPONSIVE ============ */
@@media (max-width: 575.98px) {
    .stats-summary-grid[b-2784sv1bc5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .skeleton-stats-grid[b-2784sv1bc5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dow-grid[b-2784sv1bc5] {
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .dow-cell[b-2784sv1bc5] {
        padding: 8px 4px;
        min-height: 56px;
    }

    .dow-name[b-2784sv1bc5] {
        font-size: 0.6rem;
    }

    .dow-stat[b-2784sv1bc5] {
        font-size: 0.55rem;
    }

    .checkin-time-value[b-2784sv1bc5] {
        font-size: 1.6rem;
    }
}

/* ============ DARK MODE ============ */
:global([data-bs-theme="dark"]) .analytics-page[b-2784sv1bc5] {
    background: var(--theme-bg-dark, #1a1d21);
}

:global([data-bs-theme="dark"]) .period-toggle[b-2784sv1bc5] {
    background: var(--theme-card-bg, #212529);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .period-btn[b-2784sv1bc5] {
    color: var(--theme-text-muted, #adb5bd);
}

:global([data-bs-theme="dark"]) .period-btn.active[b-2784sv1bc5] {
    background: var(--bs-primary, #0d6efd);
    color: white;
}

:global([data-bs-theme="dark"]) .summary-stat-card[b-2784sv1bc5] {
    background: var(--theme-card-bg, #212529);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .summary-stat-value[b-2784sv1bc5] {
    color: var(--theme-text-main, #e9ecef);
}

:global([data-bs-theme="dark"]) .analytics-card[b-2784sv1bc5] {
    background: var(--theme-card-bg, #212529);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .analytics-card-title[b-2784sv1bc5] {
    color: var(--theme-text-main, #e9ecef);
}

:global([data-bs-theme="dark"]) .dow-name[b-2784sv1bc5] {
    color: var(--theme-text-main, #e9ecef);
}

:global([data-bs-theme="dark"]) .checkin-time-range[b-2784sv1bc5] {
    background: rgba(255, 255, 255, 0.05);
}

:global([data-bs-theme="dark"]) .checkin-time-sub[b-2784sv1bc5] {
    color: var(--theme-text-main, #e9ecef);
}

:global([data-bs-theme="dark"]) .checkin-time-divider[b-2784sv1bc5] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Features/EmployeePortal/Components/LeaveBalanceCard.razor.rz.scp.css */
/* ============ LEAVE BALANCE CARD ============ */
.leave-balance-card[b-hcgwa89di1] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.leave-balance-card.compact[b-hcgwa89di1] {
    padding: 12px;
    border-radius: 12px;
}

.balance-header[b-hcgwa89di1] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-main, #212529);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.leave-balance-card.compact .balance-header[b-hcgwa89di1] {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.balance-header i[b-hcgwa89di1] {
    color: var(--bs-primary, #0056b3);
}

.balance-grid[b-hcgwa89di1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 576px) {
    .balance-grid[b-hcgwa89di1] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.balance-item[b-hcgwa89di1] {
    background: white;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.leave-balance-card.compact .balance-item[b-hcgwa89di1] {
    padding: 10px 8px;
    border-radius: 10px;
}

.balance-item.low[b-hcgwa89di1] {
    border-color: #ffc107;
    background: #fffbf0;
}

.balance-item.exhausted[b-hcgwa89di1] {
    border-color: #dc3545;
    background: #fff5f5;
    opacity: 0.7;
}

.balance-icon[b-hcgwa89di1] {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 86, 179, 0.08);
    color: var(--bs-primary, #0056b3);
}

.leave-balance-card.compact .balance-icon[b-hcgwa89di1] {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
}

.balance-icon i[b-hcgwa89di1] {
    font-size: 1.1rem;
}

.leave-balance-card.compact .balance-icon i[b-hcgwa89di1] {
    font-size: 0.95rem;
}

.balance-item.exhausted .balance-icon[b-hcgwa89di1] {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.balance-item.low .balance-icon[b-hcgwa89di1] {
    background: rgba(255, 193, 7, 0.08);
    color: #ffc107;
}

.balance-type[b-hcgwa89di1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.leave-balance-card.compact .balance-type[b-hcgwa89di1] {
    font-size: 0.65rem;
    margin-bottom: 4px;
}

.balance-value[b-hcgwa89di1] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.leave-balance-card.compact .balance-value[b-hcgwa89di1] {
    font-size: 1.25rem;
}

.balance-value .remaining[b-hcgwa89di1] {
    color: var(--bs-primary, #0056b3);
}

.balance-item.exhausted .balance-value .remaining[b-hcgwa89di1] {
    color: #dc3545;
}

.balance-item.low .balance-value .remaining[b-hcgwa89di1] {
    color: #d4a017;
}

.balance-value .separator[b-hcgwa89di1] {
    color: var(--theme-text-muted, #6c757d);
    font-weight: 400;
    font-size: 1rem;
    margin: 0 2px;
}

.leave-balance-card.compact .balance-value .separator[b-hcgwa89di1] {
    font-size: 0.85rem;
}

.balance-value .total[b-hcgwa89di1] {
    color: var(--theme-text-muted, #6c757d);
    font-weight: 400;
    font-size: 1rem;
}

.leave-balance-card.compact .balance-value .total[b-hcgwa89di1] {
    font-size: 0.85rem;
}

.balance-label[b-hcgwa89di1] {
    font-size: 0.6rem;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.leave-balance-card.compact .balance-label[b-hcgwa89di1] {
    font-size: 0.55rem;
}

/* Mobile responsive */
@media (max-width: 575.98px) {
    .leave-balance-card.compact .balance-grid[b-hcgwa89di1] {
        gap: 8px;
    }

    .leave-balance-card.compact .balance-item[b-hcgwa89di1] {
        padding: 8px 6px;
    }

    .leave-balance-card.compact .balance-icon[b-hcgwa89di1] {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
    }

    .leave-balance-card.compact .balance-icon i[b-hcgwa89di1] {
        font-size: 0.85rem;
    }

    .leave-balance-card.compact .balance-value[b-hcgwa89di1] {
        font-size: 1.1rem;
    }
}

/* Pending indicator */
.balance-pending[b-hcgwa89di1] {
    font-size: 0.6rem;
    font-weight: 600;
    color: #e67e22;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.balance-pending i[b-hcgwa89di1] {
    font-size: 0.55rem;
}

.leave-balance-card.compact .balance-pending[b-hcgwa89di1] {
    font-size: 0.55rem;
}

.balance-item.has-pending[b-hcgwa89di1] {
    border-color: #e67e22;
    background: #fef9f3;
}

.balance-item.has-pending .balance-icon[b-hcgwa89di1] {
    background: rgba(230, 126, 34, 0.08);
    color: #e67e22;
}

/* Exhausted takes priority over has-pending */
.balance-item.exhausted.has-pending[b-hcgwa89di1] {
    border-color: #dc3545;
    background: #fff5f5;
}

/* /Features/EmployeePortal/Components/ProfileCompleteness.razor.rz.scp.css */
/* ============ COMPACT MODE (Dashboard Widget) ============ */
.profile-completeness-compact[b-norfgd8apj] {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
}

.profile-completeness-compact:hover[b-norfgd8apj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pc-compact-inner[b-norfgd8apj] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pc-ring-compact[b-norfgd8apj] {
    flex-shrink: 0;
}

.pc-compact-text[b-norfgd8apj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pc-compact-message[b-norfgd8apj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    line-height: 1.3;
}

.pc-compact-link[b-norfgd8apj] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-compact-link i[b-norfgd8apj] {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.profile-completeness-compact:hover .pc-compact-link i[b-norfgd8apj] {
    transform: translateX(3px);
}

/* ============ DETAILED MODE (Profile Sidebar) ============ */
.profile-completeness-detailed[b-norfgd8apj] {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pc-header[b-norfgd8apj] {
    padding: 14px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
}

.pc-body[b-norfgd8apj] {
    padding: 20px;
    text-align: center;
}

.pc-ring-wrapper[b-norfgd8apj] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.pc-subtitle[b-norfgd8apj] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: 4px;
}

.pc-message[b-norfgd8apj] {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Missing fields list */
.pc-missing-list[b-norfgd8apj] {
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 14px;
    margin-top: 4px;
}

.pc-missing-header[b-norfgd8apj] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: 10px;
}

.pc-missing-item[b-norfgd8apj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.pc-missing-item:last-child[b-norfgd8apj] {
    border-bottom: none;
    padding-bottom: 0;
}

.pc-missing-icon[b-norfgd8apj] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pc-missing-info[b-norfgd8apj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-missing-label[b-norfgd8apj] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    line-height: 1.2;
}

.pc-missing-action[b-norfgd8apj] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ DARK MODE ============ */
:global([data-bs-theme="dark"]) .profile-completeness-compact[b-norfgd8apj] {
    background: var(--theme-card-bg, #1e1e2d);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .profile-completeness-compact:hover[b-norfgd8apj] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .profile-completeness-detailed[b-norfgd8apj] {
    background: var(--theme-card-bg, #1e1e2d);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:global([data-bs-theme="dark"]) .pc-header[b-norfgd8apj] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .pc-missing-list[b-norfgd8apj] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .pc-missing-item[b-norfgd8apj] {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

:global([data-bs-theme="dark"]) .pc-missing-icon[b-norfgd8apj] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .pc-ring-compact circle:first-child[b-norfgd8apj],
:global([data-bs-theme="dark"]) .pc-ring-detailed circle:first-child[b-norfgd8apj] {
    stroke: rgba(255, 255, 255, 0.08);
}
/* /Features/EmployeePortal/Components/TeamStatusWidget.razor.rz.scp.css */
/* ============ TEAM STATUS WIDGET ============ */
.team-status-widget[b-x5sipmdjnf] {
    /* Inherits section-block styling from parent */
}

/* ============ HEADER ============ */
.team-status-header[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.team-status-header .section-title[b-x5sipmdjnf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.team-dept-filter[b-x5sipmdjnf] {
    font-size: 0.75rem;
    padding: 4px 10px;
    border: 1px solid var(--border-subtle, #dee2e6);
    border-radius: 8px;
    background: var(--theme-bg-dark, #f8f9fa);
    color: var(--theme-text-main, #212529);
    outline: none;
    cursor: pointer;
    max-width: 160px;
    appearance: auto;
}

.team-dept-filter:focus[b-x5sipmdjnf] {
    border-color: var(--bs-primary, #0056b3);
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.15);
}

/* ============ SUMMARY BAR ============ */
.team-summary-bar[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    gap: 8px;
}

.summary-item[b-x5sipmdjnf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.summary-count[b-x5sipmdjnf] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-label[b-x5sipmdjnf] {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--theme-text-muted, #6c757d);
    white-space: nowrap;
}

.summary-item.in-office .summary-count[b-x5sipmdjnf] {
    color: var(--bs-success, #198754);
}

.summary-item.wfh .summary-count[b-x5sipmdjnf] {
    color: var(--bs-primary, #0056b3);
}

.summary-item.on-leave .summary-count[b-x5sipmdjnf] {
    color: #d4a017;
}

.summary-item.absent .summary-count[b-x5sipmdjnf] {
    color: var(--bs-secondary, #6c757d);
}

.summary-divider[b-x5sipmdjnf] {
    width: 1px;
    height: 28px;
    background: var(--border-subtle, #dee2e6);
    flex-shrink: 0;
}

/* ============ CATEGORY SECTIONS ============ */
.team-category[b-x5sipmdjnf] {
    margin-bottom: 8px;
}

.team-category:last-child[b-x5sipmdjnf] {
    margin-bottom: 0;
}

.team-category-header[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-main, #212529);
    transition: color 0.15s;
}

.team-category-header:hover[b-x5sipmdjnf] {
    color: var(--bs-primary, #0056b3);
}

.category-label[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.category-dot[b-x5sipmdjnf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-dot.checked-in[b-x5sipmdjnf] {
    background: var(--bs-success, #198754);
}

.category-dot.on-leave[b-x5sipmdjnf] {
    background: #d4a017;
}

.category-dot.not-checked-in[b-x5sipmdjnf] {
    background: var(--bs-secondary, #6c757d);
}

.category-count[b-x5sipmdjnf] {
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--theme-bg-dark, #f0f2f5);
    padding: 1px 7px;
    border-radius: 10px;
    color: var(--theme-text-muted, #6c757d);
}

.team-category-header i[b-x5sipmdjnf] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ MEMBER LIST ============ */
.team-member-list[b-x5sipmdjnf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.team-member[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}

.team-member:hover[b-x5sipmdjnf] {
    background: var(--theme-bg-dark, #f8f9fa);
}

/* ============ AVATAR ============ */
.member-avatar[b-x5sipmdjnf] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--theme-bg-dark, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-avatar img[b-x5sipmdjnf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-x5sipmdjnf] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
}

/* ============ MEMBER INFO ============ */
.member-info[b-x5sipmdjnf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.member-name[b-x5sipmdjnf] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-time[b-x5sipmdjnf] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #6c757d);
}

.member-dept[b-x5sipmdjnf] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ BADGES ============ */
.member-badges[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.badge-status[b-x5sipmdjnf] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.badge-status.on-time[b-x5sipmdjnf] {
    background: rgba(25, 135, 84, 0.12);
    color: var(--bs-success, #198754);
}

.badge-status.late[b-x5sipmdjnf] {
    background: rgba(251, 192, 45, 0.15);
    color: #9a7b00;
}

.badge-mode[b-x5sipmdjnf] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.badge-mode.wfo[b-x5sipmdjnf] {
    background: rgba(25, 135, 84, 0.08);
    color: var(--bs-success, #198754);
}

.badge-mode.wfh[b-x5sipmdjnf] {
    background: rgba(0, 86, 179, 0.1);
    color: var(--bs-primary, #0056b3);
}

.badge-leave[b-x5sipmdjnf] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(251, 192, 45, 0.12);
    color: #9a7b00;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* ============ SHOW MORE ============ */
.show-more-btn[b-x5sipmdjnf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    background: none;
    border: 1px dashed var(--border-subtle, #dee2e6);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.15s;
}

.show-more-btn:hover[b-x5sipmdjnf] {
    background: rgba(0, 86, 179, 0.05);
    border-color: var(--bs-primary, #0056b3);
}

/* ============ EMPTY STATE ============ */
.team-empty-state[b-x5sipmdjnf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--theme-text-muted, #6c757d);
}

.team-empty-state i[b-x5sipmdjnf] {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.team-empty-state p[b-x5sipmdjnf] {
    font-size: 0.85rem;
    margin: 0;
}

/* ============ SKELETON ============ */
.team-status-skeleton[b-x5sipmdjnf] {
    padding: 4px 0;
}

/* ============ DARK MODE ============ */
:global([data-bs-theme="dark"]) .team-dept-filter[b-x5sipmdjnf] {
    background: var(--theme-bg-dark, #1a1d21);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-main, #e9ecef);
}

:global([data-bs-theme="dark"]) .team-summary-bar[b-x5sipmdjnf] {
    background: var(--theme-bg-dark, #1a1d21);
}

:global([data-bs-theme="dark"]) .team-member:hover[b-x5sipmdjnf] {
    background: rgba(255, 255, 255, 0.05);
}

:global([data-bs-theme="dark"]) .member-avatar[b-x5sipmdjnf] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-bs-theme="dark"]) .avatar-initials[b-x5sipmdjnf] {
    color: rgba(255, 255, 255, 0.6);
}

:global([data-bs-theme="dark"]) .category-count[b-x5sipmdjnf] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

:global([data-bs-theme="dark"]) .summary-divider[b-x5sipmdjnf] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-bs-theme="dark"]) .show-more-btn[b-x5sipmdjnf] {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--bs-primary, #4da3ff);
}

:global([data-bs-theme="dark"]) .show-more-btn:hover[b-x5sipmdjnf] {
    background: rgba(77, 163, 255, 0.08);
    border-color: var(--bs-primary, #4da3ff);
}

:global([data-bs-theme="dark"]) .badge-status.on-time[b-x5sipmdjnf] {
    background: rgba(25, 135, 84, 0.2);
    color: #5dd99c;
}

:global([data-bs-theme="dark"]) .badge-status.late[b-x5sipmdjnf] {
    background: rgba(251, 192, 45, 0.2);
    color: #fbc02d;
}

:global([data-bs-theme="dark"]) .badge-mode.wfo[b-x5sipmdjnf] {
    background: rgba(25, 135, 84, 0.15);
    color: #5dd99c;
}

:global([data-bs-theme="dark"]) .badge-mode.wfh[b-x5sipmdjnf] {
    background: rgba(77, 163, 255, 0.15);
    color: #4da3ff;
}

:global([data-bs-theme="dark"]) .badge-leave[b-x5sipmdjnf] {
    background: rgba(251, 192, 45, 0.18);
    color: #fbc02d;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 575.98px) {
    .team-summary-bar[b-x5sipmdjnf] {
        padding: 10px 12px;
        gap: 4px;
    }

    .summary-count[b-x5sipmdjnf] {
        font-size: 0.95rem;
    }

    .summary-label[b-x5sipmdjnf] {
        font-size: 0.6rem;
    }

    .team-dept-filter[b-x5sipmdjnf] {
        max-width: 120px;
    }

    .member-badges[b-x5sipmdjnf] {
        flex-direction: column;
        gap: 2px;
    }
}

/* ============ TILE GRID (Checked In) ============ */
.team-tile-grid[b-x5sipmdjnf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    padding: 10px 4px;
}

.team-tile[b-x5sipmdjnf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    transition: background 0.15s;
    cursor: default;
    position: relative;
}

.team-tile:hover[b-x5sipmdjnf] {
    background: rgba(0, 0, 0, 0.03);
}

:global([data-bs-theme="dark"]) .team-tile:hover[b-x5sipmdjnf] {
    background: rgba(255, 255, 255, 0.04);
}

/* Avatar with mode dot */
.tile-avatar[b-x5sipmdjnf] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.tile-avatar img[b-x5sipmdjnf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

:global([data-bs-theme="dark"]) .tile-avatar img[b-x5sipmdjnf] {
    border-color: #2d3039;
}

.tile-avatar .avatar-initials[b-x5sipmdjnf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(145deg, #7c8ce8, #667eea);
    color: white;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

:global([data-bs-theme="dark"]) .tile-avatar .avatar-initials[b-x5sipmdjnf] {
    border-color: #2d3039;
}

/* Green dot for WFO, blue dot for WFH */
.tile-mode-dot[b-x5sipmdjnf] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
}

:global([data-bs-theme="dark"]) .tile-mode-dot[b-x5sipmdjnf] {
    border-color: #2d3039;
}

.dot-wfo[b-x5sipmdjnf] {
    background: #22c55e;
}

.dot-wfh[b-x5sipmdjnf] {
    background: #3b82f6;
}

/* Name */
.tile-name[b-x5sipmdjnf] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:global([data-bs-theme="dark"]) .tile-name[b-x5sipmdjnf] {
    color: #d1d5db;
}

/* Work mode emoji */
.tile-mode[b-x5sipmdjnf] {
    font-size: 0.65rem;
    line-height: 1;
}

/* WFH tile subtle blue tint */
.tile-wfh[b-x5sipmdjnf] {
    background: rgba(59, 130, 246, 0.04);
}

:global([data-bs-theme="dark"]) .tile-wfh[b-x5sipmdjnf] {
    background: rgba(59, 130, 246, 0.06);
}

/* Absent tile — muted/grayed out */
.tile-absent[b-x5sipmdjnf] {
    opacity: 0.55;
}

.tile-absent:hover[b-x5sipmdjnf] {
    opacity: 0.75;
}

.tile-avatar-absent[b-x5sipmdjnf] {
    filter: grayscale(60%);
}

.dot-absent[b-x5sipmdjnf] {
    background: #9ca3af;
}

/* Mobile grid */
@@media (max-width: 575.98px) {
    .team-tile-grid[b-x5sipmdjnf] {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 6px;
    }

    .tile-avatar[b-x5sipmdjnf],
    .tile-avatar img[b-x5sipmdjnf],
    .tile-avatar .avatar-initials[b-x5sipmdjnf] {
        width: 38px;
        height: 38px;
    }

    .tile-name[b-x5sipmdjnf] {
        font-size: 0.62rem;
        max-width: 64px;
    }
}
/* /Features/EmployeePortal/WorkModeRequestForm.razor.rz.scp.css */
/* ==========================================
   WORK MODE REQUEST FORM - Form-Specific Styles
   Mobile-First, Clean UX
   ========================================== */

.wm-request-page[b-xyy159ogqc] {
    min-height: 100vh;
    background: var(--bg-tertiary, #f8f9fa);
}

/* ============ FORM CARD ============ */
.wm-form-card[b-xyy159ogqc] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    .wm-form-card[b-xyy159ogqc] {
        padding: 32px;
    }
}

/* ============ FORM SECTIONS ============ */
.wm-form-section[b-xyy159ogqc] {
    margin-bottom: 24px;
}

.wm-form-section .form-label[b-xyy159ogqc] {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--theme-text-main, #212529);
}

/* ============ DATE INPUT ============ */
.wm-date-control[b-xyy159ogqc] {
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #dee2e6);
    height: 44px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wm-date-control:focus[b-xyy159ogqc] {
    border-color: var(--bs-primary, #0056b3);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

/* ============ MODE SELECTOR ============ */
.wm-mode-options[b-xyy159ogqc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wm-mode-option[b-xyy159ogqc] {
    cursor: pointer;
    margin: 0;
}

.wm-mode-option input[type="radio"][b-xyy159ogqc] {
    display: none;
}

.wm-mode-card[b-xyy159ogqc] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-secondary, #f8f9fa);
    border: 2px solid var(--border-color, #e9ecef);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.wm-mode-option:hover .wm-mode-card[b-xyy159ogqc] {
    border-color: rgba(0, 86, 179, 0.3);
    background: rgba(0, 86, 179, 0.02);
}

.wm-mode-option.active .wm-mode-card[b-xyy159ogqc] {
    border-color: var(--bs-primary, #0056b3);
    background: rgba(0, 86, 179, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

.wm-mode-icon[b-xyy159ogqc] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.wm-mode-icon.wfh[b-xyy159ogqc] {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.wm-mode-icon.wfo[b-xyy159ogqc] {
    background: rgba(0, 86, 179, 0.12);
    color: #0056b3;
}

.wm-mode-option.active .wm-mode-icon.wfh[b-xyy159ogqc] {
    background: rgba(25, 135, 84, 0.2);
}

.wm-mode-option.active .wm-mode-icon.wfo[b-xyy159ogqc] {
    background: rgba(0, 86, 179, 0.2);
}

.wm-mode-info[b-xyy159ogqc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wm-mode-name[b-xyy159ogqc] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.wm-mode-desc[b-xyy159ogqc] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
}

.wm-mode-check[b-xyy159ogqc] {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: transparent;
    transition: color 0.2s;
}

.wm-mode-option.active .wm-mode-check[b-xyy159ogqc] {
    color: var(--bs-primary, #0056b3);
}

/* ============ TEXTAREA ============ */
.wm-textarea[b-xyy159ogqc] {
    border-radius: 10px !important;
    border: 1.5px solid var(--border-color, #dee2e6) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    resize: vertical;
}

.wm-textarea:focus[b-xyy159ogqc] {
    border-color: var(--bs-primary, #0056b3) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1) !important;
}

/* ============ FORM ACTIONS ============ */
.wm-form-actions[b-xyy159ogqc] {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

.wm-btn-cancel[b-xyy159ogqc] {
    flex: 1;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    border: 1.5px solid var(--border-color, #dee2e6);
}

.wm-btn-cancel:hover[b-xyy159ogqc] {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--theme-text-muted, #adb5bd);
}

/* ============ MOBILE OVERRIDES ============ */
@media (max-width: 767.98px) {
    .wm-form-card[b-xyy159ogqc] {
        border-radius: 14px;
        padding: 20px;
    }

    .wm-mode-card[b-xyy159ogqc] {
        padding: 14px;
    }

    .wm-mode-icon[b-xyy159ogqc] {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .wm-form-actions[b-xyy159ogqc] {
        flex-direction: column-reverse;
    }

    .wm-btn-cancel[b-xyy159ogqc] {
        flex: none;
        width: 100%;
    }
}
/* /Features/Legal/Pages/PrivacyPolicy.razor.rz.scp.css */
/* Legal Page Layout */
.legal-page[b-vbgylzt011] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

.legal-card[b-vbgylzt011] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.legal-icon[b-vbgylzt011] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.legal-icon i[b-vbgylzt011] {
    font-size: 2.2rem;
    color: white;
}

/* Content Styling */
.legal-content h2[b-vbgylzt011] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.legal-content h5[b-vbgylzt011] {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

.legal-content p[b-vbgylzt011] {
    color: #495057;
    line-height: 1.7;
}

.legal-content ul[b-vbgylzt011] {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content ul li[b-vbgylzt011] {
    color: #495057;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.legal-content section[b-vbgylzt011] {
    scroll-margin-top: 100px;
}

/* Back Button */
.legal-page .btn-outline-secondary[b-vbgylzt011] {
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.legal-page .btn-outline-secondary:hover[b-vbgylzt011] {
    background: #667eea;
    border-color: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-card[b-vbgylzt011] {
        border-radius: 16px;
    }
    
    .legal-icon[b-vbgylzt011] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }
    
    .legal-icon i[b-vbgylzt011] {
        font-size: 1.75rem;
    }
    
    .legal-content h2[b-vbgylzt011] {
        font-size: 1.2rem;
    }
}

/* /Features/Legal/Pages/TermsOfService.razor.rz.scp.css */
/* Legal Page Layout */
.legal-page[b-ddku1021zk] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

.legal-card[b-ddku1021zk] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.legal-icon[b-ddku1021zk] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.legal-icon i[b-ddku1021zk] {
    font-size: 2.2rem;
    color: white;
}

/* Content Styling */
.legal-content h2[b-ddku1021zk] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.legal-content h5[b-ddku1021zk] {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

.legal-content p[b-ddku1021zk] {
    color: #495057;
    line-height: 1.7;
}

.legal-content ul[b-ddku1021zk] {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content ul li[b-ddku1021zk] {
    color: #495057;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.legal-content section[b-ddku1021zk] {
    scroll-margin-top: 100px;
}

/* Back Button */
.legal-page .btn-outline-secondary[b-ddku1021zk] {
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.legal-page .btn-outline-secondary:hover[b-ddku1021zk] {
    background: #667eea;
    border-color: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .legal-card[b-ddku1021zk] {
        border-radius: 16px;
    }
    
    .legal-icon[b-ddku1021zk] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }
    
    .legal-icon i[b-ddku1021zk] {
        font-size: 1.75rem;
    }
    
    .legal-content h2[b-ddku1021zk] {
        font-size: 1.2rem;
    }
}

/* /Features/Organizations/Pages/JoinOrganization.razor.rz.scp.css */
.join-page[b-jq6oaxprhw] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    position: relative;
    overflow: hidden;
}

.join-page[b-jq6oaxprhw]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.join-page[b-jq6oaxprhw]::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 80%;
    background: radial-gradient(circle, rgba(118, 75, 162, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.join-card[b-jq6oaxprhw] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.logo-container[b-jq6oaxprhw] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: float-b-jq6oaxprhw 3s ease-in-out infinite;
}

.logo-inner[b-jq6oaxprhw] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes float-b-jq6oaxprhw {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.step-header[b-jq6oaxprhw] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
    text-align: center;
}

.step-badge[b-jq6oaxprhw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
}

.org-badge[b-jq6oaxprhw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: #667eea;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.join-code-input[b-jq6oaxprhw] {
    text-align: center;
    font-size: 2rem !important;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.join-code-input:focus[b-jq6oaxprhw] {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.join-code-input[b-jq6oaxprhw]::placeholder {
    color: #dee2e6;
    letter-spacing: 0.3em;
}

.form-floating-custom[b-jq6oaxprhw] {
    position: relative;
}

.form-floating-custom .form-control[b-jq6oaxprhw],
.form-floating-custom .form-select[b-jq6oaxprhw] {
    height: 56px;
    padding-left: 52px !important;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-floating-custom .form-control[b-jq6oaxprhw]::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-floating-custom .form-control:focus[b-jq6oaxprhw],
.form-floating-custom .form-select:focus[b-jq6oaxprhw] {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-floating-custom .form-control:focus[b-jq6oaxprhw]::placeholder {
    color: #c4c9cf;
}

.form-floating-custom .input-icon[b-jq6oaxprhw] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.form-floating-custom:focus-within .input-icon[b-jq6oaxprhw] {
    color: #667eea;
}

.form-floating-custom .password-toggle[b-jq6oaxprhw] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    z-index: 4;
    transition: color 0.2s ease;
}

.form-floating-custom .password-toggle:hover[b-jq6oaxprhw] {
    color: #667eea;
}

.btn-primary-gradient[b-jq6oaxprhw] {
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff !important;
}

.btn-primary-gradient span[b-jq6oaxprhw],
.btn-primary-gradient i[b-jq6oaxprhw] {
    color: #fff !important;
}

.btn-primary-gradient[b-jq6oaxprhw]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary-gradient:hover:not(:disabled)[b-jq6oaxprhw]::before {
    left: 100%;
}

.btn-primary-gradient:hover:not(:disabled)[b-jq6oaxprhw] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
    color: #fff !important;
}

.btn-primary-gradient:disabled[b-jq6oaxprhw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary-outline[b-jq6oaxprhw] {
    height: 48px;
    border-radius: 14px;
    font-weight: 500;
    border: 2px solid #e9ecef;
    background: white;
    color: #6c757d;
    transition: all 0.3s ease;
}

.btn-secondary-outline:hover[b-jq6oaxprhw] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.password-strength[b-jq6oaxprhw] {
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: #e9ecef;
    margin-top: 8px;
}

.password-strength-bar[b-jq6oaxprhw] {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

.info-tip[b-jq6oaxprhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 12px;
    color: #667eea;
    font-size: 0.85rem;
}

.approval-notice[b-jq6oaxprhw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 14px;
}

.approval-notice i[b-jq6oaxprhw] {
    font-size: 1.25rem;
    color: #f59e0b;
}

.back-link[b-jq6oaxprhw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.back-link:hover[b-jq6oaxprhw] {
    color: #667eea;
}

@media (max-width: 576px) {
    .join-card[b-jq6oaxprhw] {
        border-radius: 20px;
    }
    
    .join-code-input[b-jq6oaxprhw] {
        font-size: 1.5rem !important;
        letter-spacing: 0.3em;
    }
}

/* /Features/Organizations/Pages/OrganizationSignup.razor.rz.scp.css */
/* Page Layout */
.signup-page[b-8mr49l3njg] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    position: relative;
    overflow: hidden;
}

.signup-page[b-8mr49l3njg]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.signup-page[b-8mr49l3njg]::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 80%;
    background: radial-gradient(circle, rgba(118, 75, 162, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Logo */
.logo-container[b-8mr49l3njg] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: float-b-8mr49l3njg 3s ease-in-out infinite;
}

.logo-inner[b-8mr49l3njg] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-inner i[b-8mr49l3njg] {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes float-b-8mr49l3njg {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

/* Cards */
.signup-card[b-8mr49l3njg] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sidebar-card[b-8mr49l3njg] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.sidebar-card-primary[b-8mr49l3njg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
}

/* Section Headers */
.section-header[b-8mr49l3njg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.section-icon[b-8mr49l3njg] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.section-title[b-8mr49l3njg] {
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    font-size: 1.1rem;
}

/* Form Fields */
.form-floating-custom[b-8mr49l3njg] {
    position: relative;
}

.form-floating-custom .form-control[b-8mr49l3njg],
.form-floating-custom .form-select[b-8mr49l3njg] {
    height: 56px;
    padding-left: 52px !important;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.form-floating-custom .form-control[b-8mr49l3njg]::placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-floating-custom .form-control:focus[b-8mr49l3njg],
.form-floating-custom .form-select:focus[b-8mr49l3njg] {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-floating-custom .form-control:focus[b-8mr49l3njg]::placeholder {
    color: #c4c9cf;
}

.form-floating-custom .input-icon[b-8mr49l3njg] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    z-index: 5;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.form-floating-custom:focus-within .input-icon[b-8mr49l3njg] {
    color: #667eea;
}


.form-floating-custom .password-toggle[b-8mr49l3njg] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    z-index: 4;
    transition: color 0.2s ease;
}

.form-floating-custom .password-toggle:hover[b-8mr49l3njg] {
    color: #667eea;
}

/* Type Cards */
.type-card[b-8mr49l3njg] {
    cursor: pointer;
    border: 2px solid #e9ecef;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.type-card:hover[b-8mr49l3njg] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #dee2e6;
}

.type-card.selected[b-8mr49l3njg] {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.04) 0%, rgba(118, 75, 162, 0.04) 100%);
    box-shadow: 0 0 0 1px #667eea, 0 8px 20px rgba(102, 126, 234, 0.15);
}

.type-card .icon-box[b-8mr49l3njg] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform 0.3s ease;
    border-radius: 14px;
}

.type-card:hover .icon-box[b-8mr49l3njg] {
    transform: scale(1.1);
}

.selection-indicator[b-8mr49l3njg] {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #667eea;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.25rem;
}

.type-card.selected .selection-indicator[b-8mr49l3njg] {
    opacity: 1;
    transform: scale(1);
}

/* Dropdown Buttons */
.dropdown-select[b-8mr49l3njg] {
    height: 56px;
    border: 2px solid #e9ecef !important;
    border-radius: 14px !important;
    background: #f8f9fa !important;
    transition: all 0.3s ease;
}

.dropdown-select:hover[b-8mr49l3njg],
.dropdown-select:focus[b-8mr49l3njg] {
    border-color: #667eea !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

.dropdown-menu-custom[b-8mr49l3njg] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item-custom[b-8mr49l3njg] {
    padding: 12px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.dropdown-item-custom:hover[b-8mr49l3njg] {
    background: rgba(102, 126, 234, 0.08);
}

.dropdown-item-custom.active[b-8mr49l3njg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Primary Button */
.btn-primary-gradient[b-8mr49l3njg] {
    height: 60px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff !important;
    letter-spacing: 0.5px;
}

.btn-primary-gradient span[b-8mr49l3njg],
.btn-primary-gradient i[b-8mr49l3njg] {
    color: #fff !important;
}

.btn-primary-gradient[b-8mr49l3njg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary-gradient:hover:not(:disabled)[b-8mr49l3njg]::before {
    left: 100%;
}

.btn-primary-gradient:hover:not(:disabled)[b-8mr49l3njg] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
    color: #fff !important;
}

.btn-primary-gradient:disabled[b-8mr49l3njg] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Terms Card */
.terms-card[b-8mr49l3njg] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 14px;
    padding: 16px;
}

.terms-card .form-check-input[b-8mr49l3njg] {
    width: 22px;
    height: 22px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.terms-card .form-check-input:checked[b-8mr49l3njg] {
    background-color: #667eea;
    border-color: #667eea;
}

.terms-card .form-check-input:focus[b-8mr49l3njg] {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Feature List */
.feature-list[b-8mr49l3njg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li[b-8mr49l3njg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.feature-list li i[b-8mr49l3njg] {
    color: #22c55e;
    font-size: 1rem;
    margin-top: 2px;
}

/* Info Tip */
.info-tip[b-8mr49l3njg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 10px;
    color: #667eea;
    font-size: 0.85rem;
}

/* Links */
.back-link[b-8mr49l3njg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.back-link:hover[b-8mr49l3njg] {
    color: #667eea;
}

/* Responsive */
@media (max-width: 992px) {
    .signup-card[b-8mr49l3njg] {
        border-radius: 20px;
    }
    
    .type-card[b-8mr49l3njg] {
        border-radius: 14px;
    }
}

@media (max-width: 576px) {
    .logo-container[b-8mr49l3njg] {
        width: 80px;
        height: 80px;
    }
    
    .section-icon[b-8mr49l3njg] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .type-card .icon-box[b-8mr49l3njg] {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

/* Blazor Dropdown Styles */
.blazor-dropdown[b-8mr49l3njg] {
    position: relative;
}

.blazor-dropdown .dropdown-menu.show[b-8mr49l3njg] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 4px;
}

.dropdown-backdrop[b-8mr49l3njg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

/* Mobile touch improvements */
@media (hover: none) and (pointer: coarse) {
    .type-card[b-8mr49l3njg] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .type-card:active[b-8mr49l3njg] {
        transform: scale(0.98);
    }
    
    .dropdown-select[b-8mr49l3njg] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .dropdown-item-custom[b-8mr49l3njg] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        padding: 14px 16px;
    }
}

/* Plan Selection Toggle */
.plan-option[b-8mr49l3njg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.plan-option:hover[b-8mr49l3njg] {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.03);
}

.plan-option-active[b-8mr49l3njg] {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.06);
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.plan-option i:first-child[b-8mr49l3njg] {
    font-size: 1.1rem;
}

/* /Features/Recognition/Components/AnnouncementBanner.razor.rz.scp.css */
/* ============ ANNOUNCEMENT BANNER ============ */

.announcement-banner[b-tbum7qthj0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    position: relative;
    border: 1px solid;
    transition: transform 0.2s ease;
}

.announcement-banner:hover[b-tbum7qthj0] {
    transform: translateY(-1px);
}

/* Style variants */
.announcement-info[b-tbum7qthj0] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

.announcement-success[b-tbum7qthj0] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: rgba(34, 197, 94, 0.15);
}

.announcement-warning[b-tbum7qthj0] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: rgba(245, 158, 11, 0.15);
}

.announcement-celebration[b-tbum7qthj0] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: rgba(168, 85, 247, 0.15);
}

/* Icon */
.announcement-icon[b-tbum7qthj0] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.announcement-info .announcement-icon[b-tbum7qthj0] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.announcement-success .announcement-icon[b-tbum7qthj0] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.announcement-warning .announcement-icon[b-tbum7qthj0] {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.announcement-celebration .announcement-icon[b-tbum7qthj0] {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}

/* Content */
.announcement-content[b-tbum7qthj0] {
    flex: 1;
    min-width: 0;
}

.announcement-title[b-tbum7qthj0] {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1f2937;
    margin: 0 0 2px;
}

.announcement-message[b-tbum7qthj0] {
    font-size: 0.82rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.45;
}

.announcement-action[b-tbum7qthj0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    text-decoration: none;
    margin-top: 6px;
    transition: gap 0.15s ease;
}

.announcement-action:hover[b-tbum7qthj0] {
    gap: 6px;
    text-decoration: underline;
}

/* Dismiss */
.announcement-dismiss[b-tbum7qthj0] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s ease;
    padding: 0;
}

.announcement-dismiss:hover[b-tbum7qthj0] {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

/* Mobile */
@@media (max-width: 575.98px) {
    .announcement-banner[b-tbum7qthj0] {
        padding: 12px 14px;
    }
}
/* /Features/Recognition/Components/BadgeDisplay.razor.rz.scp.css */
/* ============================================================
   BadgeDisplay — Immersive Gaming Achievement System
   Full RPG trophy room with hex frames, glow auras, particles
   Adapts to light/dark mode
   ============================================================ */

/* ── Loading ── */
.badge-display-loading[b-enbn76dr94] {
    text-align: center;
    padding: 20px;
}

/* ── Container ── */
.badge-display[b-enbn76dr94] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.badge-display-compact[b-enbn76dr94] {
    background: transparent;
    border: none;
    padding: 12px;
    box-shadow: none;
}

/* ============================================================
   TROPHY ROOM BANNER — The header hero section
   ============================================================ */
.trophy-room-banner[b-enbn76dr94] {
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #1e3a5f 40%, #0f172a 100%);
    padding: 24px 24px 16px;
    overflow: hidden;
}

.trophy-room-banner[b-enbn76dr94]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* Floating particles */
.banner-bg-effects[b-enbn76dr94] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.banner-particle[b-enbn76dr94] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: particleFloat-b-enbn76dr94 6s ease-in-out infinite;
}

.banner-particle.p1[b-enbn76dr94] { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 5s; }
.banner-particle.p2[b-enbn76dr94] { left: 30%; top: 60%; animation-delay: 1.2s; animation-duration: 7s; }
.banner-particle.p3[b-enbn76dr94] { left: 60%; top: 30%; animation-delay: 0.8s; animation-duration: 6s; background: rgba(245, 158, 11, 0.6); }
.banner-particle.p4[b-enbn76dr94] { left: 80%; top: 70%; animation-delay: 2s; animation-duration: 5.5s; background: rgba(139, 92, 246, 0.5); }
.banner-particle.p5[b-enbn76dr94] { left: 50%; top: 50%; animation-delay: 0.5s; animation-duration: 8s; width: 2px; height: 2px; }

@keyframes particleFloat-b-enbn76dr94 {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    25% { transform: translateY(-15px) scale(1.5); opacity: 0.8; }
    50% { transform: translateY(-8px) scale(1); opacity: 0.5; }
    75% { transform: translateY(-20px) scale(1.3); opacity: 0.7; }
}

/* Banner content row */
.banner-content[b-enbn76dr94] {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
}

/* Trophy icon with animated ring */
.banner-icon-wrap[b-enbn76dr94] {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-icon[b-enbn76dr94] {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.5));
    z-index: 2;
    position: relative;
}

.banner-icon-ring[b-enbn76dr94] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(245, 158, 11, 0.4);
    animation: ringPulse-b-enbn76dr94 3s ease-in-out infinite;
}

@keyframes ringPulse-b-enbn76dr94 {
    0%, 100% { transform: scale(1); opacity: 0.4; border-color: rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.15); opacity: 0.7; border-color: rgba(245, 158, 11, 0.7); }
}

/* Banner text */
.banner-text[b-enbn76dr94] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.banner-title[b-enbn76dr94] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.banner-rank[b-enbn76dr94] {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
}

/* Score badge */
.banner-score[b-enbn76dr94] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 12px;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}

.score-value[b-enbn76dr94] {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.score-separator[b-enbn76dr94] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.score-total[b-enbn76dr94] {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

/* ── XP Level Bar ── */
.xp-bar-section[b-enbn76dr94] {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.xp-level-badge[b-enbn76dr94] {
    font-size: 0.6rem;
    font-weight: 900;
    color: #1a1040;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    padding: 3px 10px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.xp-bar-track[b-enbn76dr94] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.xp-bar-fill[b-enbn76dr94] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    position: relative;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.xp-bar-shine[b-enbn76dr94] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: xpShine-b-enbn76dr94 2s ease-in-out infinite;
}

@keyframes xpShine-b-enbn76dr94 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.xp-label[b-enbn76dr94] {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ============================================================
   CATEGORY SECTIONS — Light mode default
   ============================================================ */
.badge-category-section[b-enbn76dr94] {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.badge-category-section:last-child[b-enbn76dr94] {
    padding-bottom: 20px;
}

.badge-category-header[b-enbn76dr94] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.category-icon-pip[b-enbn76dr94] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon-pip i[b-enbn76dr94] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

.category-name[b-enbn76dr94] {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.category-score[b-enbn76dr94] {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.category-earned[b-enbn76dr94] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #d97706;
}

.category-total[b-enbn76dr94] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-muted, #9ca3af);
}

/* ============================================================
   BADGE GRID
   ============================================================ */
.badge-grid[b-enbn76dr94] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.badge-display-compact .badge-grid[b-enbn76dr94] {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
}

/* ============================================================
   BADGE ITEM — The collectible hex token (Light mode)
   ============================================================ */
.badge-item[b-enbn76dr94] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 8px 14px;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    background: #fafafa;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.badge-display-compact .badge-item[b-enbn76dr94] {
    padding: 10px 4px 8px;
    border-radius: 12px;
    border-width: 1.5px;
}

.badge-item:hover[b-enbn76dr94] {
    transform: translateY(-6px) scale(1.04);
}

.badge-item:active[b-enbn76dr94] {
    transform: translateY(-2px) scale(0.97);
}

/* ── Glow ring for earned badges ── */
.badge-glow-ring[b-enbn76dr94] {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Tier-specific glow ring animation */
.badge-item.earned.tier-none .badge-glow-ring[b-enbn76dr94] {
    box-shadow: inset 0 0 12px rgba(99, 102, 241, 0.1), 0 0 15px rgba(99, 102, 241, 0.08);
}
.badge-item.earned.tier-bronze .badge-glow-ring[b-enbn76dr94] {
    box-shadow: inset 0 0 12px rgba(205, 127, 50, 0.1), 0 0 15px rgba(205, 127, 50, 0.08);
    animation: glowPulse-bronze-b-enbn76dr94 3s ease-in-out infinite;
}
.badge-item.earned.tier-silver .badge-glow-ring[b-enbn76dr94] {
    box-shadow: inset 0 0 12px rgba(160, 160, 176, 0.1), 0 0 15px rgba(160, 160, 176, 0.08);
    animation: glowPulse-silver-b-enbn76dr94 3s ease-in-out infinite;
}
.badge-item.earned.tier-gold .badge-glow-ring[b-enbn76dr94] {
    box-shadow: inset 0 0 16px rgba(218, 165, 32, 0.15), 0 0 20px rgba(218, 165, 32, 0.1);
    animation: glowPulse-gold-b-enbn76dr94 2.5s ease-in-out infinite;
}
.badge-item.earned.tier-platinum .badge-glow-ring[b-enbn76dr94] {
    box-shadow: inset 0 0 16px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.1);
    animation: glowPulse-platinum-b-enbn76dr94 2.5s ease-in-out infinite;
}

@keyframes glowPulse-bronze-b-enbn76dr94 {
    0%, 100% { box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.08), 0 0 12px rgba(205, 127, 50, 0.06); }
    50% { box-shadow: inset 0 0 18px rgba(205, 127, 50, 0.2), 0 0 25px rgba(205, 127, 50, 0.14); }
}
@keyframes glowPulse-silver-b-enbn76dr94 {
    0%, 100% { box-shadow: inset 0 0 10px rgba(160, 160, 176, 0.08), 0 0 12px rgba(160, 160, 176, 0.06); }
    50% { box-shadow: inset 0 0 18px rgba(160, 160, 176, 0.2), 0 0 25px rgba(160, 160, 176, 0.14); }
}
@keyframes glowPulse-gold-b-enbn76dr94 {
    0%, 100% { box-shadow: inset 0 0 14px rgba(218, 165, 32, 0.1), 0 0 16px rgba(218, 165, 32, 0.08); }
    50% { box-shadow: inset 0 0 22px rgba(218, 165, 32, 0.28), 0 0 35px rgba(218, 165, 32, 0.2); }
}
@keyframes glowPulse-platinum-b-enbn76dr94 {
    0%, 100% { box-shadow: inset 0 0 14px rgba(139, 92, 246, 0.1), 0 0 16px rgba(139, 92, 246, 0.08); }
    50% { box-shadow: inset 0 0 22px rgba(139, 92, 246, 0.28), 0 0 35px rgba(139, 92, 246, 0.2); }
}

/* ── Tier border/background colors (Light mode) ── */
.badge-item.earned.tier-none[b-enbn76dr94] {
    border-color: #8b8bf5;
    background: linear-gradient(160deg, #f0f0ff 0%, #e8e8f8 100%);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.12);
}
.badge-item.earned.tier-bronze[b-enbn76dr94] {
    border-color: #CD7F32;
    background: linear-gradient(160deg, #fdf0e0 0%, #f5e0c8 100%);
    box-shadow: 0 2px 14px rgba(205, 127, 50, 0.18);
}
.badge-item.earned.tier-silver[b-enbn76dr94] {
    border-color: #A0A0B0;
    background: linear-gradient(160deg, #f5f5fa 0%, #e8e8f0 100%);
    box-shadow: 0 2px 14px rgba(160, 160, 176, 0.2);
}
.badge-item.earned.tier-gold[b-enbn76dr94] {
    border-color: #DAA520;
    background: linear-gradient(160deg, #fff9e0 0%, #fff0b8 100%);
    box-shadow: 0 2px 18px rgba(218, 165, 32, 0.22);
}
.badge-item.earned.tier-platinum[b-enbn76dr94] {
    border-color: #8B5CF6;
    background: linear-gradient(160deg, #f0e8ff 0%, #e4d4fc 100%);
    box-shadow: 0 2px 18px rgba(139, 92, 246, 0.2);
}

/* ── Hover glow — Light mode ── */
.badge-item.earned.tier-none:hover[b-enbn76dr94] { box-shadow: 0 8px 28px rgba(99, 102, 241, 0.25); }
.badge-item.earned.tier-bronze:hover[b-enbn76dr94] { box-shadow: 0 8px 28px rgba(205, 127, 50, 0.3); }
.badge-item.earned.tier-silver:hover[b-enbn76dr94] { box-shadow: 0 8px 28px rgba(160, 160, 176, 0.3); }
.badge-item.earned.tier-gold:hover[b-enbn76dr94] { box-shadow: 0 8px 30px rgba(218, 165, 32, 0.35), 0 0 40px rgba(255, 215, 0, 0.1); }
.badge-item.earned.tier-platinum:hover[b-enbn76dr94] { box-shadow: 0 8px 30px rgba(139, 92, 246, 0.35), 0 0 40px rgba(139, 92, 246, 0.1); }

/* ── Shimmer sweep on earned badges ── */
.badge-item.earned[b-enbn76dr94]::after {
    content: '';
    position: absolute;
    top: -80%;
    left: -120%;
    width: 50%;
    height: 260%;
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.5) 42%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.5) 58%,
        transparent 65%, transparent 100%
    );
    animation: badgeShimmer-b-enbn76dr94 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.badge-item.earned.tier-gold[b-enbn76dr94]::after {
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(255, 248, 180, 0.5) 42%,
        rgba(255, 248, 200, 0.7) 50%,
        rgba(255, 248, 180, 0.5) 58%,
        transparent 65%, transparent 100%
    );
}

.badge-item.earned.tier-platinum[b-enbn76dr94]::after {
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(216, 180, 254, 0.4) 42%,
        rgba(232, 210, 255, 0.6) 50%,
        rgba(216, 180, 254, 0.4) 58%,
        transparent 65%, transparent 100%
    );
}

/* ── Unearned / Locked ── */
.badge-item.unearned[b-enbn76dr94] {
    opacity: 0.4;
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.01);
}

.badge-item.unearned .badge-hex-frame[b-enbn76dr94] {
    filter: grayscale(1) opacity(0.4);
}

.badge-item.unearned:hover[b-enbn76dr94] {
    opacity: 0.6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── Hex Frame ── */
.badge-hex-frame[b-enbn76dr94] {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: rgba(0, 0, 0, 0.03);
}

.badge-item.earned .badge-hex-frame[b-enbn76dr94] {
    background: rgba(0, 0, 0, 0.04);
}

.badge-item.earned.tier-bronze .badge-hex-frame[b-enbn76dr94] { background: rgba(205, 127, 50, 0.1); }
.badge-item.earned.tier-silver .badge-hex-frame[b-enbn76dr94] { background: rgba(160, 160, 176, 0.08); }
.badge-item.earned.tier-gold .badge-hex-frame[b-enbn76dr94] { background: rgba(218, 165, 32, 0.1); }
.badge-item.earned.tier-platinum .badge-hex-frame[b-enbn76dr94] { background: rgba(139, 92, 246, 0.1); }

.badge-display-compact .badge-hex-frame[b-enbn76dr94] {
    width: 40px;
    height: 40px;
}

.badge-icon[b-enbn76dr94] {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    z-index: 2;
}

.badge-display-compact .badge-icon[b-enbn76dr94] {
    font-size: 1.3rem;
}

.badge-item.earned .badge-icon[b-enbn76dr94] {
    animation: iconReveal-b-enbn76dr94 0.6s ease-out;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

@keyframes iconReveal-b-enbn76dr94 {
    0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Lock icon ── */
.badge-lock-icon[b-enbn76dr94] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.45rem;
    z-index: 3;
}

/* ── Tier pip ── */
.badge-tier-pip[b-enbn76dr94] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.4rem;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 6px;
    z-index: 3;
    letter-spacing: -0.5px;
    line-height: 1;
}

.badge-tier-pip.tier-bronze[b-enbn76dr94] {
    background: linear-gradient(135deg, #CD7F32, #A0642A);
    color: #fff;
    box-shadow: 0 1px 4px rgba(205, 127, 50, 0.4);
}
.badge-tier-pip.tier-silver[b-enbn76dr94] {
    background: linear-gradient(135deg, #B0B0B8, #888892);
    color: #fff;
    box-shadow: 0 1px 4px rgba(160, 160, 176, 0.3);
}
.badge-tier-pip.tier-gold[b-enbn76dr94] {
    background: linear-gradient(135deg, #F5C518, #DAA520);
    color: #1a1040;
    box-shadow: 0 1px 6px rgba(245, 197, 24, 0.5);
}
.badge-tier-pip.tier-platinum[b-enbn76dr94] {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
    box-shadow: 0 1px 6px rgba(139, 92, 246, 0.5);
}

/* ── Badge Name (Light mode) ── */
.badge-name[b-enbn76dr94] {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
    letter-spacing: 0.01em;
}

/* ── Progress Track (Light mode) ── */
.badge-progress-track[b-enbn76dr94] {
    width: 80%;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    z-index: 2;
}

.badge-progress-fill[b-enbn76dr94] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.badge-progress-track.tier-none .badge-progress-fill[b-enbn76dr94] { background: linear-gradient(90deg, #6366f1, #818cf8); }
.badge-progress-track.tier-bronze .badge-progress-fill[b-enbn76dr94] { background: linear-gradient(90deg, #CD7F32, #D4955A); }
.badge-progress-track.tier-silver .badge-progress-fill[b-enbn76dr94] { background: linear-gradient(90deg, #A0A0B0, #C0C0C8); }
.badge-progress-track.tier-gold .badge-progress-fill[b-enbn76dr94] { background: linear-gradient(90deg, #DAA520, #F5C518); }
.badge-progress-track.tier-platinum .badge-progress-fill[b-enbn76dr94] { background: linear-gradient(90deg, #7C3AED, #A78BFA); }

.badge-progress-text[b-enbn76dr94] {
    font-size: 0.52rem;
    color: var(--theme-text-muted, #6c757d);
    z-index: 2;
    font-weight: 600;
}

/* ============================================================
   DETAIL MODAL — Achievement Unlocked Screen
   ============================================================ */
.badge-overlay[b-enbn76dr94] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: overlayIn-b-enbn76dr94 0.2s ease-out;
    padding: 20px;
}

.badge-detail-card[b-enbn76dr94] {
    background: white;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
    animation: cardSpring-b-enbn76dr94 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 320px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Sparkle particles for earned */
.detail-sparkles[b-enbn76dr94] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.sparkle[b-enbn76dr94] {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fbbf24;
    animation: sparkleFloat-b-enbn76dr94 3s ease-in-out infinite;
}

.sparkle.s1[b-enbn76dr94] { left: 15%; top: 10%; animation-delay: 0s; }
.sparkle.s2[b-enbn76dr94] { left: 85%; top: 15%; animation-delay: 0.5s; background: #a78bfa; }
.sparkle.s3[b-enbn76dr94] { left: 10%; top: 50%; animation-delay: 1s; background: #f59e0b; }
.sparkle.s4[b-enbn76dr94] { left: 90%; top: 55%; animation-delay: 1.5s; }
.sparkle.s5[b-enbn76dr94] { left: 50%; top: 5%; animation-delay: 0.3s; background: #818cf8; }
.sparkle.s6[b-enbn76dr94] { left: 70%; top: 80%; animation-delay: 2s; background: #34d399; }

@keyframes sparkleFloat-b-enbn76dr94 {
    0%, 100% { transform: scale(0) translateY(0); opacity: 0; }
    15% { transform: scale(1.5) translateY(-5px); opacity: 1; }
    30% { transform: scale(0.8) translateY(-10px); opacity: 0.7; }
    50% { transform: scale(1.2) translateY(-15px); opacity: 0.9; }
    70% { transform: scale(0.5) translateY(-20px); opacity: 0.4; }
    85% { transform: scale(0) translateY(-25px); opacity: 0; }
}

.badge-detail-close[b-enbn76dr94] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    font-size: 0.8rem;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}

.badge-detail-close:hover[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.4);
}

/* ── Detail Hero (top colored area) ── */
.detail-hero[b-enbn76dr94] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 20px;
    overflow: hidden;
}

.detail-hero.tier-none[b-enbn76dr94] { background: linear-gradient(160deg, #667eea 0%, #764ba2 100%); }
.detail-hero.tier-bronze[b-enbn76dr94] { background: linear-gradient(160deg, #CD7F32 0%, #A0642A 50%, #8B5A28 100%); }
.detail-hero.tier-silver[b-enbn76dr94] { background: linear-gradient(160deg, #C0C0D0 0%, #9090A0 50%, #787888 100%); }
.detail-hero.tier-gold[b-enbn76dr94] { background: linear-gradient(160deg, #F5C518 0%, #DAA520 50%, #C49000 100%); }
.detail-hero.tier-platinum[b-enbn76dr94] { background: linear-gradient(160deg, #8B5CF6 0%, #6D28D9 50%, #5B21B6 100%); }

/* Radial glow behind the hex icon */
.hero-glow[b-enbn76dr94] {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    pointer-events: none;
}

.tier-none .hero-glow[b-enbn76dr94] { background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); }
.tier-bronze .hero-glow[b-enbn76dr94] { background: radial-gradient(circle, rgba(255, 200, 100, 0.25) 0%, transparent 70%); }
.tier-silver .hero-glow[b-enbn76dr94] { background: radial-gradient(circle, rgba(220, 220, 240, 0.25) 0%, transparent 70%); }
.tier-gold .hero-glow[b-enbn76dr94] { background: radial-gradient(circle, rgba(255, 248, 200, 0.3) 0%, transparent 70%); animation: heroGlow-b-enbn76dr94 3s ease-in-out infinite; }
.tier-platinum .hero-glow[b-enbn76dr94] { background: radial-gradient(circle, rgba(200, 170, 255, 0.3) 0%, transparent 70%); animation: heroGlow-b-enbn76dr94 3s ease-in-out infinite; }

@keyframes heroGlow-b-enbn76dr94 {
    0%, 100% { transform: translate(-50%, -55%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -55%) scale(1.3); opacity: 1; }
}

/* Large hex frame for detail */
.hero-hex-frame[b-enbn76dr94] {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: rgba(255, 255, 255, 0.12);
    z-index: 2;
    margin-bottom: 10px;
}

.badge-detail-card.locked .hero-hex-frame[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.05);
}

.hero-emoji[b-enbn76dr94] {
    font-size: 3rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.badge-detail-card.locked .hero-emoji[b-enbn76dr94] {
    filter: grayscale(1) opacity(0.35);
}

.badge-detail-card.locked .detail-hero[b-enbn76dr94] {
    background: linear-gradient(160deg, #6b7280 0%, #4b5563 100%) !important;
}

/* Unlocked / Locked banners */
.hero-unlocked-banner[b-enbn76dr94],
.hero-locked-banner[b-enbn76dr94] {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 5px 16px;
    border-radius: 999px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-unlocked-banner[b-enbn76dr94] {
    background: rgba(52, 211, 153, 0.2);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #6ee7b7;
    animation: bannerPop-b-enbn76dr94 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.hero-locked-banner[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

@keyframes bannerPop-b-enbn76dr94 {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Detail Body (Light mode) ── */
.detail-body[b-enbn76dr94] {
    padding: 20px 24px 24px;
    text-align: center;
}

.detail-badge-name[b-enbn76dr94] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--theme-text-main, #212529);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

/* Rarity tag */
.detail-rarity-tag[b-enbn76dr94] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 14px;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.rarity-diamond[b-enbn76dr94] {
    font-size: 0.45rem;
    opacity: 0.6;
}

.detail-rarity-tag.tier-none[b-enbn76dr94] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.detail-rarity-tag.tier-bronze[b-enbn76dr94] { background: rgba(205, 127, 50, 0.12); color: #CD7F32; }
.detail-rarity-tag.tier-silver[b-enbn76dr94] { background: rgba(160, 160, 176, 0.12); color: #787888; }
.detail-rarity-tag.tier-gold[b-enbn76dr94] { background: rgba(218, 165, 32, 0.12); color: #B8860B; }
.detail-rarity-tag.tier-platinum[b-enbn76dr94] { background: rgba(139, 92, 246, 0.12); color: #7C3AED; }

.detail-desc[b-enbn76dr94] {
    font-size: 0.82rem;
    color: var(--theme-text-muted, #6c757d);
    margin: 0 0 18px;
    line-height: 1.5;
}

/* ── Detail Progress (Light mode) ── */
.detail-progress-section[b-enbn76dr94] {
    text-align: left;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 14px 16px;
}

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

.detail-progress-label[b-enbn76dr94] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-progress-pct[b-enbn76dr94] {
    font-size: 0.8rem;
    font-weight: 800;
    color: #d97706;
}

.detail-xp-bar[b-enbn76dr94] {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.detail-xp-fill[b-enbn76dr94] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-xp-bar.tier-none .detail-xp-fill[b-enbn76dr94] { background: linear-gradient(90deg, #6366f1, #818cf8); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
.detail-xp-bar.tier-bronze .detail-xp-fill[b-enbn76dr94] { background: linear-gradient(90deg, #CD7F32, #D4955A); box-shadow: 0 0 8px rgba(205, 127, 50, 0.3); }
.detail-xp-bar.tier-silver .detail-xp-fill[b-enbn76dr94] { background: linear-gradient(90deg, #9090A0, #B0B0C0); box-shadow: 0 0 8px rgba(160, 160, 176, 0.3); }
.detail-xp-bar.tier-gold .detail-xp-fill[b-enbn76dr94] { background: linear-gradient(90deg, #DAA520, #F5C518); box-shadow: 0 0 10px rgba(218, 165, 32, 0.4); }
.detail-xp-bar.tier-platinum .detail-xp-fill[b-enbn76dr94] { background: linear-gradient(90deg, #7C3AED, #A78BFA); box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); }

.detail-progress-footer[b-enbn76dr94] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6c757d);
    font-weight: 600;
}

.detail-remaining[b-enbn76dr94] {
    color: var(--theme-text-muted, #9ca3af);
    font-style: italic;
}

/* ── Earned badge status ── */
.detail-earned-badge[b-enbn76dr94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.earned-check-ring[b-enbn76dr94] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(25, 135, 84, 0.08);
    border: 2px solid rgba(25, 135, 84, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--bs-success, #198754);
    animation: checkPop-b-enbn76dr94 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes checkPop-b-enbn76dr94 {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.detail-earned-badge span[b-enbn76dr94] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--bs-success, #198754);
    letter-spacing: 0.5px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes badgeShimmer-b-enbn76dr94 {
    0% { left: -120%; }
    20% { left: 130%; }
    100% { left: 130%; }
}

@keyframes overlayIn-b-enbn76dr94 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cardSpring-b-enbn76dr94 {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@@media (max-width: 479.98px) {
    .trophy-room-banner[b-enbn76dr94] {
        padding: 18px 16px 14px;
    }

    .banner-icon-wrap[b-enbn76dr94] {
        width: 42px;
        height: 42px;
    }

    .banner-icon[b-enbn76dr94] {
        font-size: 1.4rem;
    }

    .banner-title[b-enbn76dr94] {
        font-size: 0.9rem;
    }

    .banner-score[b-enbn76dr94] {
        padding: 5px 10px;
    }

    .score-value[b-enbn76dr94] {
        font-size: 1.1rem;
    }

    .badge-grid[b-enbn76dr94] {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .badge-display-compact .badge-grid[b-enbn76dr94] {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    }

    .badge-item[b-enbn76dr94] {
        padding: 14px 4px 10px;
    }

    .badge-hex-frame[b-enbn76dr94] {
        width: 44px;
        height: 44px;
    }

    .badge-icon[b-enbn76dr94] {
        font-size: 1.4rem;
    }

    .badge-category-section[b-enbn76dr94] {
        padding: 12px 14px;
    }

    .badge-detail-card[b-enbn76dr94] {
        max-width: calc(100vw - 40px);
    }

    .hero-hex-frame[b-enbn76dr94] {
        width: 72px;
        height: 72px;
    }

    .hero-emoji[b-enbn76dr94] {
        font-size: 2.4rem;
    }
}

/* ============================================================
   DARK MODE — Scoped overrides
   Banner stays dark in both modes. Below overrides the
   category sections, badge items, and detail card body.
   ============================================================ */

/* Container */
:global([data-bs-theme="dark"]) .badge-display[b-enbn76dr94] {
    background: #0f1117;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

/* Category sections */
:global([data-bs-theme="dark"]) .badge-category-section[b-enbn76dr94] {
    border-top-color: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .category-icon-pip[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .category-icon-pip i[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.5);
}

:global([data-bs-theme="dark"]) .category-name[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.7);
}

:global([data-bs-theme="dark"]) .category-earned[b-enbn76dr94] {
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .category-total[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.3);
}

/* Badge items — dark tier styles */
:global([data-bs-theme="dark"]) .badge-item[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .badge-item.unearned[b-enbn76dr94] {
    opacity: 0.3;
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .badge-item.unearned:hover[b-enbn76dr94] {
    opacity: 0.5;
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-none[b-enbn76dr94] {
    border-color: rgba(99, 102, 241, 0.4);
    background: linear-gradient(160deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.04) 100%);
    box-shadow: 0 2px 14px rgba(99, 102, 241, 0.15);
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-bronze[b-enbn76dr94] {
    border-color: rgba(205, 127, 50, 0.45);
    background: linear-gradient(160deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 100%);
    box-shadow: 0 2px 16px rgba(205, 127, 50, 0.15);
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-silver[b-enbn76dr94] {
    border-color: rgba(192, 192, 220, 0.4);
    background: linear-gradient(160deg, rgba(192, 192, 220, 0.1) 0%, rgba(192, 192, 220, 0.03) 100%);
    box-shadow: 0 2px 16px rgba(192, 192, 220, 0.12);
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-gold[b-enbn76dr94] {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.03) 100%);
    box-shadow: 0 2px 18px rgba(255, 215, 0, 0.18);
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-platinum[b-enbn76dr94] {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.04) 100%);
    box-shadow: 0 2px 20px rgba(139, 92, 246, 0.18);
}

/* Dark hover intensified glow */
:global([data-bs-theme="dark"]) .badge-item.earned.tier-none:hover[b-enbn76dr94] { box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-bronze:hover[b-enbn76dr94] { box-shadow: 0 8px 30px rgba(205, 127, 50, 0.35); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-silver:hover[b-enbn76dr94] { box-shadow: 0 8px 30px rgba(192, 192, 220, 0.3); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-gold:hover[b-enbn76dr94] { box-shadow: 0 8px 35px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 215, 0, 0.1); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-platinum:hover[b-enbn76dr94] { box-shadow: 0 8px 35px rgba(139, 92, 246, 0.4), 0 0 50px rgba(139, 92, 246, 0.1); }

/* Dark shimmer — subtler */
:global([data-bs-theme="dark"]) .badge-item.earned[b-enbn76dr94]::after {
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 58%,
        transparent 65%, transparent 100%
    );
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-gold[b-enbn76dr94]::after {
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(255, 235, 120, 0.08) 42%,
        rgba(255, 248, 200, 0.16) 50%,
        rgba(255, 235, 120, 0.08) 58%,
        transparent 65%, transparent 100%
    );
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-platinum[b-enbn76dr94]::after {
    background: linear-gradient(
        100deg,
        transparent 0%, transparent 35%,
        rgba(192, 132, 252, 0.06) 42%,
        rgba(216, 180, 254, 0.14) 50%,
        rgba(192, 132, 252, 0.06) 58%,
        transparent 65%, transparent 100%
    );
}

/* Dark hex frame backgrounds */
:global([data-bs-theme="dark"]) .badge-hex-frame[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .badge-item.earned.tier-bronze .badge-hex-frame[b-enbn76dr94] { background: rgba(205, 127, 50, 0.15); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-silver .badge-hex-frame[b-enbn76dr94] { background: rgba(192, 192, 220, 0.12); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-gold .badge-hex-frame[b-enbn76dr94] { background: rgba(255, 215, 0, 0.15); }
:global([data-bs-theme="dark"]) .badge-item.earned.tier-platinum .badge-hex-frame[b-enbn76dr94] { background: rgba(139, 92, 246, 0.15); }

/* Badge name & progress in dark */
:global([data-bs-theme="dark"]) .badge-name[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.7);
}

:global([data-bs-theme="dark"]) .badge-item.earned .badge-name[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.9);
}

:global([data-bs-theme="dark"]) .badge-progress-track[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .badge-progress-text[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.35);
}

:global([data-bs-theme="dark"]) .badge-lock-icon[b-enbn76dr94] {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

/* Detail modal — dark mode */
:global([data-bs-theme="dark"]) .badge-overlay[b-enbn76dr94] {
    background: rgba(0, 0, 0, 0.75);
}

:global([data-bs-theme="dark"]) .badge-detail-card[b-enbn76dr94] {
    background: #1a1d28;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .badge-detail-close[b-enbn76dr94] {
    background: rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .badge-detail-close:hover[b-enbn76dr94] {
    background: rgba(0, 0, 0, 0.5);
}

:global([data-bs-theme="dark"]) .detail-badge-name[b-enbn76dr94] {
    color: #ffffff;
}

:global([data-bs-theme="dark"]) .detail-rarity-tag.tier-none[b-enbn76dr94] { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
:global([data-bs-theme="dark"]) .detail-rarity-tag.tier-bronze[b-enbn76dr94] { background: rgba(205, 127, 50, 0.15); color: #d4955a; }
:global([data-bs-theme="dark"]) .detail-rarity-tag.tier-silver[b-enbn76dr94] { background: rgba(192, 192, 220, 0.12); color: #c0c0c8; }
:global([data-bs-theme="dark"]) .detail-rarity-tag.tier-gold[b-enbn76dr94] { background: rgba(255, 215, 0, 0.15); color: #fbbf24; }
:global([data-bs-theme="dark"]) .detail-rarity-tag.tier-platinum[b-enbn76dr94] { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

:global([data-bs-theme="dark"]) .detail-desc[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.5);
}

:global([data-bs-theme="dark"]) .detail-progress-section[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .detail-progress-label[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.5);
}

:global([data-bs-theme="dark"]) .detail-progress-pct[b-enbn76dr94] {
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .detail-xp-bar[b-enbn76dr94] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .detail-progress-footer[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.4);
}

:global([data-bs-theme="dark"]) .detail-remaining[b-enbn76dr94] {
    color: rgba(255, 255, 255, 0.3);
}

:global([data-bs-theme="dark"]) .earned-check-ring[b-enbn76dr94] {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

:global([data-bs-theme="dark"]) .detail-earned-badge span[b-enbn76dr94] {
    color: #34d399;
}
/* /Features/Recognition/Components/CampaignHighlightCard.razor.rz.scp.css */
/* ============ CAMPAIGN HIGHLIGHT CARD (Enhanced) ============ */

.campaign-card[b-bmcjaq1k3c] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.campaign-card:hover[b-bmcjaq1k3c] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.campaign-goal-reached[b-bmcjaq1k3c] {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.15);
}

/* Banner */
.campaign-banner[b-bmcjaq1k3c] {
    height: 110px;
    overflow: hidden;
    position: relative;
}

.campaign-banner img[b-bmcjaq1k3c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-banner-overlay[b-bmcjaq1k3c] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.campaign-banner-content[b-bmcjaq1k3c] {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.campaign-live-badge[b-bmcjaq1k3c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

.campaign-live-dot[b-bmcjaq1k3c] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: campaignPulse 1.5s ease infinite;
}

.campaign-time-badge[b-bmcjaq1k3c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.campaign-banner-gradient[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.campaign-banner-icon[b-bmcjaq1k3c] {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.35);
    z-index: 1;
}

.gradient-recognition[b-bmcjaq1k3c] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-challenge[b-bmcjaq1k3c] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.gradient-program[b-bmcjaq1k3c] {
    background: linear-gradient(135deg, #10b981 0%, #0891b2 100%);
}

/* Body */
.campaign-body[b-bmcjaq1k3c] {
    padding: 14px 16px 16px;
}

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

.campaign-type-badge[b-bmcjaq1k3c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-recognition[b-bmcjaq1k3c] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.badge-challenge[b-bmcjaq1k3c] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.badge-program[b-bmcjaq1k3c] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.campaign-urgent[b-bmcjaq1k3c] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    animation: campaignPulse 2s ease infinite;
}

.campaign-urgent-final[b-bmcjaq1k3c] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    font-weight: 700;
}

.campaign-title[b-bmcjaq1k3c] {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin: 0 0 4px;
    line-height: 1.3;
}

.campaign-desc[b-bmcjaq1k3c] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.45;
}

/* Progress bar */
.campaign-progress[b-bmcjaq1k3c] {
    margin-bottom: 12px;
}

.campaign-progress-bar[b-bmcjaq1k3c] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.campaign-progress-fill[b-bmcjaq1k3c] {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary, #0056b3), #667eea);
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 2px;
    position: relative;
}

.campaign-progress-complete[b-bmcjaq1k3c] {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
}

.campaign-progress-text[b-bmcjaq1k3c] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 4px;
    font-weight: 500;
}

/* Leaderboard mini */
.campaign-leaderboard[b-bmcjaq1k3c] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.campaign-leaderboard-header[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.campaign-leaderboard-header i[b-bmcjaq1k3c] {
    color: #f59e0b;
    font-size: 0.8rem;
}

.campaign-leaderboard-list[b-bmcjaq1k3c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campaign-leaderboard-entry[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.campaign-leaderboard-rank[b-bmcjaq1k3c] {
    width: 22px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.campaign-leaderboard-avatar[b-bmcjaq1k3c] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.campaign-leaderboard-avatar-placeholder[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
}

.campaign-leaderboard-name[b-bmcjaq1k3c] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
    font-weight: 500;
}

.campaign-leaderboard-score[b-bmcjaq1k3c] {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.campaign-leaderboard-score i[b-bmcjaq1k3c] {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Footer */
.campaign-footer[b-bmcjaq1k3c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-meta[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.78rem;
    color: #6b7280;
}

.campaign-meta i[b-bmcjaq1k3c] {
    margin-right: 2px;
}

.campaign-tags[b-bmcjaq1k3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.campaign-tag[b-bmcjaq1k3c] {
    font-size: 0.75rem;
    color: var(--bs-primary, #0056b3);
    font-weight: 500;
}

/* Participate button */
.campaign-participate-btn[b-bmcjaq1k3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.campaign-participate-btn:hover[b-bmcjaq1k3c] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    filter: brightness(1.05);
}

.campaign-participate-btn:active[b-bmcjaq1k3c] {
    transform: translateY(0);
}

.campaign-participate-btn.already-joined[b-bmcjaq1k3c] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.campaign-participate-btn.already-joined:hover[b-bmcjaq1k3c] {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

@@keyframes campaignPulse {
    0%[b-bmcjaq1k3c], 100%[b-bmcjaq1k3c] { opacity: 1; }
    50%[b-bmcjaq1k3c] { opacity: 0.6; }
}

/* ============ DARK MODE (scoped) ============ */
:global([data-bs-theme="dark"]) .campaign-card[b-bmcjaq1k3c] {
    background: var(--surface-primary, #1e2028);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

:global([data-bs-theme="dark"]) .campaign-card:hover[b-bmcjaq1k3c] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .campaign-goal-reached[b-bmcjaq1k3c] {
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1);
}

:global([data-bs-theme="dark"]) .campaign-title[b-bmcjaq1k3c] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .campaign-desc[b-bmcjaq1k3c] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .campaign-progress-bar[b-bmcjaq1k3c] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .campaign-meta[b-bmcjaq1k3c] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .campaign-leaderboard[b-bmcjaq1k3c] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .campaign-leaderboard-header[b-bmcjaq1k3c] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .campaign-leaderboard-name[b-bmcjaq1k3c] {
    color: #d1d5db;
}

:global([data-bs-theme="dark"]) .campaign-participate-btn[b-bmcjaq1k3c] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mobile */
@@media (max-width: 575.98px) {
    .campaign-banner[b-bmcjaq1k3c] {
        height: 90px;
    }

    .campaign-body[b-bmcjaq1k3c] {
        padding: 12px 14px 14px;
    }

    .campaign-leaderboard[b-bmcjaq1k3c] {
        padding: 8px 10px;
    }
}
/* /Features/Recognition/Components/CampaignSidebarWidget.razor.rz.scp.css */
/* ============ CAMPAIGN SIDEBAR WIDGET ============ */

.campaign-sidebar-widget[b-epdiixetct] {
    margin-bottom: 16px;
}

.campaign-sidebar-list[b-epdiixetct] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-sidebar-item[b-epdiixetct] {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.campaign-sidebar-item:hover[b-epdiixetct] {
    background: #f3f4f6;
}

.campaign-sidebar-icon[b-epdiixetct] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
}

.icon-recognition[b-epdiixetct] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.icon-challenge[b-epdiixetct] {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.icon-program[b-epdiixetct] {
    background: linear-gradient(135deg, #10b981, #0891b2);
}

.campaign-sidebar-info[b-epdiixetct] {
    flex: 1;
    min-width: 0;
}

.campaign-sidebar-name[b-epdiixetct] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.campaign-sidebar-meta[b-epdiixetct] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 2px;
}

.campaign-sidebar-dot[b-epdiixetct] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
}

.campaign-sidebar-urgent[b-epdiixetct] {
    color: #ef4444;
    font-weight: 600;
}

/* Progress bar */
.campaign-sidebar-progress[b-epdiixetct] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.campaign-sidebar-progress-bar[b-epdiixetct] {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.campaign-sidebar-progress-fill[b-epdiixetct] {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary, #0056b3), #667eea);
    border-radius: 2px;
    transition: width 0.5s ease;
    min-width: 1px;
}

.campaign-sidebar-progress-fill.complete[b-epdiixetct] {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.campaign-sidebar-progress-text[b-epdiixetct] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

/* ============ DARK MODE ============ */
:global([data-bs-theme="dark"]) .campaign-sidebar-item:hover[b-epdiixetct] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .campaign-sidebar-name[b-epdiixetct] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .campaign-sidebar-meta[b-epdiixetct] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .campaign-sidebar-dot[b-epdiixetct] {
    background: #4b5563;
}

:global([data-bs-theme="dark"]) .campaign-sidebar-progress-bar[b-epdiixetct] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .campaign-sidebar-progress-text[b-epdiixetct] {
    color: #9ca3af;
}
/* /Features/Recognition/Components/ComposeBox.razor.rz.scp.css */
/* ============================================================
   ComposeBox — Twitter/X-inspired compose experience
   ============================================================ */

/* === Container === */
.compose-box[b-eb3tn13pqf] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    cursor: default;
}

.compose-box:hover[b-eb3tn13pqf] {
    border-color: #d1d5db;
}

.compose-box.expanded[b-eb3tn13pqf] {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
}

/* === Collapsed state === */
.compose-collapsed[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: text;
    padding: 2px 0;
}

.compose-collapsed-input[b-eb3tn13pqf] {
    flex: 1;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 10px 20px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.compose-collapsed-input:hover[b-eb3tn13pqf] {
    background: #eef0f3;
    border-color: #d1d5db;
}

.compose-collapsed-text[b-eb3tn13pqf] {
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 400;
    white-space: nowrap;
}

/* Collapsed input dark mode */
:global([data-bs-theme="dark"]) .compose-collapsed-input[b-eb3tn13pqf] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

:global([data-bs-theme="dark"]) .compose-collapsed-input:hover[b-eb3tn13pqf] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}

/* === Avatar === */
.compose-avatar-wrap[b-eb3tn13pqf] {
    flex-shrink: 0;
}

.compose-avatar[b-eb3tn13pqf] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.compose-avatar.compose-avatar-placeholder[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    position: relative;
    overflow: hidden;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.compose-avatar.compose-avatar-placeholder[b-eb3tn13pqf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50% 50% 0 0;
}

.compose-avatar.compose-avatar-placeholder span[b-eb3tn13pqf],
.compose-avatar.compose-avatar-placeholder small[b-eb3tn13pqf] {
    position: relative;
    z-index: 1;
}

/* === Audience chip === */
.compose-audience-chip[b-eb3tn13pqf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--bs-primary, #0056b3);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 12px;
}

.compose-audience-chip:hover[b-eb3tn13pqf] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.06);
}

.compose-audience-chip .bi-chevron-down[b-eb3tn13pqf] {
    font-size: 0.6rem;
    opacity: 0.7;
}

/* === Main compose area === */
.compose-main[b-eb3tn13pqf] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.compose-content[b-eb3tn13pqf] {
    flex: 1;
    min-width: 0;
}

/* === Recipient / @mention === */
.compose-recipient-area[b-eb3tn13pqf] {
    margin-bottom: 4px;
    position: relative;
}

.compose-mention-input-wrap[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
}

.compose-at-prefix[b-eb3tn13pqf] {
    color: var(--bs-primary, #0056b3);
    font-weight: 600;
    font-size: 1rem;
    user-select: none;
    padding-right: 2px;
}

.compose-mention-input[b-eb3tn13pqf] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--bs-primary, #0056b3);
    font-weight: 500;
    width: 100%;
    padding: 2px 0;
}

.compose-mention-input[b-eb3tn13pqf]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Mention tag (selected recipient) */
.compose-mention-tag[b-eb3tn13pqf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
    color: var(--bs-primary, #0056b3);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 3px 8px 3px 6px;
    border-radius: 6px;
    line-height: 1.4;
}

.compose-mention-tag .bi-at[b-eb3tn13pqf] {
    font-size: 0.85rem;
}

.compose-mention-remove[b-eb3tn13pqf] {
    border: none;
    background: none;
    color: var(--bs-primary, #0056b3);
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}

.compose-mention-remove:hover[b-eb3tn13pqf] {
    opacity: 1;
}

/* === Recipient dropdown === */
.compose-dropdown[b-eb3tn13pqf] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
    animation: composeDropIn 0.15s ease-out;
}

.compose-dropdown-item[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.compose-dropdown-item:hover[b-eb3tn13pqf] {
    background: #f3f4f6;
}

.compose-dropdown-item:first-child[b-eb3tn13pqf] {
    border-radius: 12px 12px 0 0;
}

.compose-dropdown-item:last-child[b-eb3tn13pqf] {
    border-radius: 0 0 12px 12px;
}

.compose-dropdown-avatar[b-eb3tn13pqf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.compose-dropdown-info[b-eb3tn13pqf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.compose-dropdown-name[b-eb3tn13pqf] {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose-dropdown-email[b-eb3tn13pqf] {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Textarea === */
.compose-textarea[b-eb3tn13pqf] {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #1f2937;
    background: transparent;
    padding: 4px 0;
    min-height: 36px;
    overflow: hidden;
    font-family: inherit;
}

.compose-textarea[b-eb3tn13pqf]::placeholder {
    color: #9ca3af;
}

/* === Character counter === */
.compose-char-counter[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    padding: 0 2px;
    margin-top: -2px;
    margin-bottom: 2px;
}

.compose-chars-remaining[b-eb3tn13pqf] {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    line-height: 1;
}

.compose-char-counter.near-limit .compose-chars-remaining[b-eb3tn13pqf] {
    animation: composePulse 1s ease-in-out;
}

@@keyframes composePulse {
    0%[b-eb3tn13pqf], 100%[b-eb3tn13pqf] { transform: scale(1); }
    50%[b-eb3tn13pqf] { transform: scale(1.15); }
}

/* === Media preview === */
.compose-media-preview[b-eb3tn13pqf] {
    margin: 8px 0 4px;
    border-radius: 12px;
    overflow: hidden;
}

/* === Hashtags === */
.compose-hashtags-row[b-eb3tn13pqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.compose-hashtag-badge[b-eb3tn13pqf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
    color: var(--bs-primary, #0056b3);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

.compose-hashtag-remove[b-eb3tn13pqf] {
    border: none;
    background: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    transition: opacity 0.15s;
}

.compose-hashtag-remove:hover[b-eb3tn13pqf] {
    opacity: 1;
}

/* Hashtag picker panel */
.compose-hashtag-picker[b-eb3tn13pqf] {
    margin: 8px 0 4px;
    padding: 10px 0 0;
    border-top: 1px solid #f3f4f6;
    animation: composeFadeSlide 0.2s ease-out;
}

.compose-hashtag-picker-row[b-eb3tn13pqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.compose-hashtag-suggest[b-eb3tn13pqf] {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.compose-hashtag-suggest:hover[b-eb3tn13pqf] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.04);
}

.compose-hashtag-input-row[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compose-hashtag-input-prefix[b-eb3tn13pqf] {
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.85rem;
}

.compose-hashtag-input[b-eb3tn13pqf] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    color: #374151;
    padding: 4px 0;
    flex: 1;
}

.compose-hashtag-input[b-eb3tn13pqf]::placeholder {
    color: #d1d5db;
}

/* === Divider === */
.compose-divider[b-eb3tn13pqf] {
    height: 1px;
    background: #f3f4f6;
    margin: 12px 0;
}

/* === Toolbar === */
.compose-toolbar[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.compose-toolbar-left[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.compose-toolbar-right[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compose-tool-btn[b-eb3tn13pqf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bs-primary, #0056b3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    font-size: 1.1rem;
    padding: 0;
}

.compose-tool-btn:hover[b-eb3tn13pqf] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
}

.compose-tool-btn.active[b-eb3tn13pqf] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.12);
}

.compose-gif-label[b-eb3tn13pqf] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    padding: 1px 3px;
    line-height: 1;
}

/* === Points ring === */
.compose-points-wrap[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.compose-points-ring-btn[b-eb3tn13pqf] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform 0.15s ease;
}

.compose-points-ring-btn:hover[b-eb3tn13pqf] {
    transform: scale(1.1);
}

.compose-ring-progress[b-eb3tn13pqf] {
    transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
}

.compose-points-label[b-eb3tn13pqf] {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* Points popover */
.compose-points-popover[b-eb3tn13pqf] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    z-index: 60;
    animation: composePopIn 0.15s ease-out;
    min-width: 160px;
}

.compose-pts-opt[b-eb3tn13pqf] {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.compose-pts-opt:hover:not(.disabled)[b-eb3tn13pqf] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.04);
}

.compose-pts-opt.selected[b-eb3tn13pqf] {
    background: #fff8e1;
    color: #92400e;
    border-color: #fbbf24;
}

.compose-pts-opt.disabled[b-eb3tn13pqf] {
    color: #d1d5db;
    border-color: #f3f4f6;
    cursor: not-allowed;
    background: #fafafa;
}

/* Toolbar vertical divider */
.compose-toolbar-divider[b-eb3tn13pqf] {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
}

/* === Post button === */
.compose-post-btn[b-eb3tn13pqf] {
    border: none;
    background: var(--bs-primary, #0056b3);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.compose-post-btn:hover:not(:disabled)[b-eb3tn13pqf] {
    opacity: 0.9;
    transform: scale(1.02);
}

.compose-post-btn:active:not(:disabled)[b-eb3tn13pqf] {
    transform: scale(0.98);
}

.compose-post-btn:disabled[b-eb3tn13pqf] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Distribution row (multi-recipient) === */
.compose-distribution-row[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #6b7280;
    background: #f8f9fa;
    border-radius: 8px;
}

.compose-distribution-row i[b-eb3tn13pqf] {
    font-size: 0.8rem;
    flex-shrink: 0;
}

.compose-distribution-remainder[b-eb3tn13pqf] {
    color: #9ca3af;
}

/* === Hashtag required label === */
.compose-hashtag-required[b-eb3tn13pqf] {
    font-size: 0.65rem;
    color: #ef4444;
    font-weight: 600;
    margin-left: 2px;
    white-space: nowrap;
    line-height: 1;
}

/* === Distribution row dark mode === */
:global([data-bs-theme="dark"]) .compose-distribution-row[b-eb3tn13pqf] {
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .compose-distribution-remainder[b-eb3tn13pqf] {
    color: #6b7280;
}

/* === Mobile overrides === */
@@media (max-width: 575.98px) {
    .compose-toolbar[b-eb3tn13pqf] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .compose-toolbar-left[b-eb3tn13pqf] {
        order: 1;
        gap: 1px;
    }

    .compose-toolbar-right[b-eb3tn13pqf] {
        order: 2;
        margin-left: auto;
        gap: 4px;
    }

    .compose-post-btn[b-eb3tn13pqf] {
        padding: 5px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .compose-points-label[b-eb3tn13pqf] {
        display: none;
    }

    .compose-toolbar-divider[b-eb3tn13pqf] {
        display: none;
    }

    .compose-hashtag-required[b-eb3tn13pqf] {
        display: none;
    }

    .compose-distribution-row[b-eb3tn13pqf] {
        order: 3;
        width: 100%;
        font-size: 0.7rem;
        padding: 4px 8px;
        margin-top: 2px;
    }

    .compose-tool-btn[b-eb3tn13pqf] {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
}

/* === Backdrop for popovers === */
.compose-backdrop[b-eb3tn13pqf] {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

/* === Animations === */
@@keyframes composeDropIn {
    from[b-eb3tn13pqf] {
        opacity: 0;
        transform: translateY(-6px);
    }
    to[b-eb3tn13pqf] {
        opacity: 1;
        transform: translateY(0);
    }
}

@@keyframes composeFadeSlide {
    from[b-eb3tn13pqf] {
        opacity: 0;
        max-height: 0;
    }
    to[b-eb3tn13pqf] {
        opacity: 1;
        max-height: 200px;
    }
}

@@keyframes composePopIn {
    from[b-eb3tn13pqf] {
        opacity: 0;
        transform: scale(0.92);
    }
    to[b-eb3tn13pqf] {
        opacity: 1;
        transform: scale(1);
    }
}

/* === Responsive === */
@@media (max-width: 576px) {
    .compose-box[b-eb3tn13pqf] {
        border-radius: 12px;
        padding: 12px;
    }

    .compose-textarea[b-eb3tn13pqf] {
        font-size: 0.95rem;
        min-height: 36px;
    }

    .compose-points-popover[b-eb3tn13pqf] {
        right: -8px;
    }
}

/* ============================================================
   Template Picker
   ============================================================ */

.compose-template-picker[b-eb3tn13pqf] {
    margin: 8px 0 4px;
    padding: 0;
    border-top: 1px solid #f3f4f6;
    animation: composeFadeSlide 0.2s ease-out;
}

.compose-template-header[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 8px;
}

.compose-template-title[b-eb3tn13pqf] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
}

.compose-template-close[b-eb3tn13pqf] {
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.compose-template-close:hover[b-eb3tn13pqf] {
    background: #f3f4f6;
    color: #374151;
}

/* Category pills */
.compose-template-categories[b-eb3tn13pqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
}

@media (max-width: 575.98px) {
    .compose-template-categories[b-eb3tn13pqf] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }

    .compose-template-categories[b-eb3tn13pqf]::-webkit-scrollbar {
        display: none;
    }
}

.compose-template-category-pill[b-eb3tn13pqf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.compose-template-category-pill:hover[b-eb3tn13pqf] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.04);
}

.compose-template-category-pill.active[b-eb3tn13pqf] {
    border-color: var(--bs-primary, #0056b3);
    color: #fff;
    background: var(--bs-primary, #0056b3);
}

.compose-template-category-icon[b-eb3tn13pqf] {
    font-size: 0.85rem;
    line-height: 1;
}

/* Template cards */
.compose-template-cards[b-eb3tn13pqf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding-bottom: 4px;
}

.compose-template-card[b-eb3tn13pqf] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.compose-template-card:hover[b-eb3tn13pqf] {
    border-color: var(--bs-primary, #0056b3);
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.03);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.compose-template-card-icon[b-eb3tn13pqf] {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.compose-template-card-content[b-eb3tn13pqf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compose-template-card-title[b-eb3tn13pqf] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.compose-template-card-preview[b-eb3tn13pqf] {
    font-size: 0.73rem;
    color: #9ca3af;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compose-template-card-arrow[b-eb3tn13pqf] {
    color: #d1d5db;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.compose-template-card:hover .compose-template-card-arrow[b-eb3tn13pqf] {
    color: var(--bs-primary, #0056b3);
    transform: translateX(2px);
}

/* Dark mode via scoped :global */
:global([data-bs-theme="dark"]) .compose-template-picker[b-eb3tn13pqf] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .compose-template-title[b-eb3tn13pqf] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .compose-template-close:hover[b-eb3tn13pqf] {
    background: rgba(255, 255, 255, 0.08);
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .compose-template-category-pill[b-eb3tn13pqf] {
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .compose-template-category-pill:hover[b-eb3tn13pqf] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.1);
}

:global([data-bs-theme="dark"]) .compose-template-category-pill.active[b-eb3tn13pqf] {
    color: #fff;
}

:global([data-bs-theme="dark"]) .compose-template-card[b-eb3tn13pqf] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

:global([data-bs-theme="dark"]) .compose-template-card:hover[b-eb3tn13pqf] {
    border-color: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.4);
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:global([data-bs-theme="dark"]) .compose-template-card-title[b-eb3tn13pqf] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .compose-template-card-preview[b-eb3tn13pqf] {
    color: #6b7280;
}

:global([data-bs-theme="dark"]) .compose-template-card-arrow[b-eb3tn13pqf] {
    color: #4b5563;
}

:global([data-bs-theme="dark"]) .compose-template-card:hover .compose-template-card-arrow[b-eb3tn13pqf] {
    color: #93bbfc;
}

/* Responsive: template picker on small screens */
@@media (max-width: 576px) {
    .compose-template-category-pill[b-eb3tn13pqf] {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .compose-template-card[b-eb3tn13pqf] {
        padding: 8px 10px;
    }

    .compose-template-card-icon[b-eb3tn13pqf] {
        font-size: 1.15rem;
    }

    .compose-template-card-title[b-eb3tn13pqf] {
        font-size: 0.78rem;
    }

    .compose-template-card-preview[b-eb3tn13pqf] {
        font-size: 0.7rem;
    }

    .compose-template-cards[b-eb3tn13pqf] {
        max-height: 180px;
    }
}

/* ============ CAMPAIGN LINK PILL ============ */
.compose-campaign-row[b-eb3tn13pqf] {
    padding: 4px 0 2px;
}

.compose-campaign-pill[b-eb3tn13pqf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1.5px dashed #d1d5db;
    border-radius: 20px;
    background: transparent;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 100%;
}

.compose-campaign-pill:hover[b-eb3tn13pqf] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.04);
}

.compose-campaign-pill.active[b-eb3tn13pqf] {
    border-style: solid;
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    color: #667eea;
    font-weight: 600;
}

.compose-campaign-pill.active:hover[b-eb3tn13pqf] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
}

.compose-campaign-pill span[b-eb3tn13pqf] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-campaign-check[b-eb3tn13pqf] {
    color: #10b981;
    font-size: 0.8rem;
}

/* Campaign pill dark mode */
:global([data-bs-theme="dark"]) .compose-campaign-pill[b-eb3tn13pqf] {
    border-color: rgba(255, 255, 255, 0.15);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .compose-campaign-pill:hover[b-eb3tn13pqf] {
    border-color: #667eea;
    color: #818cf8;
    background: rgba(102, 126, 234, 0.1);
}

:global([data-bs-theme="dark"]) .compose-campaign-pill.active[b-eb3tn13pqf] {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #818cf8;
}
/* /Features/Recognition/Components/DepartmentLeaderboard.razor.rz.scp.css */
/* ============ DEPARTMENT LEADERBOARD PAGE STYLES ============ */

.dept-leaderboard-page[b-axilft0m3u] {
    min-height: 100vh;
}

/* Period Toggle */
.period-toggle-container[b-axilft0m3u] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.period-toggle[b-axilft0m3u] {
    display: inline-flex;
    background: #f1f3f5;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

:global([data-bs-theme="dark"]) .period-toggle[b-axilft0m3u] {
    background: var(--theme-bg-dark, #1a1d23);
}

.period-btn[b-axilft0m3u] {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn:hover[b-axilft0m3u] {
    color: #212529;
    background: rgba(0, 0, 0, 0.04);
}

.period-btn.active[b-axilft0m3u] {
    background: #ffffff;
    color: #0d6efd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

:global([data-bs-theme="dark"]) .period-btn[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .period-btn:hover[b-axilft0m3u] {
    color: var(--theme-text-main, #e1e3e8);
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .period-btn.active[b-axilft0m3u] {
    background: rgba(59, 130, 246, 0.15);
    color: #93bbfc;
    box-shadow: none;
}

/* Department Grid */
.dept-grid[b-axilft0m3u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Department Card */
.dept-card[b-axilft0m3u] {
    background: var(--theme-card-bg, #ffffff);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dept-card:hover[b-axilft0m3u] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.dept-card.expanded[b-axilft0m3u] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

:global([data-bs-theme="dark"]) .dept-card[b-axilft0m3u] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:global([data-bs-theme="dark"]) .dept-card:hover[b-axilft0m3u] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Card Header */
.dept-card-header[b-axilft0m3u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.75rem;
}

.dept-rank-badge[b-axilft0m3u] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rank-medal[b-axilft0m3u] {
    font-size: 1.6rem;
    line-height: 1;
}

.rank-number[b-axilft0m3u] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #6c757d;
    background: #f1f3f5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

:global([data-bs-theme="dark"]) .rank-number[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
    background: var(--theme-bg-dark, #1a1d23);
}

.dept-info[b-axilft0m3u] {
    flex: 1;
    min-width: 0;
}

.dept-name[b-axilft0m3u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global([data-bs-theme="dark"]) .dept-name[b-axilft0m3u] {
    color: var(--theme-text-main, #e1e3e8);
}

.dept-employees[b-axilft0m3u] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #6c757d);
}

:global([data-bs-theme="dark"]) .dept-employees[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Top Employee Avatar */
.dept-top-employee[b-axilft0m3u] {
    flex-shrink: 0;
    position: relative;
}

.dept-top-employee[b-axilft0m3u]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.dept-top-employee:hover[b-axilft0m3u]::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

:global([data-bs-theme="dark"]) .dept-top-employee[b-axilft0m3u]::after {
    background: #374151;
}

.top-employee-avatar[b-axilft0m3u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dept-top-employee:hover .top-employee-avatar[b-axilft0m3u] {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.top-employee-avatar-placeholder[b-axilft0m3u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dept-top-employee:hover .top-employee-avatar-placeholder[b-axilft0m3u] {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.top-employee-avatar-placeholder span[b-axilft0m3u] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
}

.expand-icon[b-axilft0m3u] {
    flex-shrink: 0;
    color: var(--theme-text-muted, #6c757d);
    transition: transform 0.2s ease;
}

:global([data-bs-theme="dark"]) .expand-icon[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Stats Row */
.dept-stats[b-axilft0m3u] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.stat-item[b-axilft0m3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-value[b-axilft0m3u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
}

:global([data-bs-theme="dark"]) .stat-value[b-axilft0m3u] {
    color: var(--theme-text-main, #e1e3e8);
}

.stat-label[b-axilft0m3u] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

:global([data-bs-theme="dark"]) .stat-label[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Participation Bar */
.participation-bar-container[b-axilft0m3u] {
    height: 4px;
    background: #f1f3f5;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0;
}

:global([data-bs-theme="dark"]) .participation-bar-container[b-axilft0m3u] {
    background: var(--theme-bg-dark, #1a1d23);
}

.participation-bar[b-axilft0m3u] {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    border-radius: 2px;
    transition: width 0.6s ease;
    min-width: 2px;
}

/* Detail Section */
.dept-detail[b-axilft0m3u] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

:global([data-bs-theme="dark"]) .dept-detail[b-axilft0m3u] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.detail-header[b-axilft0m3u] {
    margin-bottom: 0.5rem;
}

.detail-title[b-axilft0m3u] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #6c757d);
}

:global([data-bs-theme="dark"]) .detail-title[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Employee List */
.employee-list[b-axilft0m3u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.employee-item[b-axilft0m3u] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    gap: 10px;
    transition: background 0.15s ease;
}

.employee-item:hover[b-axilft0m3u] {
    background: rgba(13, 110, 253, 0.06);
}

:global([data-bs-theme="dark"]) .employee-item:hover[b-axilft0m3u] {
    background: rgba(59, 130, 246, 0.08);
}

.employee-rank[b-axilft0m3u] {
    width: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    flex-shrink: 0;
    text-align: center;
}

:global([data-bs-theme="dark"]) .employee-rank[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

.employee-avatar[b-axilft0m3u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.employee-avatar-placeholder[b-axilft0m3u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.employee-avatar-placeholder span[b-axilft0m3u] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffffff;
}

.employee-info[b-axilft0m3u] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.employee-name[b-axilft0m3u] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-main, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global([data-bs-theme="dark"]) .employee-name[b-axilft0m3u] {
    color: var(--theme-text-main, #e1e3e8);
}

.employee-stats-text[b-axilft0m3u] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #6c757d);
}

:global([data-bs-theme="dark"]) .employee-stats-text[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

.employee-points-badge[b-axilft0m3u] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0d6efd;
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

:global([data-bs-theme="dark"]) .employee-points-badge[b-axilft0m3u] {
    color: #93bbfc;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
}

/* Empty State */
.empty-state[b-axilft0m3u] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon[b-axilft0m3u] {
    font-size: 3rem;
    color: var(--theme-text-muted, #adb5bd);
    margin-bottom: 1rem;
    opacity: 0.5;
}

:global([data-bs-theme="dark"]) .empty-state-icon[b-axilft0m3u] {
    color: var(--theme-text-muted, #6b7280);
}

.empty-state-title[b-axilft0m3u] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 0.5rem;
}

:global([data-bs-theme="dark"]) .empty-state-title[b-axilft0m3u] {
    color: var(--theme-text-main, #e1e3e8);
}

.empty-state-text[b-axilft0m3u] {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: 1.5rem;
}

:global([data-bs-theme="dark"]) .empty-state-text[b-axilft0m3u] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Skeleton Loading */
.skeleton-card[b-axilft0m3u] {
    cursor: default;
    pointer-events: none;
}

.skeleton-header[b-axilft0m3u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.skeleton-rank[b-axilft0m3u] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    animation: skeleton-pulse-b-axilft0m3u 1.5s ease-in-out infinite;
}

:global([data-bs-theme="dark"]) .skeleton-rank[b-axilft0m3u] {
    background: var(--theme-bg-dark, #2a2d35);
}

.skeleton-lines[b-axilft0m3u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line[b-axilft0m3u] {
    height: 12px;
    border-radius: 6px;
    background: #e9ecef;
    animation: skeleton-pulse-b-axilft0m3u 1.5s ease-in-out infinite;
}

:global([data-bs-theme="dark"]) .skeleton-line[b-axilft0m3u] {
    background: var(--theme-bg-dark, #2a2d35);
}

.skeleton-line-wide[b-axilft0m3u] {
    width: 60%;
}

.skeleton-line-narrow[b-axilft0m3u] {
    width: 35%;
}

.skeleton-stats[b-axilft0m3u] {
    display: flex;
    gap: 1rem;
}

.skeleton-stat[b-axilft0m3u] {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    background: #e9ecef;
    animation: skeleton-pulse-b-axilft0m3u 1.5s ease-in-out infinite;
}

:global([data-bs-theme="dark"]) .skeleton-stat[b-axilft0m3u] {
    background: var(--theme-bg-dark, #2a2d35);
}

@keyframes skeleton-pulse-b-axilft0m3u {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Responsive */
@media (min-width: 768px) {
    .dept-grid[b-axilft0m3u] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .period-btn[b-axilft0m3u] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .dept-card[b-axilft0m3u] {
        padding: 0.85rem 1rem;
    }

    .dept-stats[b-axilft0m3u] {
        gap: 0.5rem;
    }

    .stat-value[b-axilft0m3u] {
        font-size: 0.95rem;
    }

    .stat-label[b-axilft0m3u] {
        font-size: 0.65rem;
    }
}
/* /Features/Recognition/Components/HashtagAnalytics.razor.rz.scp.css */
/* ============ HASHTAG ANALYTICS PAGE ============ */

.hashtag-analytics-page[b-k891har42p] {
    min-height: 100vh;
}

/* Analytics Card */
.analytics-card[b-k891har42p] {
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
}

.analytics-card-header[b-k891har42p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-main, #212529);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.analytics-card-body[b-k891har42p] {
    padding: 1rem 1.25rem;
}

/* Period Select */
.period-select[b-k891har42p] {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 0.3rem 1.8rem 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6c757d);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.period-select:focus[b-k891har42p] {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
}

/* Hashtag Table */
.hashtag-table[b-k891har42p] {
    display: flex;
    flex-direction: column;
}

.hashtag-row[b-k891har42p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.hashtag-row:last-child[b-k891har42p] {
    border-bottom: none;
}

.hashtag-row:hover[b-k891har42p] {
    background: rgba(0, 0, 0, 0.02);
}

.hashtag-rank[b-k891har42p] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-muted, #6c757d);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    flex-shrink: 0;
}

.hashtag-info[b-k891har42p] {
    flex: 1;
    min-width: 0;
}

.hashtag-info .hashtag-name[b-k891har42p] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-primary, #0d6efd);
    display: block;
}

.hashtag-top-users[b-k891har42p] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.top-user-chip[b-k891har42p] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #6c757d);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 6px;
    border-radius: 8px;
}

.hashtag-stats-col[b-k891har42p] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.hashtag-count[b-k891har42p] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--theme-text-main, #212529);
}

.hashtag-trend[b-k891har42p] {
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
}

.hashtag-trend.up[b-k891har42p] {
    color: #16a34a;
}

.hashtag-trend.down[b-k891har42p] {
    color: #dc2626;
}

.hashtag-trend.stable[b-k891har42p] {
    color: var(--theme-text-muted, #6c757d);
}

/* Loading Skeleton */
.loading-skeleton[b-k891har42p] {
    padding: 1rem 0;
}

.skeleton-cloud[b-k891har42p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.skeleton-tag[b-k891har42p] {
    height: 28px;
    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-k891har42p 1.5s infinite;
    border-radius: 6px;
}

.skeleton-table[b-k891har42p] {
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    padding: 0.5rem 0;
}

.skeleton-row[b-k891har42p] {
    height: 56px;
    margin: 0.25rem 1.25rem;
    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-k891har42p 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-shimmer-b-k891har42p {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.empty-state-card[b-k891har42p] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state-icon[b-k891har42p] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--theme-text-muted, #6c757d);
}

.empty-state-card h5[b-k891har42p] {
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 0.5rem;
}

/* Dark mode */
:global([data-bs-theme="dark"]) .analytics-card[b-k891har42p] {
    background: var(--theme-card-bg, #1e1e2e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .analytics-card-header[b-k891har42p] {
    color: var(--theme-text-main, #e1e3e8);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .period-select[b-k891har42p] {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--theme-text-muted, #9ca3af);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
}

:global([data-bs-theme="dark"]) .hashtag-row:hover[b-k891har42p] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .hashtag-row[b-k891har42p] {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .hashtag-rank[b-k891har42p] {
    color: var(--theme-text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .hashtag-count[b-k891har42p] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .top-user-chip[b-k891har42p] {
    color: var(--theme-text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .skeleton-cloud[b-k891har42p] {
    background: var(--theme-card-bg, #1e1e2e);
}

:global([data-bs-theme="dark"]) .skeleton-tag[b-k891har42p],
:global([data-bs-theme="dark"]) .skeleton-row[b-k891har42p] {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-k891har42p 1.5s infinite;
}

:global([data-bs-theme="dark"]) .skeleton-table[b-k891har42p] {
    background: var(--theme-card-bg, #1e1e2e);
}

:global([data-bs-theme="dark"]) .empty-state-card[b-k891har42p] {
    background: var(--theme-card-bg, #1e1e2e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .empty-state-icon[b-k891har42p] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .empty-state-card h5[b-k891har42p] {
    color: var(--theme-text-main, #e1e3e8);
}
/* /Features/Recognition/Components/HashtagDetail.razor.rz.scp.css */
/* ============ HASHTAG DETAIL PAGE ============ */

.hashtag-detail-page[b-4sw9puxrr1] {
    min-height: 100vh;
}

/* Stats Row */
.stats-row[b-4sw9puxrr1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-card[b-4sw9puxrr1] {
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    text-align: center;
}

.stat-card-value[b-4sw9puxrr1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
}

.stat-card-label[b-4sw9puxrr1] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.2rem;
}

/* Detail Card */
.detail-card[b-4sw9puxrr1] {
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
}

.detail-card-header[b-4sw9puxrr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-main, #212529);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.detail-card-body[b-4sw9puxrr1] {
    padding: 1rem 1.25rem;
}

/* Related Tags */
.related-tags[b-4sw9puxrr1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.related-tag-chip[b-4sw9puxrr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(13, 110, 253, 0.08);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.related-tag-chip:hover[b-4sw9puxrr1] {
    background: rgba(13, 110, 253, 0.15);
}

.related-tag-name[b-4sw9puxrr1] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--bs-primary, #0d6efd);
}

.related-tag-count[b-4sw9puxrr1] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6c757d);
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 8px;
}

/* People List */
.people-list[b-4sw9puxrr1] {
    display: flex;
    flex-direction: column;
}

.people-item[b-4sw9puxrr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.people-item:last-child[b-4sw9puxrr1] {
    border-bottom: none;
}

.people-avatar[b-4sw9puxrr1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.people-info[b-4sw9puxrr1] {
    flex: 1;
    min-width: 0;
}

.people-name[b-4sw9puxrr1] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-main, #212529);
}

.people-count[b-4sw9puxrr1] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
    flex-shrink: 0;
}

/* Recognition List */
.recognition-list[b-4sw9puxrr1] {
    display: flex;
    flex-direction: column;
}

.recognition-item[b-4sw9puxrr1] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.recognition-item:last-child[b-4sw9puxrr1] {
    border-bottom: none;
}

.recognition-avatar[b-4sw9puxrr1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.recognition-content[b-4sw9puxrr1] {
    flex: 1;
    min-width: 0;
}

.recognition-header-row[b-4sw9puxrr1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.recognition-sender[b-4sw9puxrr1] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-main, #212529);
}

.recognition-recipient[b-4sw9puxrr1] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-main, #212529);
}

.recognition-time[b-4sw9puxrr1] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6c757d);
    margin-left: auto;
}

.recognition-message[b-4sw9puxrr1] {
    font-size: 0.8rem;
    color: var(--theme-text-main, #212529);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.points-badge[b-4sw9puxrr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 0.3rem;
}

/* Loading & Empty states */
.loading-state[b-4sw9puxrr1] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-card[b-4sw9puxrr1] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--theme-card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.empty-state-icon[b-4sw9puxrr1] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--theme-text-muted, #6c757d);
}

.empty-state-card h5[b-4sw9puxrr1] {
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 576px) {
    .stats-row[b-4sw9puxrr1] {
        gap: 0.5rem;
    }

    .stat-card[b-4sw9puxrr1] {
        padding: 0.75rem 0.5rem;
    }

    .stat-card-value[b-4sw9puxrr1] {
        font-size: 1.25rem;
    }

    .recognition-header-row[b-4sw9puxrr1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .recognition-time[b-4sw9puxrr1] {
        margin-left: 0;
    }
}

/* Dark mode */
:global([data-bs-theme="dark"]) .stat-card[b-4sw9puxrr1] {
    background: var(--theme-card-bg, #1e1e2e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .stat-card-label[b-4sw9puxrr1] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .detail-card[b-4sw9puxrr1] {
    background: var(--theme-card-bg, #1e1e2e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .detail-card-header[b-4sw9puxrr1] {
    color: var(--theme-text-main, #e1e3e8);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .related-tag-chip[b-4sw9puxrr1] {
    background: rgba(59, 130, 246, 0.12);
}

:global([data-bs-theme="dark"]) .related-tag-chip:hover[b-4sw9puxrr1] {
    background: rgba(59, 130, 246, 0.2);
}

:global([data-bs-theme="dark"]) .related-tag-count[b-4sw9puxrr1] {
    color: var(--theme-text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .people-item[b-4sw9puxrr1] {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .people-name[b-4sw9puxrr1] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .people-count[b-4sw9puxrr1] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .recognition-item[b-4sw9puxrr1] {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .recognition-sender[b-4sw9puxrr1],
:global([data-bs-theme="dark"]) .recognition-recipient[b-4sw9puxrr1] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .recognition-message[b-4sw9puxrr1] {
    color: var(--theme-text-main, #d1d5db);
}

:global([data-bs-theme="dark"]) .recognition-time[b-4sw9puxrr1] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .empty-state-card[b-4sw9puxrr1] {
    background: var(--theme-card-bg, #1e1e2e);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:global([data-bs-theme="dark"]) .empty-state-icon[b-4sw9puxrr1] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .empty-state-card h5[b-4sw9puxrr1] {
    color: var(--theme-text-main, #e1e3e8);
}
/* /Features/Recognition/Components/InlineCommentBox.razor.rz.scp.css */
/* ============ INLINE COMMENT BOX ============ */

.inline-comments-section[b-whv9bt534o] {
    padding: 8px 0 4px;
    border-top: 1px solid #e5e7eb;
    animation: slideDown-b-whv9bt534o 0.2s ease-out;
}

:global([data-bs-theme="dark"]) .inline-comments-section[b-whv9bt534o] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

@keyframes slideDown-b-whv9bt534o {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

/* ── Comment list ── */
.inline-comments-list[b-whv9bt534o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.inline-comment-item[b-whv9bt534o] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ── Comment avatars ── */
.inline-comment-avatar-wrapper[b-whv9bt534o] {
    flex-shrink: 0;
}

.inline-comment-avatar[b-whv9bt534o] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.inline-comment-avatar-placeholder[b-whv9bt534o] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8, #667eea);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ── Comment bubble ── */
.inline-comment-bubble[b-whv9bt534o] {
    background: #f0f2f5;
    border-radius: 12px;
    padding: 6px 12px;
    max-width: calc(100% - 80px);
    word-break: break-word;
}

:global([data-bs-theme="dark"]) .inline-comment-bubble[b-whv9bt534o] {
    background: rgba(255, 255, 255, 0.06);
}

.inline-comment-author[b-whv9bt534o] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-right: 6px;
}

:global([data-bs-theme="dark"]) .inline-comment-author[b-whv9bt534o] {
    color: #e1e3e8;
}

.inline-comment-text[b-whv9bt534o] {
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.4;
}

:global([data-bs-theme="dark"]) .inline-comment-text[b-whv9bt534o] {
    color: #d1d5db;
}

.inline-comment-time[b-whv9bt534o] {
    font-size: 0.7rem;
    color: #9ca3af;
    white-space: nowrap;
    margin-top: 4px;
    flex-shrink: 0;
}

/* ── Comment media ── */
.inline-comment-media[b-whv9bt534o] {
    max-width: 200px;
}

.inline-comment-image[b-whv9bt534o] {
    max-width: 100%;
    border-radius: 8px;
    max-height: 120px;
    object-fit: cover;
}

/* ── View all button ── */
.inline-view-all-btn[b-whv9bt534o] {
    display: block;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.15s;
}

.inline-view-all-btn:hover[b-whv9bt534o] {
    color: var(--bs-primary, #0056b3);
    text-decoration: underline;
}

:global([data-bs-theme="dark"]) .inline-view-all-btn[b-whv9bt534o] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .inline-view-all-btn:hover[b-whv9bt534o] {
    color: var(--bs-primary, #6ea8fe);
}

/* ── Input row ── */
.inline-comment-input-row[b-whv9bt534o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
}

.inline-input-avatar-wrapper[b-whv9bt534o] {
    flex-shrink: 0;
}

.inline-input-avatar[b-whv9bt534o] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.inline-input-avatar-placeholder[b-whv9bt534o] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8, #667eea);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
}

.inline-comment-input-wrapper[b-whv9bt534o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.inline-comment-input-container[b-whv9bt534o] {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f0f2f5;
    border-radius: 20px;
    padding: 0 4px 0 14px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.inline-comment-input-container:focus-within[b-whv9bt534o] {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.2);
}

:global([data-bs-theme="dark"]) .inline-comment-input-container[b-whv9bt534o] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .inline-comment-input-container:focus-within[b-whv9bt534o] {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.inline-comment-input[b-whv9bt534o] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    padding: 8px 0;
    color: #1a1a2e;
}

.inline-comment-input[b-whv9bt534o]::placeholder {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .inline-comment-input[b-whv9bt534o] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .inline-comment-input[b-whv9bt534o]::placeholder {
    color: #4b5563;
}

.inline-comment-send-btn[b-whv9bt534o] {
    border: none;
    background: transparent;
    color: var(--bs-primary, #0056b3);
    padding: 6px 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-comment-send-btn:hover:not(:disabled)[b-whv9bt534o] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

.inline-comment-send-btn:disabled[b-whv9bt534o] {
    opacity: 0.35;
    cursor: default;
}

/* ── Points picker row ── */
.inline-points-row[b-whv9bt534o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.inline-points-label[b-whv9bt534o] {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

:global([data-bs-theme="dark"]) .inline-points-label[b-whv9bt534o] {
    color: #6b7280;
}

.inline-points-chip[b-whv9bt534o] {
    border: 1px solid #e5e7eb;
    background: transparent;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.inline-points-chip:hover:not(:disabled)[b-whv9bt534o] {
    border-color: #fbbf24;
    color: #d97706;
    background: rgba(251, 191, 36, 0.08);
}

.inline-points-chip.active[b-whv9bt534o] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

:global([data-bs-theme="dark"]) .inline-points-chip[b-whv9bt534o] {
    border-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .inline-points-chip:hover:not(:disabled)[b-whv9bt534o] {
    border-color: #f59e0b;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
}

:global([data-bs-theme="dark"]) .inline-points-chip.active[b-whv9bt534o] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.inline-points-chip:disabled[b-whv9bt534o] {
    opacity: 0.4;
    cursor: default;
}

/* ── Points badge in input ── */
.inline-points-badge[b-whv9bt534o] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}

.inline-points-badge:hover[b-whv9bt534o] {
    background: rgba(245, 158, 11, 0.22);
}

.inline-points-badge i[b-whv9bt534o] {
    font-size: 0.65rem;
    color: #f59e0b;
}

:global([data-bs-theme="dark"]) .inline-points-badge[b-whv9bt534o] {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .inline-points-badge:hover[b-whv9bt534o] {
    background: rgba(245, 158, 11, 0.28);
}

:global([data-bs-theme="dark"]) .inline-points-badge i[b-whv9bt534o] {
    color: #fbbf24;
}

/* ── Point targeting (multi-recipient) ── */
.inline-target-row[b-whv9bt534o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
}

.inline-target-label[b-whv9bt534o] {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}

:global([data-bs-theme="dark"]) .inline-target-label[b-whv9bt534o] {
    color: #9ca3af;
}

.inline-target-toggle[b-whv9bt534o] {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

:global([data-bs-theme="dark"]) .inline-target-toggle[b-whv9bt534o] {
    border-color: rgba(255, 255, 255, 0.12);
}

.inline-target-btn[b-whv9bt534o] {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.inline-target-btn:hover:not(:disabled)[b-whv9bt534o] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
}

.inline-target-btn.active[b-whv9bt534o] {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

:global([data-bs-theme="dark"]) .inline-target-btn[b-whv9bt534o] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .inline-target-btn.active[b-whv9bt534o] {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.inline-target-checkboxes[b-whv9bt534o] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    width: 100%;
    padding: 4px 0 0;
}

.inline-target-check-label[b-whv9bt534o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #374151;
    cursor: pointer;
}

.inline-target-check-label input[type="checkbox"][b-whv9bt534o] {
    width: 14px;
    height: 14px;
    accent-color: var(--bs-primary, #0d6efd);
    cursor: pointer;
}

:global([data-bs-theme="dark"]) .inline-target-check-label[b-whv9bt534o] {
    color: #d1d5db;
}

/* ── Mobile adjustments ── */
@media (max-width: 767.98px) {
    .inline-comment-input-row[b-whv9bt534o] {
        padding: 6px 0 2px;
    }

    .inline-input-avatar[b-whv9bt534o] {
        width: 28px;
        height: 28px;
    }

    .inline-comment-input[b-whv9bt534o] {
        font-size: 0.82rem;
    }

    .inline-comment-bubble[b-whv9bt534o] {
        padding: 5px 10px;
    }
}
/* /Features/Recognition/Components/LeaderboardSidebar.razor.rz.scp.css */
/* ============ TOP EARNERS CARD — COMPACT SIDEBAR STYLE ============ */

.lb-card[b-3txqagtfbs] {
    background: #f7f9f9;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Header — stacked: title on top, tabs below */
.lb-header[b-3txqagtfbs] {
    padding: 12px 16px 0;
}

.lb-title[b-3txqagtfbs] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f1419;
}

.lb-title i[b-3txqagtfbs] {
    color: #f59e0b;
    font-size: 0.95rem;
}

/* Period tabs — full width row */
.lb-period-tabs[b-3txqagtfbs] {
    display: flex;
    background: #e7e9ea;
    border-radius: 9999px;
    padding: 2px;
    gap: 2px;
}

.lb-period-tab[b-3txqagtfbs] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    color: #536471;
    padding: 5px 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.lb-period-tab:hover[b-3txqagtfbs] {
    color: #0f1419;
}

.lb-period-tab.active[b-3txqagtfbs] {
    background: #ffffff;
    color: #0f1419;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Body */
.lb-body[b-3txqagtfbs] {
    padding: 8px 0 4px;
}

/* List */
.lb-list[b-3txqagtfbs] {
    display: flex;
    flex-direction: column;
}

/* Item — compact */
.lb-item[b-3txqagtfbs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    transition: background 0.15s ease;
    cursor: default;
}

.lb-item:hover[b-3txqagtfbs] {
    background: rgba(0, 0, 0, 0.03);
}

/* Rank column */
.lb-rank-col[b-3txqagtfbs] {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lb-medal[b-3txqagtfbs] {
    font-size: 0.95rem;
    line-height: 1;
}

.lb-rank-num[b-3txqagtfbs] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #536471;
}

/* Avatar — smaller for sidebar */
.lb-avatar[b-3txqagtfbs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: filter 0.15s;
}

.lb-avatar:hover[b-3txqagtfbs] {
    filter: brightness(0.92);
}

.lb-avatar-placeholder[b-3txqagtfbs] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 0.7rem;
}

/* Info */
.lb-info[b-3txqagtfbs] {
    flex: 1;
    min-width: 0;
}

.lb-name[b-3txqagtfbs] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f1419;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

/* Points badge — compact */
.lb-points-badge[b-3txqagtfbs] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(29, 155, 240, 0.1);
    color: #1d9bf0;
}

.lb-points-badge i[b-3txqagtfbs] {
    font-size: 0.58rem;
    color: #f59e0b;
}

/* Top 1/2/3 special row styles */
.lb-top-1[b-3txqagtfbs] {
    background: rgba(251, 191, 36, 0.04);
}

.lb-top-1:hover[b-3txqagtfbs] {
    background: rgba(251, 191, 36, 0.08);
}

.lb-top-1 .lb-points-badge[b-3txqagtfbs] {
    background: rgba(251, 191, 36, 0.12);
    color: #b45309;
}

/* Footer link */
.lb-footer-link[b-3txqagtfbs] {
    display: block;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #1d9bf0;
    text-decoration: none;
    transition: background 0.15s ease;
}

.lb-footer-link:hover[b-3txqagtfbs] {
    background: rgba(0, 0, 0, 0.03);
}

/* ============ SKELETON ============ */
.lb-skeleton[b-3txqagtfbs] {
    pointer-events: none;
}

.skeleton-circle-sm[b-3txqagtfbs] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e1e8ed;
    animation: lbShimmer 1.5s infinite;
}

.skeleton-avatar[b-3txqagtfbs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e1e8ed;
    flex-shrink: 0;
    animation: lbShimmer 1.5s infinite;
}

.skeleton-text[b-3txqagtfbs] {
    height: 12px;
    border-radius: 4px;
    background: #e1e8ed;
    animation: lbShimmer 1.5s infinite;
}

.skeleton-badge[b-3txqagtfbs] {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background: #e1e8ed;
    flex-shrink: 0;
    animation: lbShimmer 1.5s infinite;
}

@@keyframes lbShimmer {
    0%[b-3txqagtfbs], 100%[b-3txqagtfbs] { opacity: 1; }
    50%[b-3txqagtfbs] { opacity: 0.5; }
}

/* ============ EMPTY STATE ============ */
.lb-empty[b-3txqagtfbs] {
    text-align: center;
    padding: 20px 16px;
}

.lb-empty i[b-3txqagtfbs] {
    font-size: 1.8rem;
    color: #536471;
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}

.lb-empty p[b-3txqagtfbs] {
    font-weight: 700;
    color: #0f1419;
    margin-bottom: 2px;
    font-size: 0.85rem;
}

.lb-empty span[b-3txqagtfbs] {
    font-size: 0.78rem;
    color: #536471;
}
/* /Features/Recognition/Components/ManagerTeamAnalytics.razor.rz.scp.css */
/* ============ TEAM ANALYTICS PAGE ============ */
.team-analytics-page[b-a548frtqsq] {
    padding-bottom: 100px;
}

.loading-state[b-a548frtqsq] {
    text-align: center;
    padding: 60px 20px;
}

/* ============ PERIOD FILTER ============ */
.period-filter[b-a548frtqsq] {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    padding: 6px 12px;
    background: white;
    color: var(--theme-text-main, #212529);
    min-width: 140px;
}

:global([data-bs-theme="dark"]) .period-filter[b-a548frtqsq] {
    background: var(--theme-bg-dark, #1a1d23);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-main, #e1e3e8);
}

/* ============ SUMMARY CARDS ============ */
.summary-cards-grid[b-a548frtqsq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .summary-cards-grid[b-a548frtqsq] {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.summary-card[b-a548frtqsq] {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.summary-card:hover[b-a548frtqsq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

:global([data-bs-theme="dark"]) .summary-card[b-a548frtqsq] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .summary-card:hover[b-a548frtqsq] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.summary-icon[b-a548frtqsq] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.summary-icon.team-size[b-a548frtqsq] {
    background: rgba(59, 130, 246, 0.12);
    color: var(--bs-primary, #0056b3);
}

.summary-icon.recognitions[b-a548frtqsq] {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.summary-icon.participation[b-a548frtqsq] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.summary-icon.average[b-a548frtqsq] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

:global([data-bs-theme="dark"]) .summary-icon.team-size[b-a548frtqsq] {
    background: rgba(59, 130, 246, 0.18);
}

:global([data-bs-theme="dark"]) .summary-icon.recognitions[b-a548frtqsq] {
    background: rgba(236, 72, 153, 0.18);
}

:global([data-bs-theme="dark"]) .summary-icon.participation[b-a548frtqsq] {
    background: rgba(16, 185, 129, 0.18);
}

:global([data-bs-theme="dark"]) .summary-icon.average[b-a548frtqsq] {
    background: rgba(245, 158, 11, 0.18);
}

.summary-label[b-a548frtqsq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
    font-weight: 500;
}

.summary-value[b-a548frtqsq] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--theme-text-main, #212529);
    line-height: 1.2;
}

.summary-unit[b-a548frtqsq] {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============ TOP PERFORMER CARD ============ */
.top-performer-card[b-a548frtqsq] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(236, 72, 153, 0.06) 100%);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

:global([data-bs-theme="dark"]) .top-performer-card[b-a548frtqsq] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(236, 72, 153, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.2);
}

.top-performer-badge[b-a548frtqsq] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.top-performer-info[b-a548frtqsq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-performer-label[b-a548frtqsq] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #6c757d);
}

.top-performer-name[b-a548frtqsq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
}

.top-performer-avatar[b-a548frtqsq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #f59e0b;
    flex-shrink: 0;
    overflow: hidden;
}

.top-performer-avatar img[b-a548frtqsq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============ UNRECOGNIZED CALLOUT ============ */
.unrecognized-card[b-a548frtqsq] {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 4px solid #f59e0b;
}

:global([data-bs-theme="dark"]) .unrecognized-card[b-a548frtqsq] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(245, 158, 11, 0.25);
    border-left-color: #f59e0b;
}

.unrecognized-header[b-a548frtqsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 14px;
}

.unrecognized-header i[b-a548frtqsq] {
    color: #f59e0b;
    font-size: 1rem;
}

:global([data-bs-theme="dark"]) .unrecognized-header[b-a548frtqsq] {
    color: #fbbf24;
}

.unrecognized-list[b-a548frtqsq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unrecognized-member[b-a548frtqsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.unrecognized-name[b-a548frtqsq] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-main, #212529);
}

.btn-recognize[b-a548frtqsq] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--bs-primary, #0056b3);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-recognize:hover[b-a548frtqsq] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--bs-primary, #0056b3);
    text-decoration: none;
}

:global([data-bs-theme="dark"]) .btn-recognize[b-a548frtqsq] {
    background: rgba(59, 130, 246, 0.15);
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .btn-recognize:hover[b-a548frtqsq] {
    background: rgba(59, 130, 246, 0.25);
}

/* ============ ANALYTICS CARD ============ */
.analytics-card[b-a548frtqsq] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

:global([data-bs-theme="dark"]) .analytics-card[b-a548frtqsq] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

.analytics-card-header[b-a548frtqsq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-text-main, #212529);
    margin-bottom: 16px;
}

.analytics-card-header i[b-a548frtqsq] {
    color: var(--bs-primary, #0056b3);
}

/* ============ MEMBER TABLE (Desktop) ============ */
.member-table[b-a548frtqsq] {
    width: 100%;
}

.table-header[b-a548frtqsq] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #6c757d);
    cursor: pointer;
    user-select: none;
}

:global([data-bs-theme="dark"]) .table-header[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.04);
}

.th-name[b-a548frtqsq] {
    flex: 2;
    display: flex;
    align-items: center;
}

.th-stat[b-a548frtqsq] {
    flex: 0.8;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.th-activity[b-a548frtqsq] {
    flex: 1.2;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.table-row[b-a548frtqsq] {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.table-row:hover[b-a548frtqsq] {
    background: rgba(0, 0, 0, 0.02);
}

:global([data-bs-theme="dark"]) .table-row:hover[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.03);
}

.table-row.inactive-row[b-a548frtqsq] {
    opacity: 0.65;
}

.td-name[b-a548frtqsq] {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-stat[b-a548frtqsq] {
    flex: 0.8;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.td-activity[b-a548frtqsq] {
    flex: 1.2;
    text-align: right;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ MEMBER AVATAR ============ */
.member-avatar[b-a548frtqsq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary, #0056b3);
    flex-shrink: 0;
    overflow: hidden;
}

.member-avatar img[b-a548frtqsq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar.small[b-a548frtqsq] {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
}

.member-name[b-a548frtqsq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.inactive-badge[b-a548frtqsq] {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
}

:global([data-bs-theme="dark"]) .inactive-badge[b-a548frtqsq] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* ============ MEMBER CARD LIST (Mobile) ============ */
.member-card-list[b-a548frtqsq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-card[b-a548frtqsq] {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    padding: 14px;
}

:global([data-bs-theme="dark"]) .member-card[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.03);
}

.member-card.inactive-card[b-a548frtqsq] {
    opacity: 0.65;
}

.member-card-header[b-a548frtqsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.member-card-info[b-a548frtqsq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-activity[b-a548frtqsq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

.member-card-stats[b-a548frtqsq] {
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    overflow: hidden;
}

:global([data-bs-theme="dark"]) .member-card-stats[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.04);
}

.mini-stat[b-a548frtqsq] {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-stat + .mini-stat[b-a548frtqsq] {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

:global([data-bs-theme="dark"]) .mini-stat + .mini-stat[b-a548frtqsq] {
    border-left-color: rgba(255, 255, 255, 0.06);
}

.mini-stat-value[b-a548frtqsq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
}

.mini-stat-label[b-a548frtqsq] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============ ACCESS DENIED / EMPTY STATE ============ */
.access-denied-card[b-a548frtqsq],
.empty-state-card[b-a548frtqsq] {
    background: white;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

:global([data-bs-theme="dark"]) .access-denied-card[b-a548frtqsq],
:global([data-bs-theme="dark"]) .empty-state-card[b-a548frtqsq] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

.access-denied-icon[b-a548frtqsq] {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 16px;
}

.access-denied-card h5[b-a548frtqsq],
.empty-state-card h5[b-a548frtqsq] {
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    margin-bottom: 8px;
}

.access-denied-card p[b-a548frtqsq],
.empty-state-card p[b-a548frtqsq] {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: 20px;
}

.empty-icon[b-a548frtqsq] {
    font-size: 2.5rem;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: 12px;
}

.empty-state[b-a548frtqsq] {
    text-align: center;
    padding: 32px 16px;
}

.empty-state h6[b-a548frtqsq] {
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 6px;
}

.empty-state p[b-a548frtqsq] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ SKELETON ============ */
.skeleton-container[b-a548frtqsq] {
    animation: skeleton-fade-b-a548frtqsq 1.5s ease-in-out infinite;
}

@keyframes skeleton-fade-b-a548frtqsq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton-card[b-a548frtqsq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.skeleton-line[b-a548frtqsq] {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

.skeleton-circle[b-a548frtqsq] {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
}

:global([data-bs-theme="dark"]) .skeleton-line[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .skeleton-circle[b-a548frtqsq] {
    background: rgba(255, 255, 255, 0.08);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 479.98px) {
    .summary-cards-grid[b-a548frtqsq] {
        gap: 8px;
    }

    .summary-card[b-a548frtqsq] {
        padding: 12px;
        border-radius: 12px;
    }

    .summary-icon[b-a548frtqsq] {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.95rem;
    }

    .summary-value[b-a548frtqsq] {
        font-size: 1.25rem;
    }

    .summary-label[b-a548frtqsq] {
        font-size: 0.7rem;
    }

    .unrecognized-member[b-a548frtqsq] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-recognize[b-a548frtqsq] {
        margin-left: auto;
    }
}
/* /Features/Recognition/Components/MediaPreview.razor.rz.scp.css */
/* Media Preview Styles */
.media-preview[b-49esab1k0c] {
    margin: 8px 0;
}

.media-preview-container[b-49esab1k0c] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.media-preview-image[b-49esab1k0c] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.media-preview-image:hover[b-49esab1k0c] {
    opacity: 0.95;
}

.media-preview-image:focus[b-49esab1k0c] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.media-preview-gif-container[b-49esab1k0c] {
    position: relative;
    display: inline-block;
}

.media-preview-gif[b-49esab1k0c] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    object-fit: cover;
}

.gif-badge[b-49esab1k0c] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.media-remove-btn[b-49esab1k0c] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    font-size: 0.9rem;
}

.media-remove-btn:hover[b-49esab1k0c] {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.1);
}

.media-remove-btn:focus[b-49esab1k0c] {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Smaller variant for compose preview */
.media-preview.compact .media-preview-image[b-49esab1k0c],
.media-preview.compact .media-preview-gif[b-49esab1k0c] {
    max-height: 150px;
    border-radius: 8px;
}

.media-preview.compact .media-remove-btn[b-49esab1k0c] {
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
    font-size: 0.8rem;
}

/* Reduced motion for GIFs */
@media (prefers-reduced-motion: reduce) {
    .media-preview-gif[b-49esab1k0c] {
        /* Show first frame only - browsers will pause GIF animation */
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .gif-badge[b-49esab1k0c] {
        background: rgba(255, 255, 255, 0.2);
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .media-preview-image[b-49esab1k0c],
    .media-preview-gif[b-49esab1k0c] {
        max-height: 200px;
        border-radius: 8px;
    }
}

/* /Features/Recognition/Components/MilestoneCelebrationCard.razor.rz.scp.css */
/* ============ MILESTONE CELEBRATION CARD ============ */

.milestone-card[b-85ubqxaneg] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.milestone-card:hover[b-85ubqxaneg] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Type-based gradients */
.milestone-birthday[b-85ubqxaneg] {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 30%, #fecdd3 100%);
    border: 1px solid rgba(244, 63, 94, 0.15);
}

.milestone-anniversary[b-85ubqxaneg] {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 20%, #fde68a 50%, #fcd34d 80%, #fbbf24 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 2px 16px rgba(245, 158, 11, 0.15), 0 0 40px rgba(251, 191, 36, 0.08);
}

.milestone-anniversary:hover[b-85ubqxaneg] {
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.2), 0 0 60px rgba(251, 191, 36, 0.12);
}

.milestone-onboarding[b-85ubqxaneg] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 30%, #bbf7d0 100%);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

/* Confetti bg pattern */
.milestone-confetti-bg[b-85ubqxaneg] {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
        radial-gradient(circle at 20% 30%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, currentColor 1.5px, transparent 1.5px),
        radial-gradient(circle at 60% 70%, currentColor 1px, transparent 1px),
        radial-gradient(circle at 10% 80%, currentColor 1.2px, transparent 1.2px),
        radial-gradient(circle at 90% 60%, currentColor 1px, transparent 1px);
    pointer-events: none;
}

/* Anniversary gets animated confetti */
.milestone-anniversary .milestone-confetti-bg[b-85ubqxaneg] {
    opacity: 1;
    background-image: none;
    background: transparent;
}

.milestone-anniversary .milestone-confetti-bg[b-85ubqxaneg]::before,
.milestone-anniversary .milestone-confetti-bg[b-85ubqxaneg]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.milestone-anniversary .milestone-confetti-bg[b-85ubqxaneg]::before {
    background-image:
        radial-gradient(circle at 8% 15%, #f59e0b 2.5px, transparent 2.5px),
        radial-gradient(circle at 25% 8%, #ef4444 2px, transparent 2px),
        radial-gradient(circle at 42% 18%, #3b82f6 2px, transparent 2px),
        radial-gradient(circle at 58% 6%, #8b5cf6 1.8px, transparent 1.8px),
        radial-gradient(circle at 75% 14%, #10b981 2.2px, transparent 2.2px),
        radial-gradient(circle at 92% 10%, #f59e0b 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 88%, #ec4899 2px, transparent 2px),
        radial-gradient(circle at 35% 92%, #06b6d4 1.8px, transparent 1.8px),
        radial-gradient(circle at 55% 85%, #f59e0b 2.2px, transparent 2.2px),
        radial-gradient(circle at 78% 90%, #8b5cf6 2px, transparent 2px),
        radial-gradient(circle at 95% 82%, #ef4444 1.5px, transparent 1.5px);
    opacity: 0.5;
    animation: confettiFall 3s ease-in-out infinite alternate;
}

.milestone-anniversary .milestone-confetti-bg[b-85ubqxaneg]::after {
    background-image:
        radial-gradient(circle at 5% 50%, #fbbf24 1.5px, transparent 1.5px),
        radial-gradient(circle at 18% 35%, #3b82f6 1.8px, transparent 1.8px),
        radial-gradient(circle at 33% 55%, #ef4444 2px, transparent 2px),
        radial-gradient(circle at 48% 40%, #10b981 1.5px, transparent 1.5px),
        radial-gradient(circle at 65% 48%, #ec4899 2px, transparent 2px),
        radial-gradient(circle at 82% 38%, #8b5cf6 1.8px, transparent 1.8px),
        radial-gradient(circle at 70% 65%, #f59e0b 2px, transparent 2px),
        radial-gradient(circle at 45% 72%, #06b6d4 1.5px, transparent 1.5px),
        radial-gradient(circle at 88% 70%, #ef4444 1.8px, transparent 1.8px);
    opacity: 0.35;
    animation: confettiFall 4s ease-in-out infinite alternate-reverse;
}

/* Sparkle shimmer overlay for anniversary */
.milestone-anniversary[b-85ubqxaneg]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(251, 191, 36, 0.06) 60deg,
        transparent 120deg,
        rgba(245, 158, 11, 0.04) 180deg,
        transparent 240deg,
        rgba(251, 191, 36, 0.06) 300deg,
        transparent 360deg
    );
    animation: shimmerRotate 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.milestone-content[b-85ubqxaneg] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px 20px;
    gap: 12px;
    z-index: 1;
}

/* Badge icon */
.milestone-badge[b-85ubqxaneg] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.milestone-birthday .milestone-badge[b-85ubqxaneg] {
    color: #e11d48;
}

.milestone-anniversary .milestone-badge[b-85ubqxaneg] {
    color: #d97706;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2);
    animation: badgePulse 2s ease infinite;
}

.milestone-onboarding .milestone-badge[b-85ubqxaneg] {
    color: #16a34a;
}

/* Avatar */
.milestone-avatar-wrap[b-85ubqxaneg] {
    position: relative;
    display: inline-block;
}

.milestone-avatar[b-85ubqxaneg] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.milestone-anniversary .milestone-avatar[b-85ubqxaneg] {
    border: 3px solid #fbbf24;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25), 0 0 0 4px rgba(251, 191, 36, 0.15);
}

.milestone-avatar-placeholder[b-85ubqxaneg] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.milestone-anniversary .milestone-avatar-placeholder[b-85ubqxaneg] {
    background: linear-gradient(145deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
}

.milestone-emoji[b-85ubqxaneg] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 1.4rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    animation: milestoneEmojiBounce 2s ease infinite;
}

/* Text */
.milestone-text[b-85ubqxaneg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.milestone-title[b-85ubqxaneg] {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}

.milestone-anniversary .milestone-title[b-85ubqxaneg] {
    color: #78350f;
    font-size: 1.05rem;
    text-shadow: 0 1px 2px rgba(251, 191, 36, 0.2);
}

.milestone-subtitle[b-85ubqxaneg] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.milestone-anniversary .milestone-subtitle[b-85ubqxaneg] {
    color: #92400e;
    font-weight: 500;
}

.milestone-points[b-85ubqxaneg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
    background: rgba(251, 191, 36, 0.2);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 4px auto 0;
}

.milestone-points i[b-85ubqxaneg] {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Celebrate button */
.milestone-celebrate-btn[b-85ubqxaneg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.milestone-celebrate-btn:hover[b-85ubqxaneg] {
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.milestone-celebrate-btn:active[b-85ubqxaneg] {
    transform: scale(0.98);
}

.milestone-birthday .milestone-celebrate-btn:hover[b-85ubqxaneg] {
    color: #e11d48;
}

.milestone-anniversary .milestone-celebrate-btn[b-85ubqxaneg] {
    background: rgba(255, 255, 255, 0.9);
    color: #92400e;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.milestone-anniversary .milestone-celebrate-btn:hover[b-85ubqxaneg] {
    color: #b45309;
    background: #fff;
    box-shadow: 0 3px 14px rgba(245, 158, 11, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

.milestone-onboarding .milestone-celebrate-btn:hover[b-85ubqxaneg] {
    color: #16a34a;
}

/* ============ ANIMATIONS ============ */

@@keyframes milestoneEmojiBounce {
    0%[b-85ubqxaneg], 100%[b-85ubqxaneg] { transform: translateY(0) rotate(0deg); }
    25%[b-85ubqxaneg] { transform: translateY(-4px) rotate(-5deg); }
    75%[b-85ubqxaneg] { transform: translateY(-2px) rotate(3deg); }
}

@@keyframes confettiFall {
    0%[b-85ubqxaneg] { transform: translateY(0px); }
    100%[b-85ubqxaneg] { transform: translateY(3px); }
}

@@keyframes shimmerRotate {
    0%[b-85ubqxaneg] { transform: rotate(0deg); }
    100%[b-85ubqxaneg] { transform: rotate(360deg); }
}

@@keyframes badgePulse {
    0%[b-85ubqxaneg], 100%[b-85ubqxaneg] { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2); }
    50%[b-85ubqxaneg] { box-shadow: 0 2px 20px rgba(245, 158, 11, 0.4); }
}

/* ============ DARK MODE ============ */

:global([data-bs-theme="dark"]) .milestone-anniversary[b-85ubqxaneg] {
    background: linear-gradient(135deg, #451a03 0%, #78350f 30%, #92400e 60%, #78350f 100%);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 2px 16px rgba(245, 158, 11, 0.12);
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-title[b-85ubqxaneg] {
    color: #fef3c7;
    text-shadow: none;
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-subtitle[b-85ubqxaneg] {
    color: #fcd34d;
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-badge[b-85ubqxaneg] {
    background: rgba(0, 0, 0, 0.3);
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-avatar[b-85ubqxaneg] {
    border-color: #fbbf24;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3), 0 0 0 4px rgba(251, 191, 36, 0.1);
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-celebrate-btn[b-85ubqxaneg] {
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.3);
}

:global([data-bs-theme="dark"]) .milestone-anniversary .milestone-celebrate-btn:hover[b-85ubqxaneg] {
    background: rgba(251, 191, 36, 0.25);
    color: #fef3c7;
}

:global([data-bs-theme="dark"]) .milestone-birthday[b-85ubqxaneg] {
    background: linear-gradient(135deg, #4c0519 0%, #881337 50%, #9f1239 100%);
    border-color: rgba(244, 63, 94, 0.3);
}

:global([data-bs-theme="dark"]) .milestone-onboarding[b-85ubqxaneg] {
    background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

:global([data-bs-theme="dark"]) .milestone-title[b-85ubqxaneg] {
    color: #f3f4f6;
}

:global([data-bs-theme="dark"]) .milestone-subtitle[b-85ubqxaneg] {
    color: #9ca3af;
}

/* Mobile */
@@media (max-width: 575.98px) {
    .milestone-content[b-85ubqxaneg] {
        padding: 20px 16px 16px;
    }

    .milestone-avatar[b-85ubqxaneg] {
        width: 56px;
        height: 56px;
    }
}
/* /Features/Recognition/Components/PointsBalanceCard.razor.rz.scp.css */
/* ============ POINTS BALANCE CARD STYLES ============ */
/* Scoped to PointsBalanceCard.razor component */

.balance-icon-wrapper[b-tj5m85tp9f] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    flex-shrink: 0;
}

.balance-icon-wrapper i[b-tj5m85tp9f] {
    font-size: 1.5rem;
    color: white;
}

.budget-stat-card[b-tj5m85tp9f] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 12px 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.budget-stat-label[b-tj5m85tp9f] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 4px;
}

.budget-stat-value[b-tj5m85tp9f] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0d6efd;
}

.budget-stat-total[b-tj5m85tp9f] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #adb5bd;
}

/* /Features/Recognition/Components/ProfilePopover.razor.rz.scp.css */
/* ── Profile Popover ── */
.profile-popover-anchor[b-cpk94f2bgt] {
    position: relative;
    display: inline;
    cursor: pointer;
}

.profile-popover-backdrop[b-cpk94f2bgt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.25);
}

.profile-popover[b-cpk94f2bgt] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0;
    overflow: hidden;
    animation: ppSlideIn-b-cpk94f2bgt 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* On small screens, use fixed centering so it never overflows */
@media (max-width: 576px) {
    .profile-popover[b-cpk94f2bgt] {
        position: fixed;
        top: auto;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        width: calc(100vw - 48px);
        max-width: 300px;
    }
}

:global([data-bs-theme="dark"]) .profile-popover[b-cpk94f2bgt] {
    background: var(--surface-elevated, #2a2d35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@keyframes ppSlideIn-b-cpk94f2bgt {
    from {
        opacity: 0;
        scale: 0.96;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

/* Header */
.pp-header[b-cpk94f2bgt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
}

.pp-avatar-wrap[b-cpk94f2bgt] {
    flex-shrink: 0;
}

.pp-avatar[b-cpk94f2bgt] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:global([data-bs-theme="dark"]) .pp-avatar[b-cpk94f2bgt] {
    border-color: rgba(255, 255, 255, 0.1);
}

.pp-avatar-placeholder[b-cpk94f2bgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.pp-info[b-cpk94f2bgt] {
    min-width: 0;
    flex: 1;
}

.pp-name[b-cpk94f2bgt] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global([data-bs-theme="dark"]) .pp-name[b-cpk94f2bgt] {
    color: #e1e3e8;
}

.pp-department[b-cpk94f2bgt] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global([data-bs-theme="dark"]) .pp-department[b-cpk94f2bgt] {
    color: #9ca3af;
}

/* Stats row */
.pp-stats[b-cpk94f2bgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

:global([data-bs-theme="dark"]) .pp-stats[b-cpk94f2bgt] {
    border-top-color: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pp-stat[b-cpk94f2bgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 1px;
}

.pp-stat-value[b-cpk94f2bgt] {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a2e;
}

:global([data-bs-theme="dark"]) .pp-stat-value[b-cpk94f2bgt] {
    color: #e1e3e8;
}

.pp-stat-label[b-cpk94f2bgt] {
    font-size: 0.72rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.pp-stat-divider[b-cpk94f2bgt] {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    flex-shrink: 0;
}

:global([data-bs-theme="dark"]) .pp-stat-divider[b-cpk94f2bgt] {
    background: rgba(255, 255, 255, 0.1);
}

/* Action button */
.pp-actions[b-cpk94f2bgt] {
    padding: 10px 16px 12px;
}

.pp-action-btn[b-cpk94f2bgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.pp-action-btn:hover[b-cpk94f2bgt] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
    color: var(--bs-primary, #0d6efd);
    text-decoration: none;
}

:global([data-bs-theme="dark"]) .pp-action-btn[b-cpk94f2bgt] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}

:global([data-bs-theme="dark"]) .pp-action-btn:hover[b-cpk94f2bgt] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.2);
}
/* /Features/Recognition/Components/ReactionDetailModal.razor.rz.scp.css */
/* ============ REACTION DETAIL MODAL ============ */

.rdm-backdrop[b-q6gmez25qe] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rdmFadeIn 0.15s ease;
}

.rdm-modal[b-q6gmez25qe] {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: rdmSlideUp 0.2s ease-out;
}

.rdm-header[b-q6gmez25qe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.rdm-title[b-q6gmez25qe] {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin: 0;
}

.rdm-close[b-q6gmez25qe] {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.rdm-close:hover[b-q6gmez25qe] {
    background: #f3f4f6;
    color: #1f2937;
}

/* Tabs */
.rdm-tabs[b-q6gmez25qe] {
    display: flex;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rdm-tab[b-q6gmez25qe] {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rdm-tab:hover[b-q6gmez25qe] {
    background: #f3f4f6;
}

.rdm-tab.active[b-q6gmez25qe] {
    background: var(--bs-primary, #0056b3);
    color: #fff;
}

.rdm-tab-emoji[b-q6gmez25qe] {
    font-size: 0.9rem;
    line-height: 1;
}

/* User list */
.rdm-list[b-q6gmez25qe] {
    overflow-y: auto;
    padding: 8px 16px 16px;
    flex: 1;
}

.rdm-user-row[b-q6gmez25qe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}

.rdm-user-row:last-child[b-q6gmez25qe] {
    border-bottom: none;
}

.rdm-user-row:hover[b-q6gmez25qe] {
    background: #f9fafb;
    border-radius: 8px;
}

.rdm-avatar[b-q6gmez25qe] {
    position: relative;
    flex-shrink: 0;
}

.rdm-avatar img[b-q6gmez25qe] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.rdm-avatar-placeholder[b-q6gmez25qe] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
}

.rdm-reaction-badge[b-q6gmez25qe] {
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-size: 0.7rem;
    line-height: 1;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.1);
}

.rdm-user-name[b-q6gmez25qe] {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1f2937;
}

.rdm-empty[b-q6gmez25qe] {
    text-align: center;
    padding: 32px 16px;
    color: #9ca3af;
    font-size: 0.88rem;
}

@@keyframes rdmFadeIn {
    from[b-q6gmez25qe] { opacity: 0; }
    to[b-q6gmez25qe] { opacity: 1; }
}

@@keyframes rdmSlideUp {
    from[b-q6gmez25qe] { opacity: 0; transform: translateY(20px) scale(0.95); }
    to[b-q6gmez25qe] { opacity: 1; transform: translateY(0) scale(1); }
}

@@media (max-width: 575.98px) {
    .rdm-modal[b-q6gmez25qe] {
        width: 95%;
        max-height: 80vh;
    }
}

/* Dark mode */
:global([data-bs-theme="dark"]) .rdm-modal[b-q6gmez25qe] {
    background: #1e2028;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

:global([data-bs-theme="dark"]) .rdm-header[b-q6gmez25qe] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .rdm-title[b-q6gmez25qe] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .rdm-close[b-q6gmez25qe] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .rdm-close:hover[b-q6gmez25qe] {
    background: rgba(255, 255, 255, 0.08);
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .rdm-tabs[b-q6gmez25qe] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .rdm-tab[b-q6gmez25qe] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .rdm-tab:hover[b-q6gmez25qe] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .rdm-user-row[b-q6gmez25qe] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .rdm-user-row:hover[b-q6gmez25qe] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .rdm-user-name[b-q6gmez25qe] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .rdm-reaction-badge[b-q6gmez25qe] {
    background: #2a2d35;
    box-shadow: 0 0 0 2px #1e2028, 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* /Features/Recognition/Components/ReactionPicker.razor.rz.scp.css */
/* ============================================================
   ReactionPicker — LinkedIn-style reaction summary + popup
   ============================================================ */

/* Container */
.rp-container[b-hnvp10nh7q] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Trigger / summary button ── */
.rp-trigger[b-hnvp10nh7q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 4px 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1;
}

:global([data-bs-theme="dark"]) .rp-trigger[b-hnvp10nh7q] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .rp-summary-text[b-hnvp10nh7q] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .rp-trigger.reacted .rp-summary-text[b-hnvp10nh7q] {
    color: #e1e3e8;
}

.rp-trigger:hover[b-hnvp10nh7q] {
    color: var(--bs-primary, #0056b3);
}

.rp-trigger.reacted[b-hnvp10nh7q] {
    color: var(--bs-primary, #0056b3);
}

/* Overlapping emoji circles */
.rp-icons[b-hnvp10nh7q] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.rp-icon-circle[b-hnvp10nh7q] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1;
    margin-right: -6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    position: relative;
}

:global([data-bs-theme="dark"]) .rp-icon-circle[b-hnvp10nh7q] {
    background: #2a2d35;
    border-color: #2a2d35;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.rp-icon-circle:first-child[b-hnvp10nh7q] { z-index: 3; }
.rp-icon-circle:nth-child(2)[b-hnvp10nh7q] { z-index: 2; }
.rp-icon-circle:nth-child(3)[b-hnvp10nh7q] { z-index: 1; }
.rp-icon-circle:last-child[b-hnvp10nh7q] { margin-right: 0; }

/* Summary text */
.rp-summary-text[b-hnvp10nh7q] {
    font-size: 0.82rem;
    font-weight: 400;
    margin-left: 4px;
    white-space: nowrap;
    color: #6b7280;
    transition: color 0.15s;
}

.rp-trigger:hover .rp-summary-text[b-hnvp10nh7q] {
    color: var(--bs-primary, #0056b3);
}

.rp-trigger.reacted .rp-summary-text[b-hnvp10nh7q] {
    color: #374151;
    font-weight: 500;
}

.rp-summary-text.rp-muted[b-hnvp10nh7q] {
    color: #9ca3af;
}

.rp-trigger:hover .rp-summary-text.rp-muted[b-hnvp10nh7q] {
    color: var(--bs-primary, #0056b3);
}

/* Empty state icon */
.rp-empty-icon[b-hnvp10nh7q] {
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}

.rp-trigger:hover .rp-empty-icon[b-hnvp10nh7q] {
    opacity: 1;
    transform: scale(1.1);
}

/* ── Reaction picker popup ── */
.rp-popup[b-hnvp10nh7q] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 6px 8px;
    display: flex;
    gap: 2px;
    z-index: 1000;
    animation: rpPopIn 0.2s ease-out;
}

:global([data-bs-theme="dark"]) .rp-popup[b-hnvp10nh7q] {
    background: #2a2d35;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@@keyframes rpPopIn {
    from[b-hnvp10nh7q] {
        opacity: 0;
        transform: scale(0.85) translateY(6px);
    }
    to[b-hnvp10nh7q] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Reaction option buttons */
.rp-option[b-hnvp10nh7q] {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    position: relative;
}

.rp-option:hover[b-hnvp10nh7q] {
    transform: scale(1.35) translateY(-4px);
    background: #f3f4f6;
}

:global([data-bs-theme="dark"]) .rp-option:hover[b-hnvp10nh7q] {
    background: rgba(255, 255, 255, 0.08);
}

.rp-option.selected[b-hnvp10nh7q] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
}

.rp-option.selected:hover[b-hnvp10nh7q] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.14);
}

.rp-option.processing[b-hnvp10nh7q] {
    opacity: 0.5;
    pointer-events: none;
}

.rp-emoji[b-hnvp10nh7q] {
    font-size: 1.6rem;
    line-height: 1;
    transition: transform 0.15s;
}

/* Label tooltip on hover */
.rp-label[b-hnvp10nh7q] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.rp-option:hover .rp-label[b-hnvp10nh7q] {
    opacity: 1;
}

/* ── Per-reaction hover animations ── */
.rp-option[data-reaction="like"]:hover .rp-emoji[b-hnvp10nh7q] {
    animation: rpLikeBounce 0.4s ease;
}

.rp-option[data-reaction="love"]:hover .rp-emoji[b-hnvp10nh7q] {
    animation: rpLovePulse 0.5s ease;
}

.rp-option[data-reaction="celebrate"]:hover .rp-emoji[b-hnvp10nh7q] {
    animation: rpCelebratePop 0.5s ease;
}

.rp-option[data-reaction="inspire"]:hover .rp-emoji[b-hnvp10nh7q] {
    animation: rpInspireGlow 0.5s ease;
}

@@keyframes rpLikeBounce {
    0%[b-hnvp10nh7q], 100%[b-hnvp10nh7q] { transform: translateY(0) rotate(0deg); }
    25%[b-hnvp10nh7q] { transform: translateY(-6px) rotate(-10deg); }
    50%[b-hnvp10nh7q] { transform: translateY(-2px) rotate(5deg); }
    75%[b-hnvp10nh7q] { transform: translateY(-4px) rotate(-3deg); }
}

@@keyframes rpLovePulse {
    0%[b-hnvp10nh7q], 100%[b-hnvp10nh7q] { transform: scale(1); }
    15%[b-hnvp10nh7q] { transform: scale(1.3); }
    30%[b-hnvp10nh7q] { transform: scale(1); }
    45%[b-hnvp10nh7q] { transform: scale(1.25); }
}

@@keyframes rpCelebratePop {
    0%[b-hnvp10nh7q] { transform: scale(1) rotate(0deg); }
    20%[b-hnvp10nh7q] { transform: scale(1.3) rotate(-12deg); }
    40%[b-hnvp10nh7q] { transform: scale(1.1) rotate(8deg); }
    60%[b-hnvp10nh7q] { transform: scale(1.25) rotate(-4deg); }
    80%[b-hnvp10nh7q] { transform: scale(1.05) rotate(2deg); }
    100%[b-hnvp10nh7q] { transform: scale(1) rotate(0deg); }
}

@@keyframes rpInspireGlow {
    0%[b-hnvp10nh7q], 100%[b-hnvp10nh7q] { transform: scale(1); filter: brightness(1); }
    30%[b-hnvp10nh7q] { transform: scale(1.2) translateY(-2px); filter: brightness(1.4); }
    60%[b-hnvp10nh7q] { transform: scale(1.25) translateY(-3px); filter: brightness(1.5); }
    80%[b-hnvp10nh7q] { transform: scale(1.1); filter: brightness(1.2); }
}

/* ── Mobile touch ── */
@@media (hover: none) {
    .rp-option:hover[b-hnvp10nh7q] {
        transform: none;
        background: transparent;
    }

    .rp-option:active[b-hnvp10nh7q] {
        transform: scale(1.3) translateY(-4px);
        background: #f3f4f6;
    }

    .rp-option.selected:hover[b-hnvp10nh7q] {
        background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
    }

    .rp-label[b-hnvp10nh7q] {
        display: none;
    }
}

@@media (max-width: 576px) {
    .rp-popup[b-hnvp10nh7q] {
        left: 0;
    }

    .rp-option[b-hnvp10nh7q] {
        width: 46px;
        height: 46px;
    }

    .rp-emoji[b-hnvp10nh7q] {
        font-size: 1.4rem;
    }
}

/* ── Reduced motion ── */
@@media (prefers-reduced-motion: reduce) {
    .rp-popup[b-hnvp10nh7q] {
        animation: none;
    }

    .rp-option:hover[b-hnvp10nh7q] {
        transform: scale(1.15);
    }

    .rp-option:hover .rp-emoji[b-hnvp10nh7q] {
        animation: none !important;
    }
}
/* /Features/Recognition/Components/RecognitionCard.razor.rz.scp.css */
/* ============ TWITTER/X-STYLE RECOGNITION POST ============ */

/* ── Post container ── */
.tweet-post[b-qxosv14sn0] {
    padding: 12px 16px;
    border-bottom: 1px solid #eff3f4;
    transition: background-color 0.15s ease;
    cursor: default;
}

.tweet-post:hover[b-qxosv14sn0] {
    background-color: rgba(0, 0, 0, 0.015);
}

:global([data-bs-theme="dark"]) .tweet-post[b-qxosv14sn0] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .tweet-post:hover[b-qxosv14sn0] {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── Pinned / context line (like "retweet" indicator) ── */
.tweet-context-line[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 56px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #71767b;
}

.tweet-context-line i[b-qxosv14sn0] {
    font-size: 0.72rem;
    color: #f59e0b;
}

:global([data-bs-theme="dark"]) .tweet-context-line[b-qxosv14sn0] {
    color: #8b8f94;
}

/* ── Post body: avatar + content ── */
.tweet-body[b-qxosv14sn0] {
    display: flex;
    gap: 12px;
}

/* ── Avatar ── */
.tweet-avatar-col[b-qxosv14sn0] {
    flex-shrink: 0;
}

.tweet-avatar[b-qxosv14sn0] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    transition: filter 0.15s;
}

.tweet-avatar:hover[b-qxosv14sn0] {
    filter: brightness(0.9);
}

.tweet-avatar-placeholder[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ── Content column ── */
.tweet-content-col[b-qxosv14sn0] {
    flex: 1;
    min-width: 0;
}

/* ── Header row ── */
.tweet-header[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.3;
}

.tweet-header-left[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.tweet-display-name[b-qxosv14sn0] {
    font-weight: 700;
    font-size: 0.94rem;
    color: #0f1419;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 160px;
}

.tweet-display-name:hover[b-qxosv14sn0] {
    text-decoration: underline;
}

:global([data-bs-theme="dark"]) .tweet-display-name[b-qxosv14sn0] {
    color: #e7e9ea;
}

.tweet-handle[b-qxosv14sn0] {
    font-size: 0.84rem;
    color: #71767b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

:global([data-bs-theme="dark"]) .tweet-handle[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-separator[b-qxosv14sn0] {
    color: #71767b;
    font-size: 0.84rem;
    flex-shrink: 0;
}

:global([data-bs-theme="dark"]) .tweet-separator[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-time[b-qxosv14sn0] {
    font-size: 0.84rem;
    color: #71767b;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.tweet-time:hover[b-qxosv14sn0] {
    text-decoration: underline;
    color: #71767b;
}

:global([data-bs-theme="dark"]) .tweet-time[b-qxosv14sn0] {
    color: #8b8f94;
}

:global([data-bs-theme="dark"]) .tweet-time:hover[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-more-btn[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #71767b;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.tweet-more-btn:hover[b-qxosv14sn0] {
    background-color: rgba(29, 155, 240, 0.1);
    color: #1d9bf0;
}

:global([data-bs-theme="dark"]) .tweet-more-btn[b-qxosv14sn0] {
    color: #8b8f94;
}

:global([data-bs-theme="dark"]) .tweet-more-btn:hover[b-qxosv14sn0] {
    background-color: rgba(29, 155, 240, 0.15);
    color: #1d9bf0;
}

/* ── Recognition context ── */
.tweet-recognition-context[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 0.82rem;
    color: #71767b;
    flex-wrap: wrap;
}

.tweet-recognition-context i[b-qxosv14sn0] {
    color: #f59e0b;
    font-size: 0.78rem;
}

:global([data-bs-theme="dark"]) .tweet-recognition-context[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-mention[b-qxosv14sn0] {
    color: #1d9bf0;
    font-weight: 600;
    cursor: pointer;
}

.tweet-mention:hover[b-qxosv14sn0] {
    text-decoration: underline;
}

.tweet-mention-list[b-qxosv14sn0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.tweet-mention-separator[b-qxosv14sn0] {
    margin-right: 3px;
    color: #71767b;
}

:global([data-bs-theme="dark"]) .tweet-mention-separator[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-mention-overflow[b-qxosv14sn0] {
    margin-left: 3px;
    font-size: 0.82rem;
    color: #71767b;
    font-weight: 500;
}

:global([data-bs-theme="dark"]) .tweet-mention-overflow[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-points-badge[b-qxosv14sn0] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.tweet-points-badge i[b-qxosv14sn0] {
    color: #f59e0b;
    font-size: 0.68rem;
}

:global([data-bs-theme="dark"]) .tweet-points-badge[b-qxosv14sn0] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .tweet-points-badge i[b-qxosv14sn0] {
    color: #fbbf24;
}

/* ── Message text ── */
.tweet-text-link[b-qxosv14sn0] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tweet-text[b-qxosv14sn0] {
    margin-top: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #0f1419;
    white-space: pre-wrap;
    word-break: break-word;
}

:global([data-bs-theme="dark"]) .tweet-text[b-qxosv14sn0] {
    color: #e7e9ea;
}

/* ── Media ── */
.tweet-media[b-qxosv14sn0] {
    margin-top: 12px;
}

.tweet-media :deep(.media-preview)[b-qxosv14sn0] {
    margin: 0;
}

.tweet-media :deep(.media-preview-container)[b-qxosv14sn0] {
    display: block;
}

.tweet-media :deep(.media-preview-gif-container)[b-qxosv14sn0] {
    display: block;
}

.tweet-media :deep(.media-preview-image)[b-qxosv14sn0],
.tweet-media :deep(.media-preview-gif)[b-qxosv14sn0] {
    max-width: 100%;
    border-radius: 16px;
    border: none;
    object-fit: contain;
    max-height: 400px;
}

/* ── Hashtags ── */
.tweet-hashtags[b-qxosv14sn0] {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.tweet-hashtag[b-qxosv14sn0] {
    color: #1d9bf0;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 400;
}

.tweet-hashtag:hover[b-qxosv14sn0] {
    text-decoration: underline;
    color: #1a8cd8;
}

/* ── Campaign badge ── */
.tweet-campaign[b-qxosv14sn0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.tweet-campaign i[b-qxosv14sn0] {
    font-size: 0.7rem;
    color: #f59e0b;
}

:global([data-bs-theme="dark"]) .tweet-campaign[b-qxosv14sn0] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #818cf8;
    border-color: rgba(102, 126, 234, 0.25);
}

/* ═══════════ ACTION BAR (Twitter-style) ═══════════ */
.tweet-actions[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: -8px;
    max-width: 400px;
    justify-content: space-between;
    -webkit-user-select: none;
    user-select: none;
}

.tweet-action-btn[b-qxosv14sn0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: #71767b;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
    line-height: 1;
}

:global([data-bs-theme="dark"]) .tweet-action-btn[b-qxosv14sn0] {
    color: #8b8f94;
}

.tweet-action-icon-wrap[b-qxosv14sn0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background-color 0.15s;
}

.tweet-action-icon-wrap i[b-qxosv14sn0] {
    font-size: 1.05rem;
}

.tweet-action-count[b-qxosv14sn0] {
    font-size: 0.78rem;
    font-weight: 400;
    transition: color 0.15s;
}

/* Comment action — blue hover */
.tweet-action-comment:hover[b-qxosv14sn0] {
    color: #1d9bf0;
}

.tweet-action-comment:hover .tweet-action-icon-wrap[b-qxosv14sn0] {
    background-color: rgba(29, 155, 240, 0.1);
}

.tweet-action-comment.active[b-qxosv14sn0] {
    color: #1d9bf0;
}

/* Like action — pink/red hover */
.tweet-action-like:hover[b-qxosv14sn0] {
    color: #f91880;
}

.tweet-action-like:hover .tweet-action-icon-wrap[b-qxosv14sn0] {
    background-color: rgba(249, 24, 128, 0.1);
}

.tweet-action-like.active[b-qxosv14sn0] {
    color: #f91880;
}

.tweet-action-emoji[b-qxosv14sn0] {
    font-size: 1.1rem;
    line-height: 1;
}

/* View reactions — green hover */
.tweet-action-view:hover[b-qxosv14sn0] {
    color: #00ba7c;
}

.tweet-action-view:hover .tweet-action-icon-wrap[b-qxosv14sn0] {
    background-color: rgba(0, 186, 124, 0.1);
}

.tweet-reaction-icons[b-qxosv14sn0] {
    display: inline-flex;
    align-items: center;
}

.tweet-reaction-mini[b-qxosv14sn0] {
    font-size: 0.85rem;
    margin-left: -2px;
    line-height: 1;
}

.tweet-reaction-mini:first-child[b-qxosv14sn0] {
    margin-left: 0;
}

/* Share action — blue hover */
.tweet-action-share:hover[b-qxosv14sn0] {
    color: #1d9bf0;
}

.tweet-action-share:hover .tweet-action-icon-wrap[b-qxosv14sn0] {
    background-color: rgba(29, 155, 240, 0.1);
}

/* ═══════════ REACTION PICKER POPUP ═══════════ */
.tweet-action-like-wrap[b-qxosv14sn0] {
    position: relative;
    display: inline-flex;
}

.tweet-reaction-popup[b-qxosv14sn0] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    background: #ffffff;
    border-radius: 28px;
    padding: 4px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 100;
    animation: tweetPopupIn-b-qxosv14sn0 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

:global([data-bs-theme="dark"]) .tweet-reaction-popup[b-qxosv14sn0] {
    background: #2a2d35;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@keyframes tweetPopupIn-b-qxosv14sn0 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.tweet-reaction-option[b-qxosv14sn0] {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tweet-reaction-option:hover[b-qxosv14sn0] {
    transform: scale(1.35) translateY(-4px);
}

.tweet-reaction-option.selected[b-qxosv14sn0] {
    background: rgba(29, 155, 240, 0.12);
}

:global([data-bs-theme="dark"]) .tweet-reaction-option.selected[b-qxosv14sn0] {
    background: rgba(29, 155, 240, 0.2);
}

.tweet-reaction-emoji[b-qxosv14sn0] {
    pointer-events: none;
}

/* Reaction-specific hover animations */
.tweet-reaction-option[data-reaction="like"]:hover[b-qxosv14sn0] {
    animation: tweetLikeBounce-b-qxosv14sn0 0.5s ease;
}

.tweet-reaction-option[data-reaction="love"]:hover[b-qxosv14sn0] {
    animation: tweetLovePulse-b-qxosv14sn0 0.5s ease;
}

.tweet-reaction-option[data-reaction="celebrate"]:hover[b-qxosv14sn0] {
    animation: tweetCelebratePop-b-qxosv14sn0 0.5s ease;
}

.tweet-reaction-option[data-reaction="inspire"]:hover[b-qxosv14sn0] {
    animation: tweetInspireGlow-b-qxosv14sn0 0.5s ease;
}

@keyframes tweetLikeBounce-b-qxosv14sn0 {
    0%, 100% { transform: scale(1.35) translateY(-4px); }
    50% { transform: scale(1.5) translateY(-10px); }
}

@keyframes tweetLovePulse-b-qxosv14sn0 {
    0%, 100% { transform: scale(1.35) translateY(-4px); }
    50% { transform: scale(1.5) translateY(-6px); }
}

@keyframes tweetCelebratePop-b-qxosv14sn0 {
    0% { transform: scale(1.35) translateY(-4px); }
    40% { transform: scale(1.55) translateY(-8px) rotate(10deg); }
    100% { transform: scale(1.35) translateY(-4px) rotate(0deg); }
}

@keyframes tweetInspireGlow-b-qxosv14sn0 {
    0%, 100% { transform: scale(1.35) translateY(-4px); filter: brightness(1); }
    50% { transform: scale(1.5) translateY(-6px); filter: brightness(1.3); }
}

/* Mobile: larger picker popup */
@media (hover: none) {
    .tweet-reaction-popup[b-qxosv14sn0] {
        bottom: calc(100% + 10px);
        padding: 6px 10px;
    }

    .tweet-reaction-option[b-qxosv14sn0] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }
}

/* ═══════════ MOBILE OPTIMIZATIONS ═══════════ */
@media (max-width: 767.98px) {
    .tweet-post[b-qxosv14sn0] {
        padding: 12px;
    }

    .tweet-body[b-qxosv14sn0] {
        gap: 10px;
    }

    .tweet-avatar[b-qxosv14sn0] {
        width: 40px;
        height: 40px;
    }

    .tweet-display-name[b-qxosv14sn0] {
        max-width: 120px;
        font-size: 0.9rem;
    }

    .tweet-handle[b-qxosv14sn0] {
        max-width: 80px;
    }

    .tweet-text[b-qxosv14sn0] {
        font-size: 0.92rem;
    }

    .tweet-actions[b-qxosv14sn0] {
        max-width: 100%;
    }

    /* Larger touch targets */
    .tweet-action-icon-wrap[b-qxosv14sn0] {
        width: 38px;
        height: 38px;
    }

    .tweet-context-line[b-qxosv14sn0] {
        padding-left: 50px;
    }
}
/* /Features/Recognition/Components/RecognitionCardSkeleton.razor.rz.scp.css */
.skeleton-tweet-post[b-6qlyybih0a] {
    padding: 12px 16px;
    border-bottom: 1px solid #eff3f4;
}

:global([data-bs-theme="dark"]) .skeleton-tweet-post[b-6qlyybih0a] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* /Features/Recognition/Components/RecognitionDashboard.razor.rz.scp.css */
/* ============ RECOGNITION DASHBOARD STYLES ============ */
/* Scoped to RecognitionDashboard.razor component */

/* ============ PAGE LAYOUT ============ */
.dashboard-page[b-jflum27pv5] {
    padding-bottom: 100px;
}

.loading-state[b-jflum27pv5] {
    text-align: center;
    padding: 60px 20px;
}

/* ============ POINTS CARD ============ */
.points-card[b-jflum27pv5] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.points-header[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    margin-bottom: 20px;
}

.points-header i[b-jflum27pv5] {
    font-size: 1.1rem;
}

.points-balance[b-jflum27pv5] {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.08) 0%, rgba(0, 86, 179, 0.03) 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}

.balance-amount[b-jflum27pv5] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bs-primary, #0056b3);
    line-height: 1;
}

.balance-label[b-jflum27pv5] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #6c757d);
    margin-top: 8px;
}

.points-stats[b-jflum27pv5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 20px;
}

.stat-item[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-item i[b-jflum27pv5] {
    font-size: 1.5rem;
}

.stat-item.earned i[b-jflum27pv5] {
    color: var(--bs-success, #198754);
}

.stat-item.spent i[b-jflum27pv5] {
    color: #fd7e14;
}

.stat-info[b-jflum27pv5] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-jflum27pv5] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-main, #212529);
}

.stat-label[b-jflum27pv5] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

.stat-divider[b-jflum27pv5] {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
}

/* ============ BUDGET SECTION ============ */
.budget-section[b-jflum27pv5] {
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.budget-title[b-jflum27pv5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    margin-bottom: 16px;
}

.budget-item[b-jflum27pv5] {
    margin-bottom: 14px;
}

.budget-header[b-jflum27pv5] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.budget-label[b-jflum27pv5] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6c757d);
}

.budget-value[b-jflum27pv5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.budget-bar[b-jflum27pv5] {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.budget-fill[b-jflum27pv5] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.budget-fill.daily[b-jflum27pv5] {
    background: linear-gradient(90deg, var(--bs-success, #198754) 0%, #20c997 100%);
}

.budget-fill.weekly[b-jflum27pv5] {
    background: linear-gradient(90deg, #0dcaf0 0%, var(--bs-primary, #0056b3) 100%);
}

/* ============ BADGES CARD ============ */
.badges-card[b-jflum27pv5] {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.badges-card-header[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-main, #212529);
    margin-bottom: 12px;
}

.badges-card-header i[b-jflum27pv5] {
    font-size: 1.1rem;
    color: var(--bs-primary, #0056b3);
}

.badges-view-all[b-jflum27pv5] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    text-decoration: none;
}

.badges-view-all:hover[b-jflum27pv5] {
    text-decoration: underline;
}

/* ============ ACTIVITY CARD ============ */
.activity-card[b-jflum27pv5] {
    background: white;
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.activity-tabs[b-jflum27pv5] {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.tab-btn[b-jflum27pv5] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6c757d);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn.active[b-jflum27pv5] {
    color: var(--bs-primary, #0056b3);
    border-bottom-color: var(--bs-primary, #0056b3);
}

.tab-count[b-jflum27pv5] {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    font-size: 0.7rem;
}

.tab-btn.active .tab-count[b-jflum27pv5] {
    background: rgba(0, 86, 179, 0.15);
    color: var(--bs-primary, #0056b3);
}

.activity-content[b-jflum27pv5] {
    padding: 16px;
}

/* ============ RECOGNITION LIST ============ */
.recognition-list[b-jflum27pv5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recognition-item[b-jflum27pv5] {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 12px;
}

.recognition-avatar[b-jflum27pv5] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary, #0056b3) 0%, #004494 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recognition-avatar span[b-jflum27pv5] {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.recognition-avatar.sent[b-jflum27pv5] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.recognition-content[b-jflum27pv5] {
    flex: 1;
    min-width: 0;
}

.recognition-header[b-jflum27pv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.recognition-name[b-jflum27pv5] {
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    font-size: 0.9rem;
}

.recognition-time[b-jflum27pv5] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

.recognition-message[b-jflum27pv5] {
    margin: 0 0 8px 0;
    color: var(--theme-text-muted, #6c757d);
    font-size: 0.85rem;
    line-height: 1.4;
}

.points-badge[b-jflum27pv5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border: 1px solid #ffe69c;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #664d03;
}

.points-badge i[b-jflum27pv5] {
    color: #ffc107;
}

.points-badge.sent[b-jflum27pv5] {
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
    border-color: #9ec5fe;
    color: var(--bs-primary, #0056b3);
}

.points-badge.sent i[b-jflum27pv5] {
    color: var(--bs-primary, #0056b3);
}

/* ============ TRANSACTIONS ============ */
.transactions-list[b-jflum27pv5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transaction-item[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 10px;
}

.transaction-icon[b-jflum27pv5] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transaction-icon.earned[b-jflum27pv5] {
    background: rgba(25, 135, 84, 0.12);
    color: var(--bs-success, #198754);
}

.transaction-icon.spent[b-jflum27pv5] {
    background: rgba(255, 193, 7, 0.15);
    color: #d4a017;
}

.transaction-icon.bonus[b-jflum27pv5] {
    background: rgba(13, 202, 240, 0.15);
    color: #0aa2c0;
}

.transaction-icon.adjustment[b-jflum27pv5] {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

.transaction-content[b-jflum27pv5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transaction-desc[b-jflum27pv5] {
    font-size: 0.85rem;
    color: var(--theme-text-main, #212529);
}

.transaction-date[b-jflum27pv5] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

.transaction-amount[b-jflum27pv5] {
    font-size: 0.9rem;
    font-weight: 700;
}

.transaction-amount.positive[b-jflum27pv5] {
    color: var(--bs-success, #198754);
}

.transaction-amount.negative[b-jflum27pv5] {
    color: var(--bs-danger, #dc3545);
}

/* ============ EMPTY STATE ============ */
.empty-state[b-jflum27pv5] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-jflum27pv5] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.1) 0%, rgba(0, 86, 179, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-jflum27pv5] {
    font-size: 1.75rem;
    color: var(--bs-primary, #0056b3);
    opacity: 0.5;
}

.empty-state h6[b-jflum27pv5] {
    font-weight: 600;
    margin-bottom: 4px;
}

.empty-state p[b-jflum27pv5] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #6c757d);
    margin: 0;
}

.btn-empty[b-jflum27pv5] {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--bs-primary, #0056b3);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============ LEADERBOARD ============ */
.leaderboard-card[b-jflum27pv5] {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 16px;
}

.leaderboard-header[b-jflum27pv5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.leaderboard-title[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
}

.leaderboard-title i[b-jflum27pv5] {
    color: #ffc107;
    font-size: 1.1rem;
}

.period-select[b-jflum27pv5] {
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    background: white;
    cursor: pointer;
}

.leaderboard-content[b-jflum27pv5] {
    padding: 20px 20px 8px;
}

.leaderboard-content > :last-child[b-jflum27pv5] {
    margin-bottom: 0;
}

/* ============ PODIUM ============ */
.podium[b-jflum27pv5] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 0 16px;
}

.podium-item[b-jflum27pv5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-radius: 16px;
    background: var(--theme-bg-dark, #f8f9fa);
    flex: 1;
    max-width: 120px;
}

.podium-item.first[b-jflum27pv5] {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border: 1px solid #ffe69c;
    padding-bottom: 24px;
}

.podium-item.second[b-jflum27pv5] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
}

.podium-item.third[b-jflum27pv5] {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8dd 100%);
    border: 1px solid #ffd4bd;
}

.podium-item.is-you[b-jflum27pv5] {
    border: 2px solid var(--bs-primary, #0056b3);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.15);
}

.podium-avatar[b-jflum27pv5] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary, #0056b3) 0%, #004494 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.podium-item.first .podium-avatar[b-jflum27pv5] {
    width: 56px;
    height: 56px;
}

.podium-avatar span[b-jflum27pv5] {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.podium-item.first .podium-avatar span[b-jflum27pv5] {
    font-size: 1rem;
}

.podium-medal[b-jflum27pv5] {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.podium-item.first .podium-medal[b-jflum27pv5] {
    font-size: 2rem;
}

.podium-name[b-jflum27pv5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    text-align: center;
    margin-bottom: 2px;
}

.podium-points[b-jflum27pv5] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ LEADERBOARD LIST ============ */
.dashboard-leaderboard-list[b-jflum27pv5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-leaderboard-item[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--theme-bg-dark, #f8f9fa);
    border-radius: 10px;
}

.dashboard-leaderboard-item.is-you[b-jflum27pv5] {
    background: rgba(0, 86, 179, 0.08);
    border: 1px solid rgba(0, 86, 179, 0.2);
}

.dashboard-leaderboard-rank[b-jflum27pv5] {
    width: 32px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6c757d);
}

.dashboard-leaderboard-avatar[b-jflum27pv5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-leaderboard-avatar span[b-jflum27pv5] {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-leaderboard-info[b-jflum27pv5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-leaderboard-name[b-jflum27pv5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-main, #212529);
    display: flex;
    align-items: center;
    gap: 6px;
}

.you-badge[b-jflum27pv5] {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--bs-primary, #0056b3);
    color: white;
    border-radius: 8px;
}

.dashboard-leaderboard-points[b-jflum27pv5] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 479.98px) {
    .podium[b-jflum27pv5] {
        gap: 8px;
        padding: 0;
    }

    .podium-item[b-jflum27pv5] {
        padding: 12px 8px;
    }

    .podium-avatar[b-jflum27pv5] {
        width: 40px;
        height: 40px;
    }

    .podium-item.first .podium-avatar[b-jflum27pv5] {
        width: 48px;
        height: 48px;
    }

    .podium-medal[b-jflum27pv5] {
        font-size: 1.25rem;
    }

    .podium-item.first .podium-medal[b-jflum27pv5] {
        font-size: 1.5rem;
    }

    .podium-name[b-jflum27pv5] {
        font-size: 0.7rem;
    }
}

/* ============ EXPLORE LINKS ============ */
.explore-link-card[b-jflum27pv5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
    color: inherit;
}

.explore-link-card:hover[b-jflum27pv5] {
    background: rgba(0, 0, 0, 0.03);
    text-decoration: none;
    color: inherit;
}

.explore-link-icon[b-jflum27pv5] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.explore-link-info[b-jflum27pv5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.explore-link-title[b-jflum27pv5] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-main, #212529);
}

.explore-link-desc[b-jflum27pv5] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
    line-height: 1.3;
}

:global([data-bs-theme="dark"]) .explore-link-card:hover[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .explore-link-title[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .explore-link-desc[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

/* ============ DARK MODE ============ */

/* Cards */
:global([data-bs-theme="dark"]) .points-card[b-jflum27pv5] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .badges-card[b-jflum27pv5] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .activity-card[b-jflum27pv5] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .leaderboard-card[b-jflum27pv5] {
    background: var(--theme-card-bg, #1e2128);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Points card */
:global([data-bs-theme="dark"]) .points-header[b-jflum27pv5] {
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .points-balance[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
}

:global([data-bs-theme="dark"]) .balance-amount[b-jflum27pv5] {
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .balance-label[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .stat-value[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .stat-label[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .stat-divider[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .stat-item.earned i[b-jflum27pv5] {
    color: #34d399;
}

:global([data-bs-theme="dark"]) .stat-item.spent i[b-jflum27pv5] {
    color: #fb923c;
}

/* Budget */
:global([data-bs-theme="dark"]) .budget-section[b-jflum27pv5] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .budget-title[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .budget-label[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .budget-value[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .budget-bar[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.06);
}

/* Badges card */
:global([data-bs-theme="dark"]) .badges-card-header[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .badges-card-header i[b-jflum27pv5] {
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .badges-view-all[b-jflum27pv5] {
    color: #93bbfc;
}

/* Activity card */
:global([data-bs-theme="dark"]) .activity-tabs[b-jflum27pv5] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .tab-btn[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .tab-btn.active[b-jflum27pv5] {
    color: #93bbfc;
    border-bottom-color: #93bbfc;
}

:global([data-bs-theme="dark"]) .tab-count[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .tab-btn.active .tab-count[b-jflum27pv5] {
    background: rgba(59, 130, 246, 0.15);
    color: #93bbfc;
}

/* Recognition list */
:global([data-bs-theme="dark"]) .recognition-item[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .recognition-name[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .recognition-time[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .recognition-message[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .points-badge[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .points-badge i[b-jflum27pv5] {
    color: #f59e0b;
}

:global([data-bs-theme="dark"]) .points-badge.sent[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .points-badge.sent i[b-jflum27pv5] {
    color: #93bbfc;
}

/* Transactions */
:global([data-bs-theme="dark"]) .transaction-item[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .transaction-icon.earned[b-jflum27pv5] {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

:global([data-bs-theme="dark"]) .transaction-icon.spent[b-jflum27pv5] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .transaction-icon.bonus[b-jflum27pv5] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

:global([data-bs-theme="dark"]) .transaction-icon.adjustment[b-jflum27pv5] {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .transaction-desc[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .transaction-date[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .transaction-amount.positive[b-jflum27pv5] {
    color: #34d399;
}

:global([data-bs-theme="dark"]) .transaction-amount.negative[b-jflum27pv5] {
    color: #f87171;
}

/* Empty state */
:global([data-bs-theme="dark"]) .empty-state h6[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .empty-state p[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .empty-icon[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
}

:global([data-bs-theme="dark"]) .empty-icon i[b-jflum27pv5] {
    color: #93bbfc;
}

/* Leaderboard */
:global([data-bs-theme="dark"]) .leaderboard-header[b-jflum27pv5] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .leaderboard-title[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .leaderboard-title i[b-jflum27pv5] {
    color: #fbbf24;
}

:global([data-bs-theme="dark"]) .period-select[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-main, #e1e3e8);
}

/* Podium */
:global([data-bs-theme="dark"]) .podium-item[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .podium-item.first[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.06) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

:global([data-bs-theme="dark"]) .podium-item.second[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(192, 192, 220, 0.1) 0%, rgba(192, 192, 220, 0.04) 100%);
    border-color: rgba(192, 192, 220, 0.2);
}

:global([data-bs-theme="dark"]) .podium-item.third[b-jflum27pv5] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.04) 100%);
    border-color: rgba(205, 127, 50, 0.2);
}

:global([data-bs-theme="dark"]) .podium-item.is-you[b-jflum27pv5] {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

:global([data-bs-theme="dark"]) .podium-name[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .podium-points[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

/* Leaderboard list */
:global([data-bs-theme="dark"]) .dashboard-leaderboard-item[b-jflum27pv5] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .dashboard-leaderboard-item.is-you[b-jflum27pv5] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

:global([data-bs-theme="dark"]) .dashboard-leaderboard-rank[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}

:global([data-bs-theme="dark"]) .dashboard-leaderboard-name[b-jflum27pv5] {
    color: var(--theme-text-main, #e1e3e8);
}

:global([data-bs-theme="dark"]) .dashboard-leaderboard-points[b-jflum27pv5] {
    color: var(--theme-text-muted, #9ca3af);
}
/* /Features/Recognition/Components/RecognitionDetail.razor.rz.scp.css */
/* ============ RECOGNITION DETAIL PAGE — TWITTER/X STYLE ============ */

/* ============ PAGE LAYOUT ============ */
.recognition-detail-page[b-n0qte3igo8] {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
}

/* ============ CONTAINER ============ */
.detail-container[b-n0qte3igo8] {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    min-height: 100vh;
    border-left: 1px solid #eff3f4;
    border-right: 1px solid #eff3f4;
}

/* ============ STICKY HEADER (Twitter-style, inside container) ============ */
.detail-header[b-n0qte3igo8] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 53px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #eff3f4;
}

.back-button[b-n0qte3igo8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-main, #0f1419);
    text-decoration: none;
    transition: background 0.2s;
    flex-shrink: 0;
}

.back-button:hover[b-n0qte3igo8] {
    background: rgba(15, 20, 25, 0.1);
}

.back-button i[b-n0qte3igo8] {
    font-size: 1.2rem;
}

.header-info[b-n0qte3igo8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-title[b-n0qte3igo8] {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--theme-text-main, #0f1419);
    line-height: 1.25;
}

/* ============ LOADING & EMPTY STATES ============ */
.loading-state[b-n0qte3igo8],
.empty-state[b-n0qte3igo8] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i[b-n0qte3igo8] {
    font-size: 3rem;
    margin-bottom: 16px;
}

/* ============ TWEET DETAIL POST ============ */
.tweet-detail-post[b-n0qte3igo8] {
    padding: 12px 16px 0;
}

/* Header row: avatar + name/handle */
.tweet-detail-body[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tweet-detail-avatar-col[b-n0qte3igo8] {
    flex-shrink: 0;
}

.tweet-detail-avatar[b-n0qte3igo8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    transition: filter 0.15s;
}

.tweet-detail-avatar:hover[b-n0qte3igo8] {
    filter: brightness(0.9);
}

.tweet-detail-avatar-placeholder[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.tweet-detail-header-info[b-n0qte3igo8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tweet-detail-display-name[b-n0qte3igo8] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--theme-text-main, #0f1419);
    cursor: pointer;
    line-height: 1.25;
}

.tweet-detail-display-name:hover[b-n0qte3igo8] {
    text-decoration: underline;
}

.tweet-detail-handle[b-n0qte3igo8] {
    font-size: 0.85rem;
    color: #536471;
    line-height: 1.25;
}

/* Recognition context line */
.tweet-detail-context[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #536471;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tweet-detail-context i[b-n0qte3igo8] {
    color: #f59e0b;
    font-size: 0.8rem;
}

.tweet-detail-mention[b-n0qte3igo8] {
    color: var(--bs-primary, #1d9bf0);
    font-weight: 600;
    cursor: pointer;
}

.tweet-detail-mention:hover[b-n0qte3igo8] {
    text-decoration: underline;
}

.tweet-detail-points-badge[b-n0qte3igo8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
}

.tweet-detail-points-badge i[b-n0qte3igo8] {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Message text (larger in detail view, like Twitter) */
.tweet-detail-text[b-n0qte3igo8] {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--theme-text-main, #0f1419);
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Media */
.tweet-detail-media[b-n0qte3igo8] {
    margin-bottom: 12px;
}

/* Hashtags */
.tweet-detail-hashtags[b-n0qte3igo8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tweet-detail-hashtag[b-n0qte3igo8] {
    color: var(--bs-primary, #1d9bf0);
    text-decoration: none;
    font-size: 0.95rem;
}

.tweet-detail-hashtag:hover[b-n0qte3igo8] {
    text-decoration: underline;
}

/* Full timestamp (Twitter detail style) */
.tweet-detail-timestamp[b-n0qte3igo8] {
    padding: 16px 0;
    border-top: 1px solid #eff3f4;
    color: #536471;
    font-size: 0.9rem;
}

.tweet-detail-sep[b-n0qte3igo8] {
    margin: 0 4px;
}

/* Stats row */
.tweet-detail-stats[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid #eff3f4;
    min-height: 36px;
}

.tweet-detail-comment-link[b-n0qte3igo8] {
    border: none;
    background: transparent;
    color: #536471;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s;
    white-space: nowrap;
}

.tweet-detail-comment-link:hover[b-n0qte3igo8] {
    color: var(--bs-primary, #1d9bf0);
    text-decoration: underline;
}

/* ============ ACTION BAR (Twitter-style) ============ */
.tweet-detail-actions[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 0;
    border-top: 1px solid #eff3f4;
    border-bottom: 1px solid #eff3f4;
    -webkit-user-select: none;
    user-select: none;
}

.tweet-detail-action-btn[b-n0qte3igo8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: #536471;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tweet-detail-action-icon-wrap[b-n0qte3igo8] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.tweet-detail-action-emoji[b-n0qte3igo8] {
    font-size: 1.1rem;
    line-height: 1;
}

/* Comment (blue hover) */
.tweet-detail-action-comment:hover[b-n0qte3igo8] {
    color: #1d9bf0;
    background: rgba(29, 155, 240, 0.1);
}

/* Like (pink hover) */
.tweet-detail-action-like:hover[b-n0qte3igo8] {
    color: #f91880;
    background: rgba(249, 24, 128, 0.1);
}

.tweet-detail-action-like.active[b-n0qte3igo8] {
    color: #f91880;
}

/* Share (blue hover) */
.tweet-detail-action-share:hover[b-n0qte3igo8] {
    color: #1d9bf0;
    background: rgba(29, 155, 240, 0.1);
}

/* Like wrapper */
.tweet-detail-like-wrap[b-n0qte3igo8] {
    position: relative;
}

/* Reaction picker popup */
.tweet-detail-reaction-popup[b-n0qte3igo8] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border-radius: 28px;
    padding: 4px 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 100;
    animation: detailPopupIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

@@keyframes detailPopupIn {
    from[b-n0qte3igo8] {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.8);
    }
    to[b-n0qte3igo8] {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.tweet-detail-reaction-option[b-n0qte3igo8] {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tweet-detail-reaction-option:hover[b-n0qte3igo8] {
    transform: scale(1.35) translateY(-4px);
}

.tweet-detail-reaction-option.selected[b-n0qte3igo8] {
    background: rgba(29, 155, 240, 0.12);
}

.tweet-detail-reaction-option[data-reaction="like"]:hover[b-n0qte3igo8] { animation: detailBounce 0.5s ease; }
.tweet-detail-reaction-option[data-reaction="love"]:hover[b-n0qte3igo8] { animation: detailPulse 0.5s ease; }
.tweet-detail-reaction-option[data-reaction="celebrate"]:hover[b-n0qte3igo8] { animation: detailPop 0.5s ease; }
.tweet-detail-reaction-option[data-reaction="inspire"]:hover[b-n0qte3igo8] { animation: detailGlow 0.5s ease; }

@@keyframes detailBounce {
    0%[b-n0qte3igo8], 100%[b-n0qte3igo8] { transform: scale(1.35) translateY(-4px); }
    50%[b-n0qte3igo8] { transform: scale(1.5) translateY(-10px); }
}
@@keyframes detailPulse {
    0%[b-n0qte3igo8], 100%[b-n0qte3igo8] { transform: scale(1.35) translateY(-4px); }
    50%[b-n0qte3igo8] { transform: scale(1.5) translateY(-6px); }
}
@@keyframes detailPop {
    0%[b-n0qte3igo8] { transform: scale(1.35) translateY(-4px); }
    40%[b-n0qte3igo8] { transform: scale(1.55) translateY(-8px) rotate(10deg); }
    100%[b-n0qte3igo8] { transform: scale(1.35) translateY(-4px) rotate(0deg); }
}
@@keyframes detailGlow {
    0%[b-n0qte3igo8], 100%[b-n0qte3igo8] { transform: scale(1.35) translateY(-4px); filter: brightness(1); }
    50%[b-n0qte3igo8] { transform: scale(1.5) translateY(-6px); filter: brightness(1.3); }
}

.tweet-detail-reaction-emoji[b-n0qte3igo8] {
    pointer-events: none;
}

/* ============ COMMENTS SECTION ============ */
.comments-section[b-n0qte3igo8] {
    border-top: 0;
}

/* ============ COMMENT COMPOSER (Twitter-style) ============ */
.comment-composer[b-n0qte3igo8] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eff3f4;
}

.composer-avatar[b-n0qte3igo8] {
    flex-shrink: 0;
}

.composer-av[b-n0qte3igo8] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.composer-av.composer-av-placeholder[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    color: white;
    font-weight: 700;
    font-size: 0.82rem;
}

.composer-input-area[b-n0qte3igo8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Auto-expanding textarea */
.comment-textarea[b-n0qte3igo8] {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--theme-text-main, #0f1419);
    background: transparent;
    padding: 8px 0;
    min-height: 52px;
    overflow: hidden;
    font-family: inherit;
}

.comment-textarea[b-n0qte3igo8]::placeholder {
    color: #536471;
}

/* Character counter */
.composer-char-counter[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-top: -2px;
    margin-bottom: 2px;
}

.composer-chars-num[b-n0qte3igo8] {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}

/* Media preview */
.composer-media-preview[b-n0qte3igo8] {
    margin: 8px 0 4px;
    border-radius: 16px;
    overflow: hidden;
}

/* Divider */
.composer-divider[b-n0qte3igo8] {
    height: 1px;
    background: #eff3f4;
    margin: 8px 0;
}

/* Toolbar */
.composer-toolbar[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.composer-toolbar-left[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.composer-toolbar-right[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-tool-btn[b-n0qte3igo8] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--bs-primary, #1d9bf0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    font-size: 1rem;
    padding: 0;
}

.composer-tool-btn:hover[b-n0qte3igo8] {
    background: rgba(29, 155, 240, 0.1);
}

.composer-gif-label[b-n0qte3igo8] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    padding: 1px 3px;
    line-height: 1;
}

/* Points ring */
.composer-points-wrap[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.composer-points-ring-btn[b-n0qte3igo8] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform 0.15s ease;
}

.composer-points-ring-btn:hover[b-n0qte3igo8] {
    transform: scale(1.1);
}

.composer-points-label[b-n0qte3igo8] {
    font-size: 0.7rem;
    color: #536471;
    white-space: nowrap;
}

/* Points popover */
.composer-points-popover[b-n0qte3igo8] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #eff3f4;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    z-index: 60;
    min-width: 130px;
    animation: composerPopIn 0.15s ease-out;
}

.composer-pts-opt[b-n0qte3igo8] {
    border: 1px solid #eff3f4;
    background: #fff;
    color: #0f1419;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.composer-pts-opt:hover:not(.disabled)[b-n0qte3igo8] {
    border-color: var(--bs-primary, #1d9bf0);
    color: var(--bs-primary, #1d9bf0);
    background: rgba(29, 155, 240, 0.04);
}

.composer-pts-opt.selected[b-n0qte3igo8] {
    background: #fff8e1;
    color: #92400e;
    border-color: #fbbf24;
}

.composer-pts-opt.disabled[b-n0qte3igo8] {
    color: #cfd9de;
    border-color: #eff3f4;
    cursor: not-allowed;
    background: #fafafa;
}

/* Toolbar separator */
.composer-toolbar-sep[b-n0qte3igo8] {
    width: 1px;
    height: 22px;
    background: #eff3f4;
}

/* Reply button */
.composer-post-btn[b-n0qte3igo8] {
    border: none;
    background: var(--bs-primary, #1d9bf0);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.composer-post-btn:hover:not(:disabled)[b-n0qte3igo8] {
    opacity: 0.85;
}

.composer-post-btn:active:not(:disabled)[b-n0qte3igo8] {
    transform: scale(0.98);
}

.composer-post-btn:disabled[b-n0qte3igo8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Backdrop for popover dismiss */
.composer-backdrop[b-n0qte3igo8] {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

@@keyframes composerPopIn {
    from[b-n0qte3igo8] {
        opacity: 0;
        transform: scale(0.92);
    }
    to[b-n0qte3igo8] {
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading Comments */
.loading-comments[b-n0qte3igo8] {
    text-align: center;
    padding: 24px;
}

/* No Comments */
.no-comments[b-n0qte3igo8] {
    text-align: center;
    padding: 40px 20px;
    color: #536471;
}

.no-comments i[b-n0qte3igo8] {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 12px;
}

.no-comments p[b-n0qte3igo8] {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--theme-text-main, #0f1419);
}

.no-comments span[b-n0qte3igo8] {
    font-size: 0.9rem;
}

/* Comments List */
.comments-list[b-n0qte3igo8] {
    display: flex;
    flex-direction: column;
}

/* ============ COMPOSER REPLY INDICATOR ============ */
.composer-reply-indicator[b-n0qte3igo8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(29, 155, 240, 0.06);
    border-left: 3px solid var(--bs-primary, #1d9bf0);
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    color: #536471;
}

.composer-reply-indicator i[b-n0qte3igo8] {
    color: var(--bs-primary, #1d9bf0);
    font-size: 0.85rem;
}

.composer-reply-indicator strong[b-n0qte3igo8] {
    color: var(--theme-text-main, #0f1419);
}

.composer-reply-cancel[b-n0qte3igo8] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #536471;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
}

.composer-reply-cancel:hover[b-n0qte3igo8] {
    background: rgba(0, 0, 0, 0.08);
    color: #f4212e;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 575.98px) {
    .tweet-detail-text[b-n0qte3igo8] {
        font-size: 1.1rem;
    }

    .tweet-detail-action-btn[b-n0qte3igo8] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .composer-points-label[b-n0qte3igo8] {
        display: none;
    }

    .composer-post-btn[b-n0qte3igo8] {
        padding: 7px 14px;
        font-size: 0.85rem;
    }

    .detail-container[b-n0qte3igo8] {
        border-left: none;
        border-right: none;
    }
}

@media (min-width: 576px) {
    .detail-container[b-n0qte3igo8] {
        border-left: 1px solid #eff3f4;
        border-right: 1px solid #eff3f4;
    }
}

/* ============ COMMENT POINT TARGETING (multi-recipient) ============ */
.composer-target-wrap[b-n0qte3igo8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-top: 8px;
}

:global([data-bs-theme="dark"]) .composer-target-wrap[b-n0qte3igo8] {
    background: rgba(255, 255, 255, 0.04);
}

.composer-target-toggle[b-n0qte3igo8] {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

:global([data-bs-theme="dark"]) .composer-target-toggle[b-n0qte3igo8] {
    border-color: rgba(255, 255, 255, 0.12);
}

.composer-target-btn[b-n0qte3igo8] {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.composer-target-btn:hover[b-n0qte3igo8] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
}

.composer-target-btn.active[b-n0qte3igo8] {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

:global([data-bs-theme="dark"]) .composer-target-btn[b-n0qte3igo8] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .composer-target-btn.active[b-n0qte3igo8] {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.composer-target-recipients[b-n0qte3igo8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: 100%;
    padding: 4px 0 0;
}

.composer-target-recipient-label[b-n0qte3igo8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
}

.composer-target-recipient-label input[type="checkbox"][b-n0qte3igo8] {
    width: 15px;
    height: 15px;
    accent-color: var(--bs-primary, #0d6efd);
    cursor: pointer;
}

:global([data-bs-theme="dark"]) .composer-target-recipient-label[b-n0qte3igo8] {
    color: #d1d5db;
}

/* ============ COMMENT MEDIA (legacy, used in comment items) ============ */
.comment-media-preview[b-n0qte3igo8] {
    margin-top: 8px;
}
/* /Features/Recognition/Components/RecognitionFeed.razor.rz.scp.css */
/* ============ RECOGNITION FEED STYLES ============ */
/* Scoped to RecognitionFeed.razor component */

/* 3D Avatar Styles */
.avatar-3d[b-3g8kxfyhp7] {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 -3px 6px rgba(0, 0, 0, 0.1),
        inset 0 3px 6px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
}

.avatar-3d:hover[b-3g8kxfyhp7] {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.15),
        0 4px 6px rgba(0, 0, 0, 0.1),
        inset 0 -3px 6px rgba(0, 0, 0, 0.1),
        inset 0 3px 6px rgba(255, 255, 255, 0.3);
}

.avatar-3d.avatar-placeholder[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    position: relative;
    overflow: hidden;
}

.avatar-3d.avatar-placeholder[b-3g8kxfyhp7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50% 50% 0 0;
}

.avatar-3d.avatar-placeholder span[b-3g8kxfyhp7],
.avatar-3d.avatar-placeholder small[b-3g8kxfyhp7] {
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

/* Avatar Sizes */
.avatar-feed[b-3g8kxfyhp7] {
    width: 48px;
    height: 48px;
}

.avatar-feed span[b-3g8kxfyhp7] {
    font-size: 1rem;
}

.avatar-compose[b-3g8kxfyhp7] {
    width: 44px;
    height: 44px;
}

.avatar-compose span[b-3g8kxfyhp7] {
    font-size: 0.9rem;
}

.avatar-small[b-3g8kxfyhp7] {
    width: 32px;
    height: 32px;
}

.avatar-small small[b-3g8kxfyhp7] {
    font-size: 0.7rem;
}

/* ── Timeline container (Twitter-style) ── */
.timeline-container[b-3g8kxfyhp7] {
    background: #ffffff;
    border: 1px solid #eff3f4;
    border-radius: 16px;
    margin-bottom: 16px;
}

:global([data-bs-theme="dark"]) .timeline-container[b-3g8kxfyhp7] {
    background: #16181c;
    border-color: rgba(255, 255, 255, 0.08);
}

.timeline-empty-state[b-3g8kxfyhp7] {
    text-align: center;
    padding: 48px 24px;
}

.hover-underline:hover[b-3g8kxfyhp7] {
    text-decoration: underline !important;
}

/* Balance Card Styles */
.balance-icon-wrapper[b-3g8kxfyhp7] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    flex-shrink: 0;
}

.balance-icon-wrapper i[b-3g8kxfyhp7] {
    font-size: 1.5rem;
    color: white;
}

.budget-stat-card[b-3g8kxfyhp7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 12px 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.budget-stat-label[b-3g8kxfyhp7] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 4px;
}

.budget-stat-value[b-3g8kxfyhp7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0d6efd;
}

.budget-stat-total[b-3g8kxfyhp7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #adb5bd;
}

/* Trending Hashtags Styles */
[b-3g8kxfyhp7] .trending-hashtags-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-3g8kxfyhp7] .trending-hashtag-item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    background: transparent;
}

[b-3g8kxfyhp7] .trending-hashtag-item:hover {
    background: #f8f9fa;
}

[b-3g8kxfyhp7] .trending-hashtag-item.active {
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
}

[b-3g8kxfyhp7] .trending-hashtag-item .hashtag-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #212529;
}

[b-3g8kxfyhp7] .trending-hashtag-item.active .hashtag-name {
    color: #0d6efd;
}

[b-3g8kxfyhp7] .trending-hashtag-item .hashtag-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 10px;
}

[b-3g8kxfyhp7] .trending-hashtag-item.active .hashtag-count {
    background: #0d6efd;
    color: white;
}

/* Leaderboard Styles */
[b-3g8kxfyhp7] .leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-3g8kxfyhp7] .leaderboard-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
    gap: 10px;
}

[b-3g8kxfyhp7] .leaderboard-item:hover {
    background: #f8f9fa;
}

[b-3g8kxfyhp7] .leaderboard-rank {
    width: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    flex-shrink: 0;
    text-align: center;
}

[b-3g8kxfyhp7] .leaderboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

[b-3g8kxfyhp7] .leaderboard-avatar:hover {
    transform: scale(1.1);
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1);
}

[b-3g8kxfyhp7] .leaderboard-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7c8ce8 0%, #667eea 50%, #5a67d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

[b-3g8kxfyhp7] .leaderboard-avatar-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50% 50% 0 0;
}

[b-3g8kxfyhp7] .leaderboard-avatar-placeholder:hover {
    transform: scale(1.1);
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

[b-3g8kxfyhp7] .leaderboard-avatar-placeholder span {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

[b-3g8kxfyhp7] .leaderboard-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-3g8kxfyhp7] .leaderboard-points {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0d6efd;
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Who to Recognize Styles */
.recognize-suggestions[b-3g8kxfyhp7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggest-item[b-3g8kxfyhp7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.15s ease;
}

.suggest-item:hover[b-3g8kxfyhp7] {
    background: #e9ecef;
}

.suggest-icon[b-3g8kxfyhp7] {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.suggest-text[b-3g8kxfyhp7] {
    font-size: 0.8rem;
    color: #495057;
    line-height: 1.4;
}

/* ============ PAGE LAYOUT ============ */
.recognition-page[b-3g8kxfyhp7] {
    min-height: 100vh;
    background: var(--theme-bg-dark, #f0f2f5);
    padding-bottom: 100px;
}

.recognition-container[b-3g8kxfyhp7] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

@media (min-width: 768px) {
    .recognition-container[b-3g8kxfyhp7] {
        padding: 24px;
    }
}


/* ============ MOBILE HEADER ============ */
.recognition-mobile-header[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 86, 179, 0.1);
    z-index: 1000;
}

.mobile-header-content[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.mobile-header-content h5[b-3g8kxfyhp7] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--theme-text-main, #212529);
}

/* Mobile Stats Bar */
.mobile-stats-bar[b-3g8kxfyhp7] {
    background: white;
    padding: 8px 16px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-stat-item[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-stat-icon[b-3g8kxfyhp7] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-stat-icon.balance[b-3g8kxfyhp7] {
    background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}

.mobile-stat-icon.balance i[b-3g8kxfyhp7] {
    color: white;
    font-size: 0.85rem;
}

.mobile-stat-content[b-3g8kxfyhp7] {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.mobile-stat-value[b-3g8kxfyhp7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
}

.mobile-stat-label[b-3g8kxfyhp7] {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
}

.mobile-budget-divider[b-3g8kxfyhp7] {
    width: 1px;
    height: 24px;
    background: #e9ecef;
    flex-shrink: 0;
}

.mobile-budget-item[b-3g8kxfyhp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mobile-budget-label[b-3g8kxfyhp7] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1px;
}

.mobile-budget-progress[b-3g8kxfyhp7] {
    display: flex;
    align-items: baseline;
}

.mobile-budget-value[b-3g8kxfyhp7] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0d6efd;
}

.mobile-budget-total[b-3g8kxfyhp7] {
    font-size: 0.7rem;
    color: #adb5bd;
    font-weight: 500;
}

/* Mobile Floating Action Button */
.mobile-fab[b-3g8kxfyhp7] {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
    color: white;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.4);
    z-index: 1050;
    transition: all 0.2s ease;
}

.mobile-fab:active[b-3g8kxfyhp7] {
    transform: scale(0.95);
}

.mobile-fab i[b-3g8kxfyhp7] {
    transition: transform 0.2s ease;
}

/* Mobile Recognition Cards — LinkedIn-style */
@media (max-width: 767.98px) {
    .recognition-container[b-3g8kxfyhp7] {
        padding: 0 !important;
    }

    .recognition-container > .row[b-3g8kxfyhp7] {
        margin: 0;
    }

    .recognition-container > .row > [class*="col-"][b-3g8kxfyhp7] {
        padding: 0;
        margin-top: 0;
    }

    /* Edge-to-edge cards like LinkedIn */
    [b-3g8kxfyhp7] .recognition-card {
        border-radius: 0 !important;
        margin-bottom: 8px !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
    }

    [b-3g8kxfyhp7] .recognition-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    [b-3g8kxfyhp7] .recognition-card .card-body {
        padding: 12px 16px;
    }

    /* Avatar sizing */
    [b-3g8kxfyhp7] .recognition-card .me-3 {
        margin-right: 10px !important;
    }

    [b-3g8kxfyhp7] .recognition-card .me-3 .rounded-circle,
    [b-3g8kxfyhp7] .recognition-card .me-3 img,
    [b-3g8kxfyhp7] .avatar-feed {
        width: 40px !important;
        height: 40px !important;
    }

    [b-3g8kxfyhp7] .recognition-card .me-3 .rounded-circle span {
        font-size: 0.8rem;
    }

    /* Message text */
    [b-3g8kxfyhp7] .recognition-card p {
        font-size: 0.93rem !important;
        line-height: 1.45;
    }

    /* Hashtags */
    [b-3g8kxfyhp7] .recognition-card .text-primary.text-decoration-none {
        font-size: 0.85rem;
    }

    /* Points badge */
    [b-3g8kxfyhp7] .recognition-card .badge {
        font-size: 0.72rem;
        padding: 5px 10px !important;
    }

    /* Action buttons — larger touch targets */
    [b-3g8kxfyhp7] .card-action-btn {
        min-height: 44px;
        font-size: 0.85rem;
    }

    [b-3g8kxfyhp7] .card-action-btn i {
        font-size: 1.1rem;
    }

    /* Milestone/campaign cards edge-to-edge */
    [b-3g8kxfyhp7] .milestone-card,
    [b-3g8kxfyhp7] .campaign-card {
        border-radius: 0 !important;
        margin-left: 0;
        margin-right: 0;
        border-left: none !important;
        border-right: none !important;
    }

    /* Compose box inline on mobile */
    [b-3g8kxfyhp7] .compose-box {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 8px !important;
    }

    /* Tour launcher */
    .recognition-container > .d-flex.justify-content-end[b-3g8kxfyhp7] {
        padding: 8px 16px 0;
    }

    /* Filter bar */
    .bg-primary.bg-opacity-10[b-3g8kxfyhp7] {
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Load more button */
    .text-center.py-4[b-3g8kxfyhp7] {
        padding: 16px;
    }
}

/* ============ SEARCH BAR ============ */
.search-section[b-3g8kxfyhp7] {
    margin-top: 12px;
    margin-bottom: 8px;
}

.search-toggle-btn[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    background: white;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-toggle-btn:hover[b-3g8kxfyhp7] {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #f8f9fa;
}

.search-bar-wrapper[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input-container[b-3g8kxfyhp7] {
    flex: 1;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 0 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-container:focus-within[b-3g8kxfyhp7] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.search-icon[b-3g8kxfyhp7] {
    color: #9ca3af;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.search-input[b-3g8kxfyhp7] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #212529;
}

.search-input[b-3g8kxfyhp7]::placeholder {
    color: #9ca3af;
}

.search-clear-btn[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
}

.search-clear-btn:hover[b-3g8kxfyhp7] {
    color: #dc3545;
}

.search-close-btn[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: #6c757d;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.search-close-btn:hover[b-3g8kxfyhp7] {
    background: #f8f9fa;
    border-color: #adb5bd;
    color: #212529;
}

.search-indicator[b-3g8kxfyhp7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-top: 8px;
    background: #e7f1ff;
    border-radius: 8px;
    font-size: 0.82rem;
}

.search-indicator-text[b-3g8kxfyhp7] {
    color: #495057;
}

.search-results-count[b-3g8kxfyhp7] {
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Search dark mode (scoped) */
:global([data-bs-theme="dark"]) .search-toggle-btn[b-3g8kxfyhp7] {
    background: var(--surface-primary, #1e2028);
    border-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .search-toggle-btn:hover[b-3g8kxfyhp7] {
    border-color: rgba(59, 130, 246, 0.4);
    color: #93bbfc;
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .search-input-container[b-3g8kxfyhp7] {
    background: var(--surface-primary, #1e2028);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .search-input-container:focus-within[b-3g8kxfyhp7] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

:global([data-bs-theme="dark"]) .search-input[b-3g8kxfyhp7] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .search-input[b-3g8kxfyhp7]::placeholder {
    color: #6b7280;
}

:global([data-bs-theme="dark"]) .search-close-btn[b-3g8kxfyhp7] {
    border-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .search-close-btn:hover[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .search-indicator[b-3g8kxfyhp7] {
    background: rgba(59, 130, 246, 0.1);
}

:global([data-bs-theme="dark"]) .search-indicator-text[b-3g8kxfyhp7] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .search-results-count[b-3g8kxfyhp7] {
    color: #93bbfc;
}

:global([data-bs-theme="dark"]) .search-clear-btn[b-3g8kxfyhp7] {
    color: #6b7280;
}

:global([data-bs-theme="dark"]) .search-clear-btn:hover[b-3g8kxfyhp7] {
    color: #f87171;
}

/* Mobile search adjustments */
@media (max-width: 767.98px) {
    .search-section[b-3g8kxfyhp7] {
        padding: 0 16px;
        margin-top: 0;
    }

    .search-input[b-3g8kxfyhp7] {
        font-size: 0.85rem;
    }

    .search-indicator[b-3g8kxfyhp7] {
        font-size: 0.78rem;
    }
}

/* Hover shadow utility */
[b-3g8kxfyhp7] .hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Compose form styles */
[b-3g8kxfyhp7] .compose-input::placeholder,
[b-3g8kxfyhp7] .compose-textarea::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

[b-3g8kxfyhp7] .compose-textarea {
    resize: none;
    font-size: 0.95rem;
    line-height: 1.4;
    background: transparent;
}

[b-3g8kxfyhp7] .compose-textarea:focus,
[b-3g8kxfyhp7] .compose-input:focus {
    box-shadow: none;
    outline: none;
}

/* Compact button group */
[b-3g8kxfyhp7] .btn-group-sm > .btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

.min-width-0[b-3g8kxfyhp7] {
    min-width: 0;
}

/* ============ DARK MODE ============ */

/* Mobile header */
:global([data-bs-theme="dark"]) .recognition-mobile-header[b-3g8kxfyhp7] {
    background: rgba(30, 32, 40, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Mobile stats bar */
:global([data-bs-theme="dark"]) .mobile-stats-bar[b-3g8kxfyhp7] {
    background: var(--surface-primary, #1e2028);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .mobile-stat-value[b-3g8kxfyhp7] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .mobile-budget-divider[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .mobile-budget-item[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.06);
}

/* Budget stat cards in sidebar */
:global([data-bs-theme="dark"]) .budget-stat-card[b-3g8kxfyhp7] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .budget-stat-label[b-3g8kxfyhp7] {
    color: #9ca3af;
}

:global([data-bs-theme="dark"]) .budget-stat-value[b-3g8kxfyhp7] {
    color: #93bbfc;
}

/* Suggestion items ("Who to Recognize") */
:global([data-bs-theme="dark"]) .suggest-item[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.04);
}

:global([data-bs-theme="dark"]) .suggest-item:hover[b-3g8kxfyhp7] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .suggest-text[b-3g8kxfyhp7] {
    color: #9ca3af;
}

/* ::deep overrides for child components in dark mode */
:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .trending-hashtag-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .trending-hashtag-item .hashtag-name {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .trending-hashtag-item .hashtag-count {
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .trending-hashtag-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .leaderboard-name {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .leaderboard-rank {
    color: #9ca3af;
}

:global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .leaderboard-points {
    color: #93bbfc;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
}

/* Mobile recognition cards border */
@media (max-width: 767.98px) {
    :global([data-bs-theme="dark"])[b-3g8kxfyhp7]  .recognition-card {
        border-top-color: rgba(255, 255, 255, 0.06) !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
}

/* /Features/Recognition/Components/RecognitionProfile.razor.rz.scp.css */
/* ============================================================
   RecognitionProfile — Kudos Profile page
   ============================================================ */

.rp-page[b-1zgzobvno8] {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 32px;
    min-height: 100vh;
}

/* ── Header ── */
.rp-header[b-1zgzobvno8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
}

.rp-back[b-1zgzobvno8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background 0.15s;
}

.rp-back:hover[b-1zgzobvno8] {
    background: rgba(0, 0, 0, 0.06);
}

.rp-header-title[b-1zgzobvno8] {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bs-body-color);
}

/* ── Profile Card ── */
.rp-profile-card[b-1zgzobvno8] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 28px 24px 20px;
    text-align: center;
    margin-bottom: 20px;
}

.rp-avatar-area[b-1zgzobvno8] {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.rp-avatar[b-1zgzobvno8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-primary);
    box-shadow: 0 2px 12px rgba(var(--bs-primary-rgb), 0.2);
}

.rp-avatar-placeholder[b-1zgzobvno8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-primary), #6366f1);
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

.rp-name[b-1zgzobvno8] {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 4px;
    color: var(--bs-body-color);
}

.rp-department[b-1zgzobvno8] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.rp-role-badge[b-1zgzobvno8] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    margin-bottom: 16px;
}

/* ── Stats ── */
.rp-stats[b-1zgzobvno8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--bs-border-color);
}

.rp-stat[b-1zgzobvno8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.rp-stat-value[b-1zgzobvno8] {
    font-size: 1.3rem;
    font-weight: 700;
}

.rp-stat-label[b-1zgzobvno8] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.rp-stat-divider[b-1zgzobvno8] {
    width: 1px;
    height: 32px;
    background: var(--bs-border-color);
}

/* ── Tabs ── */
.rp-tabs[b-1zgzobvno8] {
    display: flex;
    gap: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.rp-tab[b-1zgzobvno8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.rp-tab:hover[b-1zgzobvno8] {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.rp-tab.active[b-1zgzobvno8] {
    background: var(--bs-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
}

.rp-tab-count[b-1zgzobvno8] {
    font-size: 0.75rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.rp-tab.active .rp-tab-count[b-1zgzobvno8] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ── List ── */
.rp-list[b-1zgzobvno8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-item[b-1zgzobvno8] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rp-item:hover[b-1zgzobvno8] {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.1);
    color: inherit;
    text-decoration: none;
}

.rp-item-avatar[b-1zgzobvno8] {
    flex-shrink: 0;
}

.rp-item-img[b-1zgzobvno8] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.rp-item-img-placeholder[b-1zgzobvno8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
}

.rp-item-content[b-1zgzobvno8] {
    flex: 1;
    min-width: 0;
}

.rp-item-header[b-1zgzobvno8] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.rp-item-name[b-1zgzobvno8] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.rp-item-time[b-1zgzobvno8] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.rp-item-message[b-1zgzobvno8] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rp-item-points[b-1zgzobvno8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

/* ── Loading / Empty ── */
.rp-loading[b-1zgzobvno8],
.rp-empty[b-1zgzobvno8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.rp-empty-tab[b-1zgzobvno8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

/* ============================================================
   Dark mode — using BS5.3 CSS variables throughout, so most
   adapts automatically. Only override specific items.
   ============================================================ */
:global([data-bs-theme="dark"]) .rp-back:hover[b-1zgzobvno8] {
    background: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .rp-tab-count[b-1zgzobvno8] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-bs-theme="dark"]) .rp-item-points[b-1zgzobvno8] {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}
/* /Features/Recognition/Components/RewardProgressCard.razor.rz.scp.css */
/* ============ REWARD PROGRESS CARD STYLES ============ */
/* Scoped to RewardProgressCard.razor component */

.reward-progress-card[b-xc4oka5rin] {
    border-radius: 12px;
}

.reward-progress-icon[b-xc4oka5rin] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
    flex-shrink: 0;
}

.reward-progress-icon i[b-xc4oka5rin] {
    font-size: 1rem;
    color: white;
}

.reward-item[b-xc4oka5rin] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.reward-item.can-redeem[b-xc4oka5rin] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    position: relative;
    overflow: hidden;
}

.reward-emoji[b-xc4oka5rin] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.reward-name[b-xc4oka5rin] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.can-redeem-badge[b-xc4oka5rin] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #16a34a;
    animation: pulse-glow-b-xc4oka5rin 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-xc4oka5rin {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.points-away-label[b-xc4oka5rin] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6366f1;
}

.progress-bar-wrapper[b-xc4oka5rin] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.progress-bar-track[b-xc4oka5rin] {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-xc4oka5rin] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #a78bfa 100%);
    transition: width 0.6s ease;
}

.progress-bar-fill.full[b-xc4oka5rin] {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}

.progress-label[b-xc4oka5rin] {
    font-size: 0.65rem;
    color: #9ca3af;
    text-align: right;
}

.redeem-btn[b-xc4oka5rin] {
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
}

.browse-all-link[b-xc4oka5rin] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6366f1;
    text-decoration: none;
    padding-top: 8px;
    transition: color 0.2s ease;
}

.browse-all-link:hover[b-xc4oka5rin] {
    color: #4f46e5;
    text-decoration: underline;
}

/* ============ DARK MODE (via scoped CSS) ============ */

:global([data-bs-theme="dark"]) .reward-item[b-xc4oka5rin] {
    background: linear-gradient(135deg, #1e2028 0%, #262830 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .reward-item.can-redeem[b-xc4oka5rin] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.25);
}

:global([data-bs-theme="dark"]) .reward-name[b-xc4oka5rin] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .progress-bar-track[b-xc4oka5rin] {
    background: rgba(255, 255, 255, 0.1);
}

:global([data-bs-theme="dark"]) .progress-label[b-xc4oka5rin] {
    color: #6b7280;
}

:global([data-bs-theme="dark"]) .browse-all-link[b-xc4oka5rin] {
    color: #818cf8;
}

:global([data-bs-theme="dark"]) .browse-all-link:hover[b-xc4oka5rin] {
    color: #a5b4fc;
}

:global([data-bs-theme="dark"]) .points-away-label[b-xc4oka5rin] {
    color: #818cf8;
}

:global([data-bs-theme="dark"]) .can-redeem-badge[b-xc4oka5rin] {
    color: #4ade80;
}
/* /Features/Recognition/Components/SendRecognitionModal.razor.rz.scp.css */
/* ============================================================
   SendRecognitionModal — Twitter/X-style bottom sheet (mobile)
   ============================================================ */

.srm-overlay[b-4srnzbjqf0] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: srmFadeIn 0.2s ease-out;
}

.srm-sheet[b-4srnzbjqf0] {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: srmSlideUp 0.25s ease-out;
}

/* Header */
.srm-header[b-4srnzbjqf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-radius: 20px 20px 0 0;
}

.srm-close[b-4srnzbjqf0] {
    border: none;
    background: none;
    color: #6b7280;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: background 0.15s;
}

.srm-close:hover[b-4srnzbjqf0] {
    background: #f3f4f6;
}

.srm-title[b-4srnzbjqf0] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
    margin: 0;
}

.srm-submit-btn[b-4srnzbjqf0] {
    border: none;
    background: var(--bs-primary, #0056b3);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.srm-submit-btn:disabled[b-4srnzbjqf0] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Error */
.srm-error[b-4srnzbjqf0] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-bottom: 1px solid #fecaca;
}

.srm-error-close[b-4srnzbjqf0] {
    border: none;
    background: none;
    color: #dc2626;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    opacity: 0.6;
}

.srm-error-close:hover[b-4srnzbjqf0] {
    opacity: 1;
}

/* Body */
.srm-body[b-4srnzbjqf0] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Audience */
.srm-audience[b-4srnzbjqf0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--bs-primary, #0056b3);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary, #0056b3);
    background: transparent;
    cursor: pointer;
    width: fit-content;
    transition: background 0.15s;
}

.srm-audience:hover[b-4srnzbjqf0] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.06);
}

.srm-audience .bi-chevron-down[b-4srnzbjqf0] {
    font-size: 0.6rem;
    opacity: 0.7;
}

/* Select */
.srm-field[b-4srnzbjqf0] {
    position: relative;
}

.srm-select-wrap[b-4srnzbjqf0] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 4px;
}

.srm-at-icon[b-4srnzbjqf0] {
    color: var(--bs-primary, #0056b3);
    font-size: 1.1rem;
    font-weight: 600;
    margin-right: 4px;
}

.srm-select[b-4srnzbjqf0] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--bs-primary, #0056b3);
    font-weight: 500;
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 4px 0;
}

.srm-select option[b-4srnzbjqf0] {
    color: #374151;
}

/* Textarea */
.srm-textarea[b-4srnzbjqf0] {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    padding: 0;
    font-family: inherit;
}

.srm-textarea[b-4srnzbjqf0]::placeholder {
    color: #9ca3af;
}

.srm-char-count[b-4srnzbjqf0] {
    font-size: 0.72rem;
    color: #d1d5db;
    text-align: right;
}

/* Points */
.srm-points-section[b-4srnzbjqf0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.srm-points-header[b-4srnzbjqf0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.srm-points-budget[b-4srnzbjqf0] {
    font-size: 0.78rem;
    color: #9ca3af;
}

.srm-points-grid[b-4srnzbjqf0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.srm-pts[b-4srnzbjqf0] {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 4px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s ease;
}

.srm-pts:hover:not(.disabled)[b-4srnzbjqf0] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
}

.srm-pts.selected[b-4srnzbjqf0] {
    background: #fff8e1;
    color: #92400e;
    border-color: #fbbf24;
}

.srm-pts.disabled[b-4srnzbjqf0] {
    color: #d1d5db;
    border-color: #f3f4f6;
    cursor: not-allowed;
    background: #fafafa;
}

/* Hashtags */
.srm-hashtags[b-4srnzbjqf0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.srm-hashtags-suggestions[b-4srnzbjqf0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.srm-htag[b-4srnzbjqf0] {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.srm-htag:hover[b-4srnzbjqf0] {
    border-color: var(--bs-primary, #0056b3);
    color: var(--bs-primary, #0056b3);
}

.srm-htag.active[b-4srnzbjqf0] {
    background: var(--bs-primary, #0056b3);
    color: #fff;
    border-color: var(--bs-primary, #0056b3);
}

.srm-hashtag-custom[b-4srnzbjqf0] {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 4px 8px;
}

.srm-hash-prefix[b-4srnzbjqf0] {
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.85rem;
}

.srm-hash-input[b-4srnzbjqf0] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    flex: 1;
    padding: 4px 0;
}

.srm-hash-input[b-4srnzbjqf0]::placeholder {
    color: #d1d5db;
}

.srm-hash-add[b-4srnzbjqf0] {
    border: none;
    background: none;
    color: var(--bs-primary, #0056b3);
    cursor: pointer;
    padding: 2px;
    font-size: 1rem;
    display: flex;
    border-radius: 50%;
    transition: background 0.15s;
}

.srm-hash-add:hover[b-4srnzbjqf0] {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
}

.srm-selected-tags[b-4srnzbjqf0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.srm-tag-badge[b-4srnzbjqf0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.08);
    color: var(--bs-primary, #0056b3);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
}

.srm-tag-remove[b-4srnzbjqf0] {
    border: none;
    background: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    transition: opacity 0.15s;
}

.srm-tag-remove:hover[b-4srnzbjqf0] {
    opacity: 1;
}

/* Animations */
@@keyframes srmFadeIn {
    from[b-4srnzbjqf0] { opacity: 0; }
    to[b-4srnzbjqf0] { opacity: 1; }
}

@@keyframes srmSlideUp {
    from[b-4srnzbjqf0] { transform: translateY(100%); }
    to[b-4srnzbjqf0] { transform: translateY(0); }
}

/* Desktop: center the sheet as a modal */
@@media (min-width: 576px) {
    .srm-overlay[b-4srnzbjqf0] {
        align-items: center;
    }

    .srm-sheet[b-4srnzbjqf0] {
        border-radius: 16px;
        max-height: 85vh;
        margin: 0 16px;
    }

    .srm-header[b-4srnzbjqf0] {
        border-radius: 16px 16px 0 0;
    }
}
/* /Features/Recognition/Components/StreakBanner.razor.rz.scp.css */
/* ============ STREAK BANNER STYLES ============ */
/* Scoped to StreakBanner.razor component */

.streak-banner[b-106bviouis] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
    border: 1px solid #fdba74;
    border-radius: 10px;
    margin-bottom: 12px;
    animation: streakSlideIn-b-106bviouis 0.3s ease-out;
}

:global([data-bs-theme="dark"]) .streak-banner[b-106bviouis] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
    border-color: rgba(251, 146, 60, 0.3);
}

@keyframes streakSlideIn-b-106bviouis {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.streak-fire-icon[b-106bviouis] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fireFlicker-b-106bviouis 1.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker-b-106bviouis {
    0% {
        transform: scale(1) rotate(-2deg);
    }
    50% {
        transform: scale(1.1) rotate(2deg);
    }
    100% {
        transform: scale(1.05) rotate(-1deg);
    }
}

.fire-emoji[b-106bviouis] {
    font-size: 1.4rem;
    line-height: 1;
}

.streak-info[b-106bviouis] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.streak-count[b-106bviouis] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #c2410c;
    line-height: 1.3;
}

:global([data-bs-theme="dark"]) .streak-count[b-106bviouis] {
    color: #fb923c;
}

.streak-milestone[b-106bviouis] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #ea580c;
    line-height: 1.3;
}

:global([data-bs-theme="dark"]) .streak-milestone[b-106bviouis] {
    color: #fdba74;
}

.streak-best[b-106bviouis] {
    flex-shrink: 0;
}

.streak-best-label[b-106bviouis] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9a3412;
    background: rgba(251, 146, 60, 0.15);
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

:global([data-bs-theme="dark"]) .streak-best-label[b-106bviouis] {
    color: #fdba74;
    background: rgba(251, 146, 60, 0.1);
}
/* /Features/Recognition/Components/StreakWidget.razor.rz.scp.css */
/* ============ STREAK WIDGET STYLES ============ */
/* Scoped to StreakWidget.razor component */

.streak-stats[b-r12il31ckj] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.streak-current[b-r12il31ckj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.streak-longest[b-r12il31ckj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.streak-number[b-r12il31ckj] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:global([data-bs-theme="dark"]) .streak-number[b-r12il31ckj] {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.streak-number-sm[b-r12il31ckj] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: #9a3412;
}

:global([data-bs-theme="dark"]) .streak-number-sm[b-r12il31ckj] {
    color: #fdba74;
}

.streak-label[b-r12il31ckj] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #78716c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

:global([data-bs-theme="dark"]) .streak-label[b-r12il31ckj] {
    color: #a8a29e;
}

.streak-divider[b-r12il31ckj] {
    width: 1px;
    height: 36px;
    background: #e7e5e4;
    flex-shrink: 0;
}

:global([data-bs-theme="dark"]) .streak-divider[b-r12il31ckj] {
    background: rgba(255, 255, 255, 0.1);
}

/* Mini Streak Calendar */
.streak-calendar[b-r12il31ckj] {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid #f5f5f4;
}

:global([data-bs-theme="dark"]) .streak-calendar[b-r12il31ckj] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.streak-day[b-r12il31ckj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.streak-day-label[b-r12il31ckj] {
    font-size: 0.65rem;
    font-weight: 500;
    color: #a8a29e;
    text-transform: uppercase;
}

:global([data-bs-theme="dark"]) .streak-day-label[b-r12il31ckj] {
    color: #78716c;
}

.streak-day.today .streak-day-label[b-r12il31ckj] {
    color: var(--bs-primary, #0d6efd);
    font-weight: 700;
}

.streak-dot[b-r12il31ckj] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e7e5e4;
    transition: all 0.2s ease;
}

:global([data-bs-theme="dark"]) .streak-dot[b-r12il31ckj] {
    background: rgba(255, 255, 255, 0.1);
}

.streak-day.active .streak-dot[b-r12il31ckj] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.4);
}

:global([data-bs-theme="dark"]) .streak-day.active .streak-dot[b-r12il31ckj] {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.3);
}

.streak-day.today .streak-dot[b-r12il31ckj] {
    border: 2px solid var(--bs-primary, #0d6efd);
    width: 12px;
    height: 12px;
}

.streak-day.today.active .streak-dot[b-r12il31ckj] {
    border-color: #f97316;
}

/* Encouragement */
.streak-encouragement[b-r12il31ckj] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #ea580c;
    text-align: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: 8px;
    margin-top: 4px;
}

:global([data-bs-theme="dark"]) .streak-encouragement[b-r12il31ckj] {
    color: #fdba74;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(249, 115, 22, 0.06) 100%);
}

/* Empty state */
.streak-empty-icon[b-r12il31ckj] {
    font-size: 1.5rem;
    opacity: 0.4;
    display: block;
}
/* /Features/Recognition/Components/TagCloud.razor.rz.scp.css */
/* ============ TAG CLOUD STYLES ============ */

.tag-cloud-container[b-084nlxvua5] {
    padding: 0.5rem 0;
}

.tag-cloud[b-084nlxvua5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    padding: 1rem;
}

.tag-cloud-item[b-084nlxvua5] {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.3;
}

.tag-cloud-item:hover[b-084nlxvua5] {
    transform: scale(1.1);
    opacity: 0.85;
}

/* Color variants */
.tag-cloud-item.color-blue[b-084nlxvua5] { color: #2563eb; }
.tag-cloud-item.color-purple[b-084nlxvua5] { color: #7c3aed; }
.tag-cloud-item.color-teal[b-084nlxvua5] { color: #0d9488; }
.tag-cloud-item.color-orange[b-084nlxvua5] { color: #ea580c; }
.tag-cloud-item.color-pink[b-084nlxvua5] { color: #db2777; }
.tag-cloud-item.color-green[b-084nlxvua5] { color: #16a34a; }
.tag-cloud-item.color-indigo[b-084nlxvua5] { color: #4f46e5; }
.tag-cloud-item.color-cyan[b-084nlxvua5] { color: #0891b2; }

/* Dark mode */
:global([data-bs-theme="dark"]) .tag-cloud-item.color-blue[b-084nlxvua5] { color: #60a5fa; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-purple[b-084nlxvua5] { color: #a78bfa; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-teal[b-084nlxvua5] { color: #2dd4bf; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-orange[b-084nlxvua5] { color: #fb923c; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-pink[b-084nlxvua5] { color: #f472b6; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-green[b-084nlxvua5] { color: #4ade80; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-indigo[b-084nlxvua5] { color: #818cf8; }
:global([data-bs-theme="dark"]) .tag-cloud-item.color-cyan[b-084nlxvua5] { color: #22d3ee; }

:global([data-bs-theme="dark"]) .tag-cloud-item:hover[b-084nlxvua5] {
    opacity: 1;
}
/* /Features/Recognition/Components/ThreadedComment.razor.rz.scp.css */
/* ============ THREADED COMMENT COMPONENT ============ */

.threaded-comment[b-lx7380ns2j] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.threaded-comment:last-child[b-lx7380ns2j] {
    border-bottom: none;
}

.tc-main[b-lx7380ns2j] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    transition: background 0.2s;
}

.tc-main:hover[b-lx7380ns2j] {
    background: rgba(0, 86, 179, 0.02);
}

/* Avatar */
.tc-av-img[b-lx7380ns2j] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tc-av-placeholder[b-lx7380ns2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0056b3, #0d6efd);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Reply indent */
.threaded-reply > .tc-main[b-lx7380ns2j] {
    padding-left: 28px;
}

.threaded-reply .tc-av-img[b-lx7380ns2j] {
    width: 28px;
    height: 28px;
}

.threaded-reply .tc-av-placeholder[b-lx7380ns2j] {
    font-size: 0.65rem;
}

/* Replies container */
.tc-replies[b-lx7380ns2j] {
    margin-left: 32px;
    border-left: 2px solid rgba(0, 86, 179, 0.15);
}

/* Body */
.tc-body[b-lx7380ns2j] {
    flex: 1;
    min-width: 0;
}

.tc-header[b-lx7380ns2j] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.tc-user[b-lx7380ns2j] {
    font-weight: 700;
    color: var(--theme-text-main, #212529);
    font-size: 0.9rem;
}

.tc-reply-indicator[b-lx7380ns2j] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    color: var(--bs-primary, #0d6efd);
    font-weight: 500;
}

.tc-reply-indicator i[b-lx7380ns2j] {
    font-size: 0.7rem;
}

.tc-time[b-lx7380ns2j] {
    color: var(--theme-text-muted, #6c757d);
    font-size: 0.8rem;
}

.tc-text[b-lx7380ns2j] {
    margin: 0 0 6px 0;
    color: var(--theme-text-main, #212529);
    font-size: 0.93rem;
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Points badge */
.tc-points[b-lx7380ns2j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #856404;
    margin-bottom: 6px;
}

.tc-points i[b-lx7380ns2j] {
    color: #ffc107;
    font-size: 0.7rem;
}

/* Actions row */
.tc-actions[b-lx7380ns2j] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.tc-action-btn[b-lx7380ns2j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #6c757d);
    font-size: 0.78rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.tc-action-btn:hover[b-lx7380ns2j] {
    color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.08);
}

.tc-delete-btn:hover[b-lx7380ns2j] {
    color: var(--bs-danger, #d32f2f);
    background: rgba(211, 47, 47, 0.08);
}

.tc-locked[b-lx7380ns2j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6c757d);
}

/* ============ DARK MODE ============ */
:global([data-bs-theme="dark"]) .threaded-comment[b-lx7380ns2j] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:global([data-bs-theme="dark"]) .tc-main:hover[b-lx7380ns2j] {
    background: rgba(255, 255, 255, 0.03);
}

:global([data-bs-theme="dark"]) .tc-av-placeholder[b-lx7380ns2j] {
    background: linear-gradient(135deg, #0a58ca, #3d8bfd);
}

:global([data-bs-theme="dark"]) .tc-replies[b-lx7380ns2j] {
    border-left-color: rgba(99, 163, 255, 0.2);
}

:global([data-bs-theme="dark"]) .tc-user[b-lx7380ns2j] {
    color: #e9ecef;
}

:global([data-bs-theme="dark"]) .tc-time[b-lx7380ns2j] {
    color: #adb5bd;
}

:global([data-bs-theme="dark"]) .tc-text[b-lx7380ns2j] {
    color: #dee2e6;
}

:global([data-bs-theme="dark"]) .tc-points[b-lx7380ns2j] {
    background: rgba(255, 193, 7, 0.12);
    color: #ffc107;
}

:global([data-bs-theme="dark"]) .tc-action-btn[b-lx7380ns2j] {
    color: #adb5bd;
}

:global([data-bs-theme="dark"]) .tc-action-btn:hover[b-lx7380ns2j] {
    color: #6ea8fe;
    background: rgba(13, 110, 253, 0.12);
}

:global([data-bs-theme="dark"]) .tc-delete-btn:hover[b-lx7380ns2j] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

:global([data-bs-theme="dark"]) .tc-locked[b-lx7380ns2j] {
    color: #6c757d;
}

:global([data-bs-theme="dark"]) .tc-reply-indicator[b-lx7380ns2j] {
    color: #6ea8fe;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 575.98px) {
    .tc-main[b-lx7380ns2j] {
        padding: 12px;
        gap: 10px;
    }

    .threaded-reply > .tc-main[b-lx7380ns2j] {
        padding-left: 20px;
    }

    .tc-replies[b-lx7380ns2j] {
        margin-left: 24px;
    }

    .tc-av-img[b-lx7380ns2j] {
        width: 32px;
        height: 32px;
    }

    .threaded-reply .tc-av-img[b-lx7380ns2j] {
        width: 24px;
        height: 24px;
    }
}
/* /Features/Recognition/Components/TrendingHashtags.razor.rz.scp.css */
/* ============ TRENDING HASHTAGS STYLES ============ */
/* Scoped to TrendingHashtags.razor component */

.trending-hashtags-list[b-6h4nxp2hb2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trending-hashtag-item[b-6h4nxp2hb2] {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    background: transparent;
}

.trending-hashtag-item:hover[b-6h4nxp2hb2] {
    background: #f8f9fa;
}

.trending-hashtag-item.active[b-6h4nxp2hb2] {
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
}

.trending-hashtag-item .hashtag-name[b-6h4nxp2hb2] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #212529;
}

.trending-hashtag-item.active .hashtag-name[b-6h4nxp2hb2] {
    color: #0d6efd;
}

.trending-hashtag-item .hashtag-count[b-6h4nxp2hb2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 10px;
}

.trending-hashtag-item.active .hashtag-count[b-6h4nxp2hb2] {
    background: #0d6efd;
    color: white;
}

/* Dark mode */
:global([data-bs-theme="dark"]) .trending-hashtag-item:hover[b-6h4nxp2hb2] {
    background: rgba(255, 255, 255, 0.06);
}

:global([data-bs-theme="dark"]) .trending-hashtag-item.active[b-6h4nxp2hb2] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
}

:global([data-bs-theme="dark"]) .trending-hashtag-item .hashtag-name[b-6h4nxp2hb2] {
    color: #e1e3e8;
}

:global([data-bs-theme="dark"]) .trending-hashtag-item .hashtag-count[b-6h4nxp2hb2] {
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.08);
}

/* /Features/Rewards/Components/AdminRewardManager.razor.rz.scp.css */
/* ── Stats Cards ── */
.arm-stats[b-cj32kcyuzu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.arm-stat-card[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.arm-stat-card:hover[b-cj32kcyuzu] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.arm-stat-icon[b-cj32kcyuzu] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.arm-stat-icon--total[b-cj32kcyuzu] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.arm-stat-icon--active[b-cj32kcyuzu] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.arm-stat-icon--redeemed[b-cj32kcyuzu] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.arm-stat-icon--pending[b-cj32kcyuzu] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.arm-stat-info[b-cj32kcyuzu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arm-stat-value[b-cj32kcyuzu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
}

.arm-stat-label[b-cj32kcyuzu] {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Tabs ── */
.arm-tabs[b-cj32kcyuzu] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    margin-bottom: 20px;
    width: fit-content;
}

.arm-tab[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.arm-tab:hover[b-cj32kcyuzu] {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}

.arm-tab--active[b-cj32kcyuzu] {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.arm-tab-count[b-cj32kcyuzu] {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}

.arm-tab--active .arm-tab-count[b-cj32kcyuzu] {
    background: #3b82f6;
    color: #fff;
}

.arm-tab-badge[b-cj32kcyuzu] {
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ── List ── */
.arm-list[b-cj32kcyuzu] {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    overflow: hidden;
}

.arm-item[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.arm-item:last-child[b-cj32kcyuzu] {
    border-bottom: none;
}

.arm-item:hover[b-cj32kcyuzu] {
    background: #f8fafc;
}

.arm-item--inactive[b-cj32kcyuzu] {
    opacity: 0.55;
}

.arm-item--inactive:hover[b-cj32kcyuzu] {
    opacity: 0.75;
}

/* ── Thumbnail ── */
.arm-item-thumb[b-cj32kcyuzu] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
}

.arm-item-thumb img[b-cj32kcyuzu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arm-item-thumb-placeholder[b-cj32kcyuzu] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4ff, #e8ecf8);
    color: #94a3b8;
    font-size: 1.3rem;
}

.arm-item-thumb-placeholder--user[b-cj32kcyuzu] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}

/* ── Body ── */
.arm-item-body[b-cj32kcyuzu] {
    flex: 1;
    min-width: 0;
}

.arm-item-header[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.arm-item-title[b-cj32kcyuzu] {
    font-size: 0.92rem;
    font-weight: 650;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arm-item-desc[b-cj32kcyuzu] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.arm-item-meta[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.arm-pending-time[b-cj32kcyuzu] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-left: auto;
}

/* ── Points ── */
.arm-points[b-cj32kcyuzu] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.arm-points i[b-cj32kcyuzu] {
    font-size: 0.72rem;
}

/* ── Stock ── */
.arm-stock[b-cj32kcyuzu] {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.arm-stock--low[b-cj32kcyuzu] {
    color: #ef4444;
    font-weight: 700;
}

/* ── Category Badges ── */
.arm-category[b-cj32kcyuzu] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.arm-category--gift-card[b-cj32kcyuzu] {
    background: #dbeafe;
    color: #2563eb;
}

.arm-category--donation[b-cj32kcyuzu] {
    background: #dcfce7;
    color: #16a34a;
}

.arm-category--swag[b-cj32kcyuzu] {
    background: #fae8ff;
    color: #a855f7;
}

.arm-category--cash[b-cj32kcyuzu] {
    background: #fef3c7;
    color: #d97706;
}

.arm-category--other[b-cj32kcyuzu] {
    background: #f1f5f9;
    color: #64748b;
}

/* ── Status Badges ── */
.arm-badge[b-cj32kcyuzu] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

.arm-badge--active[b-cj32kcyuzu] {
    background: #dcfce7;
    color: #16a34a;
}

.arm-badge--inactive[b-cj32kcyuzu] {
    background: #f1f5f9;
    color: #94a3b8;
}

.arm-badge--approval[b-cj32kcyuzu] {
    background: #e0f2fe;
    color: #0284c7;
}

/* ── Action Buttons ── */
.arm-item-actions[b-cj32kcyuzu] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.arm-item-actions--pending[b-cj32kcyuzu] {
    flex-direction: column;
    gap: 6px;
}

.arm-action-btn[b-cj32kcyuzu] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #64748b;
}

.arm-action-btn:hover[b-cj32kcyuzu] {
    transform: scale(1.08);
}

.arm-action-btn--edit:hover[b-cj32kcyuzu] {
    background: #dbeafe;
    color: #2563eb;
}

.arm-action-btn--pause:hover[b-cj32kcyuzu] {
    background: #fef3c7;
    color: #d97706;
}

.arm-action-btn--play:hover[b-cj32kcyuzu] {
    background: #dcfce7;
    color: #16a34a;
}

.arm-action-btn--delete:hover[b-cj32kcyuzu] {
    background: #fee2e2;
    color: #dc2626;
}

.arm-approve-btn[b-cj32kcyuzu],
.arm-reject-btn[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.arm-approve-btn[b-cj32kcyuzu] {
    background: #dcfce7;
    color: #16a34a;
}

.arm-approve-btn:hover[b-cj32kcyuzu] {
    background: #16a34a;
    color: #fff;
}

.arm-reject-btn[b-cj32kcyuzu] {
    background: #fee2e2;
    color: #dc2626;
}

.arm-reject-btn:hover[b-cj32kcyuzu] {
    background: #dc2626;
    color: #fff;
}

/* ── Empty State ── */
.arm-empty[b-cj32kcyuzu] {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
}

.arm-empty i[b-cj32kcyuzu] {
    font-size: 3rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px;
}

.arm-empty h5[b-cj32kcyuzu] {
    font-weight: 650;
    color: #334155;
    margin-bottom: 6px;
}

.arm-empty p[b-cj32kcyuzu] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .arm-stats[b-cj32kcyuzu] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .arm-stat-card[b-cj32kcyuzu] {
        padding: 14px 16px;
        gap: 10px;
    }

    .arm-stat-icon[b-cj32kcyuzu] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .arm-stat-value[b-cj32kcyuzu] {
        font-size: 1.25rem;
    }

    .arm-item[b-cj32kcyuzu] {
        flex-wrap: wrap;
        padding: 14px 16px;
        gap: 12px;
    }

    .arm-item-thumb[b-cj32kcyuzu] {
        width: 44px;
        height: 44px;
    }

    .arm-item-body[b-cj32kcyuzu] {
        flex: 1;
        min-width: calc(100% - 60px);
    }

    .arm-item-desc[b-cj32kcyuzu] {
        max-width: 100%;
    }

    .arm-item-actions[b-cj32kcyuzu] {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px solid #f1f5f9;
    }

    .arm-item-actions--pending[b-cj32kcyuzu] {
        flex-direction: row;
    }
}

@media (max-width: 480px) {
    .arm-stats[b-cj32kcyuzu] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .arm-stat-card[b-cj32kcyuzu] {
        padding: 12px;
    }

    .arm-stat-value[b-cj32kcyuzu] {
        font-size: 1.1rem;
    }

    .arm-tabs[b-cj32kcyuzu] {
        width: 100%;
    }

    .arm-tab[b-cj32kcyuzu] {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* ── Modal ── */
.arm-modal-overlay[b-cj32kcyuzu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.arm-modal[b-cj32kcyuzu] {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: armModalIn-b-cj32kcyuzu 0.25s ease-out;
}

.arm-modal--sm[b-cj32kcyuzu] {
    max-width: 480px;
}

@keyframes armModalIn-b-cj32kcyuzu {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.arm-modal-header[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 0;
}

.arm-modal-icon[b-cj32kcyuzu] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    flex-shrink: 0;
}

.arm-modal-icon--danger[b-cj32kcyuzu] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.arm-modal-title[b-cj32kcyuzu] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    flex: 1;
}

.arm-modal-close[b-cj32kcyuzu] {
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.arm-modal-close:hover[b-cj32kcyuzu] {
    background: #e2e8f0;
    color: #1e293b;
}

.arm-modal-body[b-cj32kcyuzu] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.arm-modal-footer[b-cj32kcyuzu] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid #f1f5f9;
}

/* ── Form ── */
.arm-form-row[b-cj32kcyuzu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.arm-form-group[b-cj32kcyuzu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.arm-form-label[b-cj32kcyuzu] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.arm-required[b-cj32kcyuzu] {
    color: #ef4444;
}

.arm-form-input[b-cj32kcyuzu] {
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
}

.arm-form-input:focus[b-cj32kcyuzu] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.arm-form-input[b-cj32kcyuzu]::placeholder {
    color: #94a3b8;
}

.arm-form-textarea[b-cj32kcyuzu] {
    resize: vertical;
    min-height: 80px;
}

.arm-form-select[b-cj32kcyuzu] {
    appearance: auto;
    cursor: pointer;
}

/* ── Toggle Switch ── */
.arm-toggle-wrap[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.arm-toggle-wrap:hover[b-cj32kcyuzu] {
    background: #f1f5f9;
}

.arm-toggle[b-cj32kcyuzu] {
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}

.arm-toggle--on[b-cj32kcyuzu] {
    background: #3b82f6;
}

.arm-toggle-knob[b-cj32kcyuzu] {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.arm-toggle--on .arm-toggle-knob[b-cj32kcyuzu] {
    transform: translateX(20px);
}

.arm-toggle-label[b-cj32kcyuzu] {
    font-size: 0.88rem;
    color: #475569;
    font-weight: 500;
}

/* ── Buttons ── */
.arm-btn[b-cj32kcyuzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.arm-btn--cancel[b-cj32kcyuzu] {
    background: #f1f5f9;
    color: #64748b;
}

.arm-btn--cancel:hover[b-cj32kcyuzu] {
    background: #e2e8f0;
    color: #334155;
}

.arm-btn--primary[b-cj32kcyuzu] {
    background: #3b82f6;
    color: #fff;
}

.arm-btn--primary:hover[b-cj32kcyuzu] {
    background: #2563eb;
}

.arm-btn--primary:disabled[b-cj32kcyuzu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.arm-btn--danger[b-cj32kcyuzu] {
    background: #ef4444;
    color: #fff;
}

.arm-btn--danger:hover[b-cj32kcyuzu] {
    background: #dc2626;
}

.arm-btn--danger:disabled[b-cj32kcyuzu] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Reject Modal ── */
.arm-reject-summary[b-cj32kcyuzu] {
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.arm-info-banner[b-cj32kcyuzu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #1d4ed8;
}

.arm-info-banner i[b-cj32kcyuzu] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Modal Responsive ── */
@media (max-width: 640px) {
    .arm-modal-overlay[b-cj32kcyuzu] {
        padding: 0;
        align-items: flex-end;
    }

    .arm-modal[b-cj32kcyuzu] {
        border-radius: 20px 20px 0 0;
        max-height: 95vh;
    }

    .arm-form-row[b-cj32kcyuzu] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .arm-modal-body[b-cj32kcyuzu] {
        padding: 16px 20px;
    }

    .arm-modal-header[b-cj32kcyuzu] {
        padding: 16px 20px 0;
    }

    .arm-modal-footer[b-cj32kcyuzu] {
        padding: 12px 20px 16px;
    }
}
/* /Features/Rewards/Components/SponsoredRewards.razor.rz.scp.css */
/* ============ PAGE LAYOUT ============ */
.sponsored-page[b-3q07nk6prg] {
    min-height: 100vh;
    background: #f8f9fa;
}

/* ============ MOBILE HEADER ============ */
.sponsored-mobile-header[b-3q07nk6prg] {
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 100;
}

.mobile-header-content[b-3q07nk6prg] {
    padding: 12px 16px;
}

.mobile-points-bar[b-3q07nk6prg] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border-bottom: 1px solid rgba(255, 193, 7, 0.15);
}

.points-display[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.points-icon[b-3q07nk6prg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.points-info[b-3q07nk6prg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.points-value[b-3q07nk6prg] {
    font-size: 18px;
    font-weight: 700;
    color: #e65100;
}

.points-label[b-3q07nk6prg] {
    font-size: 12px;
    color: #795548;
}

/* ============ DESKTOP POINTS BADGE ============ */
.points-badge[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
}

.points-badge-icon[b-3q07nk6prg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.points-badge-content[b-3q07nk6prg] {
    display: flex;
    flex-direction: column;
}

.points-badge-value[b-3q07nk6prg] {
    font-size: 18px;
    font-weight: 700;
    color: #e65100;
    line-height: 1.1;
}

.points-badge-label[b-3q07nk6prg] {
    font-size: 11px;
    color: #795548;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============ TABS ============ */
.sponsored-tabs[b-3q07nk6prg] {
    display: flex;
    gap: 4px;
    background: #e9ecef;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto;
}

.tab-btn[b-3q07nk6prg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-3q07nk6prg] {
    color: #495057;
    background: rgba(255, 255, 255, 0.5);
}

.tab-btn.active[b-3q07nk6prg] {
    background: white;
    color: #212529;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tab-count[b-3q07nk6prg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.08);
    font-size: 11px;
    font-weight: 600;
}

.tab-btn.active .tab-count[b-3q07nk6prg] {
    background: rgba(255, 193, 7, 0.2);
    color: #e65100;
}

/* ============ SPONSORED CARD ============ */
.sponsored-card[b-3q07nk6prg] {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sponsored-card:hover[b-3q07nk6prg] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.sponsored-card.free-reward[b-3q07nk6prg] {
    border-color: rgba(40, 167, 69, 0.2);
}

/* ============ IMAGE SECTION ============ */
.sponsored-image-container[b-3q07nk6prg] {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0f0f0;
}

.sponsored-image[b-3q07nk6prg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sponsored-placeholder[b-3q07nk6prg] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
    font-size: 40px;
    color: #ff9800;
}

.free-badge[b-3q07nk6prg] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.category-tag[b-3q07nk6prg] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    backdrop-filter: blur(4px);
}

.stock-tag[b-3q07nk6prg] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    backdrop-filter: blur(4px);
}

.status-overlay[b-3q07nk6prg] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-overlay.active[b-3q07nk6prg] {
    background: rgba(40, 167, 69, 0.9);
    color: white;
}

.status-overlay.claimed[b-3q07nk6prg] {
    background: rgba(13, 110, 253, 0.9);
    color: white;
}

.status-overlay.cancelled[b-3q07nk6prg] {
    background: rgba(108, 117, 125, 0.9);
    color: white;
}

.claimed-overlay[b-3q07nk6prg] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(13, 110, 253, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* ============ CONTENT SECTION ============ */
.sponsored-content[b-3q07nk6prg] {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sponsored-title[b-3q07nk6prg] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212529;
}

.sponsored-description[b-3q07nk6prg] {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ============ SPONSOR INFO ============ */
.sponsor-info[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6c757d;
}

.sponsor-avatar-small[b-3q07nk6prg] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 12px;
    color: #6c757d;
}

.sponsor-avatar-small img[b-3q07nk6prg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sponsor-name[b-3q07nk6prg] {
    font-weight: 500;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============ FOOTER ============ */
.sponsored-footer[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.points-cost[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
    color: #e65100;
}

.points-cost i[b-3q07nk6prg] {
    color: #ffc107;
    font-size: 12px;
}

.points-cost.free[b-3q07nk6prg] {
    color: #28a745;
}

.points-cost.free i[b-3q07nk6prg] {
    color: #28a745;
}

.claim-btn[b-3q07nk6prg] {
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
}

/* ============ CLAIM PROGRESS (My Sponsorships) ============ */
.claim-progress[b-3q07nk6prg] {
    margin-bottom: 8px;
}

.progress-bar-container[b-3q07nk6prg] {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill[b-3q07nk6prg] {
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-3q07nk6prg] {
    font-size: 11px;
    color: #6c757d;
}

.sponsored-meta[b-3q07nk6prg] {
    margin-top: auto;
}

.funded-badge[b-3q07nk6prg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #e65100;
    background: rgba(255, 193, 7, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.funded-badge i[b-3q07nk6prg] {
    color: #ffc107;
    font-size: 10px;
}

/* ============ BOTTOM-SHEET MODAL (matches attendance detail) ============ */
.sp-modal-overlay[b-3q07nk6prg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: spFadeIn-b-3q07nk6prg 0.2s ease-out;
}

.sp-modal-container[b-3q07nk6prg] {
    width: 100%;
    max-width: 420px;
    animation: spSlideUp-b-3q07nk6prg 0.3s ease-out;
    will-change: transform;
}

.sp-modal-content[b-3q07nk6prg] {
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.15);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.sp-modal-body[b-3q07nk6prg] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 12px 16px;
}

/* Drag handle */
.sp-drag-handle[b-3q07nk6prg] {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
}

.sp-drag-bar[b-3q07nk6prg] {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: #c8c8c8;
}

/* Header */
.sp-modal-header[b-3q07nk6prg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.sp-header-left[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-header-icon[b-3q07nk6prg] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.sp-header-icon.sponsor[b-3q07nk6prg] {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.sp-header-icon.claim[b-3q07nk6prg] {
    background: linear-gradient(135deg, #ffc107, #ffb300);
}

.sp-header-title[b-3q07nk6prg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
}

.sp-header-sub[b-3q07nk6prg] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 1px;
}

.sp-close-btn[b-3q07nk6prg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.sp-close-btn:hover[b-3q07nk6prg] {
    background: #e0e0e0;
}

/* Actions footer — always visible */
.sp-modal-actions[b-3q07nk6prg] {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f0f0;
    background: white;
    flex-shrink: 0;
}

.sp-btn-secondary[b-3q07nk6prg] {
    padding: 10px 20px;
    background: transparent;
    color: #6c757d;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
}

.sp-btn-secondary:hover[b-3q07nk6prg] {
    background: #f5f5f5;
}

.sp-btn-primary[b-3q07nk6prg] {
    padding: 10px 20px;
    background: var(--bs-primary, #0d6efd);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
}

.sp-btn-primary.warning[b-3q07nk6prg] {
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #212529;
}

.sp-btn-primary:hover[b-3q07nk6prg] {
    opacity: 0.9;
}

.sp-btn-primary:disabled[b-3q07nk6prg], .sp-btn-secondary:disabled[b-3q07nk6prg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form labels & hints */
.sp-label[b-3q07nk6prg] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 3px;
}

.sp-hint[b-3q07nk6prg] {
    font-size: 0.65rem;
    color: #6c757d;
    margin-top: 2px;
}

.sp-hint a[b-3q07nk6prg] {
    color: #0d6efd;
    text-decoration: none;
}

.sp-hint a:hover[b-3q07nk6prg] {
    text-decoration: underline;
}

.sp-section-divider[b-3q07nk6prg] {
    height: 1px;
    background: #f0f0f0;
    margin: 8px 0;
}

/* Category dropdown */
.sp-dropdown[b-3q07nk6prg] {
    position: relative;
}

.sp-dropdown-toggle[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0.55rem 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.sp-dropdown-toggle:hover[b-3q07nk6prg] {
    border-color: #adb5bd;
}

.sp-dropdown-toggle:focus[b-3q07nk6prg] {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    outline: none;
}

.sp-cat-icon[b-3q07nk6prg] {
    font-size: 14px;
    color: #ff9800;
}

.sp-chevron[b-3q07nk6prg] {
    margin-left: auto;
    font-size: 10px;
    color: #6c757d;
    transition: transform 0.2s;
}

.sp-chevron.open[b-3q07nk6prg] {
    transform: rotate(180deg);
}

.sp-dropdown-menu[b-3q07nk6prg] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
    padding: 4px;
    animation: spDropIn-b-3q07nk6prg 0.15s ease-out;
}

.sp-dropdown-item[b-3q07nk6prg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #212529;
    cursor: pointer;
    transition: background 0.1s;
}

.sp-dropdown-item:hover[b-3q07nk6prg] {
    background: #f8f9fa;
}

.sp-dropdown-item.active[b-3q07nk6prg] {
    background: rgba(13, 110, 253, 0.06);
    font-weight: 600;
}

.sp-dropdown-item i:first-child[b-3q07nk6prg] {
    font-size: 15px;
    color: #ff9800;
    width: 20px;
    text-align: center;
}

@keyframes spDropIn-b-3q07nk6prg {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Balance bar */
.sp-balance-bar[b-3q07nk6prg] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 8px;
}

/* Claim modal specific */
.sp-preview-img[b-3q07nk6prg] {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

.sp-preview-placeholder[b-3q07nk6prg] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8e1, #ffe0b2);
    border-radius: 10px;
    font-size: 36px;
    color: #ff9800;
}

.sp-message-box[b-3q07nk6prg] {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid #ffc107;
    font-size: 0.78rem;
    color: #495057;
}

.sp-info-section[b-3q07nk6prg] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px 12px;
}

.sp-info-row[b-3q07nk6prg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.78rem;
}

.sp-info-key[b-3q07nk6prg] {
    color: #6c757d;
    font-weight: 500;
}

.sp-info-val[b-3q07nk6prg] {
    font-weight: 600;
    color: #212529;
}

/* Desktop overrides */
@media (min-width: 768px) {
    .sp-modal-overlay[b-3q07nk6prg] {
        align-items: center;
        padding: 16px;
    }

    .sp-modal-container[b-3q07nk6prg] {
        animation: spModalIn-b-3q07nk6prg 0.3s ease-out;
    }

    .sp-modal-content[b-3q07nk6prg] {
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        max-height: 85vh;
    }

    .sp-modal-actions[b-3q07nk6prg] {
        border-radius: 0 0 16px 16px;
    }

    .sp-btn-secondary[b-3q07nk6prg], .sp-btn-primary[b-3q07nk6prg] {
        flex: initial;
    }
}

@keyframes spFadeIn-b-3q07nk6prg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spSlideUp-b-3q07nk6prg {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spModalIn-b-3q07nk6prg {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============ EMPTY STATE ============ */
.empty-state[b-3q07nk6prg] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-3q07nk6prg] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff8e1, #ffe0b2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: #ff9800;
}

/* ============ SKELETON ============ */
.skeleton-card[b-3q07nk6prg] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

.skeleton-image[b-3q07nk6prg] {
    aspect-ratio: 4/3;
    background: #e9ecef;
}

.skeleton-content[b-3q07nk6prg] {
    padding: 12px;
}

.skeleton-title[b-3q07nk6prg] {
    height: 16px;
    border-radius: 4px;
    background: #e9ecef;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-description[b-3q07nk6prg] {
    height: 12px;
    border-radius: 4px;
    background: #e9ecef;
    margin-bottom: 12px;
    width: 60%;
}

.skeleton-footer[b-3q07nk6prg] {
    display: flex;
    justify-content: space-between;
}

.skeleton-points[b-3q07nk6prg] {
    height: 20px;
    width: 60px;
    border-radius: 4px;
    background: #e9ecef;
}

.skeleton-button[b-3q07nk6prg] {
    height: 28px;
    width: 70px;
    border-radius: 14px;
    background: #e9ecef;
}

.shimmer[b-3q07nk6prg] {
    animation: shimmer-b-3q07nk6prg 1.5s infinite;
    background: linear-gradient(90deg, #e9ecef 25%, #f0f0f0 50%, #e9ecef 75%);
    background-size: 200% 100%;
}

/* ============ ANIMATIONS ============ */
@keyframes shimmer-b-3q07nk6prg {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 767.98px) {
    .sponsored-placeholder[b-3q07nk6prg] {
        font-size: 28px;
    }

    .sponsored-content[b-3q07nk6prg] {
        padding: 10px;
    }

    .sponsored-title[b-3q07nk6prg] {
        font-size: 13px;
    }

    .tab-btn[b-3q07nk6prg] {
        font-size: 13px;
        padding: 8px 12px;
    }
}
/* /Features/SessionManagement/CreateSession.razor.rz.scp.css */
/* CreateSession.razor.css - Enhanced Styling */

/* ========================================
   BACK BUTTON
   ======================================== */
.back-button[b-qsbw2gsks4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-button:hover[b-qsbw2gsks4] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
}

.back-button i[b-qsbw2gsks4] {
    font-size: 1rem;
}

/* ========================================
   DATE BADGE
   ======================================== */
.date-badge[b-qsbw2gsks4] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-primary);
    background-color: rgba(0, 86, 179, 0.08);
    border: 1px solid rgba(0, 86, 179, 0.2);
    border-radius: 50px;
}

/* ========================================
   RECURRENCE PATTERN OPTIONS
   ======================================== */
.recurrence-option[b-qsbw2gsks4] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin: 0;
    min-height: 70px;
}

.recurrence-option:hover[b-qsbw2gsks4] {
    border-color: var(--bs-primary);
    background-color: rgba(0, 86, 179, 0.03);
}

.recurrence-option.active[b-qsbw2gsks4] {
    border-color: var(--bs-primary);
    background-color: rgba(0, 86, 179, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

/* Hide the radio button input - multiple selectors for specificity */
.recurrence-radio[b-qsbw2gsks4],
.recurrence-option input[b-qsbw2gsks4],
.recurrence-option input[type="radio"][b-qsbw2gsks4],
.recurrence-option > input[b-qsbw2gsks4],
[b-qsbw2gsks4] .recurrence-option input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.recurrence-option i[b-qsbw2gsks4] {
    font-size: 1.5rem;
    color: #6c757d;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.recurrence-option.active i[b-qsbw2gsks4] {
    color: var(--bs-primary);
}

.recurrence-option span[b-qsbw2gsks4] {
    font-weight: 500;
    color: #495057;
}

.recurrence-option.active span[b-qsbw2gsks4] {
    color: var(--bs-primary);
    font-weight: 600;
}

.recurrence-option small[b-qsbw2gsks4] {
    font-size: 0.75rem;
    line-height: 1.2;
}

.recurrence-option.active small[b-qsbw2gsks4] {
    color: var(--bs-primary) !important;
    opacity: 0.8;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons-container[b-qsbw2gsks4] {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.action-buttons-container .d-flex[b-qsbw2gsks4] {
    gap: 0.75rem !important;
}

.btn-cancel[b-qsbw2gsks4] {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel:hover[b-qsbw2gsks4] {
    background-color: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}

.btn-reset[b-qsbw2gsks4] {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-reset:hover[b-qsbw2gsks4] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.btn-create[b-qsbw2gsks4] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #004494 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-create:hover:not(:disabled)[b-qsbw2gsks4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
    background: linear-gradient(135deg, #0066cc 0%, #003d80 100%);
    color: white;
}

.btn-create:disabled[b-qsbw2gsks4] {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
    color: white;
}

/* ========================================
   SESSION SUMMARY CARD
   ======================================== */
.session-summary-card[b-qsbw2gsks4] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 86, 179, 0.1);
}

.summary-header[b-qsbw2gsks4] {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #004494 100%);
    padding: 1rem 1.25rem;
}

.summary-header h6[b-qsbw2gsks4] {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.summary-body[b-qsbw2gsks4] {
    padding: 1.25rem;
}

.summary-list[b-qsbw2gsks4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li[b-qsbw2gsks4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-list li:last-child[b-qsbw2gsks4] {
    border-bottom: none;
}

.summary-label[b-qsbw2gsks4] {
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.summary-label i[b-qsbw2gsks4] {
    font-size: 0.85rem;
}

.summary-value[b-qsbw2gsks4] {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
    text-align: right;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Features Section */
.features-section[b-qsbw2gsks4] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.features-label[b-qsbw2gsks4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.feature-badge[b-qsbw2gsks4] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid;
}

.feature-badge-info[b-qsbw2gsks4] {
    background-color: rgba(13, 202, 240, 0.1);
    color: #0aa2c0;
    border-color: rgba(13, 202, 240, 0.3);
}

.feature-badge-warning[b-qsbw2gsks4] {
    background-color: rgba(255, 193, 7, 0.1);
    color: #cc9a00;
    border-color: rgba(255, 193, 7, 0.3);
}

.feature-badge-success[b-qsbw2gsks4] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border-color: rgba(25, 135, 84, 0.3);
}

.feature-badge-primary[b-qsbw2gsks4] {
    background-color: rgba(0, 86, 179, 0.1);
    color: var(--bs-primary);
    border-color: rgba(0, 86, 179, 0.3);
}

/* ========================================
   QUICK TIPS CARD - HIGHLIGHTED
   ======================================== */
.quick-tips-card[b-qsbw2gsks4] {
    background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 100%);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.quick-tips-card[b-qsbw2gsks4]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.tips-header[b-qsbw2gsks4] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
}

.tips-icon[b-qsbw2gsks4] {
    font-size: 1.25rem;
    color: #ffc107;
    margin-right: 0.75rem;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
}

.tips-title[b-qsbw2gsks4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.tips-list[b-qsbw2gsks4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li[b-qsbw2gsks4] {
    display: flex;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.tips-list li:last-child[b-qsbw2gsks4] {
    margin-bottom: 0;
}

.tips-bullet[b-qsbw2gsks4] {
    color: #4ade80;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.tips-list li strong[b-qsbw2gsks4] {
    color: #fff;
    font-weight: 600;
}

/* ========================================
   GENERAL CARD IMPROVEMENTS
   ======================================== */
.card[b-qsbw2gsks4] {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover[b-qsbw2gsks4] {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Input Groups Enhancement */
.input-group:focus-within[b-qsbw2gsks4] {
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.15);
    border-radius: 0.375rem;
}

.input-group:focus-within .input-group-text[b-qsbw2gsks4] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.input-group:focus-within .form-control[b-qsbw2gsks4],
.input-group:focus-within .form-select[b-qsbw2gsks4] {
    border-color: var(--bs-primary);
}

/* Switch Controls */
.form-check-input[role="switch"][b-qsbw2gsks4] {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.form-check-input[role="switch"]:checked[b-qsbw2gsks4] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Collapsible Animation */
.card-body[class*="pt-0"][b-qsbw2gsks4] {
    animation: slideDown-b-qsbw2gsks4 0.3s ease;
}

@keyframes slideDown-b-qsbw2gsks4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert Enhancement */
.alert[b-qsbw2gsks4] {
    animation: slideInDown-b-qsbw2gsks4 0.3s ease;
}

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

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

/* Tablet View (768px - 991px) */
@media (max-width: 991.98px) {
    .container-fluid[b-qsbw2gsks4] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .sticky-lg-top[b-qsbw2gsks4] {
        position: relative !important;
        top: 0 !important;
    }
    
    .session-summary-card[b-qsbw2gsks4],
    .quick-tips-card[b-qsbw2gsks4] {
        margin-bottom: 1rem;
    }
}

/* Mobile View (up to 767px) */
@media (max-width: 767.98px) {
    /* Container & Layout */
    .container-fluid[b-qsbw2gsks4] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-top: 1rem !important;
    }
    
    /* Header Section */
    .d-flex.flex-column.flex-md-row.mb-4[b-qsbw2gsks4] {
        margin-bottom: 1rem !important;
    }
    
    h4.fw-bold[b-qsbw2gsks4] {
        font-size: 1.15rem;
    }
    
    h4.fw-bold i[b-qsbw2gsks4] {
        font-size: 1rem;
    }
    
    .date-badge[b-qsbw2gsks4] {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Cards */
    .card[b-qsbw2gsks4] {
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
    }
    
    .card-body.p-4[b-qsbw2gsks4] {
        padding: 1rem !important;
    }
    
    .card-header.py-3[b-qsbw2gsks4] {
        padding: 0.75rem 1rem !important;
    }
    
    /* Section Headers */
    h6[style*="letter-spacing"][b-qsbw2gsks4] {
        font-size: 0.7rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Quick Presets */
    .d-flex.flex-wrap.gap-2 .btn-outline-primary[b-qsbw2gsks4] {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        justify-content: center;
    }
    
    .d-flex.flex-wrap.gap-2 .btn-outline-primary i[b-qsbw2gsks4] {
        font-size: 0.85rem;
    }
    
    /* Form Controls */
    .form-label[b-qsbw2gsks4] {
        font-size: 0.875rem;
        margin-bottom: 0.4rem;
    }
    
    .form-control[b-qsbw2gsks4],
    .form-select[b-qsbw2gsks4] {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 0.625rem 0.875rem;
    }
    
    .form-control-lg[b-qsbw2gsks4] {
        font-size: 16px !important;
        padding: 0.75rem 1rem;
    }
    
    .input-group-text[b-qsbw2gsks4] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .form-text[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
    
    /* Duration Mode Buttons */
    .btn-group.w-100 .btn[b-qsbw2gsks4] {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }
    
    .btn-group.w-100 .btn i[b-qsbw2gsks4] {
        display: none;
    }
    
    /* Recurrence Pattern Options */
    .recurrence-option[b-qsbw2gsks4] {
        padding: 0.75rem 1rem;
        flex-direction: row;
    }
    
    .recurrence-radio-indicator[b-qsbw2gsks4] {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    
    .recurrence-radio-indicator[b-qsbw2gsks4]::after {
        width: 8px;
        height: 8px;
    }
    
    .recurrence-option i[b-qsbw2gsks4] {
        font-size: 1rem;
        margin-right: 0.5rem !important;
    }
    
    .recurrence-option span[b-qsbw2gsks4] {
        font-size: 0.875rem;
    }
    
    /* Day Selection Buttons */
    .btn.rounded-pill[b-qsbw2gsks4] {
        min-width: 40px;
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* Number Stepper */
    .input-group[style*="max-width: 200px"][b-qsbw2gsks4] {
        max-width: 160px !important;
    }
    
    /* Preview List */
    div[style*="max-height: 180px"][b-qsbw2gsks4] {
        max-height: 150px !important;
    }
    
    /* Advanced Settings */
    .mb-4.p-3.bg-light[b-qsbw2gsks4] {
        padding: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
    
    .mb-4.p-3.bg-light h6[b-qsbw2gsks4] {
        font-size: 0.85rem;
        margin-bottom: 0.75rem !important;
    }
    
    .row.g-3[b-qsbw2gsks4] {
        --bs-gutter-y: 0.75rem;
    }
    
    /* Action Buttons Container */
    .action-buttons-container[b-qsbw2gsks4] {
        padding: 1rem;
        margin-top: 1rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 16px 16px 0 0;
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        z-index: 100;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: none;
    }
    
    .action-buttons-container .d-flex[b-qsbw2gsks4] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .btn-cancel[b-qsbw2gsks4],
    .btn-reset[b-qsbw2gsks4],
    .btn-create[b-qsbw2gsks4] {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }
    
    .btn-cancel[b-qsbw2gsks4] {
        order: 3;
        background-color: #ffffff;
        color: #4a5568;
    }
    
    .btn-reset[b-qsbw2gsks4] {
        order: 2;
        background-color: transparent;
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }
    
    .btn-create[b-qsbw2gsks4] {
        order: 1;
    }
    
    /* Session Summary Card */
    .session-summary-card[b-qsbw2gsks4] {
        border-radius: 12px;
    }
    
    .summary-header[b-qsbw2gsks4] {
        padding: 0.875rem 1rem;
    }
    
    .summary-header h6[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
    
    .summary-body[b-qsbw2gsks4] {
        padding: 1rem;
    }
    
    .summary-list li[b-qsbw2gsks4] {
        padding: 0.6rem 0;
    }
    
    .summary-label[b-qsbw2gsks4] {
        font-size: 0.8rem;
    }
    
    .summary-label i[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
    
    .summary-value[b-qsbw2gsks4] {
        font-size: 0.8rem;
        max-width: 50%;
    }
    
    .features-section[b-qsbw2gsks4] {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }
    
    .features-label[b-qsbw2gsks4] {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-badge[b-qsbw2gsks4] {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    
    /* Quick Tips Card */
    .quick-tips-card[b-qsbw2gsks4] {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .tips-icon[b-qsbw2gsks4] {
        font-size: 1.1rem;
    }
    
    .tips-title[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
    
    .tips-list li[b-qsbw2gsks4] {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
    }
    
    .tips-bullet[b-qsbw2gsks4] {
        margin-right: 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Breadcrumb */
    .breadcrumb[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
    
    .breadcrumb-item + .breadcrumb-item[b-qsbw2gsks4]::before {
        font-size: 0.7rem;
    }
    
    /* Location Picker */
    [b-qsbw2gsks4] .leaflet-container {
        height: 200px !important;
    }
    
    /* End Time Preview */
    .bg-light.rounded-3.d-flex[b-qsbw2gsks4] {
        padding: 0.75rem !important;
    }
    
    .bg-light.rounded-3.d-flex .bg-primary[b-qsbw2gsks4] {
        padding: 0.4rem !important;
    }
    
    .bg-light.rounded-3.d-flex .small[b-qsbw2gsks4] {
        font-size: 0.7rem;
    }
    
    .bg-light.rounded-3.d-flex .fw-bold[b-qsbw2gsks4] {
        font-size: 0.85rem;
    }
    
    /* Alert Messages */
    .alert[b-qsbw2gsks4] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 10px;
    }
    
    .alert i.fs-4[b-qsbw2gsks4] {
        font-size: 1.25rem !important;
    }
}

/* Small Mobile View (up to 375px) */
@media (max-width: 375px) {
    .container-fluid[b-qsbw2gsks4] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    h4.fw-bold[b-qsbw2gsks4] {
        font-size: 1rem;
    }
    
    .back-button[b-qsbw2gsks4] {
        width: 32px;
        height: 32px;
    }
    
    .back-button i[b-qsbw2gsks4] {
        font-size: 0.875rem;
    }
    
    /* Preset buttons - single column */
    .d-flex.flex-wrap.gap-2 .btn-outline-primary[b-qsbw2gsks4] {
        flex: 1 1 100%;
    }
    
    /* Recurrence options - stack vertically */
    .row.g-2 > .col-md-4[b-qsbw2gsks4] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .recurrence-option[b-qsbw2gsks4] {
        margin-bottom: 0.5rem;
    }
    
    /* Day buttons smaller */
    .btn.rounded-pill[b-qsbw2gsks4] {
        min-width: 36px;
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .summary-value[b-qsbw2gsks4] {
        max-width: 45%;
        font-size: 0.75rem;
    }
    
    .tips-list li[b-qsbw2gsks4] {
        font-size: 0.75rem;
    }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn[b-qsbw2gsks4] {
        min-height: 44px;
    }
    
    .form-check-input[role="switch"][b-qsbw2gsks4] {
        width: 3em !important;
        height: 1.5em !important;
    }
    
    .recurrence-option[b-qsbw2gsks4] {
        min-height: 52px;
    }
    
    .btn.rounded-pill[b-qsbw2gsks4] {
        min-height: 40px;
    }
    
    /* Remove hover effects on touch devices */
    .card:hover[b-qsbw2gsks4] {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
        transform: none;
    }
    
    .back-button:hover[b-qsbw2gsks4] {
        transform: none;
    }
    
    /* Active states for touch feedback */
    .btn:active[b-qsbw2gsks4] {
        transform: scale(0.98);
    }
    
    .recurrence-option:active[b-qsbw2gsks4] {
        transform: scale(0.99);
    }
}

/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .action-buttons-container[b-qsbw2gsks4] {
        position: relative;
        box-shadow: none;
    }
    
    .action-buttons-container .d-flex[b-qsbw2gsks4] {
        flex-direction: row !important;
    }
    
    .btn-cancel[b-qsbw2gsks4],
    .btn-reset[b-qsbw2gsks4],
    .btn-create[b-qsbw2gsks4] {
        flex: 1;
        margin-bottom: 0;
    }
    
    .btn-cancel[b-qsbw2gsks4] {
        order: 1;
    }
    
    .btn-reset[b-qsbw2gsks4] {
        order: 2;
    }
    
    .btn-create[b-qsbw2gsks4] {
        order: 3;
    }
}

/* Safe area support for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767.98px) {
        .action-buttons-container[b-qsbw2gsks4] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
        
        .container-fluid.pb-5[b-qsbw2gsks4] {
            padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
        }
    }
}



/* /Features/SessionManagement/SessionList.razor.rz.scp.css */
.stat-icon[b-3cas71qqyy] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.stat-icon:hover[b-3cas71qqyy] {
    transform: scale(1.1);
}

.spin[b-3cas71qqyy] {
    animation: spin-b-3cas71qqyy 1s linear infinite;
}

@keyframes spin-b-3cas71qqyy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes slideUp-b-3cas71qqyy {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-3cas71qqyy {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake-b-3cas71qqyy {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulse-b-3cas71qqyy {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes iconPop-b-3cas71qqyy {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.session-avatar[b-3cas71qqyy] {
    transition: all 0.2s ease;
}

[b-3cas71qqyy] tr:hover .session-avatar {
    transform: scale(1.1);
}

[b-3cas71qqyy] .table > tbody > tr {
    transition: all 0.15s ease;
    animation: fadeIn-b-3cas71qqyy 0.3s ease;
}

[b-3cas71qqyy] .page-link {
    border-radius: 6px !important;
    margin: 0 2px;
    border: none;
    color: var(--bs-primary);
    transition: all 0.15s ease;
}

[b-3cas71qqyy] .page-item.active .page-link {
    background-color: var(--bs-primary);
    color: white;
}

[b-3cas71qqyy] .page-link:hover {
    background-color: rgba(0, 86, 179, 0.1);
    color: var(--bs-primary);
    transform: scale(1.05);
}

/* Card Animations */
.card-accent-success[b-3cas71qqyy],
.card-accent-info[b-3cas71qqyy],
.card-accent-primary[b-3cas71qqyy],
.card-accent-warning[b-3cas71qqyy] {
    transition: all 0.2s ease;
}

.card-accent-success:hover[b-3cas71qqyy],
.card-accent-info:hover[b-3cas71qqyy],
.card-accent-primary:hover[b-3cas71qqyy],
.card-accent-warning:hover[b-3cas71qqyy] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-accent-success[b-3cas71qqyy] {
    border-left: 3px solid var(--bs-success) !important;
}

.card-accent-info[b-3cas71qqyy] {
    border-left: 3px solid var(--bs-info) !important;
}

.card-accent-primary[b-3cas71qqyy] {
    border-left: 3px solid var(--bs-primary) !important;
}

.card-accent-warning[b-3cas71qqyy] {
    border-left: 3px solid var(--bs-warning) !important;
}


/* SweetAlert Style Modal using Bootstrap */
.swal-modal-content[b-3cas71qqyy] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scaleIn-b-3cas71qqyy 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.swal-icon[b-3cas71qqyy] {
    width: 80px;
    height: 80px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPop-b-3cas71qqyy 0.4s ease 0.1s both;
}

.swal-icon-warning[b-3cas71qqyy] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 4px solid #ffc107;
}

.swal-icon-warning i[b-3cas71qqyy] {
    color: #856404;
    font-size: 2.25rem;
    line-height: 1;
}

.swal-icon-danger[b-3cas71qqyy] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 4px solid #dc3545;
}

.swal-icon-danger i[b-3cas71qqyy] {
    color: #721c24;
    font-size: 2.25rem;
    line-height: 1;
}

.swal-title[b-3cas71qqyy] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.swal-text[b-3cas71qqyy] {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.swal-text strong[b-3cas71qqyy] {
    color: #333;
}

.swal-warning-box[b-3cas71qqyy] {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffeeba;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
}

.swal-warning-box i[b-3cas71qqyy] {
    color: #856404;
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.swal-warning-box span[b-3cas71qqyy] {
    color: #856404;
    font-size: 0.875rem;
    line-height: 1.4;
}

.swal-buttons[b-3cas71qqyy] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.swal-btn[b-3cas71qqyy] {
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    min-width: 100px;
}

.swal-btn-cancel[b-3cas71qqyy] {
    background-color: #f0f0f0;
    color: #666;
}

.swal-btn-cancel:hover[b-3cas71qqyy] {
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

.swal-btn-confirm[b-3cas71qqyy] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.swal-btn-confirm:hover[b-3cas71qqyy] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.swal-btn-confirm:active[b-3cas71qqyy] {
    transform: translateY(0);
}

.swal-btn:disabled[b-3cas71qqyy] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.swal-spinner[b-3cas71qqyy] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-3cas71qqyy 0.6s linear infinite;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Mobile Card Animation */
[b-3cas71qqyy] .card.shadow-sm {
    animation: slideUp-b-3cas71qqyy 0.3s ease;
}

/* Button hover effects */
[b-3cas71qqyy] .btn-group .btn {
    transition: all 0.15s ease;
}

[b-3cas71qqyy] .btn-group .btn:hover {
    transform: translateY(-2px);
    z-index: 1;
}

/* Session Row Highlighting for Active/Upcoming */
[b-3cas71qqyy] .session-row-active {
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.03) 100%) !important;
    border-left: 4px solid var(--bs-success) !important;
}

[b-3cas71qqyy] .session-row-upcoming {
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.08) 0%, rgba(13, 202, 240, 0.02) 100%) !important;
    border-left: 4px solid var(--bs-info) !important;
}

[b-3cas71qqyy] .session-row-active:hover,
[b-3cas71qqyy] .session-row-upcoming:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Ensure table doesn't overflow */
[b-3cas71qqyy] .table {
    table-layout: fixed;
}

[b-3cas71qqyy] .table td,
[b-3cas71qqyy] .table th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Allow dropdown to overflow in action column */
[b-3cas71qqyy] .table td:last-child {
    overflow: visible;
}

/* Fix: Prevent containers from clipping action dropdown menus */
[b-3cas71qqyy] .sessions-list-card {
    overflow: visible !important;
}

[b-3cas71qqyy] .sessions-list-card > .card-body {
    overflow: visible !important;
}

[b-3cas71qqyy] .sessions-list-card .table-responsive {
    overflow: visible !important;
}

/* Actions dropdown button */
[b-3cas71qqyy] .table td .dropdown .dropdown-toggle {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    transition: all 0.15s ease;
    white-space: nowrap;
}

[b-3cas71qqyy] .table td .dropdown .dropdown-toggle:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 86, 179, 0.25);
}

[b-3cas71qqyy] .table td .dropdown .dropdown-toggle:hover .bi {
    color: #fff !important;
}

/* Actions dropdown menu - use fixed positioning to escape all overflow containers */
[b-3cas71qqyy] .table td .dropdown-menu {
    min-width: 180px;
    z-index: 1050;
    position: absolute;
}

[b-3cas71qqyy] .table td .dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.08);
    color: var(--bs-danger) !important;
}

.min-width-0[b-3cas71qqyy] {
    min-width: 0;
}