/* _content/Havto.Web/Components/Dialogs/OrganizationSelectionDialog.razor.rz.scp.css */
.organization-selection-dialog[b-180fjcvgz7] {
    min-width: 500px;
    max-width: 600px;
}

.dialog-header[b-180fjcvgz7] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.header-icon[b-180fjcvgz7] {
    flex-shrink: 0;
}

.header-text[b-180fjcvgz7] {
    flex: 1;
}

.dialog-title[b-180fjcvgz7] {
    font-weight: 600;
    margin-bottom: 4px;
}

.dialog-subtitle[b-180fjcvgz7] {
    margin: 0;
}

.organizations-list[b-180fjcvgz7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.organization-card[b-180fjcvgz7] {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

    .organization-card:hover[b-180fjcvgz7] {
        border-color: var(--mud-palette-primary-lighten);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

    .organization-card.selected[b-180fjcvgz7] {
        border-color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover);
    }

.organization-card-content[b-180fjcvgz7] {
    padding: 16px !important;
}

.org-info[b-180fjcvgz7] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.org-avatar[b-180fjcvgz7] {
    flex-shrink: 0;
}

.org-details[b-180fjcvgz7] {
    flex: 1;
    min-width: 0;
}

.org-name[b-180fjcvgz7] {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--mud-palette-text-primary);
}

.org-description[b-180fjcvgz7] {
    margin-bottom: 8px;
    line-height: 1.4;
}

.org-location[b-180fjcvgz7] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.org-meta[b-180fjcvgz7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.org-visibility[b-180fjcvgz7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.no-organizations[b-180fjcvgz7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
}

/* Make the card content responsive */
@@media (max-width: 600px) {
    .organization-selection-dialog[b-180fjcvgz7] {
        min-width: 320px;
        max-width: 95vw;
    }

    .org-info[b-180fjcvgz7] {
        flex-direction: column;
        gap: 12px;
    }

    .org-meta[b-180fjcvgz7] {
        align-items: flex-start;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}
/* _content/Havto.Web/Components/Feedback/FeedbackDialog.razor.rz.scp.css */
/* Feedback Dialog Styles - Scoped to FeedbackDialog component */

/* ============= AI ANALYSIS SECTIONS ============= */

/* AI Summary Panel */
.ai-summary-panel[b-i940e090p1] {
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-primary) 100%);
    border-radius: 8px;
    border-left: 4px solid var(--mud-palette-primary);
}

.ai-summary-content[b-i940e090p1] {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    backdrop-filter: blur(10px);
}

/* AI Solution Panel */
.ai-solution-panel[b-i940e090p1] {
    background: linear-gradient(135deg, var(--mud-palette-success-lighten) 0%, rgba(76, 175, 80, 0.1) 100%);
    border-left: 4px solid var(--mud-palette-success);
    border-radius: 6px;
    position: relative;
}

    .ai-solution-panel[b-i940e090p1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 49%, rgba(76, 175, 80, 0.05) 50%, transparent 51%);
        border-radius: 6px;
        pointer-events: none;
    }

/* AI Analysis Cards */
.ai-analysis-card[b-i940e090p1] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
}

    .ai-analysis-card:hover[b-i940e090p1] {
        box-shadow: 0 8px 25px rgba(var(--mud-palette-primary-rgb), 0.15);
        transform: translateY(-2px);
    }

/* ============= FEEDBACK TYPE & PRIORITY ============= */

/* Feedback Type Selector Enhancement */
[b-i940e090p1] .feedback-type-select .mud-input-adornment-start {
    transition: color 0.2s ease;
}

[b-i940e090p1] .feedback-type-select:focus-within .mud-input-adornment-start {
    color: var(--mud-palette-primary) !important;
}

/* Priority Indicator Animations */
.priority-indicator[b-i940e090p1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.priority-low[b-i940e090p1] {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--mud-palette-success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.priority-medium[b-i940e090p1] {
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--mud-palette-info);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.priority-high[b-i940e090p1] {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--mud-palette-warning);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.priority-critical[b-i940e090p1] {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--mud-palette-error);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* ============= AI QUOTA STATUS ============= */

/* AI Quota Alert Styling */
.ai-quota-alert[b-i940e090p1] {
    background: linear-gradient(90deg, rgba(var(--mud-palette-info-rgb), 0.05) 0%, rgba(var(--mud-palette-info-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.2);
    border-radius: 8px;
}

.ai-quota-progress[b-i940e090p1] {
    height: 4px;
    background: linear-gradient(90deg, var(--mud-palette-success) 0%, var(--mud-palette-warning) 70%, var(--mud-palette-error) 100%);
    border-radius: 2px;
    margin-top: 0.5rem;
}

/* ============= BUTTONS & INTERACTIONS ============= */

/* AI Action Buttons */
.ai-action-button[b-i940e090p1] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .ai-action-button:hover[b-i940e090p1] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.2);
    }

    .ai-action-button:active[b-i940e090p1] {
        transform: translateY(0);
    }

    /* Ripple effect for AI buttons */
    .ai-action-button[b-i940e090p1]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
        transform: translate(-50%, -50%);
    }

    .ai-action-button:active[b-i940e090p1]::before {
        width: 300px;
        height: 300px;
        top: 50%;
        left: 50%;
    }

/* Accept/Ignore Solution Buttons */
.solution-action-buttons[b-i940e090p1] {
    gap: 0.75rem;
}

.accept-solution-button[b-i940e090p1] {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, var(--mud-palette-success-darken) 100%);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .accept-solution-button:hover[b-i940e090p1] {
        background: linear-gradient(135deg, var(--mud-palette-success-darken) 0%, var(--mud-palette-success) 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
    }

.ignore-solution-button[b-i940e090p1] {
    color: var(--mud-palette-text-secondary);
    transition: all 0.2s ease;
}

    .ignore-solution-button:hover[b-i940e090p1] {
        color: var(--mud-palette-text-primary);
        background-color: rgba(var(--mud-palette-action-disabled-rgb), 0.08);
    }

/* ============= LOADING STATES ============= */

/* Loading Spinner Customization */
[b-i940e090p1] .ai-loading .mud-progress-circular svg {
    animation: ai-pulse-b-i940e090p1 2s ease-in-out infinite;
}

@keyframes ai-pulse-b-i940e090p1 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Shimmer effect for loading content */
.ai-shimmer[b-i940e090p1] {
    background: linear-gradient(90deg, rgba(var(--mud-palette-action-disabled-rgb), 0.1) 25%, rgba(var(--mud-palette-action-disabled-rgb), 0.2) 50%, rgba(var(--mud-palette-action-disabled-rgb), 0.1) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-i940e090p1 2s infinite;
}

@keyframes shimmer-b-i940e090p1 {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ============= CHIPS & TAGS ============= */

/* Enhanced Chip Styling */
[b-i940e090p1] .feedback-chip {
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: default;
}

    [b-i940e090p1] .feedback-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

/* Keyword Chips */
.keyword-chip[b-i940e090p1] {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.2);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ============= RESPONSIVE DESIGN ============= */

/* Mobile Optimizations */
@media (max-width: 600px) {
    .ai-summary-panel[b-i940e090p1],
    .ai-analysis-card[b-i940e090p1] {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: 4px solid var(--mud-palette-primary);
        border-right: none;
    }

    .solution-action-buttons[b-i940e090p1] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .accept-solution-button[b-i940e090p1],
    .ignore-solution-button[b-i940e090p1] {
        width: 100%;
        justify-content: center;
    }
}

/* ============= ACCESSIBILITY ============= */

/* Focus States */
.ai-action-button:focus[b-i940e090p1] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.accept-solution-button:focus[b-i940e090p1] {
    outline: 2px solid var(--mud-palette-success);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .ai-summary-panel[b-i940e090p1],
    .ai-solution-panel[b-i940e090p1] {
        border-width: 2px;
        border-style: solid;
    }

    .keyword-chip[b-i940e090p1] {
        border-width: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .ai-action-button[b-i940e090p1],
    .feedback-chip[b-i940e090p1],
    .ai-analysis-card[b-i940e090p1] {
        transition: none;
    }

        .ai-action-button:hover[b-i940e090p1],
        .ai-analysis-card:hover[b-i940e090p1] {
            transform: none;
        }

    @keyframes ai-pulse-b-i940e090p1

    ,
    @keyframes shimmer[b-i940e090p1] {
        animation-duration: 0.01ms !important;
    }
}

/* ============= DARK THEME SUPPORT ============= */

/* Dark Theme Adjustments */
:global(.mud-theme-dark) .ai-summary-content[b-i940e090p1] {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.95);
    color: var(--mud-palette-dark-text);
}

:global(.mud-theme-dark) .ai-solution-panel[b-i940e090p1] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
}

:global(.mud-theme-dark) .keyword-chip[b-i940e090p1] {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.3);
}

:global(.mud-theme-dark) .ai-quota-alert[b-i940e090p1] {
    background: linear-gradient(90deg, rgba(var(--mud-palette-info-rgb), 0.1) 0%, rgba(var(--mud-palette-info-rgb), 0.15) 100%);
}

/* ============= ANIMATION UTILITIES ============= */

/* Fade-in animation for AI results */
.fade-in[b-i940e090p1] {
    animation: fadeIn-b-i940e090p1 0.4s ease-in-out;
}

@keyframes fadeIn-b-i940e090p1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide-up animation for solution panel */
.slide-up[b-i940e090p1] {
    animation: slideUp-b-i940e090p1 0.3s ease-out;
}

@keyframes slideUp-b-i940e090p1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============= CUSTOM SCROLLBARS ============= */

/* Custom scrollbar for long content */
.ai-content-scrollable[b-i940e090p1]::-webkit-scrollbar {
    width: 6px;
}

.ai-content-scrollable[b-i940e090p1]::-webkit-scrollbar-track {
    background: rgba(var(--mud-palette-action-disabled-rgb), 0.1);
    border-radius: 3px;
}

.ai-content-scrollable[b-i940e090p1]::-webkit-scrollbar-thumb {
    background: rgba(var(--mud-palette-primary-rgb), 0.3);
    border-radius: 3px;
    transition: background 0.2s ease;
}

    .ai-content-scrollable[b-i940e090p1]::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.5);
    }
/* _content/Havto.Web/Components/Help/AIHelpDialog.razor.rz.scp.css */
/* AI Help Dialog CSS Isolation Styles */

/* Main dialog container - let MudBlazor handle the theming */
[b-t70aw0ac87] .ai-assistant-dialog {
    border-radius: 16px;
}

/* AI icon animations - keep these as they're functional */
.ai-icon-pulse[b-t70aw0ac87] {
    animation: ai-pulse-b-t70aw0ac87 2s ease-in-out infinite alternate;
}

@keyframes ai-pulse-b-t70aw0ac87 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.ai-sparkle[b-t70aw0ac87] {
    animation: ai-sparkle-b-t70aw0ac87 1.5s ease-in-out infinite;
}

@keyframes ai-sparkle-b-t70aw0ac87 {
    0%, 100% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        opacity: 0.7;
        transform: rotate(180deg);
    }
}

/* Chat container - minimal styling */
.chat-container[b-t70aw0ac87] {
    display: flex;
    flex-direction: column;
    height: 500px;
}

.chat-messages[b-t70aw0ac87] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chat welcome - let MudBlazor theme handle colors */
.chat-welcome[b-t70aw0ac87] {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Chat messages - minimal styling, let global CSS handle theming */
.chat-message[b-t70aw0ac87] {
    display: flex;
    gap: 12px;
    animation: message-slide-in-b-t70aw0ac87 0.3s ease-out;
}

@keyframes message-slide-in-b-t70aw0ac87 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message[b-t70aw0ac87] {
    flex-direction: row-reverse;
}

.message-avatar[b-t70aw0ac87] {
    flex-shrink: 0;
}

.message-content[b-t70aw0ac87] {
    max-width: 70%;
    padding: 12px 16px;
    position: relative;
}

.message-sender[b-t70aw0ac87] {
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.8;
}

.message-text[b-t70aw0ac87] {
    line-height: 1.5;
}

/* Streaming text animation */
.streaming-text[b-t70aw0ac87] {
    animation: textGlow-b-t70aw0ac87 2s ease-in-out infinite;
}

@keyframes textGlow-b-t70aw0ac87 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.message-actions[b-t70aw0ac87] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Chat input container */
.chat-input-container[b-t70aw0ac87] {
    padding: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Suggested questions - minimal styling */
.suggested-question[b-t70aw0ac87] {
    margin: 4px;
    border-radius: 20px;
    text-transform: none;
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

    .suggested-question:hover[b-t70aw0ac87] {
        transform: translateY(-1px);
    }

/* Custom scrollbars */
.chat-messages[b-t70aw0ac87]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-t70aw0ac87]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-t70aw0ac87]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-action-disabled);
    border-radius: 3px;
}

    .chat-messages[b-t70aw0ac87]::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-action-disabled-background);
    }

/* Responsive design */
@media (max-width: 768px) {
    .message-content[b-t70aw0ac87] {
        max-width: 85%;
    }

    .chat-welcome[b-t70aw0ac87] {
        padding: 16px 8px;
    }

    .chat-container[b-t70aw0ac87] {
        height: 400px;
    }
}

/* Accessibility - focus outlines */
.suggested-question:focus-visible[b-t70aw0ac87] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ai-icon-pulse[b-t70aw0ac87],
    .ai-sparkle[b-t70aw0ac87],
    .message-slide-in[b-t70aw0ac87],
    .textGlow[b-t70aw0ac87] {
        animation: none;
    }

    .suggested-question[b-t70aw0ac87] {
        transition: none;
    }
}
/* _content/Havto.Web/Components/Layout/AuthLayout.razor.rz.scp.css */
/* ============================= */
/* AUTH LAYOUT SPECIFIC STYLES */
/* ============================= */
/* Note: Global theme colors are handled in app.css */
/* This file only contains layout-specific resets for auth pages */

.auth-layout-container[b-0dshgem6na] {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Reset MudBlazor container constraints for auth pages */
/* Auth pages need full-width, no padding layouts */
[b-0dshgem6na] .mud-main-content {
    padding: 0;
    margin: 0;
    max-width: none;
}

[b-0dshgem6na] .mud-container {
    padding: 0;
    margin: 0;
    max-width: none;
}
/* _content/Havto.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6ikt65hive] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6ikt65hive] {
    flex: 1;
}

.sidebar[b-6ikt65hive] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-6ikt65hive] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-6ikt65hive]  a, .top-row[b-6ikt65hive]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-6ikt65hive]  a:hover, .top-row[b-6ikt65hive]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-6ikt65hive]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-6ikt65hive] {
        display: none;
    }

    .top-row.auth[b-6ikt65hive] {
        justify-content: space-between;
    }

    .top-row[b-6ikt65hive]  a, .top-row[b-6ikt65hive]  .btn-link {
        margin-left: 0;
    }
}

@@media (min-width: 641px) {
    .page[b-6ikt65hive] {
        flex-direction: row;
    }

    .sidebar[b-6ikt65hive] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-6ikt65hive] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-6ikt65hive]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-6ikt65hive], article[b-6ikt65hive] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-6ikt65hive] {
    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: 1000;
}

    #blazor-error-ui .dismiss[b-6ikt65hive] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Havto.Web/Components/Navigation/HSComplianceMenu.razor.rz.scp.css */
.hs-compliance-menu[b-t3kouy15kw] {
    margin-bottom: 16px;
}

.hs-menu-container[b-t3kouy15kw] {
    border-left: 4px solid var(--mud-palette-warning);
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 152, 0, 0.02) 100%);
}

.hs-menu-header[b-t3kouy15kw] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.hs-menu-title[b-t3kouy15kw] {
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
}

.hs-quick-actions[b-t3kouy15kw] {
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

    .hs-quick-actions .mud-button[b-t3kouy15kw] {
        font-size: 0.75rem;
        min-width: auto;
    }

.gap-2 > *[b-t3kouy15kw] {
    margin: 2px;
}

@media (max-width: 768px) {
    .hs-quick-actions .d-flex[b-t3kouy15kw] {
        flex-direction: column;
    }

    .hs-quick-actions .mud-button[b-t3kouy15kw] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/Havto.Web/Components/Navigation/HSNavigationComponent.razor.rz.scp.css */
/* H&S Navigation Component Styles */

.hs-navigation[b-f1clm85ts4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.loading-skeleton[b-f1clm85ts4] {
    padding: 0 1rem;
    animation: pulse-b-f1clm85ts4 1.5s ease-in-out infinite;
}

@keyframes pulse-b-f1clm85ts4 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.nav-link[b-f1clm85ts4] {
    margin: 0.125rem 0.5rem;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

    .nav-link:hover[b-f1clm85ts4] {
        background-color: var(--mud-palette-action-hover);
        transform: translateX(2px);
        text-decoration: none;
        color: inherit;
    }

    .nav-link.mud-nav-link-active[b-f1clm85ts4] {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.3);
        font-weight: 500;
    }

        .nav-link.mud-nav-link-active:hover[b-f1clm85ts4] {
            background-color: var(--mud-palette-primary-darken);
            transform: translateX(4px);
        }

.nav-text[b-f1clm85ts4] {
    font-size: 0.875rem;
    font-weight: 450;
    flex-grow: 1;
}

.module-info[b-f1clm85ts4] {
    gap: 0.75rem;
    flex-grow: 1;
}

.module-icon[b-f1clm85ts4] {
    color: var(--mud-palette-text-secondary);
    transition: color 0.2s ease-in-out;
    flex-shrink: 0;
}

.nav-link:hover .module-icon[b-f1clm85ts4] {
    color: var(--mud-palette-primary);
}

.nav-link.mud-nav-link-active .module-icon[b-f1clm85ts4] {
    color: var(--mud-palette-primary-text);
}

.badge-container[b-f1clm85ts4] {
    gap: 0.5rem;
    flex-shrink: 0;
}

.notification-badge[b-f1clm85ts4] {
    font-size: 0.75rem;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
}

.compliance-item[b-f1clm85ts4] {
    background-color: rgba(var(--mud-palette-info-rgb), 0.1);
    border-left: 3px solid var(--mud-palette-info);
}

    .compliance-item:hover[b-f1clm85ts4] {
        background-color: rgba(var(--mud-palette-info-rgb), 0.15);
        border-left-color: var(--mud-palette-info-darken);
    }

.info-icon[b-f1clm85ts4] {
    color: var(--mud-palette-info);
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.compliance-item:hover .info-icon[b-f1clm85ts4] {
    opacity: 1;
}

.add-module-container[b-f1clm85ts4] {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    text-align: center;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

    .add-module-container:hover[b-f1clm85ts4] {
        border-color: var(--mud-palette-primary);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    }

.add-module-button[b-f1clm85ts4] {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .add-module-button:hover[b-f1clm85ts4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.2);
    }

/* Enhanced focus states for accessibility */
.nav-link:focus[b-f1clm85ts4] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.add-module-button:focus[b-f1clm85ts4] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Active state enhancements */
.nav-link.mud-nav-link-active[b-f1clm85ts4]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: var(--mud-palette-primary-text);
    border-radius: 0 2px 2px 0;
}

/* Badge animations */
.notification-badge[b-f1clm85ts4] {
    animation: badgePulse-b-f1clm85ts4 2s infinite;
}

@keyframes badgePulse-b-f1clm85ts4 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Hover effect for better UX */
.nav-link[b-f1clm85ts4]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--mud-palette-primary);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover[b-f1clm85ts4]::after {
    width: 100%;
}

.nav-link.mud-nav-link-active[b-f1clm85ts4]::after {
    width: 100%;
    background-color: var(--mud-palette-primary-text);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-link[b-f1clm85ts4] {
        margin: 0.125rem 0.25rem;
        padding: 0.625rem 0.5rem;
    }

    .module-info[b-f1clm85ts4] {
        gap: 0.5rem;
    }

    .nav-text[b-f1clm85ts4] {
        font-size: 0.8125rem;
    }

    .add-module-container[b-f1clm85ts4] {
        padding: 0.5rem;
        margin: 0.25rem 0;
    }
}

@media (max-width: 480px) {
    .nav-link[b-f1clm85ts4] {
        padding: 0.75rem 0.5rem;
    }

    .nav-text[b-f1clm85ts4] {
        font-size: 0.8rem;
    }

    .module-icon[b-f1clm85ts4] {
        display: none; /* Hide icons on very small screens to save space */
    }

    .notification-badge[b-f1clm85ts4] {
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 0.6875rem;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .compliance-item[b-f1clm85ts4] {
        background-color: rgba(var(--mud-palette-info-rgb), 0.15);
    }

        .compliance-item:hover[b-f1clm85ts4] {
            background-color: rgba(var(--mud-palette-info-rgb), 0.25);
        }

    .add-module-container:hover[b-f1clm85ts4] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

    .nav-link.mud-nav-link-active[b-f1clm85ts4] {
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.5);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-link[b-f1clm85ts4] {
        border: 1px solid transparent;
    }

        .nav-link:hover[b-f1clm85ts4] {
            border-color: var(--mud-palette-primary);
        }

        .nav-link.mud-nav-link-active[b-f1clm85ts4] {
            border-color: var(--mud-palette-primary-text);
        }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .nav-link[b-f1clm85ts4],
    .module-icon[b-f1clm85ts4],
    .info-icon[b-f1clm85ts4],
    .add-module-button[b-f1clm85ts4],
    .notification-badge[b-f1clm85ts4] {
        transition: none;
    }

        .nav-link:hover[b-f1clm85ts4] {
            transform: none;
        }

        .nav-link.mud-nav-link-active:hover[b-f1clm85ts4] {
            transform: none;
        }

        .add-module-button:hover[b-f1clm85ts4] {
            transform: none;
        }

    .loading-skeleton[b-f1clm85ts4] {
        animation: none;
    }

    .notification-badge[b-f1clm85ts4] {
        animation: none;
    }
}
/* _content/Havto.Web/Components/Navigation/MenuItemGroupComponent.razor.rz.scp.css */
/* Menu Item Group Component Styles */

.menu-item-group[b-cynlu732q5] {
    margin-bottom: 4px;
    transition: all 0.2s ease-in-out;
}

    .menu-item-group.has-badge[b-cynlu732q5] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
        border-radius: 8px;
        padding: 2px;
    }

.nav-sub-group[b-cynlu732q5] {
    margin-left: 16px;
    padding-left: 8px;
    border-left: 2px solid var(--mud-palette-divider);
    transition: border-color 0.2s ease-in-out;
}

    .nav-sub-group:hover[b-cynlu732q5] {
        border-left-color: var(--mud-palette-primary);
    }

/* MudNavGroup styling enhancements */
.mud-nav-group[b-cynlu732q5] {
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

    .mud-nav-group:hover[b-cynlu732q5] {
        background-color: var(--mud-palette-action-hover);
    }

    .mud-nav-group.mud-nav-group-expanded[b-cynlu732q5] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    }

.mud-nav-item[b-cynlu732q5] {
    border-radius: 8px;
    margin: 2px 8px;
    transition: all 0.2s ease-in-out;
}

    .mud-nav-item:hover[b-cynlu732q5] {
        background-color: var(--mud-palette-action-hover);
        transform: translateX(2px);
    }

    .mud-nav-item.mud-nav-item-active[b-cynlu732q5] {
        background-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.3);
        font-weight: 600;
    }

/* Group header styling */
.mud-nav-group > .mud-nav-link[b-cynlu732q5] {
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
}

    .mud-nav-group > .mud-nav-link:hover[b-cynlu732q5] {
        background-color: var(--mud-palette-action-hover);
    }

.mud-nav-group.mud-nav-group-expanded > .mud-nav-link[b-cynlu732q5] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Icon styling */
.mud-nav-group .mud-icon[b-cynlu732q5] {
    transition: all 0.2s ease-in-out;
}

.mud-nav-group:hover .mud-icon[b-cynlu732q5] {
    color: var(--mud-palette-primary);
}

.mud-nav-group.mud-nav-group-expanded .mud-icon[b-cynlu732q5] {
    color: var(--mud-palette-primary);
    transform: rotate(90deg);
}

/* Badge styling for groups */
.menu-item-group.has-badge[b-cynlu732q5]::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--mud-palette-error);
    border-radius: 50%;
    animation: pulse-dot-b-cynlu732q5 2s infinite;
}

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

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Enhanced focus states */
.mud-nav-group:focus-within[b-cynlu732q5] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Smooth expand/collapse animation */
.mud-nav-group .mud-collapse[b-cynlu732q5] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sub-group nesting indicators */
.nav-sub-group[b-cynlu732q5]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--mud-palette-divider) 0%, var(--mud-palette-primary) 50%, var(--mud-palette-divider) 100%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.nav-sub-group:hover[b-cynlu732q5]::before {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-item-group[b-cynlu732q5] {
        margin-bottom: 2px;
    }

    .nav-sub-group[b-cynlu732q5] {
        margin-left: 12px;
        padding-left: 6px;
    }

    .mud-nav-item[b-cynlu732q5] {
        margin: 1px 4px;
    }

    .mud-nav-group > .mud-nav-link[b-cynlu732q5] {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    .nav-sub-group[b-cynlu732q5] {
        margin-left: 8px;
        padding-left: 4px;
        border-left-width: 1px;
    }

    .mud-nav-group > .mud-nav-link[b-cynlu732q5] {
        padding: 12px 6px;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .menu-item-group.has-badge[b-cynlu732q5] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

    .mud-nav-group.mud-nav-group-expanded[b-cynlu732q5] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    }

    .mud-nav-item.mud-nav-item-active[b-cynlu732q5] {
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.5);
    }

    .nav-sub-group[b-cynlu732q5] {
        border-left-color: rgba(255, 255, 255, 0.12);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mud-nav-item[b-cynlu732q5] {
        border: 1px solid transparent;
    }

        .mud-nav-item:hover[b-cynlu732q5] {
            border-color: var(--mud-palette-primary);
        }

        .mud-nav-item.mud-nav-item-active[b-cynlu732q5] {
            border-color: var(--mud-palette-primary-text);
        }

    .nav-sub-group[b-cynlu732q5] {
        border-left-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .menu-item-group[b-cynlu732q5],
    .nav-sub-group[b-cynlu732q5],
    .mud-nav-group[b-cynlu732q5],
    .mud-nav-item[b-cynlu732q5],
    .mud-nav-group .mud-icon[b-cynlu732q5],
    .mud-nav-group .mud-collapse[b-cynlu732q5] {
        transition: none;
    }

        .mud-nav-item:hover[b-cynlu732q5] {
            transform: none;
        }

        .menu-item-group.has-badge[b-cynlu732q5]::after {
            animation: none;
        }

        .nav-sub-group[b-cynlu732q5]::before {
            transition: none;
        }
}

/* Print styles */
@media print {
    .menu-item-group[b-cynlu732q5],
    .mud-nav-group[b-cynlu732q5],
    .mud-nav-item[b-cynlu732q5] {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
    }

    .nav-sub-group[b-cynlu732q5] {
        border-left: 1px solid black;
    }

    .menu-item-group.has-badge[b-cynlu732q5]::after {
        display: none;
    }
}

/* Loading state */
.menu-item-group.loading[b-cynlu732q5] {
    opacity: 0.6;
    pointer-events: none;
}

    .menu-item-group.loading .mud-nav-group[b-cynlu732q5] {
        position: relative;
    }

        .menu-item-group.loading .mud-nav-group[b-cynlu732q5]::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border: 2px solid var(--mud-palette-text-secondary);
            border-top: 2px solid var(--mud-palette-primary);
            border-radius: 50%;
            animation: spin-b-cynlu732q5 1s linear infinite;
        }

@keyframes spin-b-cynlu732q5 {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Accessibility improvements */
.mud-nav-group[aria-expanded="true"][b-cynlu732q5] {
    position: relative;
}

    .mud-nav-group[aria-expanded="true"][b-cynlu732q5]::before {
        content: '';
        position: absolute;
        left: -2px;
        top: 0;
        width: 2px;
        height: 100%;
        background-color: var(--mud-palette-primary);
        border-radius: 1px;
    }

/* Status indicators */
.menu-item-group.has-errors[b-cynlu732q5] {
    border-left: 3px solid var(--mud-palette-error);
    background-color: rgba(var(--mud-palette-error-rgb), 0.05);
}

.menu-item-group.has-warnings[b-cynlu732q5] {
    border-left: 3px solid var(--mud-palette-warning);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.05);
}
/* _content/Havto.Web/Components/Navigation/MenuItemLinkComponent.razor.rz.scp.css */
/* Menu Item Link Component Styles */

.menu-nav-link[b-r82d9ljaj3] {
    position: relative;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
    display: block;
}

    .menu-nav-link:hover[b-r82d9ljaj3] {
        background-color: var(--mud-palette-action-hover) !important;
        transform: translateX(4px);
        text-decoration: none;
        color: inherit;
    }

    .menu-nav-link.mud-nav-link-active[b-r82d9ljaj3] {
        background-color: var(--mud-palette-primary) !important;
        color: var(--mud-palette-primary-text) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        font-weight: 600;
    }

    .menu-nav-link.disabled[b-r82d9ljaj3] {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

.nav-link-text[b-r82d9ljaj3] {
    font-weight: 500;
    font-size: 0.875rem;
    flex-grow: 1;
    transition: font-weight 0.2s ease-in-out;
}

.nav-badge[b-r82d9ljaj3] {
    min-width: 20px !important;
    height: 20px !important;
    font-size: 0.75rem !important;
    margin-left: 8px;
    flex-shrink: 0;
    font-weight: 600;
    border-radius: 10px;
}

.mud-nav-link-active .nav-link-text[b-r82d9ljaj3] {
    font-weight: 600;
}

/* Enhanced hover effects */
.menu-nav-link[b-r82d9ljaj3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 60%;
    background-color: var(--mud-palette-primary);
    border-radius: 0 2px 2px 0;
    transition: width 0.2s ease-in-out;
}

.menu-nav-link:hover[b-r82d9ljaj3]::before {
    width: 3px;
}

.menu-nav-link.mud-nav-link-active[b-r82d9ljaj3]::before {
    width: 3px;
    background-color: var(--mud-palette-primary-text);
}

/* Badge animations */
.nav-badge[b-r82d9ljaj3] {
    animation: subtle-pulse-b-r82d9ljaj3 3s infinite;
}

@keyframes subtle-pulse-b-r82d9ljaj3 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Focus states for accessibility */
.menu-nav-link:focus[b-r82d9ljaj3] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.menu-nav-link:focus-visible[b-r82d9ljaj3] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Active state enhancements */
.menu-nav-link.mud-nav-link-active[b-r82d9ljaj3] {
    position: relative;
    z-index: 1;
}

    .menu-nav-link.mud-nav-link-active[b-r82d9ljaj3]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1), rgba(var(--mud-palette-primary-rgb), 0.05));
        z-index: -1;
    }

/* Badge color variations */
.nav-badge.mud-chip-color-error[b-r82d9ljaj3] {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    box-shadow: 0 2px 4px rgba(var(--mud-palette-error-rgb), 0.3);
}

.nav-badge.mud-chip-color-warning[b-r82d9ljaj3] {
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    box-shadow: 0 2px 4px rgba(var(--mud-palette-warning-rgb), 0.3);
}

.nav-badge.mud-chip-color-info[b-r82d9ljaj3] {
    background-color: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
    box-shadow: 0 2px 4px rgba(var(--mud-palette-info-rgb), 0.3);
}

.nav-badge.mud-chip-color-success[b-r82d9ljaj3] {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    box-shadow: 0 2px 4px rgba(var(--mud-palette-success-rgb), 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-nav-link[b-r82d9ljaj3] {
        margin: 1px 4px !important;
        padding: 10px 8px !important;
    }

    .nav-link-text[b-r82d9ljaj3] {
        font-size: 0.8125rem;
    }

    .nav-badge[b-r82d9ljaj3] {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 0.6875rem !important;
        margin-left: 6px;
    }

    .menu-nav-link:hover[b-r82d9ljaj3] {
        transform: translateX(2px);
    }
}

@media (max-width: 480px) {
    .menu-nav-link[b-r82d9ljaj3] {
        padding: 12px 6px !important;
    }

    .nav-link-text[b-r82d9ljaj3] {
        font-size: 0.8rem;
    }

    .nav-badge[b-r82d9ljaj3] {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 0.625rem !important;
        margin-left: 4px;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .menu-nav-link.mud-nav-link-active[b-r82d9ljaj3] {
        box-shadow: 0 2px 8px rgba(255,255,255,0.1);
    }

    .nav-badge[b-r82d9ljaj3] {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .menu-nav-link.mud-nav-link-active[b-r82d9ljaj3]::after {
        background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.2), rgba(var(--mud-palette-primary-rgb), 0.1));
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .menu-nav-link[b-r82d9ljaj3] {
        border: 1px solid transparent;
    }

        .menu-nav-link:hover[b-r82d9ljaj3] {
            border-color: var(--mud-palette-primary);
        }

        .menu-nav-link.mud-nav-link-active[b-r82d9ljaj3] {
            border-color: var(--mud-palette-primary-text);
        }

    .nav-badge[b-r82d9ljaj3] {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .menu-nav-link[b-r82d9ljaj3],
    .nav-link-text[b-r82d9ljaj3],
    .nav-badge[b-r82d9ljaj3] {
        transition: none;
    }

        .menu-nav-link:hover[b-r82d9ljaj3] {
            transform: none;
        }

    .nav-badge[b-r82d9ljaj3] {
        animation: none;
    }

    .menu-nav-link[b-r82d9ljaj3]::before {
        transition: none;
    }
}

/* Print styles */
@media print {
    .menu-nav-link[b-r82d9ljaj3] {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
    }

    .nav-badge[b-r82d9ljaj3] {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
        box-shadow: none !important;
    }
}

/* Loading state */
.menu-nav-link.loading[b-r82d9ljaj3] {
    opacity: 0.6;
    pointer-events: none;
}

    .menu-nav-link.loading[b-r82d9ljaj3]::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border: 2px solid var(--mud-palette-text-secondary);
        border-top: 2px solid var(--mud-palette-primary);
        border-radius: 50%;
        animation: spin-b-r82d9ljaj3 1s linear infinite;
    }

@keyframes spin-b-r82d9ljaj3 {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}
/* _content/Havto.Web/Components/Pages/Account/ConfirmEmail.razor.rz.scp.css */
/* Enhanced Email Confirmation Page Styles */
:root[b-kmgp680eul] {
    --confirm-primary: #667eea;
    --confirm-secondary: #764ba2;
    --confirm-success: #28a745;
    --confirm-error: #dc3545;
    --confirm-info: #17a2b8;
}

.confirm-email-container[b-kmgp680eul] {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--confirm-primary) 0%, var(--confirm-secondary) 100%);
    position: relative;
    overflow: hidden;
}

    .confirm-email-container[b-kmgp680eul]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }

    .confirm-email-container .mud-paper[b-kmgp680eul] {
        border-radius: 24px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 1;
    }

    .confirm-email-container .text-center[b-kmgp680eul] {
        animation: fadeInUp-b-kmgp680eul 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

@keyframes fadeInUp-b-kmgp680eul {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Enhanced Loading State */
.confirm-email-container .mud-progress-circular[b-kmgp680eul] {
    animation: loading-pulse-b-kmgp680eul 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

@keyframes loading-pulse-b-kmgp680eul {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Enhanced Success State */
.confirm-email-container .mud-icon-root[b-kmgp680eul] {
    filter: drop-shadow(0 4px 12px rgba(40, 167, 69, 0.3));
    animation: success-bounce-b-kmgp680eul 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes success-bounce-b-kmgp680eul {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(-90deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Enhanced Error State */
.confirm-email-container .mud-icon-root[class*="mud-error"][b-kmgp680eul] {
    filter: drop-shadow(0 4px 12px rgba(220, 53, 69, 0.3));
    animation: error-shake-b-kmgp680eul 0.6s ease-in-out;
}

@keyframes error-shake-b-kmgp680eul {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Enhanced Typography */
.confirm-email-container .mud-typography-h4[b-kmgp680eul] {
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--confirm-primary), var(--confirm-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem !important;
    animation: title-glow-b-kmgp680eul 2s ease-in-out infinite alternate;
}

@keyframes title-glow-b-kmgp680eul {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.1);
    }
}

.confirm-email-container .mud-typography-h6[b-kmgp680eul] {
    font-weight: 600 !important;
    color: #424242 !important;
    margin-bottom: 0.5rem !important;
}

.confirm-email-container .mud-typography-body1[b-kmgp680eul] {
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

.confirm-email-container .mud-typography-caption[b-kmgp680eul] {
    color: #999 !important;
    line-height: 1.5 !important;
}

/* Enhanced Progress Linear */
.confirm-email-container .mud-progress-linear[b-kmgp680eul] {
    border-radius: 8px !important;
    height: 6px !important;
    background: rgba(102, 126, 234, 0.1) !important;
    overflow: hidden;
    margin: 1.5rem 0 !important;
}

    .confirm-email-container .mud-progress-linear .mud-progress-linear-bar[b-kmgp680eul] {
        background: linear-gradient(90deg, var(--confirm-primary) 0%, var(--confirm-secondary) 100%) !important;
        animation: progress-flow-b-kmgp680eul 2s ease-in-out infinite;
    }

@keyframes progress-flow-b-kmgp680eul {
    0%, 100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.02);
    }
}

/* Enhanced Buttons */
.confirm-email-container .mud-button[b-kmgp680eul] {
    border-radius: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

.confirm-email-container .mud-button-filled[b-kmgp680eul] {
    background: linear-gradient(135deg, var(--confirm-primary) 0%, var(--confirm-secondary) 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3) !important;
}

    .confirm-email-container .mud-button-filled:hover:not(:disabled)[b-kmgp680eul] {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4) !important;
    }

.confirm-email-container .mud-button-outlined[b-kmgp680eul] {
    border: 2px solid rgba(108, 117, 125, 0.3) !important;
    color: #6c757d !important;
}

    .confirm-email-container .mud-button-outlined:hover:not(:disabled)[b-kmgp680eul] {
        background: rgba(108, 117, 125, 0.1) !important;
        border-color: rgba(108, 117, 125, 0.5) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(108, 117, 125, 0.2) !important;
    }

/* Button Container */
.confirm-email-container .d-flex.flex-column.gap-3[b-kmgp680eul] {
    gap: 1rem !important;
    margin-top: 2rem !important;
}

/* Link Styling */
.confirm-email-container .mud-link[b-kmgp680eul] {
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.3s ease !important;
}

    .confirm-email-container .mud-link:hover[b-kmgp680eul] {
        border-bottom-color: currentColor !important;
    }

/* Enhanced Container Padding */
.confirm-email-container .mud-paper .pa-8[b-kmgp680eul] {
    padding: 3rem 2.5rem !important;
}

/* Loading State Enhancements */
.confirm-email-container .loading-content[b-kmgp680eul] {
    animation: loading-fade-in-b-kmgp680eul 0.6s ease-out;
}

@keyframes loading-fade-in-b-kmgp680eul {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Success State Enhancements */
.confirm-email-container .success-content[b-kmgp680eul] {
    animation: success-fade-in-b-kmgp680eul 0.8s ease-out 0.2s both;
}

@keyframes success-fade-in-b-kmgp680eul {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error State Enhancements */
.confirm-email-container .error-content[b-kmgp680eul] {
    animation: error-fade-in-b-kmgp680eul 0.8s ease-out 0.2s both;
}

@keyframes error-fade-in-b-kmgp680eul {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@@media (max-width: 768px) {
    .confirm-email-container[b-kmgp680eul] {
        padding: 1rem;
        min-height: 100vh;
    }

        .confirm-email-container .mud-paper .pa-8[b-kmgp680eul] {
            padding: 2rem 1.5rem !important;
        }

        .confirm-email-container .mud-button[b-kmgp680eul] {
            padding: 1rem 2rem !important;
            font-size: 0.9rem !important;
        }
}

/* Dark Mode Support */
@@media (prefers-color-scheme: dark) {
    .confirm-email-container .mud-paper[b-kmgp680eul] {
        background: rgba(18, 18, 18, 0.95) !important;
        color: white !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .confirm-email-container .mud-typography-h4[b-kmgp680eul] {
        color: #bb86fc !important;
        background: none !important;
        -webkit-text-fill-color: #bb86fc !important;
    }

    .confirm-email-container .mud-typography-h6[b-kmgp680eul] {
        color: #e0e0e0 !important;
    }

    .confirm-email-container .mud-typography-body1[b-kmgp680eul] {
        color: #b0b0b0 !important;
    }

    .confirm-email-container .mud-typography-caption[b-kmgp680eul] {
        color: #888 !important;
    }
}
/* _content/Havto.Web/Components/Pages/Account/RegisterConfirmation.razor.rz.scp.css */
/* Enhanced Registration Confirmation Page Styles */
:root[b-0y3v77sjdk] {
    --confirmation-primary: #667eea;
    --confirmation-secondary: #764ba2;
    --confirmation-success: #4caf50;
    --confirmation-info: #2196f3;
    --confirmation-warning: #ffc107;
    --confirmation-error: #f44336;
    --confirmation-surface: rgba(255, 255, 255, 0.98);
    --confirmation-text: #333;
    --confirmation-text-secondary: #666;
    --confirmation-border: rgba(0, 0, 0, 0.08);
}

/* Main container */
.register-confirmation-page[b-0y3v77sjdk] {
    min-height: 100vh !important;
    background: linear-gradient(135deg, var(--confirmation-primary) 0%, var(--confirmation-secondary) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
}

    .register-confirmation-page[b-0y3v77sjdk]::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%) !important;
        pointer-events: none !important;
    }

.confirmation-container[b-0y3v77sjdk] {
    max-width: 650px !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

.confirmation-card[b-0y3v77sjdk] {
    background: var(--confirmation-surface) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 32px !important;
    padding: 3rem 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15), 0 16px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    animation: slideInUp-b-0y3v77sjdk 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@keyframes slideInUp-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Error State Styles */
.error-state[b-0y3v77sjdk] {
    text-align: center !important;
    padding: 2rem !important;
}

.error-icon-container[b-0y3v77sjdk] {
    margin-bottom: 1.5rem !important;
}

.error-title[b-0y3v77sjdk] {
    color: var(--confirmation-error) !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

.error-message[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    margin-bottom: 2rem !important;
    line-height: 1.6 !important;
}

.error-actions[b-0y3v77sjdk] {
    display: flex !important;
    justify-content: center !important;
}

.error-back-button[b-0y3v77sjdk] {
    border-radius: 16px !important;
    padding: 1rem 2rem !important;
}

/* Enhanced Brand Header */
.brand-header[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 2rem !important;
}

.brand-logo[b-0y3v77sjdk] {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, var(--confirmation-primary) 0%, var(--confirmation-secondary) 100%) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

    .brand-logo[b-0y3v77sjdk]::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%) !important;
    }

.brand-letter[b-0y3v77sjdk] {
    color: white !important;
    font-weight: 700 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.brand-name[b-0y3v77sjdk] {
    color: var(--confirmation-primary) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
}

.tagline-text[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    font-style: italic !important;
}

/* Enhanced Email Icon Container */
.email-icon-container[b-0y3v77sjdk] {
    position: relative !important;
    margin-bottom: 2.5rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.email-icon-wrapper[b-0y3v77sjdk] {
    position: relative !important;
    padding: 2rem !important;
    border-radius: 50% !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: float-b-0y3v77sjdk 3s ease-in-out infinite !important;
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5) !important;
}

    .email-icon-wrapper.initializing[b-0y3v77sjdk] {
        background: linear-gradient(135deg, #fff3e0, #fce4ec) !important;
        animation: float-b-0y3v77sjdk 3s ease-in-out infinite, pulse-b-0y3v77sjdk 2s ease-in-out infinite !important;
    }

    .email-icon-wrapper.sent[b-0y3v77sjdk] {
        background: linear-gradient(135deg, #e8f5e9, #f1f8e9) !important;
        transform: scale(1.1) !important;
        animation: float-b-0y3v77sjdk 3s ease-in-out infinite, celebration-b-0y3v77sjdk 0.6s ease-out !important;
    }

.email-icon-main.confirmed[b-0y3v77sjdk] {
    animation: confirmedBounce-b-0y3v77sjdk 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

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

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse-b-0y3v77sjdk {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes celebration-b-0y3v77sjdk {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes confirmedBounce-b-0y3v77sjdk {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.1);
    }
}

.icon-background-ring[b-0y3v77sjdk] {
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    border: 3px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 50% !important;
    animation: ring-pulse-b-0y3v77sjdk 2s ease-in-out infinite !important;
}

.icon-background-pulse[b-0y3v77sjdk] {
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    right: -20px !important;
    bottom: -20px !important;
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
    border-radius: 50% !important;
    animation: ring-pulse-b-0y3v77sjdk 2s ease-in-out infinite 0.5s !important;
}

@keyframes ring-pulse-b-0y3v77sjdk {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

.success-checkmark[b-0y3v77sjdk] {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: white !important;
    border-radius: 50% !important;
    padding: 8px !important;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3) !important;
    animation: bounceIn-b-0y3v77sjdk 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes bounceIn-b-0y3v77sjdk {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.3) rotate(-90deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Enhanced Header Content */
.confirmation-header[b-0y3v77sjdk] {
    margin-bottom: 3rem !important;
}

.confirmation-title[b-0y3v77sjdk] {
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, var(--confirmation-primary), var(--confirmation-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: title-glow-b-0y3v77sjdk 2s ease-in-out infinite alternate !important;
}

@keyframes title-glow-b-0y3v77sjdk {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.1);
    }
}

.confirmation-subtitle[b-0y3v77sjdk] {
    color: var(--confirmation-text) !important;
    margin-bottom: 1rem !important;
    font-weight: 500 !important;
    animation: subtitle-fade-in-b-0y3v77sjdk 0.8s ease-out 0.3s both !important;
}

@keyframes subtitle-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.confirmation-description[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    line-height: 1.7 !important;
    max-width: 450px !important;
    margin: 0 auto 1.5rem auto !important;
    animation: description-fade-in-b-0y3v77sjdk 0.8s ease-out 0.5s both !important;
}

@keyframes description-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status Indicator */
.email-status-indicator[b-0y3v77sjdk] {
    display: flex !important;
    justify-content: center !important;
    margin: 1rem 0 !important;
}

.status-chip[b-0y3v77sjdk] {
    transition: all 0.3s ease !important;
}

    .status-chip.pulsing[b-0y3v77sjdk] {
        animation: chip-pulse-b-0y3v77sjdk 2s ease-in-out infinite !important;
    }

    .status-chip.confirmed[b-0y3v77sjdk] {
        animation: chip-success-b-0y3v77sjdk 0.6s ease-out !important;
    }

@keyframes chip-pulse-b-0y3v77sjdk {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes chip-success-b-0y3v77sjdk {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Enhanced Progress Steps */
.progress-steps[b-0y3v77sjdk] {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 3rem 0 !important;
    padding: 2rem !important;
    background: rgba(103, 126, 234, 0.05) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(103, 126, 234, 0.1) !important;
    animation: steps-fade-in-b-0y3v77sjdk 0.8s ease-out 0.7s both !important;
}

@keyframes steps-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 120px !important;
    text-align: center !important;
}

.step-icon[b-0y3v77sjdk] {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid #e0e0e0 !important;
    background: white !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.step.completed .step-icon[b-0y3v77sjdk] {
    background: linear-gradient(135deg, var(--confirmation-success), #66bb6a) !important;
    border-color: var(--confirmation-success) !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3) !important;
}

.step.current .step-icon[b-0y3v77sjdk] {
    background: linear-gradient(135deg, var(--confirmation-info), #42a5f5) !important;
    border-color: var(--confirmation-info) !important;
    color: white !important;
    animation: current-pulse-b-0y3v77sjdk 2s ease-in-out infinite !important;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3) !important;
}

.step.pending .step-icon[b-0y3v77sjdk] {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #9e9e9e !important;
}

@keyframes current-pulse-b-0y3v77sjdk {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.step-content[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.step-title[b-0y3v77sjdk] {
    font-weight: 600 !important;
    color: var(--confirmation-text) !important;
    font-size: 0.75rem !important;
}

.step-description[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    font-size: 0.65rem !important;
}

.step-line[b-0y3v77sjdk] {
    flex: 1 !important;
    height: 3px !important;
    background: #e0e0e0 !important;
    margin: 0 1rem !important;
    border-radius: 2px !important;
    transition: all 0.6s ease !important;
    position: relative !important;
    overflow: hidden !important;
    align-self: center !important;
    margin-top: 24px !important;
}

    .step-line.active[b-0y3v77sjdk] {
        background: linear-gradient(90deg, var(--confirmation-success) 0%, var(--confirmation-info) 100%) !important;
        animation: line-progress-b-0y3v77sjdk 2s ease-in-out infinite !important;
    }

    .step-line.completed[b-0y3v77sjdk] {
        background: linear-gradient(90deg, var(--confirmation-success) 0%, #66bb6a 100%) !important;
    }

@keyframes line-progress-b-0y3v77sjdk {
    0%, 100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.02);
    }
}

/* Enhanced Email Display */
.email-display[b-0y3v77sjdk] {
    margin: 2.5rem 0 !important;
    animation: email-fade-in-b-0y3v77sjdk 0.8s ease-out 0.9s both !important;
}

@keyframes email-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.email-preview[b-0y3v77sjdk] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: rgba(103, 126, 234, 0.05) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(103, 126, 234, 0.1) !important;
}

.email-details[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.email-label[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    font-weight: 500 !important;
}

.email-chip[b-0y3v77sjdk] {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

    .email-chip.clickable:hover[b-0y3v77sjdk] {
        background: rgba(103, 126, 234, 0.15) !important;
        border-color: rgba(103, 126, 234, 0.3) !important;
        transform: translateY(-2px) !important;
    }

.copy-indicator[b-0y3v77sjdk] {
    display: flex !important;
    align-items: center !important;
}

/* Enhanced Help Card */
.help-card[b-0y3v77sjdk] {
    margin: 2.5rem 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(33, 150, 243, 0.2) !important;
    animation: help-slide-in-b-0y3v77sjdk 0.8s ease-out 1.1s both !important;
    overflow: hidden !important;
}

@keyframes help-slide-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-content[b-0y3v77sjdk] {
    padding: 2rem !important;
}

.help-header[b-0y3v77sjdk] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.help-text[b-0y3v77sjdk] {
    flex: 1 !important;
    text-align: left !important;
}

.help-title[b-0y3v77sjdk] {
    color: var(--confirmation-info) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.help-subtitle[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
}

.help-suggestions[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.help-item[b-0y3v77sjdk] {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: rgba(103, 126, 234, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(103, 126, 234, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

    .help-item:hover[b-0y3v77sjdk] {
        background: rgba(103, 126, 234, 0.08) !important;
        border-color: rgba(103, 126, 234, 0.2) !important;
        transform: translateY(-2px) !important;
    }

.help-item-text[b-0y3v77sjdk] {
    flex: 1 !important;
    text-align: left !important;
}

.help-item-title[b-0y3v77sjdk] {
    font-weight: 600 !important;
    color: var(--confirmation-text) !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.9rem !important;
}

.help-item-description[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    line-height: 1.4 !important;
    font-size: 0.8rem !important;
}

/* Enhanced Action Buttons */
.action-buttons[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 3rem 0 2rem 0 !important;
    animation: buttons-fade-in-b-0y3v77sjdk 0.8s ease-out 1.3s both !important;
}

@keyframes buttons-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resend-button[b-0y3v77sjdk], .continue-button[b-0y3v77sjdk] {
    border-radius: 16px !important;
    padding: 1.25rem 2.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 8px 24px rgba(103, 126, 234, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.resend-button[b-0y3v77sjdk] {
    background: linear-gradient(135deg, var(--confirmation-primary) 0%, var(--confirmation-secondary) 100%) !important;
}

.continue-button[b-0y3v77sjdk] {
    background: linear-gradient(135deg, var(--confirmation-success) 0%, #66bb6a 100%) !important;
}

    .resend-button:hover:not(:disabled)[b-0y3v77sjdk], .continue-button:hover:not(:disabled)[b-0y3v77sjdk] {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 32px rgba(103, 126, 234, 0.4) !important;
    }

.resend-button:disabled[b-0y3v77sjdk] {
    opacity: 0.7 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(103, 126, 234, 0.2) !important;
}

.secondary-actions[b-0y3v77sjdk] {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
}

.back-button[b-0y3v77sjdk], .help-button[b-0y3v77sjdk] {
    border-radius: 16px !important;
    padding: 1rem 2rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.back-button[b-0y3v77sjdk] {
    border: 2px solid rgba(108, 117, 125, 0.3) !important;
}

    .back-button:hover[b-0y3v77sjdk] {
        background: rgba(108, 117, 125, 0.1) !important;
        border-color: rgba(108, 117, 125, 0.5) !important;
        transform: translateY(-2px) !important;
    }

.help-button:hover[b-0y3v77sjdk] {
    background: rgba(33, 150, 243, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Enhanced Support Section */
.support-section[b-0y3v77sjdk] {
    margin-top: 2.5rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--confirmation-border) !important;
    animation: support-fade-in-b-0y3v77sjdk 0.8s ease-out 1.5s both !important;
}

@keyframes support-fade-in-b-0y3v77sjdk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.support-content[b-0y3v77sjdk] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
}

.support-icon[b-0y3v77sjdk] {
    color: var(--confirmation-primary) !important;
    margin-top: 0.125rem !important;
}

.support-text-block[b-0y3v77sjdk] {
    text-align: center !important;
}

.support-text[b-0y3v77sjdk] {
    color: var(--confirmation-text-secondary) !important;
    line-height: 1.6 !important;
}

.support-link[b-0y3v77sjdk] {
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.3s ease !important;
}

    .support-link:hover[b-0y3v77sjdk] {
        border-bottom-color: currentColor !important;
    }

.quick-stats[b-0y3v77sjdk] {
    display: flex !important;
    justify-content: center !important;
    gap: 2rem !important;
    margin-top: 1rem !important;
}

.stat-item[b-0y3v77sjdk] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

    .stat-item:hover[b-0y3v77sjdk] {
        opacity: 1 !important;
    }

/* Responsive Design */
@@media (max-width: 768px) {
    .confirmation-card[b-0y3v77sjdk] {
        padding: 2rem 1.5rem !important;
        margin: 1rem !important;
        border-radius: 24px !important;
    }

    .progress-steps[b-0y3v77sjdk] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1.5rem !important;
    }

    .step-line[b-0y3v77sjdk] {
        width: 3px !important;
        height: 30px !important;
        margin: 0 !important;
        align-self: center !important;
        margin-top: 0 !important;
    }

    .step[b-0y3v77sjdk] {
        min-width: auto !important;
        width: 100% !important;
    }

    .secondary-actions[b-0y3v77sjdk] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .brand-logo[b-0y3v77sjdk] {
        width: 64px !important;
        height: 64px !important;
    }

    .email-icon-wrapper[b-0y3v77sjdk] {
        padding: 1.5rem !important;
    }

    .quick-stats[b-0y3v77sjdk] {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .help-suggestions[b-0y3v77sjdk] {
        gap: 0.75rem !important;
    }

    .help-item[b-0y3v77sjdk] {
        padding: 0.75rem !important;
    }
}

@@media (max-width: 480px) {
    .confirmation-card[b-0y3v77sjdk] {
        padding: 1.5rem 1rem !important;
        border-radius: 20px !important;
    }

    .email-preview[b-0y3v77sjdk] {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }

    .help-header[b-0y3v77sjdk] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    .help-item[b-0y3v77sjdk] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }
}

/* Dark Mode Support */
@@media (prefers-color-scheme: dark) {
    :root[b-0y3v77sjdk] {
        --confirmation-surface: rgba(18, 18, 18, 0.95);
        --confirmation-text: #e0e0e0;
        --confirmation-text-secondary: #b0b0b0;
        --confirmation-border: rgba(255, 255, 255, 0.1);
    }

    .confirmation-card[b-0y3v77sjdk] {
        background: var(--confirmation-surface) !important;
        color: var(--confirmation-text) !important;
        border-color: var(--confirmation-border) !important;
    }

    .help-card[b-0y3v77sjdk] {
        background: rgba(30, 30, 30, 0.8) !important;
        border-color: var(--confirmation-border) !important;
    }

    .help-item[b-0y3v77sjdk] {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--confirmation-border) !important;
    }

    .step-icon[b-0y3v77sjdk] {
        background: rgba(30, 30, 30, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .email-preview[b-0y3v77sjdk] {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--confirmation-border) !important;
    }
}
/* _content/Havto.Web/Components/Pages/Admin/ModuleManagementPage.razor.rz.scp.css */
/* Module Management Page Styles */

.module-management-header[b-u3eqjwta1a] {
    margin-bottom: 2rem;
}

.loading-container[b-u3eqjwta1a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
}

.category-panel[b-u3eqjwta1a] {
    padding: 1rem 0;
}

.category-panel-header[b-u3eqjwta1a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.category-info[b-u3eqjwta1a] {
    flex-grow: 1;
}

.category-actions[b-u3eqjwta1a] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.stat-card[b-u3eqjwta1a] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .stat-card > div[b-u3eqjwta1a] {
        text-align: left;
    }

.pending-changes-card[b-u3eqjwta1a] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--mud-palette-info);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pending-change-item[b-u3eqjwta1a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.change-text[b-u3eqjwta1a] {
    flex: 1;
    font-weight: 500;
}

.overview-panel[b-u3eqjwta1a] {
    padding: 1rem 0;
}

/* Enhanced tab styling */
.mud-tabs .mud-tab-panel[b-u3eqjwta1a] {
    padding: 1.5rem;
}

.mud-tabs .mud-tab[b-u3eqjwta1a] {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .mud-tabs .mud-tab:hover[b-u3eqjwta1a] {
        background-color: var(--mud-palette-action-hover);
    }

/* Card hover effects */
.mud-card[b-u3eqjwta1a] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .mud-card:hover[b-u3eqjwta1a] {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    }

/* Button enhancements */
.mud-button[b-u3eqjwta1a] {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .mud-button:hover[b-u3eqjwta1a] {
        transform: translateY(-1px);
    }

/* Alert styling */
.mud-alert[b-u3eqjwta1a] {
    border-radius: 8px;
    border-width: 1px;
    font-weight: 500;
}

/* Progress indicator */
.mud-progress-circular[b-u3eqjwta1a] {
    color: var(--mud-palette-primary);
}

/* Table enhancements */
.mud-table[b-u3eqjwta1a] {
    border-radius: 8px;
    overflow: hidden;
}

.mud-table-head .mud-table-cell[b-u3eqjwta1a] {
    background-color: var(--mud-palette-surface);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.mud-table-row:hover[b-u3eqjwta1a] {
    background-color: var(--mud-palette-action-hover);
}

/* Chip styling */
.mud-chip[b-u3eqjwta1a] {
    font-weight: 500;
    border-radius: 6px;
}

/* Text field styling */
.mud-input[b-u3eqjwta1a] {
    border-radius: 8px;
}

/* Responsive design */
@media (max-width: 768px) {
    .category-panel-header[b-u3eqjwta1a] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .category-actions[b-u3eqjwta1a] {
        width: 100%;
        justify-content: stretch;
    }

        .category-actions .mud-button[b-u3eqjwta1a] {
            flex: 1;
        }

    .pending-change-item[b-u3eqjwta1a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .stat-card[b-u3eqjwta1a] {
        flex-direction: column;
        text-align: center;
    }

        .stat-card > div[b-u3eqjwta1a] {
            text-align: center;
        }
}

@media (max-width: 480px) {
    .module-management-header[b-u3eqjwta1a] {
        margin-bottom: 1rem;
    }

    .category-panel[b-u3eqjwta1a] {
        padding: 0.5rem 0;
    }

    .mud-tabs .mud-tab-panel[b-u3eqjwta1a] {
        padding: 1rem;
    }

    .overview-panel[b-u3eqjwta1a] {
        padding: 0.5rem 0;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .pending-changes-card[b-u3eqjwta1a] {
        background: linear-gradient(135deg, #2d2d30 0%, #3e3e42 100%);
        border-left-color: var(--mud-palette-info);
    }

    .mud-card:hover[b-u3eqjwta1a] {
        box-shadow: 0 6px 25px rgba(255, 255, 255, 0.1);
    }
}

/* Loading state animations */
@keyframes pulse-b-u3eqjwta1a {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.loading-container[b-u3eqjwta1a] {
    animation: pulse-b-u3eqjwta1a 2s infinite;
}

/* Success states */
.category-panel[data-has-enabled="true"][b-u3eqjwta1a] {
    border-left: 3px solid var(--mud-palette-success);
    padding-left: 1rem;
    margin-left: -1rem;
}

/* Focus states for accessibility */
.mud-button:focus[b-u3eqjwta1a],
.mud-input:focus[b-u3eqjwta1a] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Animation for pending changes */
.pending-changes-card[b-u3eqjwta1a] {
    animation: slideInUp-b-u3eqjwta1a 0.3s ease-out;
}

@keyframes slideInUp-b-u3eqjwta1a {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* _content/Havto.Web/Components/Pages/Admin/OrganizationPolicyManagementPage.razor.rz.scp.css */
/* Organization Policy Management Page Styles */

.policy-management-header[b-ox5405rhv6] {
    margin-bottom: 2rem;
}

    .policy-management-header .mud-text[b-ox5405rhv6] {
        line-height: 1.4;
    }

    .policy-management-header .mud-icon[b-ox5405rhv6] {
        vertical-align: middle;
    }

/* Tab styling */
.mud-tabs[b-ox5405rhv6] {
    border-radius: 8px;
    overflow: hidden;
}

    .mud-tabs .mud-tab-panel[b-ox5405rhv6] {
        padding: 1.5rem;
        min-height: 400px;
    }

    .mud-tabs .mud-tab[b-ox5405rhv6] {
        font-weight: 500;
        transition: all 0.2s ease-in-out;
    }

        .mud-tabs .mud-tab:hover[b-ox5405rhv6] {
            background-color: var(--mud-palette-action-hover);
        }

/* Policy category panels */
.policy-category-panel[b-ox5405rhv6] {
    padding: 1rem 0;
}

.policy-section[b-ox5405rhv6] {
    margin-bottom: 2rem;
}

.policy-section-header[b-ox5405rhv6] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

    .policy-section-header .mud-icon[b-ox5405rhv6] {
        margin-right: 0.5rem;
        color: var(--mud-palette-primary);
    }

/* Policy cards */
.policy-card[b-ox5405rhv6] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 8px;
    overflow: hidden;
}

    .policy-card:hover[b-ox5405rhv6] {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    }

.policy-card-header[b-ox5405rhv6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.policy-card-content[b-ox5405rhv6] {
    padding: 1rem;
}

.policy-role-selector[b-ox5405rhv6] {
    min-width: 150px;
}

/* Alert styling */
.policy-alert[b-ox5405rhv6] {
    border-radius: 8px;
    border-width: 1px;
    font-weight: 500;
    margin-bottom: 1rem;
}

    .policy-alert .mud-alert-message[b-ox5405rhv6] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .policy-alert .mud-button[b-ox5405rhv6] {
        margin-top: 0.5rem;
        align-self: flex-start;
    }

/* Progress indicator */
.policy-loading[b-ox5405rhv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
}

    .policy-loading .mud-progress-linear[b-ox5405rhv6] {
        width: 100%;
        max-width: 400px;
        margin-bottom: 1rem;
    }

/* Hierarchy dashboard specific styles */
.hierarchy-dashboard[b-ox5405rhv6] {
    padding: 1rem 0;
}

.child-org-card[b-ox5405rhv6] {
    border-left: 4px solid var(--mud-palette-primary);
    margin-bottom: 1rem;
}

.child-org-header[b-ox5405rhv6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.child-org-policies[b-ox5405rhv6] {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.policy-status-chip[b-ox5405rhv6] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Analytics dashboard */
.analytics-dashboard[b-ox5405rhv6] {
    padding: 1rem 0;
}

.analytics-card[b-ox5405rhv6] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .analytics-card .mud-card-content[b-ox5405rhv6] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.stat-display[b-ox5405rhv6] {
    text-align: center;
    padding: 1rem;
}

.stat-number[b-ox5405rhv6] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label[b-ox5405rhv6] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Policy differences dialog */
.policy-differences-grid[b-ox5405rhv6] {
    margin-top: 1rem;
}

.policy-difference-item[b-ox5405rhv6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--mud-palette-background-grey);
    margin-bottom: 0.5rem;
}

.policy-difference-text[b-ox5405rhv6] {
    flex: 1;
    margin-right: 1rem;
}

.policy-difference-badges[b-ox5405rhv6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Responsive design */
@media (max-width: 768px) {
    .policy-management-header[b-ox5405rhv6] {
        margin-bottom: 1rem;
    }

    .mud-tabs .mud-tab-panel[b-ox5405rhv6] {
        padding: 1rem;
    }

    .policy-card-header[b-ox5405rhv6] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .child-org-header[b-ox5405rhv6] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .policy-difference-item[b-ox5405rhv6] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .policy-difference-badges[b-ox5405rhv6] {
        justify-content: flex-start;
    }

    .stat-number[b-ox5405rhv6] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .policy-management-header .mud-text h4[b-ox5405rhv6] {
        font-size: 1.5rem;
    }

    .policy-card[b-ox5405rhv6] {
        margin-bottom: 1rem;
    }

    .policy-section[b-ox5405rhv6] {
        margin-bottom: 1.5rem;
    }

    .stat-number[b-ox5405rhv6] {
        font-size: 1.75rem;
    }
}

/* Button enhancements */
.mud-button[b-ox5405rhv6] {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
}

    .mud-button:hover[b-ox5405rhv6] {
        transform: translateY(-1px);
    }

    .mud-button.cascade-button[b-ox5405rhv6] {
        background: linear-gradient(45deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
        color: white;
    }

        .mud-button.cascade-button:hover[b-ox5405rhv6] {
            background: linear-gradient(45deg, var(--mud-palette-primary-darken), var(--mud-palette-primary));
        }

/* Select component styling */
.mud-select[b-ox5405rhv6] {
    border-radius: 6px;
}

    .mud-select.policy-role-select .mud-input-control[b-ox5405rhv6] {
        background-color: var(--mud-palette-surface);
    }

/* Chip styling */
.mud-chip[b-ox5405rhv6] {
    font-weight: 500;
    border-radius: 6px;
}

    .mud-chip.role-chip[b-ox5405rhv6] {
        font-size: 0.75rem;
        height: 24px;
    }

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .policy-card:hover[b-ox5405rhv6] {
        box-shadow: 0 6px 25px rgba(255, 255, 255, 0.1);
    }

    .child-org-card[b-ox5405rhv6] {
        border-left-color: var(--mud-palette-primary-lighten);
    }

    .policy-difference-item[b-ox5405rhv6] {
        background-color: var(--mud-palette-surface);
    }
}

/* Focus states for accessibility */
.mud-button:focus[b-ox5405rhv6],
.mud-select:focus[b-ox5405rhv6],
.mud-input:focus[b-ox5405rhv6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Animation for content loading */
.policy-content[b-ox5405rhv6] {
    animation: fadeInUp-b-ox5405rhv6 0.3s ease-out;
}

@keyframes fadeInUp-b-ox5405rhv6 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Enhanced card effects */
.mud-card.policy-overview-card[b-ox5405rhv6] {
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background-grey) 100%);
    border: 1px solid var(--mud-palette-divider);
}

/* Icon styling */
.policy-icon[b-ox5405rhv6] {
    color: var(--mud-palette-primary);
    margin-right: 0.5rem;
}

    .policy-icon.large[b-ox5405rhv6] {
        font-size: 1.5rem;
    }

/* Status indicators */
.policy-status[b-ox5405rhv6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

    .policy-status-indicator.active[b-ox5405rhv6] {
        background-color: var(--mud-palette-success);
    }

    .policy-status-indicator.inherited[b-ox5405rhv6] {
        background-color: var(--mud-palette-info);
    }

    .policy-status-indicator.overridden[b-ox5405rhv6] {
        background-color: var(--mud-palette-warning);
    }

/* Loading skeleton animation */
.policy-skeleton[b-ox5405rhv6] {
    background: linear-gradient(90deg, var(--mud-palette-background-grey) 25%, var(--mud-palette-surface) 50%, var(--mud-palette-background-grey) 75%);
    background-size: 200% 100%;
    animation: loading-skeleton-b-ox5405rhv6 2s infinite;
}

@keyframes loading-skeleton-b-ox5405rhv6 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
/* _content/Havto.Web/Components/Pages/Authentication/ForgotPassword.razor.rz.scp.css */
.forgot-password-container[b-71ywvnys9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-primary) 100%);
    padding: 20px;
}

.forgot-password-card[b-71ywvnys9r] {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 16px;
}

.forgot-password-header[b-71ywvnys9r] {
    text-align: center;
    margin-bottom: 32px;
}

.brand-logo[b-71ywvnys9r] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.brand-letter[b-71ywvnys9r] {
    color: white !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 1.5rem !important;
}

.forgot-password-title[b-71ywvnys9r] {
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.forgot-password-form[b-71ywvnys9r] {
    margin-bottom: 24px;
}

.reset-button[b-71ywvnys9r] {
    height: 48px !important;
    font-weight: 600 !important;
    margin-bottom: 16px;
}

.forgot-password-footer[b-71ywvnys9r] {
    margin-top: 24px;
}
/* _content/Havto.Web/Components/Pages/Authentication/Landing.razor.rz.scp.css */
/* IMPORTANT: Force layout styles to override MudBlazor defaults */
div.landing-container[b-g8lm6utkcd] {
    display: flex !important;
    min-height: 100vh !important;
    width: 100% !important;
    position: relative !important;
    background: linear-gradient(135deg, #ff6b9d 0%, #667eea 100%) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

    /* Force remove any MudBlazor container constraints */
    div.landing-container *[b-g8lm6utkcd] {
        box-sizing: border-box;
    }

/* ========================================
   LEFT PANEL - BRAND & FEATURES
======================================== */
div.left-panel[b-g8lm6utkcd] {
    flex: 1 1 60% !important;
    min-width: 60% !important;
    padding: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow-y: auto !important;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.95) 0%, rgba(102, 126, 234, 0.95) 100%) !important;
    color: white !important;
}

/* Top Section - Brand and Live Impact side by side */
.top-section[b-g8lm6utkcd] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Brand Section - Now takes left side of top section */
div.brand-section[b-g8lm6utkcd] {
    text-align: left !important;
    flex: 1 !important;
    min-width: 0 !important; /* Allow text to wrap */
    position: relative !important;
    z-index: 1 !important;
}

div.brand-logo-small[b-g8lm6utkcd] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 2rem !important;
}

.brand-name[b-g8lm6utkcd] {
    color: white !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 1rem !important;
}

.brand-title[b-g8lm6utkcd] {
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    font-size: 3.25rem !important;
    line-height: 1.1 !important;
    color: white !important;
    letter-spacing: -0.02em !important;
}

.brand-subtitle[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
}

/* Live Impact Section - Now positioned in top right */
.live-impact-section[b-g8lm6utkcd] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    width: 450px !important; /* Increased from 280px */
    max-width: 450px !important; /* Increased from 280px */
    align-self: flex-start !important; /* Align to top */
}

    .live-impact-section:hover[b-g8lm6utkcd] {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }

.impact-header[b-g8lm6utkcd] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.impact-title[b-g8lm6utkcd] {
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.impact-icon[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.impact-updated[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}

.impact-loading[b-g8lm6utkcd] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.impact-stats[b-g8lm6utkcd] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.impact-item[b-g8lm6utkcd] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

    .impact-item:hover[b-g8lm6utkcd] {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(2px) !important;
    }

.impact-stat-icon[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.9) !important;
    flex-shrink: 0 !important;
    margin-top: 0.125rem !important; /* Slight adjustment for alignment */
}

.impact-text[b-g8lm6utkcd] {
    color: white !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* First impact item (special styling for main message) */
.impact-item:first-child[b-g8lm6utkcd] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0.25rem !important;
}

    .impact-item:first-child .impact-text[b-g8lm6utkcd] {
        font-weight: 600 !important;
        font-size: 0.825rem !important;
    }

/* Features Section */
div.features-section[b-g8lm6utkcd] {
    margin-bottom: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
}

div.feature-item[b-g8lm6utkcd] {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 2rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
}

    div.feature-item:hover[b-g8lm6utkcd] {
        transform: translateY(-2px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

div.feature-icon[b-g8lm6utkcd] {
    margin-right: 1rem !important;
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 60px !important;
    height: 60px !important;
}

    div.feature-icon .mud-icon-root[b-g8lm6utkcd] {
        color: white !important;
    }

div.feature-content[b-g8lm6utkcd] {
    flex: 1 !important;
}

.feature-title[b-g8lm6utkcd] {
    color: white !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}

.feature-description[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.5 !important;
}

/* Action Section */
div.action-section[b-g8lm6utkcd] {
    margin-bottom: 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    z-index: 1 !important;
}

.download-button[b-g8lm6utkcd] {
    height: 56px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
    color: white !important;
}

    .download-button:hover[b-g8lm6utkcd] {
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4) !important;
    }

.play-button[b-g8lm6utkcd] {
    height: 60px !important;
    width: 60px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .play-button:hover[b-g8lm6utkcd] {
        background: rgba(0, 0, 0, 0.4) !important;
        transform: scale(1.05) !important;
    }

    .play-button .mud-button-label[b-g8lm6utkcd] {
        display: none !important;
    }

    .play-button .mud-icon-root[b-g8lm6utkcd] {
        font-size: 1.5rem !important;
        margin-left: 3px !important; /* Offset to center the play icon visually */
    }

/* Video Player Section */
div.video-player-section[b-g8lm6utkcd] {
    margin-bottom: 2rem !important;
    position: relative !important;
    z-index: 1 !important;
    animation: slideDown-b-g8lm6utkcd 0.3s ease !important;
}

@keyframes slideDown-b-g8lm6utkcd {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

div.video-container[b-g8lm6utkcd] {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

    div.video-container iframe[b-g8lm6utkcd] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

/* Footer Section */
div.footer-section[b-g8lm6utkcd] {
    margin-top: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

div.footer-navigation[b-g8lm6utkcd] {
    display: flex !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
}

.footer-nav-button[b-g8lm6utkcd] {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    padding: 0.5rem 0 !important;
    min-width: auto !important;
    height: auto !important;
}

    .footer-nav-button:hover[b-g8lm6utkcd] {
        color: white !important;
        background: transparent !important;
    }

/* ========================================
   RIGHT PANEL - AUTHENTICATION (WHITE BACKGROUND)
======================================== */
div.right-panel[b-g8lm6utkcd] {
    flex: 0 0 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    background: #ffffff !important; /* Clean white background */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for depth */
}

div.auth-container[b-g8lm6utkcd] {
    flex: 1 !important;
    padding: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: 100% !important;
    overflow-y: auto !important;
}

/* Theme Toggle */
div.theme-toggle[b-g8lm6utkcd] {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10 !important;
}

/* Auth Tabs - Now at top, updated spacing */
.auth-tabs[b-g8lm6utkcd] {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important; /* Reduced from 2rem since it's now at top */
    padding: 0.25rem !important;
    background: #f7fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

.auth-tab-button[b-g8lm6utkcd] {
    flex: 1 !important;
    height: 44px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: none !important;
}

    .auth-tab-button.active[b-g8lm6utkcd] {
        background: #ffffff !important;
        color: #667eea !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .auth-tab-button:not(.active)[b-g8lm6utkcd] {
        background: transparent !important;
        color: #718096 !important;
    }

        .auth-tab-button:not(.active):hover[b-g8lm6utkcd] {
            background: rgba(102, 126, 234, 0.05) !important;
            color: #4a5568 !important;
        }

/* Auth Header - Dark text on white background, reduced top margin */
div.auth-header[b-g8lm6utkcd] {
    text-align: left !important;
    margin-bottom: 2rem !important;
}

.auth-title[b-g8lm6utkcd] {
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: #1a202c !important; /* Dark text for contrast */
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
}

.auth-subtitle[b-g8lm6utkcd] {
    margin-bottom: 0 !important;
    color: #4a5568 !important; /* Medium gray for subtitle */
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Auth Form */
div.auth-form[b-g8lm6utkcd] {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* Login Options */
.login-options[b-g8lm6utkcd] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
}

.remember-me-checkbox[b-g8lm6utkcd] {
    margin: 0 !important;
}

.checkbox-text[b-g8lm6utkcd] {
    color: #2d3748 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.forgot-password-link[b-g8lm6utkcd] {
    font-size: 0.875rem !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

    .forgot-password-link:hover[b-g8lm6utkcd] {
        text-decoration: underline !important;
    }

/* Submit Button */
.auth-submit-button[b-g8lm6utkcd] {
    height: 56px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    text-transform: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
}

    .auth-submit-button:hover[b-g8lm6utkcd] {
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    }

.terms-checkbox[b-g8lm6utkcd] {
    margin: 1rem 0 !important;
}

.terms-text[b-g8lm6utkcd] {
    color: #2d3748 !important; /* Dark text for readability */
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

/* Social Login - Light theme styling */
div.social-login-section[b-g8lm6utkcd] {
    margin-bottom: 0 !important; /* Changed from 1.5rem to 0 since no toggle section below */
}

    div.social-login-section .mud-divider-text[b-g8lm6utkcd] {
        color: #718096 !important; /* Medium gray for divider text */
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

div.social-buttons[b-g8lm6utkcd] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.social-button[b-g8lm6utkcd] {
    height: 48px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    background: #f7fafc !important; /* Light background */
    border: 1px solid #e2e8f0 !important; /* Light border */
    color: #2d3748 !important; /* Dark text */
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
}

    .social-button:hover[b-g8lm6utkcd] {
        background: #edf2f7 !important;
        border-color: #cbd5e0 !important;
        transform: translateY(-1px) !important;
    }

.facebook-button:hover[b-g8lm6utkcd] {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
}

.google-button:hover[b-g8lm6utkcd] {
    background: #db4437 !important;
    border-color: #db4437 !important;
    color: #ffffff !important;
}

/* Input field styling - Light theme */
div.right-panel .mud-input-outlined .mud-input-outlined-border[b-g8lm6utkcd] {
    border-color: #e2e8f0 !important; /* Light border */
}

div.right-panel .mud-input-outlined:hover .mud-input-outlined-border[b-g8lm6utkcd] {
    border-color: #cbd5e0 !important; /* Darker on hover */
}

div.right-panel .mud-input-outlined.mud-input-focused .mud-input-outlined-border[b-g8lm6utkcd] {
    border-color: #667eea !important; /* Primary color on focus */
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.3) !important;
}

div.right-panel .mud-input-label[b-g8lm6utkcd] {
    color: #4a5568 !important; /* Dark labels */
    font-weight: 500 !important;
}

div.right-panel .mud-input-text[b-g8lm6utkcd] {
    color: #1a202c !important; /* Dark input text */
    font-weight: 400 !important;
}

div.right-panel .mud-input-input[b-g8lm6utkcd]::placeholder {
    color: #a0aec0 !important; /* Light placeholder */
}

/* Input field backgrounds */
div.right-panel .mud-input-outlined .mud-input-input[b-g8lm6utkcd] {
    background: #ffffff !important; /* White background */
    border-radius: 6px !important;
}

div.right-panel .mud-input-outlined:hover .mud-input-input[b-g8lm6utkcd] {
    background: #f7fafc !important; /* Very light on hover */
}

div.right-panel .mud-input-outlined.mud-input-focused .mud-input-input[b-g8lm6utkcd] {
    background: #ffffff !important; /* White when focused */
}

/* Checkbox styling - Light theme */
div.right-panel .mud-checkbox .mud-checkbox-input:checked ~ .mud-checkbox-box[b-g8lm6utkcd] {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

div.right-panel .mud-checkbox .mud-checkbox-box[b-g8lm6utkcd] {
    border-color: #cbd5e0 !important;
}

div.right-panel .mud-checkbox:hover .mud-checkbox-box[b-g8lm6utkcd] {
    border-color: #a0aec0 !important;
}

/* Connection alert styling */
.connection-alert[b-g8lm6utkcd] {
    background: #fef5e7 !important; /* Light warning background */
    border: 1px solid #f6ad55 !important;
    color: #744210 !important; /* Dark warning text */
    margin-bottom: 1rem !important;
}

/* Error alert styling */
div.right-panel .mud-alert-error[b-g8lm6utkcd] {
    background: #fed7d7 !important; /* Light error background */
    border: 1px solid #fc8181 !important;
    color: #742a2a !important; /* Dark error text */
}

/* Loading spinner styling */
div.right-panel .mud-progress-circular[b-g8lm6utkcd] {
    color: #667eea !important; /* Primary color for spinner */
}

/* Override MudBlazor's Color.Secondary to work with white background */
div.right-panel .mud-typography-secondary[b-g8lm6utkcd] {
    color: #4a5568 !important; /* Dark gray for secondary text */
}

/* Override MudBlazor's default text colors in right panel */
div.right-panel .mud-typography[b-g8lm6utkcd] {
    color: #2d3748 !important; /* Default dark text */
}

/* Ensure MudDivider text is readable */
div.right-panel .mud-divider .mud-divider-text[b-g8lm6utkcd] {
    color: #718096 !important;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@@media (max-width: 1024px) {
    div.right-panel[b-g8lm6utkcd] {
        flex: 0 0 45% !important;
        min-width: 45% !important;
        max-width: 45% !important;
    }

    div.left-panel[b-g8lm6utkcd] {
        flex: 1 1 55% !important;
        min-width: 55% !important;
        padding: 1.5rem !important;
    }

    div.auth-container[b-g8lm6utkcd] {
        padding: 1.5rem !important;
    }

    .brand-title[b-g8lm6utkcd] {
        font-size: 2.25rem !important;
    }

    .auth-title[b-g8lm6utkcd] {
        font-size: 1.375rem !important;
    }

    .live-impact-section[b-g8lm6utkcd] {
        width: 260px !important;
        max-width: 260px !important;
        padding: 1rem !important;
    }

    .top-section[b-g8lm6utkcd] {
        gap: 1.5rem !important;
    }
}

/* Mobile */
@@media (max-width: 768px) {
    div.landing-container[b-g8lm6utkcd] {
        flex-direction: column !important;
    }

    div.left-panel[b-g8lm6utkcd] {
        flex: 0 0 auto !important;
        min-height: 50vh !important;
        padding: 2rem 1rem !important;
        min-width: auto !important;
    }

    div.right-panel[b-g8lm6utkcd] {
        flex: 1 !important;
        min-width: auto !important;
        max-width: none !important;
    }

    div.auth-container[b-g8lm6utkcd] {
        padding: 1.5rem 1rem !important;
        justify-content: flex-start !important;
    }

    .top-section[b-g8lm6utkcd] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    .brand-title[b-g8lm6utkcd] {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .brand-subtitle[b-g8lm6utkcd] {
        font-size: 1rem !important;
    }

    .auth-title[b-g8lm6utkcd] {
        font-size: 1.25rem !important;
    }

    div.action-section[b-g8lm6utkcd] {
        margin-bottom: 2rem !important;
    }

    div.footer-navigation[b-g8lm6utkcd] {
        gap: 1rem !important;
        justify-content: center !important;
    }

    .live-impact-section[b-g8lm6utkcd] {
        width: 100% !important;
        max-width: none !important;
        padding: 1rem !important;
    }

    .impact-text[b-g8lm6utkcd] {
        font-size: 0.875rem !important;
    }

    .auth-tabs[b-g8lm6utkcd] {
        margin-bottom: 1.25rem !important; /* Adjusted for mobile */
    }

    .auth-tab-button[b-g8lm6utkcd] {
        height: 40px !important;
        font-size: 0.875rem !important;
    }

    .login-options[b-g8lm6utkcd] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
}

/* Small Mobile */
@@media (max-width: 480px) {
    div.left-panel[b-g8lm6utkcd] {
        padding: 1.5rem 0.75rem !important;
        min-height: 40vh !important;
    }

    div.auth-container[b-g8lm6utkcd] {
        padding: 1rem 0.75rem !important;
    }

    .brand-title[b-g8lm6utkcd] {
        font-size: 1.75rem !important;
    }

    .brand-subtitle[b-g8lm6utkcd] {
        font-size: 0.9rem !important;
    }

    .auth-title[b-g8lm6utkcd] {
        font-size: 1.125rem !important;
    }

    div.footer-navigation[b-g8lm6utkcd] {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .live-impact-section[b-g8lm6utkcd] {
        padding: 0.875rem !important;
    }

    .impact-header[b-g8lm6utkcd] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .impact-stats[b-g8lm6utkcd] {
        gap: 0.75rem !important;
    }

    .impact-item[b-g8lm6utkcd] {
        padding: 0.625rem 0.5rem !important;
    }

    .impact-text[b-g8lm6utkcd] {
        font-size: 0.8rem !important;
    }

    .auth-tabs[b-g8lm6utkcd] {
        gap: 0.25rem !important;
        padding: 0.125rem !important;
        margin-bottom: 1rem !important; /* Reduced for small mobile */
    }

    .auth-tab-button[b-g8lm6utkcd] {
        height: 36px !important;
        font-size: 0.8125rem !important;
    }
}

/* Focus styles for accessibility */
.play-button:focus[b-g8lm6utkcd],
.auth-submit-button:focus[b-g8lm6utkcd],
.auth-tab-button:focus[b-g8lm6utkcd] {
    outline: 3px solid rgba(102, 126, 234, 0.5) !important;
    outline-offset: 2px !important;
}

/* Print styles */
@@media print {
    div.landing-container[b-g8lm6utkcd] {
        flex-direction: column !important;
        min-height: auto !important;
    }

    div.video-player-section[b-g8lm6utkcd],
    div.action-section[b-g8lm6utkcd] {
        display: none !important;
    }

    div.left-panel[b-g8lm6utkcd] {
        background: white !important;
        color: black !important;
    }

        div.left-panel[b-g8lm6utkcd]::before {
            display: none !important;
        }
}
/* _content/Havto.Web/Components/Pages/Authentication/Logout.razor.rz.scp.css */
.logout-container[b-z1sizb23rl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-primary) 100%);
    padding: 20px;
}

.logout-card[b-z1sizb23rl] {
    width: 100%;
    max-width: 350px;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.logout-content[b-z1sizb23rl] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .logout-content .mud-progress-circular[b-z1sizb23rl] {
        animation: pulse-b-z1sizb23rl 1.5s ease-in-out infinite;
    }

@keyframes pulse-b-z1sizb23rl {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}
/* _content/Havto.Web/Components/Pages/Authentication/Profile.razor.rz.scp.css */
.profile-container[b-t6jgaiay8p] {
    padding: 24px;
}

.profile-header[b-t6jgaiay8p] {
    margin-bottom: 32px;
    text-align: center;
}
/* _content/Havto.Web/Components/Pages/Calendar/Calendar.razor.rz.scp.css */
/* Calendar Page Container */
.calendar-page-container[b-wt0xxc1pb4] {
    padding: 24px;
    max-width: 100%;
    min-height: 100vh;
}

/* Calendar Header */
.calendar-header[b-wt0xxc1pb4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.calendar-title-section[b-wt0xxc1pb4] {
    flex: 1;
    min-width: 300px;
}

.calendar-title[b-wt0xxc1pb4] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 8px;
}

.calendar-controls[b-wt0xxc1pb4] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Calendar Loading */
.calendar-loading[b-wt0xxc1pb4] {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calendar Main Content */
.calendar-main-content[b-wt0xxc1pb4] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.calendar-widget[b-wt0xxc1pb4] {
    flex: 1;
    min-height: 600px;
}

/* Calendar Events Display - Fixed for Dark Theme */
.calendar-event-display[b-wt0xxc1pb4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.event-indicator[b-wt0xxc1pb4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-text[b-wt0xxc1pb4] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

/* Calendar Cell Theme Support */
[b-wt0xxc1pb4] .mud-calendar .mud-calendar-cell {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

    [b-wt0xxc1pb4] .mud-calendar .mud-calendar-cell:hover {
        background: var(--mud-palette-background-gray);
    }

    [b-wt0xxc1pb4] .mud-calendar .mud-calendar-cell.mud-calendar-cell-today {
        background: var(--mud-palette-primary-lighten);
        color: var(--mud-palette-primary-darken);
    }

[b-wt0xxc1pb4] .mud-calendar .mud-calendar-header {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

[b-wt0xxc1pb4] .mud-calendar .mud-calendar-header-cell {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}

[b-wt0xxc1pb4] .mud-calendar .mud-calendar-month-view {
    background: var(--mud-palette-surface);
}

/* Event Details Sidebar */
.event-details-sidebar[b-wt0xxc1pb4] {
    width: 350px;
    flex-shrink: 0;
}

.event-details-header[b-wt0xxc1pb4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.event-title[b-wt0xxc1pb4] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.event-info[b-wt0xxc1pb4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.event-field[b-wt0xxc1pb4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.field-icon[b-wt0xxc1pb4] {
    color: var(--mud-palette-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.field-label[b-wt0xxc1pb4] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.event-actions[b-wt0xxc1pb4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Calendar Empty State */
.calendar-empty-state[b-wt0xxc1pb4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Quick Slot Form */
.quick-slot-form[b-wt0xxc1pb4] {
    max-width: 100%;
}

/* Responsive Design */
@@media (max-width: 1200px) {
    .calendar-main-content[b-wt0xxc1pb4] {
        flex-direction: column;
    }

    .event-details-sidebar[b-wt0xxc1pb4] {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

@@media (max-width: 768px) {
    .calendar-page-container[b-wt0xxc1pb4] {
        padding: 16px;
    }

    .calendar-header[b-wt0xxc1pb4] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .calendar-controls[b-wt0xxc1pb4] {
        justify-content: center;
    }

    .calendar-widget[b-wt0xxc1pb4] {
        min-height: 400px;
    }

    .event-details-sidebar[b-wt0xxc1pb4] {
        width: 100%;
    }
}

@@media (max-width: 480px) {
    .calendar-page-container[b-wt0xxc1pb4] {
        padding: 12px;
    }

    .calendar-event-display[b-wt0xxc1pb4] {
        font-size: 0.7rem;
        padding: 1px 4px;
    }

    .event-indicator[b-wt0xxc1pb4] {
        width: 6px;
        height: 6px;
    }
}
/* _content/Havto.Web/Components/Pages/Compliance/RiskRegister.razor.rz.scp.css */
/* Risk Register Page Styles */

.risk-heat-map[b-175g51sec9] {
    overflow-x: auto;
}

    .risk-heat-map .mud-table[b-175g51sec9] {
        min-width: 600px;
    }

    .risk-heat-map .mud-table-cell[b-175g51sec9] {
        padding: 8px;
        min-height: 60px;
    }

.text-error[b-175g51sec9] {
    color: var(--mud-palette-error);
}

.text-warning[b-175g51sec9] {
    color: var(--mud-palette-warning);
}

.font-weight-bold[b-175g51sec9] {
    font-weight: 600;
}

/* Risk level color indicators */
.risk-level-critical[b-175g51sec9] {
    background-color: #9c27b0;
    color: white;
}

.risk-level-high[b-175g51sec9] {
    background-color: #f44336;
    color: white;
}

.risk-level-medium[b-175g51sec9] {
    background-color: #ff9800;
    color: white;
}

.risk-level-low[b-175g51sec9] {
    background-color: #4caf50;
    color: white;
}

/* Heat map cell hover effect */
.risk-heat-map .mud-table-cell:hover[b-175g51sec9] {
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}

/* Card hover effects */
.mud-card:hover[b-175g51sec9] {
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.12);
    transition: box-shadow 0.3s ease-in-out;
}

/* Action button group */
.mud-button-group[b-175g51sec9] {
    display: flex;
    gap: 4px;
}

/* Loading state */
.loading-overlay[b-175g51sec9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .risk-heat-map[b-175g51sec9] {
        font-size: 0.875rem;
    }

        .risk-heat-map .mud-table-cell[b-175g51sec9] {
            padding: 4px;
            min-height: 40px;
        }
}
/* _content/Havto.Web/Components/Pages/Compliance/RiskRegisterCreate.razor.rz.scp.css */
/* Risk Register Create Page Styles */

/* Form container styling */
.risk-create-container[b-vgj7u3yj7s] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Alert styling */
.risk-info-alert[b-vgj7u3yj7s] {
    margin-bottom: 1.5rem;
}

/* Form field groups */
.risk-score-display[b-vgj7u3yj7s] {
    background-color: var(--mud-palette-background-grey);
    border-radius: 4px;
}

/* Category dropdown with icons */
.risk-category-item[b-vgj7u3yj7s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Risk score badge styling */
.risk-score-badge[b-vgj7u3yj7s] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 500;
}

    .risk-score-badge.very-low[b-vgj7u3yj7s] {
        background-color: var(--mud-palette-success-lighten);
        color: var(--mud-palette-success-darken);
    }

    .risk-score-badge.low[b-vgj7u3yj7s] {
        background-color: var(--mud-palette-info-lighten);
        color: var(--mud-palette-info-darken);
    }

    .risk-score-badge.medium[b-vgj7u3yj7s] {
        background-color: var(--mud-palette-warning-lighten);
        color: var(--mud-palette-warning-darken);
    }

    .risk-score-badge.high[b-vgj7u3yj7s] {
        background-color: var(--mud-palette-error-lighten);
        color: var(--mud-palette-error-darken);
    }

    .risk-score-badge.very-high[b-vgj7u3yj7s] {
        background-color: var(--mud-palette-error);
        color: white;
    }

/* Form actions */
.risk-form-actions[b-vgj7u3yj7s] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Loading state */
.saving-indicator[b-vgj7u3yj7s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .risk-create-container[b-vgj7u3yj7s] {
        padding: 1rem;
    }
}

@media (max-width: 600px) {
    .risk-form-actions[b-vgj7u3yj7s] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .risk-form-actions button[b-vgj7u3yj7s] {
            width: 100%;
        }
}

/* Control measures section */
.control-measures-section[b-vgj7u3yj7s] {
    background-color: var(--mud-palette-background-grey);
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

/* Helper text styling */
.field-helper-text[b-vgj7u3yj7s] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Required field indicator */
.required-indicator[b-vgj7u3yj7s] {
    color: var(--mud-palette-error);
    margin-left: 4px;
}

/* Form validation */
.validation-error[b-vgj7u3yj7s] {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    margin-top: 4px;
}
/* _content/Havto.Web/Components/Pages/Dashboard/About.razor.rz.scp.css */
.about-container[b-vt2pfzy6rh] {
    min-height: 100vh;
    background: var(--mud-palette-background-grey);
    padding: 20px 0;
}

.brand-logo-about[b-vt2pfzy6rh] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.brand-letter-about[b-vt2pfzy6rh] {
    color: white !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
/* _content/Havto.Web/Components/Pages/Dashboard/Admin.razor.rz.scp.css */
.admin-container[b-swshoelpax] {
    padding: 24px;
}

.admin-header[b-swshoelpax] {
    margin-bottom: 32px;
    text-align: center;
}

.admin-card[b-swshoelpax] {
    height: 100%;
    transition: transform 0.2s ease;
}

    .admin-card:hover[b-swshoelpax] {
        transform: translateY(-2px);
    }

    .admin-card .mud-card-content[b-swshoelpax] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .admin-card .mud-button[b-swshoelpax] {
        margin-top: auto;
    }
/* _content/Havto.Web/Components/Pages/Dashboard/Download.razor.rz.scp.css */
.download-container[b-um678r2961] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px 0;
}

.brand-logo-download[b-um678r2961] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.brand-letter-download[b-um678r2961] {
    color: white !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.download-title[b-um678r2961] {
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.download-card[b-um678r2961] {
    border-radius: 16px !important;
}

.system-requirements[b-um678r2961],
.support-card[b-um678r2961] {
    border-radius: 12px !important;
    height: 100%;
}

.features-list[b-um678r2961] {
    margin: 1rem 0;
}

.feature-check-item[b-um678r2961] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@@media (max-width: 768px) {
    .download-container[b-um678r2961] {
        padding: 10px 0;
    }
}
/* _content/Havto.Web/Components/Pages/Dashboard/Home.razor.rz.scp.css */
/* Intellectual Property Declaration This source code is solely authored and owned by Leonard
   Harris. No other party has contributed to its development. � 2025 Leonard Harris. All rights reserved. */

/* ====================================================================== */
/* TWO-PANEL EDIT LAYOUT - CLEAN SEPARATION */
/* ====================================================================== */

.edit-layout-container[b-pek6j2abe2] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    min-height: 600px;
}

.tiles-panel[b-pek6j2abe2] {
    min-height: 600px;
}

.grid-panel[b-pek6j2abe2] {
    min-height: 600px;
}

/* ====================================================================== */
/* TILES LIST PANEL (LEFT SIDE) */
/* ====================================================================== */

.tiles-drag-container[b-pek6j2abe2] {
    width: 100%;
}

.tiles-source-zone[b-pek6j2abe2] {
    min-height: 500px;
    padding: 16px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

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

.tile-card-wrapper[b-pek6j2abe2] {
    width: 100%;
}

.editable-tile-card[b-pek6j2abe2] {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: var(--mud-palette-surface);
}

    .editable-tile-card:hover[b-pek6j2abe2] {
        border-color: var(--mud-palette-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.2);
    }

    .editable-tile-card.selected-for-resize[b-pek6j2abe2] {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), 0.05);
        box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.2);
    }

.drag-handle[b-pek6j2abe2] {
    cursor: grab;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

    .drag-handle:hover[b-pek6j2abe2] {
        opacity: 1;
    }

    .drag-handle:active[b-pek6j2abe2] {
        cursor: grabbing;
    }

/* ====================================================================== */
/* DRAG GHOST STYLING */
/* ====================================================================== */

.drag-ghost[b-pek6j2abe2] {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.9;
    transform: rotate(2deg) scale(0.95);
}

.drag-ghost-card[b-pek6j2abe2] {
    border: 2px solid var(--mud-palette-primary);
    background: rgba(var(--mud-palette-surface-rgb), 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ====================================================================== */
/* GRID VISUALIZATION PANEL (RIGHT SIDE) */
/* ====================================================================== */

.dashboard-grid[b-pek6j2abe2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
    background: var(--mud-palette-surface);
    min-height: 400px;
}

.grid-row[b-pek6j2abe2] {
    display: flex;
    gap: 4px;
}

.grid-cell-visual[b-pek6j2abe2] {
    width: 120px;
    height: 80px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

    .grid-cell-visual.empty-cell-visual[b-pek6j2abe2] {
        background: var(--mud-palette-background-gray);
        border-style: dashed;
    }

        .grid-cell-visual.empty-cell-visual:hover[b-pek6j2abe2] {
            background: rgba(var(--mud-palette-success-rgb), 0.1);
            border-color: var(--mud-palette-success);
        }

    .grid-cell-visual.tile-origin[b-pek6j2abe2] {
        background: rgba(var(--mud-palette-primary-rgb), 0.1);
        border-color: var(--mud-palette-primary);
        border-width: 2px;
    }

    .grid-cell-visual.tile-extension[b-pek6j2abe2] {
        background: rgba(var(--mud-palette-primary-rgb), 0.05);
        border-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    }

    .grid-cell-visual.alternate[b-pek6j2abe2] {
        background: rgba(var(--mud-palette-surface-rgb), 0.5);
    }

/* ====================================================================== */
/* TILE VISUALIZATIONS IN GRID */
/* ====================================================================== */

.tile-visualization[b-pek6j2abe2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.2);
}

    .tile-visualization.selected[b-pek6j2abe2] {
        background: rgba(var(--mud-palette-primary-rgb), 0.15);
        border-color: var(--mud-palette-primary);
        box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    }

    .tile-visualization.size-2x1[b-pek6j2abe2] {
        position: absolute;
        width: calc(244px + 4px); /* 2 cells + gap */
        height: 80px;
        z-index: 5;
    }

    .tile-visualization.size-1x2[b-pek6j2abe2] {
        position: absolute;
        width: 120px;
        height: calc(164px + 4px); /* 2 cells + gap */
        z-index: 5;
    }

    .tile-visualization.size-2x2[b-pek6j2abe2] {
        position: absolute;
        width: calc(244px + 4px); /* 2 cells + gap */
        height: calc(164px + 4px); /* 2 cells + gap */
        z-index: 5;
    }

.empty-cell[b-pek6j2abe2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.occupied-cell[b-pek6j2abe2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

/* ====================================================================== */
/* HIDDEN DROP ZONES FOR MudBlazor */
/* ====================================================================== */

.hidden-drop-zone[b-pek6j2abe2] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ====================================================================== */
/* DROP ZONE FEEDBACK */
/* ====================================================================== */

.grid-cell-visual.mud-drop-zone-can-drop[b-pek6j2abe2] {
    background: rgba(var(--mud-palette-success-rgb), 0.2) !important;
    border-color: var(--mud-palette-success) !important;
    border-width: 2px !important;
    transform: scale(1.05);
}

.grid-cell-visual.mud-drop-zone-no-drop[b-pek6j2abe2] {
    background: rgba(var(--mud-palette-error-rgb), 0.2) !important;
    border-color: var(--mud-palette-error) !important;
    border-width: 2px !important;
    transform: scale(0.95);
}

/* ====================================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ====================================================================== */

@@media (max-width: 1200px) {
    .edit-layout-container[b-pek6j2abe2] {
        grid-template-columns: 350px 1fr;
        gap: 16px;
    }

    .grid-cell-visual[b-pek6j2abe2] {
        width: 100px;
        height: 70px;
    }

    .tile-visualization.size-2x1[b-pek6j2abe2] {
        width: calc(204px + 4px);
        height: 70px;
    }

    .tile-visualization.size-1x2[b-pek6j2abe2] {
        width: 100px;
        height: calc(144px + 4px);
    }

    .tile-visualization.size-2x2[b-pek6j2abe2] {
        width: calc(204px + 4px);
        height: calc(144px + 4px);
    }
}

@@media (max-width: 960px) {
    .edit-layout-container[b-pek6j2abe2] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tiles-panel[b-pek6j2abe2] {
        order: 2;
        min-height: 300px;
    }

    .grid-panel[b-pek6j2abe2] {
        order: 1;
        min-height: 400px;
    }

    .grid-cell-visual[b-pek6j2abe2] {
        width: 80px;
        height: 60px;
    }

    .tile-visualization.size-2x1[b-pek6j2abe2] {
        width: calc(164px + 4px);
        height: 60px;
    }

    .tile-visualization.size-1x2[b-pek6j2abe2] {
        width: 80px;
        height: calc(124px + 4px);
    }

    .tile-visualization.size-2x2[b-pek6j2abe2] {
        width: calc(164px + 4px);
        height: calc(124px + 4px);
    }
}

/* ====================================================================== */
/* ENHANCED GRID-BASED DRAG & DROP WITH RESIZE */
/* ====================================================================== */
/* _content/Havto.Web/Components/Pages/Dashboard/RateLimitExceeded.razor.rz.scp.css */
.rate-limit-container[b-d4nzkkemc7] {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}

.rate-limit-icon[b-d4nzkkemc7] {
    animation: pulse-b-d4nzkkemc7 2s infinite;
}

.countdown-container[b-d4nzkkemc7] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}

.countdown-display[b-d4nzkkemc7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.countdown-number[b-d4nzkkemc7] {
    font-size: 3rem;
    font-weight: bold;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
    min-width: 100px;
    text-align: center;
}

.countdown-label[b-d4nzkkemc7] {
    font-size: 1.2rem;
    color: #6b7280;
    font-weight: 500;
}

.tips-section[b-d4nzkkemc7] {
    text-align: left;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #bbf7d0;
}

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

.tip-item[b-d4nzkkemc7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.action-buttons .mud-button[b-d4nzkkemc7] {
    min-width: 120px;
}

@keyframes pulse-b-d4nzkkemc7 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}
/* _content/Havto.Web/Components/Pages/HS/CorrectiveActions.razor.rz.scp.css */
/* Corrective Actions Page Styles */

.corrective-actions-container[b-c8mtgcje38] {
    margin-top: 1rem;
}

.page-title[b-c8mtgcje38] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

    .page-title .mud-icon[b-c8mtgcje38] {
        color: var(--mud-palette-primary);
    }

.module-info-alert[b-c8mtgcje38] {
    border-left: 4px solid var(--mud-palette-warning);
    background: var(--mud-palette-warning-lighten);
}

.module-info-paper[b-c8mtgcje38] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
}

.module-info-table[b-c8mtgcje38] {
    width: 100%;
}

    .module-info-table td[b-c8mtgcje38] {
        padding: 0.5rem 0;
        border: none;
    }

        .module-info-table td:first-child[b-c8mtgcje38] {
            width: 30%;
            color: var(--mud-palette-text-secondary);
        }

.action-cards-grid[b-c8mtgcje38] {
    margin: 1.5rem 0;
}

.quick-actions-card[b-c8mtgcje38],
.action-summary-card[b-c8mtgcje38] {
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .quick-actions-card:hover[b-c8mtgcje38],
    .action-summary-card:hover[b-c8mtgcje38] {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .quick-actions-card .mud-card-content[b-c8mtgcje38] {
        padding: 1.5rem;
    }

    .action-summary-card .mud-card-content[b-c8mtgcje38] {
        padding: 1.5rem;
    }

.summary-row[b-c8mtgcje38] {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

    .summary-row:last-child[b-c8mtgcje38] {
        border-bottom: none;
    }

    .summary-row .mud-text[b-c8mtgcje38] {
        font-weight: 500;
    }

.back-button[b-c8mtgcje38] {
    margin-top: 2rem;
    align-self: flex-start;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .corrective-actions-container[b-c8mtgcje38] {
        margin-top: 0.5rem;
    }

    .action-cards-grid[b-c8mtgcje38] {
        margin: 1rem 0;
    }

    .quick-actions-card .mud-card-content[b-c8mtgcje38],
    .action-summary-card .mud-card-content[b-c8mtgcje38] {
        padding: 1rem;
    }

    .page-title[b-c8mtgcje38] {
        font-size: 1.5rem;
    }

    .module-info-table td:first-child[b-c8mtgcje38] {
        width: 40%;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .module-info-alert[b-c8mtgcje38] {
        background: rgba(var(--mud-palette-warning-rgb), 0.1);
    }

    .quick-actions-card:hover[b-c8mtgcje38],
    .action-summary-card:hover[b-c8mtgcje38] {
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
    }
}

/* Animation for chips */
.summary-row .mud-chip[b-c8mtgcje38] {
    transition: transform 0.2s ease-in-out;
}

.summary-row:hover .mud-chip[b-c8mtgcje38] {
    transform: scale(1.05);
}

/* Loading state placeholder */
.loading-skeleton[b-c8mtgcje38] {
    background: linear-gradient( 90deg, var(--mud-palette-surface) 25%, var(--mud-palette-action-hover) 50%, var(--mud-palette-surface) 75% );
    background-size: 200% 100%;
    animation: loading-shimmer-b-c8mtgcje38 1.5s infinite;
}

@keyframes loading-shimmer-b-c8mtgcje38 {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}
/* _content/Havto.Web/Components/Pages/HS/EditIncident.razor.rz.scp.css */
/* ===== SECTION HEADER STYLES ===== */
.section-header[b-xtuuoy9908] {
    background-color: var(--mud-palette-background-grey);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* ===== QUICK ACTION CARD STYLES ===== */
.quick-action-card[b-xtuuoy9908] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

    .quick-action-card:hover[b-xtuuoy9908] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .quick-action-card .mud-card-content[b-xtuuoy9908] {
        text-align: center;
        padding: 20px 16px;
    }

    .quick-action-card .mud-icon[b-xtuuoy9908] {
        font-size: 2rem;
        margin-bottom: 8px;
    }

/* ===== WORKSAFE NOTIFICATION STYLES ===== */
.worksafe-deadline-warning[b-xtuuoy9908] {
    animation: pulse-b-xtuuoy9908 2s infinite;
    border-left: 4px solid var(--mud-palette-error);
}

.pulse-animation[b-xtuuoy9908] {
    animation: pulse-b-xtuuoy9908 2s infinite;
}

@keyframes pulse-b-xtuuoy9908 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

/* ===== TIMELINE STYLES ===== */
.timeline-item[b-xtuuoy9908] {
    border-left: 2px solid var(--mud-palette-primary);
    padding-left: 16px;
    margin-left: 8px;
    position: relative;
}

    .timeline-item[b-xtuuoy9908]::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary);
    }

/* ===== BREADCRUMB STYLES ===== */
.breadcrumb-link[b-xtuuoy9908] {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

    .breadcrumb-link:hover[b-xtuuoy9908] {
        color: var(--mud-palette-primary-darken);
        text-decoration: underline;
    }

.breadcrumb-current[b-xtuuoy9908] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* ===== STATUS BADGES ===== */
.status-badge[b-xtuuoy9908] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== DATA GRID ENHANCEMENTS ===== */
.mud-table-dense .mud-table-cell[b-xtuuoy9908] {
    padding: 8px 12px;
}

.mud-table-hover tbody tr:hover[b-xtuuoy9908] {
    background-color: var(--mud-palette-action-hover);
}

/* ===== FORM ENHANCEMENTS ===== */
.mud-form .mud-input-adornment .mud-icon-button[b-xtuuoy9908] {
    color: var(--mud-palette-primary);
}

    .mud-form .mud-input-adornment .mud-icon-button:hover[b-xtuuoy9908] {
        background-color: var(--mud-palette-primary-hover);
    }

/* ===== TABS ENHANCEMENTS ===== */
.mud-tabs .mud-tab-panel[b-xtuuoy9908] {
    padding-top: 16px;
}

.mud-tabs .mud-tab .mud-badge[b-xtuuoy9908] {
    margin-left: 8px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .no-print[b-xtuuoy9908] {
        display: none !important;
    }

    .section-header[b-xtuuoy9908] {
        background-color: #f5f5f5 !important;
        print-color-adjust: exact;
    }

    .quick-action-card[b-xtuuoy9908] {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    .worksafe-deadline-warning[b-xtuuoy9908] {
        animation: none;
        background-color: #fff3cd !important;
        border-color: #ffc107 !important;
        color: #856404 !important;
    }
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .section-header[b-xtuuoy9908] {
        padding: 8px 12px;
    }

    .quick-action-card .mud-card-content[b-xtuuoy9908] {
        padding: 16px 12px;
    }

    .quick-action-card .mud-icon[b-xtuuoy9908] {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .timeline-item[b-xtuuoy9908] {
        padding-left: 12px;
        margin-left: 4px;
    }

    .breadcrumb-link[b-xtuuoy9908],
    .breadcrumb-current[b-xtuuoy9908] {
        font-size: 0.875rem;
    }

    .mud-tabs .mud-tab-panel[b-xtuuoy9908] {
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    .quick-action-card .mud-card-content[b-xtuuoy9908] {
        padding: 12px 8px;
    }

    .quick-action-card .mud-icon[b-xtuuoy9908] {
        font-size: 1.25rem;
        margin-bottom: 4px;
    }

    .section-header[b-xtuuoy9908] {
        padding: 6px 8px;
    }
}

/* ===== ACCESSIBILITY STYLES ===== */
@media (prefers-reduced-motion: reduce) {
    .worksafe-deadline-warning[b-xtuuoy9908],
    .pulse-animation[b-xtuuoy9908] {
        animation: none;
    }

    .breadcrumb-link[b-xtuuoy9908] {
        transition: none;
    }

    .quick-action-card[b-xtuuoy9908] {
        transition: none;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .section-header[b-xtuuoy9908] {
        border: 2px solid var(--mud-palette-text-primary);
    }

    .timeline-item[b-xtuuoy9908] {
        border-left-width: 3px;
    }

        .timeline-item[b-xtuuoy9908]::before {
            border: 2px solid var(--mud-palette-background);
        }

    .quick-action-card[b-xtuuoy9908] {
        border: 2px solid var(--mud-palette-text-primary);
    }
}
/* _content/Havto.Web/Components/Pages/HS/IncidentReportCreate.razor.rz.scp.css */
/* Create Incident Report Page Styles */

.breadcrumb-link[b-xkmc7b19qe] {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

    .breadcrumb-link:hover[b-xkmc7b19qe] {
        text-decoration: underline;
    }

.breadcrumb-current[b-xkmc7b19qe] {
    color: var(--mud-palette-text-secondary);
}

/* Section headers */
.incident-section-header[b-xkmc7b19qe] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .incident-section-header .mud-icon[b-xkmc7b19qe] {
        margin-right: 0.5rem;
    }

/* File upload drag and drop styles */
.file-upload-area[b-xkmc7b19qe] {
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

    .file-upload-area:hover[b-xkmc7b19qe] {
        border-color: var(--mud-palette-primary);
    }

    .file-upload-area.drag-over[b-xkmc7b19qe] {
        border-color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-lighten);
    }

/* File card styles */
.file-card[b-xkmc7b19qe] {
    transition: box-shadow 0.3s ease;
}

    .file-card:hover[b-xkmc7b19qe] {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Action buttons */
.action-buttons[b-xkmc7b19qe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

/* WorkSafe notification alert styles */
.worksafe-notification-alert[b-xkmc7b19qe] {
    border-left: 4px solid var(--mud-palette-error);
}

/* Injury details section */
.injury-details-section[b-xkmc7b19qe] {
    background-color: var(--mud-palette-background-grey);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

/* HSWA compliance section */
.hswa-compliance-section[b-xkmc7b19qe] {
    background-color: var(--mud-palette-warning-lighten);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

/* Location capture button */
.location-capture-button[b-xkmc7b19qe] {
    margin-bottom: 1rem;
}

/* Progress indicators */
.progress-indicator[b-xkmc7b19qe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .action-buttons[b-xkmc7b19qe] {
        flex-direction: column;
        align-items: stretch;
    }

        .action-buttons .mud-button[b-xkmc7b19qe] {
            width: 100%;
            margin: 0.25rem 0;
        }
}

/* Expansion panel customization */
.mud-expand-panel .mud-expand-panel-header[b-xkmc7b19qe] {
    background-color: var(--mud-palette-background-grey);
}

    .mud-expand-panel .mud-expand-panel-header:hover[b-xkmc7b19qe] {
        background-color: var(--mud-palette-action-hover);
    }

/* Form section spacing */
.form-section[b-xkmc7b19qe] {
    margin: 2rem 0;
}

    .form-section:first-child[b-xkmc7b19qe] {
        margin-top: 0;
    }

    .form-section:last-child[b-xkmc7b19qe] {
        margin-bottom: 0;
    }

/* Alert customization */
.mud-alert.dense[b-xkmc7b19qe] {
    padding: 0.5rem 1rem;
}

/* Caption text styling */
.caption-text[b-xkmc7b19qe] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

/* Icon alignment in checkboxes and text */
.icon-text-align[b-xkmc7b19qe] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Notification deadline emphasis */
.notification-deadline[b-xkmc7b19qe] {
    font-weight: 600;
    color: var(--mud-palette-error);
}

/* Success indicators */
.success-indicator[b-xkmc7b19qe] {
    color: var(--mud-palette-success);
    font-weight: 500;
}

/* Loading states */
.loading-overlay[b-xkmc7b19qe] {
    position: relative;
}

    .loading-overlay[b-xkmc7b19qe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 1;
    }

/* File size and type indicators */
.file-metadata[b-xkmc7b19qe] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

/* Equipment category specific styling */
.equipment-category-section[b-xkmc7b19qe] {
    border-left: 3px solid var(--mud-palette-info);
    padding-left: 1rem;
    margin: 1rem 0;
}

/* Contributing factors grid */
.contributing-factors-grid[b-xkmc7b19qe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Management review section */
.management-review-section[b-xkmc7b19qe] {
    background-color: var(--mud-palette-warning-lighten);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

/* Verification section */
.verification-section[b-xkmc7b19qe] {
    background-color: var(--mud-palette-success-lighten);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}
/* _content/Havto.Web/Components/Pages/HS/Incidents.razor.rz.scp.css */
/* Header button styling */
.mud-button.text-nowrap[b-wb5pmcvush] {
    white-space: nowrap;
    height: auto;
    min-height: 36px;
    padding: 8px 16px;
    line-height: 1.4;
}

    .mud-button.text-nowrap .mud-button-label[b-wb5pmcvush] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Pagination Styling */
.mud-pagination[b-wb5pmcvush] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.mud-pagination-item[b-wb5pmcvush] {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .mud-pagination-item:hover[b-wb5pmcvush] {
        background-color: var(--mud-palette-action-hover);
    }

.mud-pagination-item-selected[b-wb5pmcvush] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Table enhancements */
.mud-table[b-wb5pmcvush] {
    border-radius: 8px;
    overflow: hidden;
}

.mud-table-head .mud-table-cell[b-wb5pmcvush] {
    font-weight: 600;
    background-color: var(--mud-palette-table-header);
}

.mud-table-body .mud-table-row:hover[b-wb5pmcvush] {
    background-color: var(--mud-palette-action-hover-opacity);
}

/* Responsive improvements */
@media (max-width: 960px) {
    .mud-pagination[b-wb5pmcvush] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .mud-pagination-item[b-wb5pmcvush] {
        min-width: 36px;
        height: 36px;
    }

    /* Stack buttons vertically on mobile for better fit */
    .mud-item .d-flex.justify-end[b-wb5pmcvush] {
        flex-direction: column;
        gap: 8px;
    }

    .mud-button.text-nowrap[b-wb5pmcvush] {
        width: 100%;
        min-height: 40px;
    }
}
/* _content/Havto.Web/Components/Pages/HS/InvestigateIncident.razor.rz.scp.css */
/* ===== INVESTIGATION STEP STYLES ===== */
.investigation-step[b-fdhdwhwjw4] {
    padding: 24px;
    min-height: 400px;
}

/* ===== BREADCRUMB STYLES ===== */
.breadcrumb-link[b-fdhdwhwjw4] {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

    .breadcrumb-link:hover[b-fdhdwhwjw4] {
        color: var(--mud-palette-primary-darken);
        text-decoration: underline;
    }

.breadcrumb-current[b-fdhdwhwjw4] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* ===== STEPPER CUSTOMIZATION ===== */
.investigation-stepper[b-fdhdwhwjw4] {
    background: var(--mud-palette-background);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.investigation-stepper .mud-stepper-content[b-fdhdwhwjw4] {
    min-height: 400px;
}

.investigation-stepper .mud-step-completed .mud-step-icon[b-fdhdwhwjw4] {
    background-color: var(--mud-palette-success) !important;
}

.investigation-stepper .mud-step-active .mud-step-icon[b-fdhdwhwjw4] {
    background-color: var(--mud-palette-primary) !important;
}

/* Hide the stepper header navigation - we're using custom footer navigation */
[b-fdhdwhwjw4] .investigation-stepper .mud-stepper-nav {
    display: none !important;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .investigation-step[b-fdhdwhwjw4] {
        padding: 16px;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .investigation-step[b-fdhdwhwjw4] {
        padding: 12px;
        min-height: 250px;
    }

    .breadcrumb-link[b-fdhdwhwjw4],
    .breadcrumb-current[b-fdhdwhwjw4] {
        font-size: 0.875rem;
    }
}

/* ===== ACCESSIBILITY STYLES ===== */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-link[b-fdhdwhwjw4] {
        transition: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .investigation-step[b-fdhdwhwjw4] {
        padding: 12px;
        min-height: auto;
    }
}
/* _content/Havto.Web/Components/Pages/HS/Training.razor.rz.scp.css */
/* Intellectual Property Declaration This source code is solely authored and owned by Leonard
   Harris. No other party has contributed to its development. � 2025 Leonard Harris. All rights reserved. */

/* ============================================================================
   Training & Induction Register - Scoped Styles
   ============================================================================ */

/* Expiry date styling */
.expiry-expired[b-kazqcylkgk] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.expiry-warning[b-kazqcylkgk] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Breadcrumb Styling */
.breadcrumb-link[b-kazqcylkgk] {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

    .breadcrumb-link:hover[b-kazqcylkgk] {
        color: var(--mud-palette-primary-darken);
        text-decoration: underline;
    }

.breadcrumb-current[b-kazqcylkgk] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Breadcrumb accessibility */
.breadcrumb-link:focus[b-kazqcylkgk] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* MudBlazor component overrides */
[b-kazqcylkgk] .mud-breadcrumbs {
    padding: 0.5rem 0;
}

[b-kazqcylkgk] .mud-breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .breadcrumb-link[b-kazqcylkgk] {
        color: var(--mud-palette-primary-lighten);
    }

        .breadcrumb-link:hover[b-kazqcylkgk] {
            color: var(--mud-palette-primary);
        }

    .breadcrumb-current[b-kazqcylkgk] {
        color: var(--mud-palette-text-primary);
    }
}

/* Training card hover effects */
[b-kazqcylkgk] .mud-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

/* Table row hover effect */
[b-kazqcylkgk] .mud-table-row:hover {
    background-color: rgba(var(--mud-palette-action-default-rgb), 0.04);
}

/* Loading state styling */
.loading-overlay[b-kazqcylkgk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

@media (prefers-color-scheme: dark) {
    .loading-overlay[b-kazqcylkgk] {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* Status chip custom styling */
[b-kazqcylkgk] .mud-chip.status-chip {
    font-weight: 500;
    border-radius: 12px;
}

/* Certification icon styling */
.certification-icon[b-kazqcylkgk] {
    vertical-align: middle;
}

/* Action buttons group */
.action-buttons[b-kazqcylkgk] {
    display: flex;
    gap: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    [b-kazqcylkgk] .mud-table-container {
        overflow-x: auto;
    }
}

/* Filter section spacing */
.filter-section[b-kazqcylkgk] {
    margin-bottom: 1rem;
}

/* Stats card animation */
@keyframes fadeInUp-b-kazqcylkgk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-kazqcylkgk] .stats-card {
    animation: fadeInUp-b-kazqcylkgk 0.3s ease-out;
}

/* Induction progress styling */
.induction-progress[b-kazqcylkgk] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Empty state styling */
.empty-state[b-kazqcylkgk] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-secondary);
}

.empty-state-icon[b-kazqcylkgk] {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* Alert styling */
[b-kazqcylkgk] .mud-alert.training-alert {
    border-left: 4px solid;
    border-radius: 4px;
}

/* Tab panel padding */
[b-kazqcylkgk] .mud-tabs-panels {
    padding-top: 1rem;
}

/* Avatar styling in table */
[b-kazqcylkgk] .mud-avatar.personnel-avatar {
    background-color: var(--mud-palette-primary);
    color: white;
    font-weight: 600;
}

/* Certificate number monospace styling */
.certificate-number[b-kazqcylkgk] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: rgba(var(--mud-palette-action-default-rgb), 0.08);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
/* _content/Havto.Web/Components/Pages/Organization/CreateOrganization.razor.rz.scp.css */
/* Create Organization Styles */
.create-org-page[b-uddoaufkrm] {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 0;
    background: #f9f8f6;
    min-height: 100vh;
}

.org-title[b-uddoaufkrm] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #232a36;
    margin-bottom: 2rem;
    text-align: left;
}

.org-form[b-uddoaufkrm] {
    background: #fff;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-group[b-uddoaufkrm] {
    margin-bottom: 1.5rem;
}

    .form-group label[b-uddoaufkrm] {
        font-weight: 600;
        color: #232a36;
        margin-bottom: 0.5rem;
        display: block;
    }

.form-control[b-uddoaufkrm] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.optional[b-uddoaufkrm] {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.95rem;
}

.image-upload-row[b-uddoaufkrm] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.image-upload-box[b-uddoaufkrm] {
    width: 150px;
    height: 120px;
    background: #e9ecef;
    border: 2px solid #232a36;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-image-preview[b-uddoaufkrm] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.25rem;
}

.image-upload-actions[b-uddoaufkrm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-upload[b-uddoaufkrm] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}

    .btn-upload:hover[b-uddoaufkrm] {
        background: #45A049;
    }

.visibility-options[b-uddoaufkrm] {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.radio-inline[b-uddoaufkrm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #232a36;
}

.btn-create-org[b-uddoaufkrm] {
    background: #27d345;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1.5rem;
    transition: background 0.2s;
}

    .btn-create-org:disabled[b-uddoaufkrm] {
        background: #b8e6c1;
        cursor: not-allowed;
    }

    .btn-create-org:hover:not(:disabled)[b-uddoaufkrm] {
        background: #1bbf3a;
    }

.location-suggestions[b-uddoaufkrm] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
}

    .location-suggestions li[b-uddoaufkrm] {
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: 1rem;
        color: #232a36;
    }

        .location-suggestions li:hover[b-uddoaufkrm] {
            background: #f9f8f6;
        }
/* _content/Havto.Web/Components/Pages/Organization/OrganizationDetails.razor.rz.scp.css */
.organization-layout-container[b-r5twyb5giw] {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
    align-items: flex-start;
}

.main-content-area[b-r5twyb5giw] {
    flex: 1;
    min-width: 0; /* Allow flex shrinking */
}

.sidebar-area[b-r5twyb5giw] {
    width: 400px;
    flex-shrink: 0;
}

.sidebar-widget[b-r5twyb5giw] {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.organization-header[b-r5twyb5giw] {
    margin-bottom: 3rem;
}

.organization-header-content[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.organization-title-section[b-r5twyb5giw] {
    flex-grow: 1;
}

.organization-title[b-r5twyb5giw] {
    font-size: 2.5rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 0.5rem 0;
}

.organization-subtitle[b-r5twyb5giw] {
    color: #6c757d;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.user-role-indicator[b-r5twyb5giw] {
    color: #6c757d;
    font-size: 1rem;
    margin: 0;
}

.header-actions[b-r5twyb5giw] {
    flex-shrink: 0;
}

.btn-create-roster[b-r5twyb5giw] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn-create-roster:hover[b-r5twyb5giw] {
        background-color: #218838;
    }

.btn-leave-organization[b-r5twyb5giw] {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn-leave-organization:hover[b-r5twyb5giw] {
        background-color: #c82333;
    }

.admin-tabs[b-r5twyb5giw] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #dee2e6;
}

.tab-button[b-r5twyb5giw] {
    background: none;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .tab-button:hover[b-r5twyb5giw] {
        color: #495057;
        background-color: #f8f9fa;
    }

    .tab-button.active[b-r5twyb5giw] {
        color: #495057;
        border-bottom-color: #007bff;
        font-weight: 600;
    }

    .tab-button .bi[b-r5twyb5giw] {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

/* View Controls */
.view-controls[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.view-toggle[b-r5twyb5giw] {
    display: flex;
    gap: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

.view-btn[b-r5twyb5giw] {
    background: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .view-btn:hover[b-r5twyb5giw] {
        background-color: #f8f9fa;
    }

    .view-btn.active[b-r5twyb5giw] {
        background-color: #007bff;
        color: white;
    }

.filter-controls[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sort-controls[b-r5twyb5giw], .time-filter-controls[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .sort-controls label[b-r5twyb5giw], .time-filter-controls label[b-r5twyb5giw] {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
        white-space: nowrap;
    }

.sort-select[b-r5twyb5giw], .time-filter-select[b-r5twyb5giw] {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: white;
    color: #495057;
    font-size: 0.875rem;
    min-width: 140px;
}

.time-filter-select[b-r5twyb5giw] {
    min-width: 120px;
}

/* Legend Controls */
.legend-controls[b-r5twyb5giw] {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-legend[b-r5twyb5giw] {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

    .btn-legend:hover[b-r5twyb5giw] {
        background-color: #f8f9fa;
        border-color: #007bff;
        color: #007bff;
    }

.status-legend[b-r5twyb5giw] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 1rem;
    min-width: 280px;
    z-index: 1000;
}

.legend-header[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

    .legend-header h4[b-r5twyb5giw] {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #495057;
    }

.btn-close-legend[b-r5twyb5giw] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    line-height: 1;
}

    .btn-close-legend:hover[b-r5twyb5giw] {
        background-color: #f8f9fa;
        color: #495057;
    }

.legend-items[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.legend-item[b-r5twyb5giw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.legend-indicator[b-r5twyb5giw] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.legend-text[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

    .legend-text strong[b-r5twyb5giw] {
        font-size: 0.8rem;
        color: #495057;
        font-weight: 600;
    }

    .legend-text span[b-r5twyb5giw] {
        font-size: 0.75rem;
        color: #6c757d;
    }

.legend-footer[b-r5twyb5giw] {
    padding-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

    .legend-footer small[b-r5twyb5giw] {
        color: #6c757d;
        font-size: 0.7rem;
    }

/* Timeline View Styles */
.rosters-timeline-view[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 6rem;
    position: relative;
}

.timeline-item[b-r5twyb5giw] {
    position: relative;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.timeline-date-indicator[b-r5twyb5giw] {
    position: absolute;
    left: -6rem;
    top: 1rem;
    width: 4rem;
    display: flex;
    justify-content: center;
}

.date-marker[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 3rem;
    position: relative;
    z-index: 2;
}

.date-day[b-r5twyb5giw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #495057;
    line-height: 1;
}

.date-month[b-r5twyb5giw] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: 0.125rem;
}

.date-year[b-r5twyb5giw] {
    font-size: 0.625rem;
    font-weight: 500;
    color: #adb5bd;
    line-height: 1;
    margin-top: 0.125rem;
}

/* Special styling for urgent rosters */
.timeline-item.roster-urgent .date-marker[b-r5twyb5giw] {
    border-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5, #ffffff);
}

.timeline-item.roster-urgent .date-day[b-r5twyb5giw] {
    color: #dc3545;
}

/* Special styling for upcoming rosters */
.timeline-item.roster-upcoming .date-marker[b-r5twyb5giw] {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fffbf0, #ffffff);
}

.timeline-item.roster-upcoming .date-day[b-r5twyb5giw] {
    color: #ffc107;
}

.timeline-item:not(:last-child) .timeline-item-connector[b-r5twyb5giw] {
    position: absolute;
    left: -3.5rem;
    top: 4rem;
    bottom: -2rem;
    width: 2px;
    background-color: #dee2e6;
    z-index: 1;
}

.timeline-item-connector[b-r5twyb5giw]::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #007bff;
    z-index: 3;
}

.timeline-item-content[b-r5twyb5giw] {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    flex: 1;
    min-width: 0;
}

.roster-card-compact[b-r5twyb5giw] {
    padding: 1.5rem;
}

.roster-card-header-compact[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.roster-urgency-compact[b-r5twyb5giw] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.roster-countdown-compact[b-r5twyb5giw] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.roster-main-info[b-r5twyb5giw] {
    margin-bottom: 1rem;
}

.roster-name-compact[b-r5twyb5giw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 0.5rem 0;
}

.roster-description-compact[b-r5twyb5giw] {
    color: #6c757d;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.roster-details-compact[b-r5twyb5giw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.roster-detail-item[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.roster-progress-compact[b-r5twyb5giw] {
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.progress-info-compact[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar-compact[b-r5twyb5giw] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill-compact[b-r5twyb5giw] {
    height: 100%;
    background-color: #28a745;
    transition: width 0.3s ease;
    border-radius: 0.25rem;
}

.progress-label[b-r5twyb5giw] {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 500;
    white-space: nowrap;
}

.rosters-section[b-r5twyb5giw] {
    margin-bottom: 3rem;
}

.rosters-grid[b-r5twyb5giw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.roster-card[b-r5twyb5giw] {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.2s ease;
}

    .roster-card:hover[b-r5twyb5giw] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

.roster-card-header[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.roster-status-group[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.roster-countdown[b-r5twyb5giw] {
    font-size: 0.875rem;
    color: #6c757d;
}

.roster-card-timeline[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.timeline-indicator[b-r5twyb5giw] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #28a745;
    margin-right: 0.5rem;
}

.timeline-active[b-r5twyb5giw] {
    background-color: #28a745;
}

.timeline-draft[b-r5twyb5giw] {
    background-color: #ffc107;
}

.timeline-completed[b-r5twyb5giw] {
    background-color: #6c757d;
}

.timeline-default[b-r5twyb5giw] {
    background-color: #007bff;
}

.progress-with-timeline[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-info[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-value[b-r5twyb5giw] {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.progress-bar-container[b-r5twyb5giw] {
    position: relative;
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-bar[b-r5twyb5giw] {
    height: 100%;
    background-color: #28a745;
    transition: width 0.3s ease;
}

.progress-milestone[b-r5twyb5giw] {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-color: #007bff;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.milestone-text[b-r5twyb5giw] {
    font-size: 0.65rem;
}

.roster-urgency[b-r5twyb5giw] {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    color: white;
    margin-left: auto;
}

.urgency-high[b-r5twyb5giw] {
    background-color: #dc3545;
}

.urgency-medium[b-r5twyb5giw] {
    background-color: #ffc107;
}

.urgency-low[b-r5twyb5giw] {
    background-color: #28a745;
}

.roster-nav-buttons[b-r5twyb5giw] {
    display: flex;
    gap: 0.25rem;
}

.roster-nav-btn[b-r5twyb5giw] {
    background: none;
    border: 1px solid #dee2e6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: #6c757d;
    cursor: pointer;
}

    .roster-nav-btn:hover[b-r5twyb5giw] {
        background-color: #f8f9fa;
        color: #495057;
    }

.badge[b-r5twyb5giw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-flexi[b-r5twyb5giw] {
    background-color: #28a745;
    color: white;
}

.badge-fixed[b-r5twyb5giw] {
    background-color: #6c757d;
    color: white;
}

.badge-draft[b-r5twyb5giw] {
    background-color: #ffc107;
    color: #212529;
}

.badge-cancelled[b-r5twyb5giw] {
    background-color: #dc3545;
    color: white;
}

.roster-card-name[b-r5twyb5giw] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #495057;
    margin: 0.5rem 0;
}

.roster-card-description[b-r5twyb5giw] {
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.roster-card-details[b-r5twyb5giw] {
    margin-bottom: 1rem;
}

.roster-card-date[b-r5twyb5giw], .roster-card-location[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.roster-stats[b-r5twyb5giw] {
    margin-bottom: 1rem;
}

.stat-available[b-r5twyb5giw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: #6c757d;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.roster-progress[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.progress-bar[b-r5twyb5giw] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill[b-r5twyb5giw] {
    height: 100%;
    background-color: #28a745;
    transition: width 0.3s ease;
}

.progress-text[b-r5twyb5giw] {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.fixed-progress[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar.fixed-bar[b-r5twyb5giw] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-fill.fixed-fill[b-r5twyb5giw] {
    height: 100%;
    background-color: #232a36;
    transition: width 0.3s ease;
}

.progress-text.fixed-text[b-r5twyb5giw] {
    font-weight: 600;
    color: #232a36;
    font-size: 0.9rem;
}

/* Empty State Styles */
.empty-state-container[b-r5twyb5giw] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 2rem 0;
}

.empty-state-content[b-r5twyb5giw] {
    text-align: center;
    max-width: 500px;
    padding: 3rem 2rem;
}

.empty-state-icon[b-r5twyb5giw] {
    margin-bottom: 2rem;
}

    .empty-state-icon .bi[b-r5twyb5giw] {
        font-size: 4rem;
        color: #6c757d;
        opacity: 0.6;
    }

.empty-state-title[b-r5twyb5giw] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.empty-state-description[b-r5twyb5giw] {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.empty-state-actions[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.btn-create-roster-primary[b-r5twyb5giw] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    text-decoration: none;
}

    .btn-create-roster-primary:hover[b-r5twyb5giw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        background: linear-gradient(135deg, #218838, #1ea97c);
    }

    .btn-create-roster-primary .bi[b-r5twyb5giw] {
        font-size: 1.25rem;
    }

.btn-secondary[b-r5twyb5giw] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .btn-secondary:hover[b-r5twyb5giw] {
        background: #5a6268;
        transform: translateY(-1px);
    }

/* User-specific view controls */
.user-roster-info[b-r5twyb5giw] {
    flex: 1;
}

    .user-roster-info h3[b-r5twyb5giw] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #495057;
        margin: 0 0 0.5rem 0;
    }

    .user-roster-info p[b-r5twyb5giw] {
        color: #6c757d;
        margin: 0;
        font-size: 1rem;
    }

.empty-state-suggestions[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    margin-top: 1rem;
}

.suggestion-item[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .suggestion-item .bi[b-r5twyb5giw] {
        color: #007bff;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .suggestion-item span:last-child[b-r5twyb5giw] {
        flex: 1;
    }

.notifications-header[b-r5twyb5giw], .quick-stats-header[b-r5twyb5giw], .recent-activity-header[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.notifications-title[b-r5twyb5giw], .quick-stats-title[b-r5twyb5giw], .recent-activity-title[b-r5twyb5giw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.btn-view-all[b-r5twyb5giw] {
    background: none;
    border: none;
    color: #007bff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
}

    .btn-view-all:hover[b-r5twyb5giw] {
        text-decoration: underline;
    }

.notifications-list[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notification-item[b-r5twyb5giw] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

.notification-avatar[b-r5twyb5giw] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-r5twyb5giw] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.notification-badge[b-r5twyb5giw] {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.notification-content[b-r5twyb5giw] {
    flex-grow: 1;
    min-width: 0;
}

.notification-text[b-r5twyb5giw] {
    color: #495057;
    line-height: 1.4;
    font-size: 0.875rem;
}

.notification-actions[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-unassign[b-r5twyb5giw], .btn-reallocate[b-r5twyb5giw] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-unassign:hover[b-r5twyb5giw] {
        background-color: #f8f9fa;
        border-color: #6c757d;
    }

.btn-reallocate[b-r5twyb5giw] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-reallocate:hover[b-r5twyb5giw] {
        background-color: #c82333;
        border-color: #bd2130;
    }

/* Quick Stats Styles */
.quick-stats-grid[b-r5twyb5giw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-card[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.stat-icon[b-r5twyb5giw] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.users-icon[b-r5twyb5giw] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.rosters-icon[b-r5twyb5giw] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
}

.drafts-icon[b-r5twyb5giw] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
}

.activity-icon[b-r5twyb5giw] {
    background: linear-gradient(135deg, #17a2b8, #117a8b);
}

.stat-content[b-r5twyb5giw] {
    flex-grow: 1;
}

.stat-number[b-r5twyb5giw] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #495057;
    line-height: 1;
}

.stat-label[b-r5twyb5giw] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Recent Activity Styles */
.activity-list[b-r5twyb5giw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item[b-r5twyb5giw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

    .activity-item .activity-icon[b-r5twyb5giw] {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

.activity-content[b-r5twyb5giw] {
    flex-grow: 1;
}

.activity-title[b-r5twyb5giw] {
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
}

.activity-time[b-r5twyb5giw] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.members-section[b-r5twyb5giw], .settings-section[b-r5twyb5giw], .drafts-section[b-r5twyb5giw], .reports-section[b-r5twyb5giw] {
    background: white;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.members-header[b-r5twyb5giw], .settings-header[b-r5twyb5giw], .reports-header[b-r5twyb5giw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.btn-add-member[b-r5twyb5giw] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

    .btn-add-member:hover[b-r5twyb5giw] {
        background-color: #218838;
    }

.btn-continue-setup[b-r5twyb5giw] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-continue-setup:hover[b-r5twyb5giw] {
        background-color: #0056b3;
    }

.draft-actions[b-r5twyb5giw] {
    margin-top: 1rem;
}

.btn-delete-draft[b-r5twyb5giw] {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
}

    .btn-delete-draft:hover[b-r5twyb5giw] {
        background-color: #c82333;
    }

/* Role Information Widget */
.role-info-header[b-r5twyb5giw] {
    margin-bottom: 1.5rem;
}

.role-info-title[b-r5twyb5giw] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.role-badges[b-r5twyb5giw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.role-badge[b-r5twyb5giw] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.role-admin[b-r5twyb5giw] {
    background-color: #dc3545;
    color: white;
}

.role-manager[b-r5twyb5giw] {
    background-color: #007bff;
    color: white;
}

.role-staff[b-r5twyb5giw] {
    background-color: #28a745;
    color: white;
}

.role-trainer[b-r5twyb5giw] {
    background-color: #17a2b8;
    color: white;
}

.role-volunteer[b-r5twyb5giw] {
    background-color: #6f42c1;
    color: white;
}

.role-permissions[b-r5twyb5giw] {
    margin-top: 1rem;
}

    .role-permissions h3[b-r5twyb5giw] {
        font-size: 1rem;
        font-weight: 600;
        color: #495057;
        margin: 0 0 0.75rem 0;
    }

    .role-permissions ul[b-r5twyb5giw] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .role-permissions li[b-r5twyb5giw] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        font-size: 0.875rem;
    }

.text-success[b-r5twyb5giw] {
    color: #28a745 !important;
}

.text-info[b-r5twyb5giw] {
    color: #17a2b8 !important;
}

@@media (max-width: 1200px) {
    .organization-layout-container[b-r5twyb5giw] {
        flex-direction: column;
    }

    .sidebar-area[b-r5twyb5giw] {
        width: 100%;
        display: flex;
        gap: 2rem;
    }

    .sidebar-widget[b-r5twyb5giw] {
        flex: 1;
        margin-bottom: 0;
    }

    .quick-stats-grid[b-r5twyb5giw] {
        grid-template-columns: repeat(4, 1fr);
    }

    .rosters-timeline-view[b-r5twyb5giw] {
        padding-left: 4rem;
    }

    .timeline-date-indicator[b-r5twyb5giw] {
        left: -4rem;
    }

    .timeline-item:not(:last-child) .timeline-item-connector[b-r5twyb5giw] {
        left: -2.5rem;
    }

    .view-controls[b-r5twyb5giw] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .filter-controls[b-r5twyb5giw] {
        flex-direction: column;
        gap: 1rem;
    }

    .sort-controls[b-r5twyb5giw], .time-filter-controls[b-r5twyb5giw] {
        justify-content: space-between;
    }

    .sort-select[b-r5twyb5giw], .time-filter-select[b-r5twyb5giw] {
        flex: 1;
        min-width: 0;
    }

    .empty-state-content[b-r5twyb5giw] {
        padding: 2rem 1rem;
    }
}

@@media (max-width: 768px) {
    .organization-layout-container[b-r5twyb5giw] {
        padding: 1rem;
    }

    .sidebar-area[b-r5twyb5giw] {
        flex-direction: column;
    }

    .sidebar-widget[b-r5twyb5giw] {
        margin-bottom: 1rem;
    }

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

    .rosters-grid[b-r5twyb5giw] {
        grid-template-columns: 1fr;
    }

    .organization-header-content[b-r5twyb5giw] {
        flex-direction: column;
        gap: 1rem;
    }

    .admin-tabs[b-r5twyb5giw] {
        flex-direction: column;
    }

    .tab-button[b-r5twyb5giw] {
        text-align: left;
        border-bottom: 1px solid #dee2e6;
        border-right: none;
        justify-content: flex-start;
        padding: 1rem 1.5rem;
    }

        .tab-button.active[b-r5twyb5giw] {
            border-bottom-color: #dee2e6;
            border-left: 3px solid #007bff;
        }

    .notification-item[b-r5twyb5giw] {
        flex-direction: column;
        text-align: center;
    }

    .notification-actions[b-r5twyb5giw] {
        flex-direction: row;
        justify-content: center;
    }

    .rosters-timeline-view[b-r5twyb5giw] {
        padding-left: 0;
    }

    .empty-state-container[b-r5twyb5giw] {
        min-height: 300px;
        margin: 1rem 0;
    }

    .empty-state-content[b-r5twyb5giw] {
        padding: 1.5rem 1rem;
    }

    .empty-state-icon .bi[b-r5twyb5giw] {
        font-size: 3rem;
    }

    .empty-state-title[b-r5twyb5giw] {
        font-size: 1.5rem;
    }

    .empty-state-description[b-r5twyb5giw] {
        font-size: 1rem;
    }

    .btn-create-roster-primary[b-r5twyb5giw] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .empty-state-suggestions[b-r5twyb5giw] {
        padding: 1rem;
    }

    .suggestion-item[b-r5twyb5giw] {
        font-size: 0.875rem;
    }
}
/* _content/Havto.Web/Components/Pages/Organization/SearchOrganizations.razor.rz.scp.css */
/* Search Organizations Styles */
.search-org-page[b-vp72cguoob] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f9f8f6;
    min-height: 100vh;
}

.search-title[b-vp72cguoob] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #232a36;
    margin-bottom: 2rem;
}

.search-bar-row[b-vp72cguoob] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.search-input-group[b-vp72cguoob] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 260px;
}

.form-control[b-vp72cguoob] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
}

.btn-search[b-vp72cguoob] {
    background: #27d345;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    margin-left: 1rem;
}

    .btn-search:hover[b-vp72cguoob] {
        background: #1bbf3a;
    }

.filters-dropdown[b-vp72cguoob] {
    margin-left: auto;
}

.btn-filters[b-vp72cguoob] {
    background: #232a36;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-filters:hover[b-vp72cguoob] {
        background: #232a36cc;
    }

.org-results-list[b-vp72cguoob] {
    margin-top: 2rem;
}

.org-result-card[b-vp72cguoob] {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.org-result-details[b-vp72cguoob] {
    flex-grow: 1;
}

.org-result-name[b-vp72cguoob] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #232a36;
    margin-bottom: 0.5rem;
}

.org-result-desc[b-vp72cguoob] {
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.org-result-location[b-vp72cguoob] {
    color: #495057;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.org-result-actions[b-vp72cguoob] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-request-join[b-vp72cguoob] {
    background: #27d345;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

    .btn-request-join:hover[b-vp72cguoob] {
        background: #1bbf3a;
    }

.btn-leave-org[b-vp72cguoob] {
    background: #ff4d4f;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

    .btn-leave-org:hover[b-vp72cguoob] {
        background: #d9363e;
    }

.location-suggestions[b-vp72cguoob] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
}

    .location-suggestions li[b-vp72cguoob] {
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: 1rem;
        color: #232a36;
    }

        .location-suggestions li:hover[b-vp72cguoob] {
            background: #f9f8f6;
        }
/* _content/Havto.Web/Components/Pages/Roster/CreateRoster.razor.rz.scp.css */
/* Layout Container - Full width like OrganizationDetails */
.create-roster-layout-container[b-xvp32dzj9t] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
    width: 100%;
    max-width: none; /* Remove any max-width constraints */
    padding-bottom: 200px; /* Add space for bottom actions */
}

.header-content[b-xvp32dzj9t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.organization-name[b-xvp32dzj9t] {
    font-size: 2.5rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.page-title[b-xvp32dzj9t] {
    font-size: 1.8rem;
    font-weight: 500;
    color: #6c757d;
    margin: 0.5rem 0 0 0;
}

/* Remove header actions styles as they're no longer needed */

/* Main Content Area - Full width */
.create-roster-main-content[b-xvp32dzj9t] {
    background: white;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
}

.form-section[b-xvp32dzj9t] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

    .form-section:last-child[b-xvp32dzj9t] {
        border-bottom: none;
        margin-bottom: 0;
    }

.section-title[b-xvp32dzj9t] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.template-dropdown[b-xvp32dzj9t] {
    position: relative;
    display: inline-block;
}

.btn-template-dropdown[b-xvp32dzj9t] {
    background-color: #495057;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    min-width: 200px;
    justify-content: space-between;
}

    .btn-template-dropdown:hover[b-xvp32dzj9t] {
        background-color: #383d41;
    }

.template-dropdown-menu[b-xvp32dzj9t] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 0.25rem;
}

.template-category[b-xvp32dzj9t] {
    margin-bottom: 1rem;
}

.template-category-header[b-xvp32dzj9t] {
    font-weight: 600;
    color: #495057;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem 0.375rem 0 0;
    border-bottom: 1px solid #dee2e6;
}

.template-option[b-xvp32dzj9t] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .template-option:hover[b-xvp32dzj9t] {
        background-color: #f8f9fa;
    }

    .template-option:last-child[b-xvp32dzj9t] {
        border-bottom: none;
    }

.user-template[b-xvp32dzj9t] {
    position: relative;
    padding-right: 2.5rem;
}

.template-name[b-xvp32dzj9t] {
    font-weight: 500;
    color: #495057;
}

.template-meta[b-xvp32dzj9t] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.125rem;
}

.template-delete[b-xvp32dzj9t] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .template-delete:hover[b-xvp32dzj9t] {
        color: #c82333;
    }

.form-row[b-xvp32dzj9t] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

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

    .form-group label[b-xvp32dzj9t] {
        display: block;
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
    }

.form-control[b-xvp32dzj9t] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus[b-xvp32dzj9t] {
        outline: 0;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

.repeat-options[b-xvp32dzj9t] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.repeat-radio-group[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
}

.radio-option[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0;
}

    .radio-option input[type="radio"][b-xvp32dzj9t] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.radio-custom[b-xvp32dzj9t] {
    width: 20px;
    height: 20px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    position: relative;
    background: white;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked + .radio-custom[b-xvp32dzj9t] {
    border-color: #495057;
}

    .radio-option input[type="radio"]:checked + .radio-custom[b-xvp32dzj9t]::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #495057;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.recurring-options[b-xvp32dzj9t] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.repeats-section[b-xvp32dzj9t] {
    margin-bottom: 2rem;
}

.subsection-title[b-xvp32dzj9t] {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.repeat-frequency[b-xvp32dzj9t] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.days-selection[b-xvp32dzj9t] {
    margin-top: 1rem;
}

.day-buttons[b-xvp32dzj9t] {
    display: flex;
    gap: 0;
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.day-btn[b-xvp32dzj9t] {
    flex: 1;
    border: none;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
}

    .day-btn.selected[b-xvp32dzj9t] {
        background: #4CAF50;
        color: white;
    }

    .day-btn.unselected[b-xvp32dzj9t] {
        background: #000000;
        color: white;
        border-right: 1px solid #e9ecef;
    }

    .day-btn:hover[b-xvp32dzj9t] {
        background: #45A049;
        color: white;
    }

    .day-btn.unselected:hover[b-xvp32dzj9t] {
        background: #3A4A56;
        color: white;
    }

.day-icon[b-xvp32dzj9t] {
    font-size: 1rem;
}

.end-options[b-xvp32dzj9t] {
    margin-top: 1.5rem;
}

.end-selection[b-xvp32dzj9t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.end-radio-group[b-xvp32dzj9t] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.end-date-container[b-xvp32dzj9t] {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
}

.end-date-label[b-xvp32dzj9t] {
    display: block;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.end-date-input[b-xvp32dzj9t] {
    width: 200px;
}

.sessions-container[b-xvp32dzj9t] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.session-card[b-xvp32dzj9t] {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
}

.session-header[b-xvp32dzj9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.session-header-actions[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-days[b-xvp32dzj9t] {
    display: flex;
    gap: 0.5rem;
}

.session-day[b-xvp32dzj9t] {
    background: #4CAF50;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .session-day.disabled[b-xvp32dzj9t] {
        background: #000000;
    }

.btn-edit-note[b-xvp32dzj9t] {
    background: none;
    border: none;
    color: #4CAF50;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

    .btn-edit-note:hover[b-xvp32dzj9t] {
        background: rgba(76, 175, 80, 0.1);
    }

.session-time[b-xvp32dzj9t] {
    margin-bottom: 1rem;
}

.time-inputs[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.time-input-group[b-xvp32dzj9t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.time-label[b-xvp32dzj9t] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.time-input[b-xvp32dzj9t] {
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
    background: white;
    min-width: 120px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

    .time-input:focus[b-xvp32dzj9t] {
        outline: 0;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    .time-input[b-xvp32dzj9t]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        filter: invert(0.5);
    }

        .time-input[b-xvp32dzj9t]::-webkit-calendar-picker-indicator:hover {
            filter: invert(0.3);
        }

.time-separator[b-xvp32dzj9t] {
    color: #6c757d;
    margin-top: 1rem;
    font-size: 1.125rem;
}

.session-roles[b-xvp32dzj9t] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.role-input-group[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.25rem;
    border: 1px solid #dee2e6;
}

.role-adjust-btn[b-xvp32dzj9t] {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.25rem;
    background: #6c757d;
    color: white;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .role-adjust-btn:hover:not(:disabled)[b-xvp32dzj9t] {
        background: #5a6268;
        transform: scale(1.05);
    }

    .role-adjust-btn:disabled[b-xvp32dzj9t] {
        background: #adb5bd;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .role-adjust-btn.minus[b-xvp32dzj9t] {
        background: #dc3545;
    }

        .role-adjust-btn.minus:hover:not(:disabled)[b-xvp32dzj9t] {
            background: #c82333;
        }

    .role-adjust-btn.plus[b-xvp32dzj9t] {
        background: #4CAF50;
    }

        .role-adjust-btn.plus:hover:not(:disabled)[b-xvp32dzj9t] {
            background: #45A049;
        }

.role-badge[b-xvp32dzj9t] {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 100px; /* Increased from 80px to ensure text fits */
    text-align: center;
    white-space: nowrap;
    display: flex; /* Added to ensure proper display */
    align-items: center; /* Added to center text vertically */
    justify-content: center; /* Added to center text horizontally */
    line-height: 1.2; /* Added to ensure proper line height */
}

    .role-badge.fixed-role[b-xvp32dzj9t] {
        background: #000000;
        color: white;
    }

    .role-badge.flexi[b-xvp32dzj9t] {
        background: #4CAF50;
        color: white;
    }

.session-actions[b-xvp32dzj9t] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.time-display[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #495057;
}

    .time-display .bi[b-xvp32dzj9t] {
        font-size: 1.125rem;
        color: #80bdff;
    }

/* Enhanced Add Session Container */
.enhanced-add-session-container[b-xvp32dzj9t] {
    text-align: center;
    padding: 2rem;
    border-top: 2px dashed #dee2e6;
    margin-top: 2rem;
}

.btn-add-session-enhanced[b-xvp32dzj9t] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

    .btn-add-session-enhanced:hover[b-xvp32dzj9t] {
        background: linear-gradient(135deg, #138496 0%, #17a2b8 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
    }

.btn-delete-session[b-xvp32dzj9t] {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
    width: 2rem;
    height: 2rem;
}

    .btn-delete-session:hover[b-xvp32dzj9t] {
        background: rgba(220, 53, 69, 0.1);
    }

.time-adjustment-notification[b-xvp32dzj9t] {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #b8daff;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    animation: slideIn-b-xvp32dzj9t 0.3s ease-out;
}

    .time-adjustment-notification .bi[b-xvp32dzj9t] {
        font-size: 1rem;
        flex-shrink: 0;
    }

@keyframes slideIn-b-xvp32dzj9t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Bottom Actions */
.bottom-actions[b-xvp32dzj9t] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e9ecef;
    padding: 1.5rem 2rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 1000;
}

.action-buttons-container[b-xvp32dzj9t] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.primary-actions[b-xvp32dzj9t] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.btn-action[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

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

    .btn-action:hover[b-xvp32dzj9t]::before {
        left: 100%;
    }

.btn-icon[b-xvp32dzj9t] {
    font-size: 1.1rem;
}

.btn-text[b-xvp32dzj9t] {
    font-weight: 600;
}

/* Primary Action Button Styles */
.btn-configure-times[b-xvp32dzj9t] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

    .btn-configure-times:hover[b-xvp32dzj9t] {
        background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    }

.btn-save-template-configure[b-xvp32dzj9t] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

    .btn-save-template-configure:hover[b-xvp32dzj9t] {
        background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    }

.btn-action:disabled[b-xvp32dzj9t] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Action Summary */
.action-summary[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    justify-content: center;
}

.summary-item[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.summary-label[b-xvp32dzj9t] {
    font-weight: 600;
}

.summary-value[b-xvp32dzj9t] {
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    color: #495057;
}

.validation-indicator[b-xvp32dzj9t] {
    color: #ffc107;
    font-weight: 600;
}

    .validation-indicator .bi[b-xvp32dzj9t] {
        color: #ffc107;
    }

/* Modal Styles */
.modal-overlay[b-xvp32dzj9t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-xvp32dzj9t] {
    background: #f8f9fa;
    border-radius: 0.5rem;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal-header[b-xvp32dzj9t] {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h4[b-xvp32dzj9t] {
        margin: 0;
        font-size: 1.25rem;
        color: #495057;
    }

.close-btn[b-xvp32dzj9t] {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    cursor: pointer;
}

    .close-btn:hover[b-xvp32dzj9t] {
        color: #495057;
    }

.modal-body[b-xvp32dzj9t] {
    padding: 1.5rem;
}

.save-explanation[b-xvp32dzj9t] {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.form-group[b-xvp32dzj9t] {
    margin-bottom: 1rem;
}

    .form-group label[b-xvp32dzj9t] {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
    }

.template-preview[b-xvp32dzj9t] {
    margin-top: 1rem;
    padding: 1rem;
    background: #f1f3f5;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.preview-grid[b-xvp32dzj9t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.preview-item[b-xvp32dzj9t] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: white;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}

.preview-label[b-xvp32dzj9t] {
    font-weight: 500;
    color: #495057;
}

.preview-value[b-xvp32dzj9t] {
    font-weight: 600;
    color: #007bff;
}

.modal-footer[b-xvp32dzj9t] {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-primary[b-xvp32dzj9t] {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-primary:hover[b-xvp32dzj9t] {
        background: #0056b3;
    }

.btn-secondary[b-xvp32dzj9t] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-secondary:hover[b-xvp32dzj9t] {
        background: #5a6268;
    }

/* Template Search Styles */
.template-search-container[b-xvp32dzj9t] {
    position: relative;
    margin-bottom: 1rem;
}

.template-search-input[b-xvp32dzj9t] {
    position: relative;
    display: flex;
    align-items: center;
}

    .template-search-input .form-control[b-xvp32dzj9t] {
        padding-right: 3rem;
    }

.search-icon[b-xvp32dzj9t] {
    position: absolute;
    right: 2.5rem;
    color: #6c757d;
    pointer-events: none;
}

.clear-search-btn[b-xvp32dzj9t] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease;
}

    .clear-search-btn:hover[b-xvp32dzj9t] {
        color: #495057;
        background: #f8f9fa;
    }

.template-content[b-xvp32dzj9t] {
    flex: 1;
}

.template-header[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.template-visibility[b-xvp32dzj9t] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .template-visibility.private[b-xvp32dzj9t] {
        background: #6c757d;
        color: white;
    }

    .template-visibility.organization[b-xvp32dzj9t] {
        background: #007bff;
        color: white;
    }

.template-usage[b-xvp32dzj9t],
.template-creator[b-xvp32dzj9t] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.template-actions[b-xvp32dzj9t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.template-action-btn[b-xvp32dzj9t] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .template-action-btn:hover[b-xvp32dzj9t] {
        background: #f8f9fa;
        color: #dc3545;
    }

.template-option.start-fresh[b-xvp32dzj9t] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 0.5rem;
    color: #4CAF50;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .template-option.start-fresh:hover[b-xvp32dzj9t] {
        background: rgba(76, 175, 80, 0.1);
        border-color: #4CAF50;
    }

.no-results[b-xvp32dzj9t] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.template-hint[b-xvp32dzj9t] {
    background: #fff3cd;
    border: 1px solid #ffecb5;
    color: #856404;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

/* Visibility Options Styles */
.visibility-options[b-xvp32dzj9t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.visibility-info[b-xvp32dzj9t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.visibility-title[b-xvp32dzj9t] {
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.visibility-desc[b-xvp32dzj9t] {
    font-size: 0.875rem;
    color: #6c757d;
}

.required[b-xvp32dzj9t] {
    color: #dc3545;
}

/* Responsive Design */
@@media (max-width: 1200px) {
    .create-roster-layout-container[b-xvp32dzj9t] {
        padding: 1.5rem;
        padding-bottom: 220px;
    }

    .header-content[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
    }

    .action-buttons-container[b-xvp32dzj9t] {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-actions[b-xvp32dzj9t] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@@media (max-width: 768px) {
    .create-roster-layout-container[b-xvp32dzj9t] {
        padding: 1rem;
        padding-bottom: 240px;
    }

    .header-content[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
    }

    .repeat-options[b-xvp32dzj9t],
    .repeat-frequency[b-xvp32dzj9t],
    .end-selection[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
    }

    .day-buttons[b-xvp32dzj9t] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .day-btn[b-xvp32dzj9t] {
        flex: 0 0 calc(50% - 0.25rem);
        margin: 0.125rem;
        font-size: 0.75rem;
    }

    .session-header[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .session-actions[b-xvp32dzj9t] {
        flex-direction: column;
    }

    .btn-action[b-xvp32dzj9t] {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    .action-summary[b-xvp32dzj9t] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .bottom-actions[b-xvp32dzj9t] {
        padding: 1rem;
    }
}
/* _content/Havto.Web/Components/Pages/Roster/SetupRosterTimes.razor.rz.scp.css */
/* Setup Roster Times Styles - Enhanced Full-Width Layout */
.setup-roster-container[b-g56ispi06g] {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.setup-roster-header[b-g56ispi06g] {
    background: white;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content[b-g56ispi06g] {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roster-name[b-g56ispi06g] {
    font-size: 2.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.btn-save-roster[b-g56ispi06g], .btn-done-roster[b-g56ispi06g] {
    background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

    .btn-save-roster:hover[b-g56ispi06g], .btn-done-roster:hover[b-g56ispi06g] {
        background: linear-gradient(135deg, #45A049 0%, #4CAF50 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    }

    .btn-save-roster:disabled[b-g56ispi06g], .btn-done-roster:disabled[b-g56ispi06g] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* ? NEW: Full-width three-column layout */
.setup-content[b-g56ispi06g] {
    flex: 1;
    display: grid;
    grid-template-columns: 300px 1fr 350px;
    gap: 0;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - 120px);
}

/* ? NEW: Left sidebar for contacts - Fixed width with scroll */
.contacts-section[b-g56ispi06g] {
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    padding: 1.5rem;
    overflow-y: auto;
    height: calc(100vh - 120px);
    position: sticky;
    top: 120px;
}

/* ? NEW: Main content area - Flexible width */
.roster-items-section[b-g56ispi06g] {
    background: white;
    padding: 2rem;
    overflow-y: auto;
    height: calc(100vh - 120px);
}

/* ? NEW: Right sidebar for summary/tools - Fixed width */
.roster-summary-section[b-g56ispi06g] {
    background: #f8f9fa;
    border-left: 1px solid #e9ecef;
    padding: 1.5rem;
    overflow-y: auto;
    height: calc(100vh - 120px);
    position: sticky;
    top: 120px;
}

/* ? ENHANCED: Better roster item cards for wider space */
.roster-item-card[b-g56ispi06g] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .roster-item-card:hover[b-g56ispi06g] {
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

.item-header[b-g56ispi06g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f3f4;
}

.item-date-time[b-g56ispi06g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #495057;
}

.date-text[b-g56ispi06g] {
    color: #495057;
    background: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.time-text[b-g56ispi06g] {
    color: #6c757d;
    background: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.status-indicator[b-g56ispi06g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

    .status-indicator:hover[b-g56ispi06g] {
        background: #f8f9fa;
    }

    .status-indicator.completed[b-g56ispi06g] {
        color: #4CAF50;
    }

    .status-indicator.incomplete[b-g56ispi06g] {
        color: #6c757d;
    }

.chevron[b-g56ispi06g] {
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

    .chevron.expanded[b-g56ispi06g] {
        transform: rotate(180deg);
    }

    .chevron.collapsed[b-g56ispi06g] {
        transform: rotate(0deg);
    }

.item-content[b-g56ispi06g] {
    overflow: hidden;
    transition: all 0.3s ease;
}

    .item-content.collapsed[b-g56ispi06g] {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
    }

    .item-content.expanded[b-g56ispi06g] {
        max-height: 2000px;
        opacity: 1;
        margin-bottom: 0;
    }

/* ? ENHANCED: Better action row layout for wider space */
.item-action-row[b-g56ispi06g] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.btn-add-note[b-g56ispi06g], .btn-link-action[b-g56ispi06g] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    .btn-add-note:hover[b-g56ispi06g], .btn-link-action:hover[b-g56ispi06g] {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        border-color: #adb5bd;
        color: #212529;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.btn-delete-item[b-g56ispi06g] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

    .btn-delete-item:hover[b-g56ispi06g] {
        background: linear-gradient(135deg, #c82333 0%, #dc3545 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    }

/* ? ENHANCED: Better roles section layout */
.roles-section[b-g56ispi06g] {
    margin-bottom: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
}

.roles-title[b-g56ispi06g] {
    font-size: 1rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ? ENHANCED: Role control buttons */
.roles-header[b-g56ispi06g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.role-controls[b-g56ispi06g] {
    display: flex;
    gap: 0.5rem;
}

.btn-role-control[b-g56ispi06g] {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

    .btn-role-control:not(:disabled):hover[b-g56ispi06g] {
        background: #f8f9fa;
        border-color: #6c757d;
    }

    .btn-role-control:disabled[b-g56ispi06g] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-plus[b-g56ispi06g] {
    color: #28a745;
    border-color: #28a745;
}

    .btn-plus:not(:disabled):hover[b-g56ispi06g] {
        background: #28a745;
        color: white;
    }

.btn-minus[b-g56ispi06g] {
    color: #dc3545;
    border-color: #dc3545;
}

    .btn-minus:not(:disabled):hover[b-g56ispi06g] {
        background: #dc3545;
        color: white;
    }

/* ? ENHANCED: Better role assignments layout */
.role-assignments[b-g56ispi06g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    min-height: 120px;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

    .role-assignments.drop-zone-fixed[b-g56ispi06g] {
        border-color: #28a745;
        background: #f8fff9;
    }

    .role-assignments.drop-zone-flexi[b-g56ispi06g] {
        border-color: #ffc107;
        background: #fffbf0;
    }

.user-avatar[b-g56ispi06g] {
    width: 4rem;
    height: 4rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .user-avatar:hover[b-g56ispi06g] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .user-avatar.assigned[b-g56ispi06g] {
        background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
        color: white;
    }

    .user-avatar.placeholder[b-g56ispi06g] {
        background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
        color: white;
    }

    .user-avatar.add-user[b-g56ispi06g] {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border: 2px dashed #20c997;
    }

        .user-avatar.add-user:hover[b-g56ispi06g] {
            background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
            border-style: solid;
            transform: translateY(-2px) scale(1.05);
        }

    .user-avatar img[b-g56ispi06g] {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

.user-initials[b-g56ispi06g] {
    font-size: 1rem;
    font-weight: 700;
}

.note-section[b-g56ispi06g] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.note-input[b-g56ispi06g] {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    transition: all 0.3s ease;
}

    .note-input:focus[b-g56ispi06g] {
        outline: 0;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15);
    }

.add-item-container[b-g56ispi06g] {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

    .add-item-container:hover[b-g56ispi06g] {
        border-color: #4CAF50;
        background: #f8fff9;
    }

.btn-add-item[b-g56ispi06g] {
    background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
    color: white;
    border: none;
    padding: 1.25rem 2.5rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

    .btn-add-item:hover[b-g56ispi06g] {
        background: linear-gradient(135deg, #45A049 0%, #4CAF50 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
    }

/* ? NEW: Enhanced sidebar styling */
.sidebar-title[b-g56ispi06g] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.contacts-list[b-g56ispi06g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item[b-g56ispi06g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    .contact-item:hover[b-g56ispi06g] {
        background: #f8f9fa;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.contact-avatar[b-g56ispi06g] {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    color: white;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .contact-avatar img[b-g56ispi06g] {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
    }

.contact-initials[b-g56ispi06g] {
    font-size: 0.9rem;
    font-weight: 700;
}

.contact-info[b-g56ispi06g] {
    flex: 1;
}

.contact-name[b-g56ispi06g] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.contact-role[b-g56ispi06g] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.member-count[b-g56ispi06g] {
    font-size: 0.75rem;
    color: #6c757d;
}

.loading-state[b-g56ispi06g] {
    text-align: center;
    padding: 4rem;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ? NEW: Drag and Drop Styles */
.draggable-member[b-g56ispi06g] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .draggable-member:hover[b-g56ispi06g] {
        border-color: #007bff;
        box-shadow: 0 2px 4px rgba(0,123,255,0.15);
    }

    .draggable-member:active[b-g56ispi06g] {
        cursor: grabbing;
    }

.draggable-group[b-g56ispi06g] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.2s ease;
}

    .draggable-group:hover[b-g56ispi06g] {
        border-color: #1976d2;
        box-shadow: 0 2px 4px rgba(33,150,243,0.25);
    }

.drop-zone-fixed[b-g56ispi06g] {
    border: 2px dashed #28a745;
    border-radius: 8px;
    min-height: 60px;
    background: #f8fff9;
    transition: all 0.2s ease;
}

    .drop-zone-fixed.drag-over[b-g56ispi06g] {
        background: #d4edda;
        border-color: #155724;
    }

.drop-zone-flexi[b-g56ispi06g] {
    border: 2px dashed #ffc107;
    border-radius: 8px;
    min-height: 60px;
    background: #fffbf0;
    transition: all 0.2s ease;
}

    .drop-zone-flexi.drag-over[b-g56ispi06g] {
        background: #fff3cd;
        border-color: #856404;
    }

.assigned-member-card[b-g56ispi06g] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.5rem;
    margin: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.assigned-group-card[b-g56ispi06g] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 6px;
    padding: 0.5rem;
    margin: 0.25rem;
    position: relative;
}

.remove-assignment[b-g56ispi06g] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.add-first-role[b-g56ispi06g] {
    border: 2px dashed #28a745 !important;
    background: #f8fff9 !important;
    color: #28a745 !important;
}

    .add-first-role:hover[b-g56ispi06g] {
        background: #28a745 !important;
        color: white !important;
        border-style: solid !important;
    }

/* ? RESPONSIVE: Enhanced mobile layout */
@@media (max-width: 1200px) {
    .setup-content[b-g56ispi06g] {
        grid-template-columns: 280px 1fr 320px;
    }
}

@@media (max-width: 1024px) {
    .setup-content[b-g56ispi06g] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contacts-section[b-g56ispi06g],
    .roster-summary-section[b-g56ispi06g] {
        position: static;
        height: auto;
        max-height: 400px;
    }

    .roster-items-section[b-g56ispi06g] {
        height: auto;
        padding: 1.5rem;
    }

    .contacts-section[b-g56ispi06g] {
        order: -1;
        background: white;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        border-radius: 12px 12px 0 0;
    }

    .roster-summary-section[b-g56ispi06g] {
        border-left: none;
        border-top: 1px solid #e9ecef;
        border-radius: 0 0 12px 12px;
    }
}

@@media (max-width: 768px) {
    .setup-roster-container[b-g56ispi06g] {
        padding: 0;
    }

    .setup-content[b-g56ispi06g] {
        margin: 0;
        padding: 1rem;
    }

    .header-content[b-g56ispi06g] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        padding: 1rem;
    }

    .roster-item-card[b-g56ispi06g] {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .item-action-row[b-g56ispi06g] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .role-assignments[b-g56ispi06g] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .user-avatar[b-g56ispi06g] {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }

    .contacts-section[b-g56ispi06g],
    .roster-items-section[b-g56ispi06g],
    .roster-summary-section[b-g56ispi06g] {
        padding: 1rem;
    }
}

/* ? NEW: Custom scrollbar styling for sidebars */
.contacts-section[b-g56ispi06g]::-webkit-scrollbar,
.roster-summary-section[b-g56ispi06g]::-webkit-scrollbar {
    width: 8px;
}

.contacts-section[b-g56ispi06g]::-webkit-scrollbar-track,
.roster-summary-section[b-g56ispi06g]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.contacts-section[b-g56ispi06g]::-webkit-scrollbar-thumb,
.roster-summary-section[b-g56ispi06g]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .contacts-section[b-g56ispi06g]::-webkit-scrollbar-thumb:hover,
    .roster-summary-section[b-g56ispi06g]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.roster-items-section[b-g56ispi06g]::-webkit-scrollbar {
    width: 10px;
}

.roster-items-section[b-g56ispi06g]::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 5px;
}

.roster-items-section[b-g56ispi06g]::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 5px;
}

    .roster-items-section[b-g56ispi06g]::-webkit-scrollbar-thumb:hover {
        background: #adb5bd;
    }

/* ? MudBlazor Overrides - These need to be global */
[b-g56ispi06g] .mud-drop-item {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    [b-g56ispi06g] .mud-drop-item.mud-drop-item-dragging {
        opacity: 0.7;
        transform: scale(1.02);
        z-index: 1000;
    }

/* Ensure individual item behavior */
[b-g56ispi06g] .draggable-member,
[b-g56ispi06g] .draggable-group,
[b-g56ispi06g] .assigned-member-card,
[b-g56ispi06g] .assigned-group-card {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
}
/* _content/Havto.Web/Components/Search/AIGlobalSearch.razor.rz.scp.css */
.ai-search-container[b-8bk8q9uwfr] {
    position: relative;
}

.search-results-popover[b-8bk8q9uwfr] {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.search-results-panel[b-8bk8q9uwfr] {
    min-width: 500px;
}

.search-result-item[b-8bk8q9uwfr] {
    transition: background-color 0.2s ease;
}

    .search-result-item:hover[b-8bk8q9uwfr] {
        background-color: var(--mud-palette-action-default-hover);
    }

.cursor-pointer[b-8bk8q9uwfr] {
    cursor: pointer;
}

.border-t[b-8bk8q9uwfr] {
    border-top: 1px solid var(--mud-palette-divider);
}

@media (max-width: 600px) {
    .search-results-panel[b-8bk8q9uwfr] {
        min-width: 100vw;
        max-width: 100vw;
    }

    .ai-search-container .mud-input[b-8bk8q9uwfr] {
        max-width: 250px !important;
    }
}
/* _content/Havto.Web/Components/Shared/Dialogs/RuleTemplatePreviewDialog.razor.rz.scp.css */
/* Rule Template Preview Dialog Styles */

.template-header[b-25yextek49] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

    .template-header .mud-typography-h6[b-25yextek49] {
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin-bottom: 0.5rem;
    }

    .template-header .mud-typography-body2[b-25yextek49] {
        line-height: 1.5;
    }

.rules-count-header[b-25yextek49] {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.rule-card[b-25yextek49] {
    margin-bottom: 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--mud-palette-divider);
}

    .rule-card:hover[b-25yextek49] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--mud-palette-primary);
    }

.rule-content[b-25yextek49] {
    flex-grow: 1;
    margin-right: 1rem;
}

.rule-name[b-25yextek49] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.25rem;
}

.rule-description[b-25yextek49] {
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.rule-chips[b-25yextek49] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rule-details[b-25yextek49] {
    text-align: right;
    min-width: 200px;
    flex-shrink: 0;
}

.rule-expression[b-25yextek49] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.25rem;
    background-color: var(--mud-palette-background-grey);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: var(--mud-typography-default-family);
    font-size: 0.875rem;
}

.legal-basis[b-25yextek49] {
    font-style: italic;
    line-height: 1.3;
}

.no-rules-alert[b-25yextek49] {
    margin-top: 1rem;
    border-radius: 8px;
}

.dialog-button[b-25yextek49] {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
}

    .dialog-button:hover[b-25yextek49] {
        transform: translateY(-1px);
    }

    .dialog-button.primary[b-25yextek49] {
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.3);
    }

        .dialog-button.primary:hover[b-25yextek49] {
            box-shadow: 0 4px 16px rgba(var(--mud-palette-primary-rgb), 0.4);
        }

/* MudDialog content styling */
.mud-dialog-content[b-25yextek49] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.mud-dialog-actions[b-25yextek49] {
    padding: 1rem 1.5rem;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Chip styling enhancements */
.mud-chip[b-25yextek49] {
    font-weight: 500;
    border-radius: 6px;
    font-size: 0.75rem;
}

    .mud-chip.mud-chip-color-error[b-25yextek49] {
        background-color: rgba(var(--mud-palette-error-rgb), 0.12);
        color: var(--mud-palette-error);
    }

    .mud-chip.mud-chip-color-warning[b-25yextek49] {
        background-color: rgba(var(--mud-palette-warning-rgb), 0.12);
        color: var(--mud-palette-warning);
    }

    .mud-chip.mud-chip-color-info[b-25yextek49] {
        background-color: rgba(var(--mud-palette-info-rgb), 0.12);
        color: var(--mud-palette-info);
    }

/* Responsive design */
@media (max-width: 768px) {
    .rule-card .d-flex[b-25yextek49] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rule-content[b-25yextek49] {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 100%;
    }

    .rule-details[b-25yextek49] {
        text-align: left;
        min-width: unset;
        width: 100%;
    }

    .rule-expression[b-25yextek49] {
        text-align: left;
        width: 100%;
    }

    .mud-dialog-content[b-25yextek49] {
        padding: 1rem;
    }

    .mud-dialog-actions[b-25yextek49] {
        padding: 1rem;
        flex-direction: column;
    }

    .dialog-button[b-25yextek49] {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .template-header[b-25yextek49] {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .rules-count-header[b-25yextek49] {
        margin-bottom: 0.75rem;
    }

    .rule-card[b-25yextek49] {
        margin-bottom: 0.5rem;
    }

    .rule-chips[b-25yextek49] {
        gap: 0.25rem;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .rule-card:hover[b-25yextek49] {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }

    .rule-expression[b-25yextek49] {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .dialog-button.primary[b-25yextek49] {
        box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.5);
    }

        .dialog-button.primary:hover[b-25yextek49] {
            box-shadow: 0 4px 16px rgba(var(--mud-palette-primary-rgb), 0.6);
        }
}

/* Animation for card appearance */
.rule-card[b-25yextek49] {
    animation: fadeInUp-b-25yextek49 0.3s ease-out;
}

@keyframes fadeInUp-b-25yextek49 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus states for accessibility */
.dialog-button:focus[b-25yextek49] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Scrollbar styling */
.mud-dialog-content[b-25yextek49]::-webkit-scrollbar {
    width: 6px;
}

.mud-dialog-content[b-25yextek49]::-webkit-scrollbar-track {
    background: var(--mud-palette-background-grey);
    border-radius: 3px;
}

.mud-dialog-content[b-25yextek49]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-text-secondary);
    border-radius: 3px;
}

    .mud-dialog-content[b-25yextek49]::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-text-primary);
    }
/* _content/Havto.Web/Components/Shared/OrganizationDocumentsComponent.razor.rz.scp.css */
/* Documents Component Styles */
.documents-container[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

/* Documents Header */
.documents-header[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.header-content h2[b-fcxt2pkwrx] {
    margin: 0;
    color: var(--mud-palette-dark);
    font-size: 1.75rem;
    font-weight: 600;
}

.documents-subtitle[b-fcxt2pkwrx] {
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0 0;
    font-size: 0.95rem;
}

.header-actions[b-fcxt2pkwrx] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-upload[b-fcxt2pkwrx], .btn-refresh[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload[b-fcxt2pkwrx] {
    background: var(--mud-palette-primary);
    color: white;
}

    .btn-upload:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary-darken);
    }

.btn-refresh[b-fcxt2pkwrx] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

    .btn-refresh:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-action-hover);
    }

/* Search and Filters */
.documents-filters[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-section[b-fcxt2pkwrx] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-width: 250px;
}

.search-input-group[b-fcxt2pkwrx] {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.search-icon[b-fcxt2pkwrx] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.search-input[b-fcxt2pkwrx] {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: 0.875rem;
    outline: none;
}

    .search-input:focus[b-fcxt2pkwrx] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.btn-search[b-fcxt2pkwrx] {
    padding: 10px 16px;
    background: var(--mud-palette-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
}

    .btn-search:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary-darken);
    }

.filter-section[b-fcxt2pkwrx] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select[b-fcxt2pkwrx] {
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
    min-width: 120px;
}

    .filter-select:focus[b-fcxt2pkwrx] {
        outline: none;
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.1);
    }

/* Storage Statistics */
.storage-stats[b-fcxt2pkwrx] {
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.storage-info[b-fcxt2pkwrx] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.storage-used[b-fcxt2pkwrx] {
    font-weight: 600;
    color: var(--mud-palette-dark);
}

.storage-total[b-fcxt2pkwrx] {
    color: var(--mud-palette-text-secondary);
}

.storage-bar[b-fcxt2pkwrx] {
    width: 100%;
    height: 8px;
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.storage-fill[b-fcxt2pkwrx] {
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width 0.3s ease;
}

.storage-details[b-fcxt2pkwrx] {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Documents Grid */
.documents-grid[b-fcxt2pkwrx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.document-card[b-fcxt2pkwrx] {
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    position: relative;
}

    .document-card:hover[b-fcxt2pkwrx] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.document-icon[b-fcxt2pkwrx] {
    position: relative;
    font-size: 2rem;
    color: var(--mud-palette-primary);
    align-self: flex-start;
}

.privacy-indicator[b-fcxt2pkwrx] {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.75rem;
    color: var(--mud-palette-warning);
    background: white;
    border-radius: 50%;
    padding: 2px;
}

.document-content[b-fcxt2pkwrx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.document-name[b-fcxt2pkwrx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.document-description[b-fcxt2pkwrx] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.document-metadata[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: auto;
}

.document-category[b-fcxt2pkwrx] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.document-size[b-fcxt2pkwrx] {
    font-weight: 500;
}

.document-details[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.uploaded-by[b-fcxt2pkwrx] {
    font-weight: 500;
}

.upload-date[b-fcxt2pkwrx] {
    color: var(--mud-palette-text-secondary);
}

.document-stats[b-fcxt2pkwrx] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.download-count[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.document-actions[b-fcxt2pkwrx] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-inputs);
}

.btn-view[b-fcxt2pkwrx], .btn-download[b-fcxt2pkwrx], .btn-edit[b-fcxt2pkwrx], .btn-delete[b-fcxt2pkwrx] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-view[b-fcxt2pkwrx] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
}

    .btn-view:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-info);
        color: white;
    }

.btn-download[b-fcxt2pkwrx] {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}

    .btn-download:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-success);
        color: white;
    }

.btn-edit[b-fcxt2pkwrx] {
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning);
}

    .btn-edit:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-warning);
        color: white;
    }

.btn-delete[b-fcxt2pkwrx] {
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
}

    .btn-delete:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-error);
        color: white;
    }

/* Empty States */
.empty-documents-state[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 16px;
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 40px 20px;
}

.empty-documents-icon[b-fcxt2pkwrx] {
    font-size: 4rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.empty-documents-state h3[b-fcxt2pkwrx] {
    margin: 0;
    color: var(--mud-palette-dark);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-documents-state p[b-fcxt2pkwrx] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

.btn-upload-primary[b-fcxt2pkwrx], .btn-secondary[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload-primary[b-fcxt2pkwrx] {
    background: var(--mud-palette-primary);
    color: white;
}

    .btn-upload-primary:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary-darken);
    }

.btn-secondary[b-fcxt2pkwrx] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

    .btn-secondary:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-action-hover);
    }

/* Pagination */
.pagination[b-fcxt2pkwrx] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.btn-page[b-fcxt2pkwrx] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mud-palette-lines-default);
    background: white;
    color: var(--mud-palette-text-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-page:hover:not(:disabled)[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary);
        color: white;
        border-color: var(--mud-palette-primary);
    }

    .btn-page:disabled[b-fcxt2pkwrx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-info[b-fcxt2pkwrx] {
    margin: 0 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Modal Styles */
.modal-overlay[b-fcxt2pkwrx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-fcxt2pkwrx] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.upload-modal[b-fcxt2pkwrx] {
    max-width: 600px;
}

.modal-header[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .modal-header h3[b-fcxt2pkwrx] {
        margin: 0;
        color: var(--mud-palette-dark);
        font-size: 1.25rem;
        font-weight: 600;
    }

.btn-close-modal[b-fcxt2pkwrx] {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-close-modal:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-action-hover);
        color: var(--mud-palette-text-primary);
    }

.modal-body[b-fcxt2pkwrx] {
    padding: 20px;
}

.modal-footer[b-fcxt2pkwrx] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Upload Section */
.upload-section[b-fcxt2pkwrx] {
    margin-bottom: 20px;
}

.file-drop-zone[b-fcxt2pkwrx] {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

    .file-drop-zone:hover[b-fcxt2pkwrx] {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-lighten);
    }

    .file-drop-zone.drag-over[b-fcxt2pkwrx] {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-primary-lighten);
    }

.drop-zone-content[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.drop-icon[b-fcxt2pkwrx] {
    font-size: 2.5rem;
    color: var(--mud-palette-primary);
}

.file-drop-zone p[b-fcxt2pkwrx] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.file-input[b-fcxt2pkwrx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.btn-browse[b-fcxt2pkwrx] {
    padding: 8px 16px;
    background: var(--mud-palette-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

    .btn-browse:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary-darken);
    }

.selected-file[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    margin-top: 12px;
}

.file-info[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name[b-fcxt2pkwrx] {
    font-weight: 500;
    color: var(--mud-palette-dark);
    font-size: 0.875rem;
}

.file-size[b-fcxt2pkwrx] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.btn-remove[b-fcxt2pkwrx] {
    width: 24px;
    height: 24px;
    border: none;
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-remove:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-error);
        color: white;
    }

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

.form-group[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-fcxt2pkwrx] {
        font-weight: 500;
        color: var(--mud-palette-dark);
        font-size: 0.875rem;
    }

.form-control[b-fcxt2pkwrx] {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
}

    .form-control:focus[b-fcxt2pkwrx] {
        outline: none;
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.checkbox-label[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
}

.checkmark[b-fcxt2pkwrx] {
    width: 16px;
    height: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    position: relative;
}

.checkbox-label input[type="checkbox"][b-fcxt2pkwrx] {
    display: none;
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-fcxt2pkwrx] {
        background: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
    }

        .checkbox-label input[type="checkbox"]:checked + .checkmark[b-fcxt2pkwrx]::after {
            content: "?";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

.upload-error[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
    border-radius: 6px;
    font-size: 0.875rem;
}

.spinner-small[b-fcxt2pkwrx] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Delete Modal */
.delete-modal[b-fcxt2pkwrx] {
    max-width: 400px;
}

.delete-warning[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.warning-icon[b-fcxt2pkwrx] {
    font-size: 3rem;
    color: var(--mud-palette-warning);
}

.delete-warning p[b-fcxt2pkwrx] {
    margin: 0;
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
}

.warning-text[b-fcxt2pkwrx] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.btn-danger[b-fcxt2pkwrx] {
    background: var(--mud-palette-error);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

    .btn-danger:hover[b-fcxt2pkwrx] {
        background: var(--mud-palette-error-darken);
    }

/* Loading States */
.loading-container[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.loading-spinner[b-fcxt2pkwrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-fcxt2pkwrx] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive Design */
@@media (max-width: 768px) {
    .documents-header[b-fcxt2pkwrx] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-fcxt2pkwrx] {
        justify-content: space-between;
    }

    .documents-filters[b-fcxt2pkwrx] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .search-section[b-fcxt2pkwrx] {
        min-width: auto;
    }

    .filter-section[b-fcxt2pkwrx] {
        justify-content: flex-start;
    }

    .documents-grid[b-fcxt2pkwrx] {
        grid-template-columns: 1fr;
    }

    .modal-overlay[b-fcxt2pkwrx] {
        padding: 10px;
    }

    .modal-content[b-fcxt2pkwrx] {
        max-width: none;
        width: 100%;
    }

    .file-drop-zone[b-fcxt2pkwrx] {
        padding: 20px 10px;
    }

    .drop-icon[b-fcxt2pkwrx] {
        font-size: 2rem;
    }

    .modal-footer[b-fcxt2pkwrx] {
        flex-direction: column;
        gap: 8px;
    }

        .modal-footer button[b-fcxt2pkwrx] {
            width: 100%;
        }
}

/* Setup Guide Notice Styles */
.setup-guide-notice[b-fcxt2pkwrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f0f8ff;
    border: 1px solid #cce7ff;
    border-radius: 8px;
    animation: slideInDown-b-fcxt2pkwrx 0.3s ease-out;
}

.notice-content[b-fcxt2pkwrx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #495057;
    font-size: 0.9rem;
    flex: 1;
}

    .notice-content .bi[b-fcxt2pkwrx] {
        color: #0066cc;
        flex-shrink: 0;
    }

.btn-guide[b-fcxt2pkwrx] {
    background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
    flex-shrink: 0;
}

    .btn-guide:hover[b-fcxt2pkwrx] {
        background: linear-gradient(135deg, #0052a3 0%, #003366 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
    }

@keyframes slideInDown-b-fcxt2pkwrx {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@@media (max-width: 768px) {
    .setup-guide-notice[b-fcxt2pkwrx] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .btn-guide[b-fcxt2pkwrx] {
        justify-content: center;
        width: 100%;
    }
}
/* _content/Havto.Web/Components/Shared/OrganizationReportsComponent.razor.rz.scp.css */
/* Reports Component Styles */
.reports-container[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

/* Reports Header */
.reports-header[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.header-content h2[b-8mavgsysw3] {
    margin: 0;
    color: var(--mud-palette-dark);
    font-size: 1.75rem;
    font-weight: 600;
}

.report-subtitle[b-8mavgsysw3] {
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 12px 0;
    font-size: 0.95rem;
}

.report-metadata[b-8mavgsysw3] {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.header-actions[b-8mavgsysw3] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.date-filters[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.date-input[b-8mavgsysw3] {
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.875rem;
}

.export-actions[b-8mavgsysw3] {
    position: relative;
}

.dropdown[b-8mavgsysw3] {
    position: relative;
    display: inline-block;
}

.dropdown-menu[b-8mavgsysw3] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 1000;
    padding: 4px 0;
}

.dropdown-item[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    cursor: pointer;
}

    .dropdown-item:hover[b-8mavgsysw3] {
        background-color: var(--mud-palette-action-hover);
    }

/* Summary Cards */
.summary-cards[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card[b-8mavgsysw3] {
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-icon[b-8mavgsysw3] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.card-content h3[b-8mavgsysw3] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mud-palette-dark);
}

.card-content p[b-8mavgsysw3] {
    margin: 4px 0 8px 0;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.card-detail[b-8mavgsysw3] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Report Tabs */
.report-tabs[b-8mavgsysw3] {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.tab-button[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.2s ease;
}

    .tab-button:hover[b-8mavgsysw3] {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-action-hover);
    }

    .tab-button.active[b-8mavgsysw3] {
        color: var(--mud-palette-primary);
        border-bottom-color: var(--mud-palette-primary);
    }

/* Report Content */
.report-content[b-8mavgsysw3] {
    min-height: 400px;
}

/* Overview Section */
.overview-grid[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.overview-widget[b-8mavgsysw3] {
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 20px;
}

    .overview-widget h3[b-8mavgsysw3] {
        margin: 0 0 16px 0;
        color: var(--mud-palette-dark);
        font-size: 1.125rem;
        font-weight: 600;
    }

.growth-stats[b-8mavgsysw3], .performers-list[b-8mavgsysw3], .trends-list[b-8mavgsysw3], .quick-actions[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-item[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
}

    .stat-item:last-child[b-8mavgsysw3] {
        border-bottom: none;
    }

.stat-label[b-8mavgsysw3] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.stat-value[b-8mavgsysw3] {
    font-weight: 600;
    color: var(--mud-palette-dark);
}

.performer-item[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.performer-info[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
}

.performer-name[b-8mavgsysw3] {
    font-weight: 500;
    color: var(--mud-palette-dark);
}

.performer-role[b-8mavgsysw3] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.attendance-rate[b-8mavgsysw3] {
    font-weight: 600;
    color: var(--mud-palette-success);
}

.trend-item[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.trend-icon[b-8mavgsysw3] {
    color: var(--mud-palette-primary);
    font-size: 1.125rem;
}

.trend-text[b-8mavgsysw3] {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

.action-btn[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--mud-palette-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
}

    .action-btn:hover[b-8mavgsysw3] {
        background: var(--mud-palette-primary-darken);
    }

/* Analytics Sections */
.analytics-section[b-8mavgsysw3] {
    background: white;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

    .analytics-section h3[b-8mavgsysw3] {
        margin: 0 0 20px 0;
        color: var(--mud-palette-dark);
        font-size: 1.25rem;
        font-weight: 600;
    }

.performance-grid[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.performance-card[b-8mavgsysw3] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 16px;
}

    .performance-card h4[b-8mavgsysw3] {
        margin: 0 0 16px 0;
        color: var(--mud-palette-dark);
        font-size: 1rem;
        font-weight: 600;
    }

.chart-placeholder[b-8mavgsysw3] {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border-radius: 4px;
    font-style: italic;
}

.monthly-stats[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.month-stat[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.month-name[b-8mavgsysw3] {
    font-weight: 500;
    color: var(--mud-palette-dark);
}

.month-count[b-8mavgsysw3] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Performance Tables */
.roster-performance-table[b-8mavgsysw3], .member-performance-table[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.table-header[b-8mavgsysw3], .table-row[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    background: white;
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
}

.table-header[b-8mavgsysw3] {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
    color: var(--mud-palette-dark);
    font-size: 0.875rem;
}

.table-row[b-8mavgsysw3] {
    font-size: 0.875rem;
}

.roster-name[b-8mavgsysw3], .member-name[b-8mavgsysw3] {
    font-weight: 500;
    color: var(--mud-palette-dark);
}

.progress-bar-small[b-8mavgsysw3] {
    width: 60px;
    height: 6px;
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
    overflow: hidden;
    margin-right: 8px;
    display: inline-block;
}

.progress-fill[b-8mavgsysw3] {
    height: 100%;
    background: var(--mud-palette-success);
    transition: width 0.3s ease;
}

.status-badge[b-8mavgsysw3] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-published[b-8mavgsysw3] {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}

.status-draft[b-8mavgsysw3] {
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning);
}

.status-completed[b-8mavgsysw3] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
}

/* Attention Rosters */
.attention-rosters[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.attention-roster-card[b-8mavgsysw3] {
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    padding: 16px;
    background: var(--mud-palette-warning-lighten);
}

.roster-header[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

    .roster-header h4[b-8mavgsysw3] {
        margin: 0;
        color: var(--mud-palette-dark);
        font-size: 1rem;
        font-weight: 600;
    }

.urgency-badge[b-8mavgsysw3] {
    background: var(--mud-palette-warning);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.roster-metrics[b-8mavgsysw3] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.metric[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-label[b-8mavgsysw3] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.metric-value[b-8mavgsysw3] {
    font-weight: 600;
    color: var(--mud-palette-dark);
}

    .metric-value.low[b-8mavgsysw3] {
        color: var(--mud-palette-error);
    }

.roster-actions[b-8mavgsysw3] {
    display: flex;
    gap: 8px;
}

/* Member Analytics */
.member-summary-grid[b-8mavgsysw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.summary-metric[b-8mavgsysw3] {
    text-align: center;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

    .summary-metric h4[b-8mavgsysw3] {
        margin: 0 0 8px 0;
        color: var(--mud-palette-text-secondary);
        font-size: 0.875rem;
        font-weight: 500;
    }

.metric-value[b-8mavgsysw3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-dark);
}

.role-analytics[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-stat[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
}

    .role-stat:last-child[b-8mavgsysw3] {
        border-bottom: none;
    }

.role-info[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
}

.role-name[b-8mavgsysw3] {
    font-weight: 500;
    color: var(--mud-palette-dark);
}

.role-count[b-8mavgsysw3] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.role-performance[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 120px;
}

.progress-bar[b-8mavgsysw3] {
    width: 80px;
    height: 6px;
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
    overflow: hidden;
}

.performance-value[b-8mavgsysw3] {
    font-weight: 600;
    color: var(--mud-palette-dark);
    font-size: 0.875rem;
}

/* Attendance Analytics */
.attendance-summary[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 24px;
}

.attendance-metric[b-8mavgsysw3] {
    text-align: center;
}

    .attendance-metric h4[b-8mavgsysw3] {
        margin: 0 0 8px 0;
        color: var(--mud-palette-text-secondary);
        font-size: 0.875rem;
        font-weight: 500;
    }

.metric-value.large[b-8mavgsysw3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.attendance-breakdown[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item[b-8mavgsysw3] {
    display: flex;
    justify-content: space-between;
    min-width: 120px;
}

    .breakdown-item .label[b-8mavgsysw3] {
        color: var(--mud-palette-text-secondary);
        font-size: 0.875rem;
    }

    .breakdown-item .value[b-8mavgsysw3] {
        font-weight: 600;
        color: var(--mud-palette-dark);
    }

.day-attendance[b-8mavgsysw3], .monthly-attendance[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.day-stat[b-8mavgsysw3], .month-attendance[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.day-name[b-8mavgsysw3], .month-label[b-8mavgsysw3] {
    min-width: 80px;
    font-weight: 500;
    color: var(--mud-palette-dark);
    font-size: 0.875rem;
}

.day-bar[b-8mavgsysw3], .month-bar[b-8mavgsysw3] {
    flex: 1;
    height: 8px;
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    max-width: 200px;
}

.day-fill[b-8mavgsysw3], .month-fill[b-8mavgsysw3] {
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width 0.3s ease;
}

.day-rate[b-8mavgsysw3], .month-rate[b-8mavgsysw3] {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    color: var(--mud-palette-dark);
    font-size: 0.875rem;
}

/* Loading and Error States */
.loading-container[b-8mavgsysw3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.loading-spinner[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-8mavgsysw3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: spin-b-8mavgsysw3 1s linear infinite;
}

@keyframes spin-b-8mavgsysw3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-state[b-8mavgsysw3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    gap: 16px;
}

.error-icon[b-8mavgsysw3] {
    font-size: 3rem;
    color: var(--mud-palette-error);
}

.error-state h3[b-8mavgsysw3] {
    margin: 0;
    color: var(--mud-palette-dark);
    font-size: 1.25rem;
}

.error-state p[b-8mavgsysw3] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
}

/* Responsive Design */
@@media (max-width: 768px) {
    .reports-header[b-8mavgsysw3] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-8mavgsysw3] {
        justify-content: space-between;
    }

    .date-filters[b-8mavgsysw3] {
        flex-wrap: wrap;
    }

    .summary-cards[b-8mavgsysw3] {
        grid-template-columns: 1fr;
    }

    .overview-grid[b-8mavgsysw3] {
        grid-template-columns: 1fr;
    }

    .performance-grid[b-8mavgsysw3] {
        grid-template-columns: 1fr;
    }

    .table-header[b-8mavgsysw3], .table-row[b-8mavgsysw3] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .table-header span[b-8mavgsysw3], .table-row span[b-8mavgsysw3] {
            display: flex;
            justify-content: space-between;
        }

            .table-header span[b-8mavgsysw3]::before, .table-row span[b-8mavgsysw3]::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--mud-palette-text-secondary);
            }

    .attention-rosters[b-8mavgsysw3] {
        grid-template-columns: 1fr;
    }

    .member-summary-grid[b-8mavgsysw3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-summary[b-8mavgsysw3] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}
/* _content/Havto.Web/Components/Shared/OrganizationSettingsComponent.razor.rz.scp.css */
/* Enhanced Organization Settings Component Styles */
.organization-settings[b-yj230ribn4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Loading State */
.settings-loading[b-yj230ribn4] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 2rem 0;
}

.loading-spinner-container[b-yj230ribn4] {
    text-align: center;
    padding: 2rem;
}

.loading-spinner[b-yj230ribn4] {
    width: 48px;
    height: 48px;
    border: 4px solid #e3e6ea;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin-b-yj230ribn4 1s linear infinite;
    margin: 0 auto 1.5rem;
}

.loading-content h3[b-yj230ribn4] {
    color: #495057;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.loading-content p[b-yj230ribn4] {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
}

@keyframes spin-b-yj230ribn4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Alert Messages */
.alert[b-yj230ribn4] {
    border-radius: 8px;
    border: none;
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
    animation: slideIn-b-yj230ribn4 0.3s ease;
}

.alert-success[b-yj230ribn4] {
    background: linear-gradient(135deg, #d1f2eb 0%, #a3e4d7 100%);
    color: #155724;
}

.alert-error[b-yj230ribn4] {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
    color: #721c24;
}

.alert-content[b-yj230ribn4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-icon[b-yj230ribn4] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.alert-message[b-yj230ribn4] {
    flex: 1;
    font-weight: 500;
}

.alert-close[b-yj230ribn4] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    padding: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .alert-close:hover[b-yj230ribn4] {
        opacity: 1;
    }

@keyframes slideIn-b-yj230ribn4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation Tabs */
.settings-navigation[b-yj230ribn4] {
    margin-bottom: 2rem;
}

.nav-tabs[b-yj230ribn4] {
    display: flex;
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 0.5rem;
    gap: 0.25rem;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav-tab[b-yj230ribn4] {
    flex: 1;
    min-width: 200px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

    .nav-tab:hover[b-yj230ribn4] {
        background: #f8f9fa;
    }

    .nav-tab.active[b-yj230ribn4] {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }

        .nav-tab.active .nav-icon[b-yj230ribn4] {
            color: white;
        }

.nav-icon[b-yj230ribn4] {
    font-size: 1.25rem;
    color: #007bff;
    margin-bottom: 0.5rem;
    display: block;
}

.nav-label[b-yj230ribn4] {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.nav-description[b-yj230ribn4] {
    font-size: 0.8rem;
    opacity: 0.8;
    line-height: 1.3;
}

/* Settings Content */
.settings-content[b-yj230ribn4] {
    background: white;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tab-content[b-yj230ribn4] {
    padding: 2rem;
}

.tab-header[b-yj230ribn4] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.tab-title[b-yj230ribn4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.75rem;
}

.tab-description[b-yj230ribn4] {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

/* Permissions Grid */
.permissions-grid[b-yj230ribn4] {
    display: grid;
    gap: 2rem;
}

.permission-group[b-yj230ribn4] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

    .permission-group:hover[b-yj230ribn4] {
        border-color: #dee2e6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.group-header[b-yj230ribn4] {
    margin-bottom: 1.25rem;
}

.group-title[b-yj230ribn4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.group-icon[b-yj230ribn4] {
    color: #007bff;
    font-size: 1rem;
}

.group-description[b-yj230ribn4] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

.permission-list[b-yj230ribn4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.permission-item[b-yj230ribn4] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 140px;
}

    .permission-item:hover[b-yj230ribn4] {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
    }

    .permission-item.checked[b-yj230ribn4] {
        border-color: #28a745;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    }

    .permission-item.disabled[b-yj230ribn4] {
        opacity: 0.7;
        cursor: not-allowed;
        background: #f1f3f4;
    }

.permission-label[b-yj230ribn4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    width: 100%;
}

    .permission-label input[type="checkbox"][b-yj230ribn4] {
        display: none;
    }

.permission-checkbox[b-yj230ribn4] {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.permission-item.checked .permission-checkbox[b-yj230ribn4] {
    background: #28a745;
    border-color: #28a745;
}

.permission-checkbox .checkmark[b-yj230ribn4] {
    color: white;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.permission-item.checked .checkmark[b-yj230ribn4] {
    opacity: 1;
}

.role-info[b-yj230ribn4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.role-badge[b-yj230ribn4] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .role-badge.role-admin[b-yj230ribn4] {
        background: #dc3545;
        color: white;
    }

    .role-badge.role-manager[b-yj230ribn4] {
        background: #fd7e14;
        color: white;
    }

    .role-badge.role-staff[b-yj230ribn4] {
        background: #007bff;
        color: white;
    }

    .role-badge.role-volunteer[b-yj230ribn4] {
        background: #28a745;
        color: white;
    }

    .role-badge.role-trainer[b-yj230ribn4] {
        background: #6f42c1;
        color: white;
    }

.always-enabled[b-yj230ribn4] {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

/* Form Sections */
.settings-form[b-yj230ribn4] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section[b-yj230ribn4] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
}

.section-title[b-yj230ribn4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .section-title .bi[b-yj230ribn4] {
        color: #007bff;
    }

.section-description[b-yj230ribn4] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 1.5rem;
}

.form-row[b-yj230ribn4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group[b-yj230ribn4] {
    display: flex;
    flex-direction: column;
}

.form-label[b-yj230ribn4] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.label-helper[b-yj230ribn4] {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 400;
}

.input-group[b-yj230ribn4] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control[b-yj230ribn4] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus[b-yj230ribn4] {
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        outline: none;
    }

.input-suffix[b-yj230ribn4] {
    position: absolute;
    right: 0.75rem;
    font-size: 0.85rem;
    color: #6c757d;
    pointer-events: none;
    background: white;
    padding: 0 0.25rem;
}

.form-help[b-yj230ribn4] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Checkbox Sections */
.checkbox-section[b-yj230ribn4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox-group[b-yj230ribn4] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

    .checkbox-group:hover[b-yj230ribn4] {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
    }

.checkbox-label[b-yj230ribn4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    margin: 0;
}

    .checkbox-label input[type="checkbox"][b-yj230ribn4] {
        display: none;
    }

.checkbox-custom[b-yj230ribn4] {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom[b-yj230ribn4] {
    background: #007bff;
    border-color: #007bff;
}

.checkbox-custom .checkmark[b-yj230ribn4] {
    color: white;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom .checkmark[b-yj230ribn4] {
    opacity: 1;
}

.checkbox-content[b-yj230ribn4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-title[b-yj230ribn4] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
}

.checkbox-description[b-yj230ribn4] {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* Info Cards */
.info-card[b-yj230ribn4] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-header[b-yj230ribn4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1565c0;
    margin-bottom: 0.5rem;
}

.info-text[b-yj230ribn4] {
    font-size: 0.9rem;
    color: #1976d2;
    margin: 0;
    line-height: 1.5;
}

/* Buttons */
.btn[b-yj230ribn4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

.btn-primary[b-yj230ribn4] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-color: #007bff;
}

    .btn-primary:hover:not(:disabled)[b-yj230ribn4] {
        background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
        border-color: #0056b3;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

.btn-outline-secondary[b-yj230ribn4] {
    background: white;
    color: #6c757d;
    border-color: #e3e6ea;
}

    .btn-outline-secondary:hover:not(:disabled)[b-yj230ribn4] {
        background: #f8f9fa;
        border-color: #d1d5da;
        color: #495057;
    }

.btn-spinner[b-yj230ribn4] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-yj230ribn4 1s linear infinite;
}

/* Footer */
.settings-footer[b-yj230ribn4] {
    background: #f8f9fa;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.footer-info[b-yj230ribn4] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.info-item[b-yj230ribn4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
}

    .info-item .bi[b-yj230ribn4] {
        color: #007bff;
    }

.footer-actions[b-yj230ribn4] {
    display: flex;
    gap: 1rem;
}

/* Visibility Selector Styles */
.visibility-selector[b-yj230ribn4] {
    margin-bottom: 2rem;
}

.visibility-options[b-yj230ribn4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.visibility-option[b-yj230ribn4] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .visibility-option:hover[b-yj230ribn4] {
        border-color: #007bff;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
        transform: translateY(-1px);
    }

    .visibility-option.selected[b-yj230ribn4] {
        border-color: #007bff;
        background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

.option-header[b-yj230ribn4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.option-icon[b-yj230ribn4] {
    font-size: 1.5rem;
    color: #007bff;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.option-content[b-yj230ribn4] {
    flex: 1;
}

.option-title[b-yj230ribn4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 0.5rem 0;
}

.option-description[b-yj230ribn4] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

.option-radio[b-yj230ribn4] {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

    .option-radio.selected[b-yj230ribn4] {
        border-color: #007bff;
        background: #007bff;
    }

.radio-dot[b-yj230ribn4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.option-radio.selected .radio-dot[b-yj230ribn4] {
    opacity: 1;
}

.option-details[b-yj230ribn4] {
    margin-left: 2.5rem;
}

.option-features[b-yj230ribn4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .option-features li[b-yj230ribn4] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: #495057;
    }

        .option-features li .bi[b-yj230ribn4] {
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .option-features li .bi-check[b-yj230ribn4] {
            color: #28a745;
        }

        .option-features li .bi-x[b-yj230ribn4] {
            color: #6c757d;
        }

        .option-features li .bi-shield-check[b-yj230ribn4] {
            color: #ffc107;
        }

        .option-features li .bi-person-plus[b-yj230ribn4] {
            color: #007bff;
        }

.text-muted[b-yj230ribn4] {
    color: #6c757d !important;
}

/* Visibility Change Notice */
.visibility-change-notice[b-yj230ribn4] {
    background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    animation: slideIn-b-yj230ribn4 0.3s ease;
}

.notice-content[b-yj230ribn4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.notice-icon[b-yj230ribn4] {
    color: #856404;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.notice-text[b-yj230ribn4] {
    flex: 1;
}

    .notice-text strong[b-yj230ribn4] {
        color: #856404;
        font-size: 0.9rem;
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
    }

    .notice-text p[b-yj230ribn4] {
        color: #856404;
        font-size: 0.85rem;
        margin: 0;
        line-height: 1.4;
    }

@keyframes slideIn-b-yj230ribn4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Settings Change Notice - Generic */
.settings-change-notice[b-yj230ribn4] {
    background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    animation: slideIn-b-yj230ribn4 0.3s ease;
}

    .settings-change-notice .notice-content[b-yj230ribn4] {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .settings-change-notice .notice-icon[b-yj230ribn4] {
        color: #856404;
        font-size: 1.1rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    .settings-change-notice .notice-text[b-yj230ribn4] {
        flex: 1;
    }

        .settings-change-notice .notice-text strong[b-yj230ribn4] {
            color: #856404;
            font-size: 0.9rem;
            font-weight: 600;
            display: block;
            margin-bottom: 0.25rem;
        }

        .settings-change-notice .notice-text p[b-yj230ribn4] {
            color: #856404;
            font-size: 0.85rem;
            margin: 0;
            line-height: 1.4;
        }

/* Responsive Design for Settings Change Notices */
@@media (max-width: 768px) {
    .settings-change-notice[b-yj230ribn4] {
        padding: 0.75rem;
        margin-top: 1rem;
    }

        .settings-change-notice .notice-text strong[b-yj230ribn4] {
            font-size: 0.85rem;
        }

        .settings-change-notice .notice-text p[b-yj230ribn4] {
            font-size: 0.8rem;
        }
}

/* Responsive Design */
@@media (max-width: 768px) {
    .organization-settings[b-yj230ribn4] {
        padding: 0 1rem;
    }

    .nav-tabs[b-yj230ribn4] {
        flex-direction: column;
        padding: 0.75rem;
    }

    .nav-tab[b-yj230ribn4] {
        min-width: auto;
        padding: 0.75rem;
    }

    .tab-content[b-yj230ribn4] {
        padding: 1.5rem;
    }

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

    .permission-list[b-yj230ribn4] {
        flex-direction: column;
    }

    .permission-item[b-yj230ribn4] {
        min-width: auto;
    }

    .settings-footer[b-yj230ribn4] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-info[b-yj230ribn4] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-actions[b-yj230ribn4] {
        width: 100%;
        justify-content: center;
    }

    .visibility-option[b-yj230ribn4] {
        padding: 1rem;
    }

    .option-header[b-yj230ribn4] {
        gap: 0.75rem;
    }

    .option-icon[b-yj230ribn4] {
        font-size: 1.25rem;
    }

    .option-title[b-yj230ribn4] {
        font-size: 1rem;
    }

    .option-description[b-yj230ribn4] {
        font-size: 0.85rem;
    }

    .option-details[b-yj230ribn4] {
        margin-left: 2rem;
    }

    .option-features li[b-yj230ribn4] {
        font-size: 0.8rem;
    }

    .visibility-change-notice[b-yj230ribn4] {
        padding: 0.75rem;
    }

    .notice-text strong[b-yj230ribn4] {
        font-size: 0.85rem;
    }

    .notice-text p[b-yj230ribn4] {
        font-size: 0.8rem;
    }
}

@@media (max-width: 480px) {
    .btn[b-yj230ribn4] {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }

    .tab-content[b-yj230ribn4] {
        padding: 1rem;
    }

    .permission-group[b-yj230ribn4] {
        padding: 1rem;
    }

    .form-section[b-yj230ribn4] {
        padding: 1rem;
    }
}
/* _content/Havto.Web/Components/Shared/ProfileManagementComponent.razor.rz.scp.css */
/* Profile Management Component Styles */
.profile-management[b-p598ye1lug] {
    .profile-loading

{
    .loading-spinner-container

{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    .loading-spinner

{
    width: 40px;
    height: 40px;
    border: 4px solid var(--mud-palette-primary-lighten);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 50%;
    animation: spin-b-p598ye1lug 1s linear infinite;
    margin-right: 1rem;
}

.loading-content[b-p598ye1lug] {
    h3

{
    margin: 0 0 0.5rem 0;
    color: var(--mud-palette-text-primary);
}

p[b-p598ye1lug] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}
}
}
}

.alert[b-p598ye1lug] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid;
    &.alert-success

{
    background-color: var(--mud-palette-success-lighten);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-darken);
}

&.alert-error[b-p598ye1lug] {
    background-color: var(--mud-palette-error-lighten);
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error-darken);
}

.alert-content[b-p598ye1lug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .alert-icon

{
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.alert-message[b-p598ye1lug] {
    flex: 1;
}

.alert-close[b-p598ye1lug] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 1rem;
    &:hover

{
    opacity: 0.7;
}
}
}
}

.profile-navigation[b-p598ye1lug] {
    margin-bottom: 2rem;
    .nav-tabs

{
    display: flex;
    gap: 0.5rem;
    padding: 0;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    .nav-tab

{
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    position: relative;
    .nav-icon

{
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.nav-label[b-p598ye1lug] {
    font-weight: 500;
}

.nav-count[b-p598ye1lug] {
    margin-left: 0.5rem;
    opacity: 0.7;
    font-size: 0.9rem;
}

.nav-description[b-p598ye1lug] {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.nav-badge[b-p598ye1lug] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--mud-palette-error);
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

&:hover[b-p598ye1lug] {
    background-color: var(--mud-palette-action-hover);
}

&.active[b-p598ye1lug] {
    background-color: var(--mud-palette-primary);
    color: white;
    .nav-badge

{
    background: white;
    color: var(--mud-palette-primary);
}
}
}
}
}

.tab-content[b-p598ye1lug] {
    .tab-header

{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    .tab-title

{
    margin: 0 0 0.5rem 0;
    color: var(--mud-palette-text-primary);
}

.tab-description[b-p598ye1lug] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

.tab-actions[b-p598ye1lug] {
    display: flex;
    gap: 1rem;
    align-items: center;
    .search-container

{
    position: relative;
    .search-input

{
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    min-width: 250px;
    &:focus

{
    outline: none;
    border-color: var(--mud-palette-primary);
}
}

.search-icon[b-p598ye1lug] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mud-palette-text-secondary);
}
}

.view-controls[b-p598ye1lug] {
    display: flex;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    .view-btn

{
    background: white;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    &:hover

{
    background-color: var(--mud-palette-action-hover);
}

&.active[b-p598ye1lug] {
    background-color: var(--mud-palette-primary);
    color: white;
}

&:not(:last-child)[b-p598ye1lug] {
    border-right: 1px solid var(--mud-palette-lines-default);
}
}
}
}
}

.empty-state[b-p598ye1lug] {
    text-align: center;
    padding: 3rem 2rem;
    .empty-icon

{
    font-size: 4rem;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 1rem;
}

h4[b-p598ye1lug] {
    margin: 0 0 0.5rem 0;
    color: var(--mud-palette-text-primary);
}

p[b-p598ye1lug] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}
}

.members-grid[b-p598ye1lug] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    .member-card

{
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    &:hover

{
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

&.mobile-only[b-p598ye1lug] {
    border-left: 4px solid var(--mud-palette-warning);
}

.member-avatar[b-p598ye1lug] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    img

{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-initials[b-p598ye1lug] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
}

.member-type-badge[b-p598ye1lug] {
    position: absolute;
    bottom: 0;
    right: calc(50% - 50px);
    background: var(--mud-palette-warning);
    color: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 2px solid white;
}
}

.member-info[b-p598ye1lug] {
    text-align: center;
    margin-bottom: 1rem;
    .member-name

{
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.member-contact[b-p598ye1lug] {
    margin-bottom: 1rem;
    .contact-item

{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    .bi

{
    margin-right: 0.5rem;
}
}
}

.member-roles[b-p598ye1lug] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin-bottom: 1rem;
    .role-badge

{
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    &.role-admin

{
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error-darken);
}

&.role-manager[b-p598ye1lug] {
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning-darken);
}

&.role-staff[b-p598ye1lug] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
}

&.role-volunteer[b-p598ye1lug] {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success-darken);
}

&.role-trainer[b-p598ye1lug] {
    background: var(--mud-palette-secondary-lighten);
    color: var(--mud-palette-secondary-darken);
}
}
}

.member-stats[b-p598ye1lug] {
    display: flex;
    justify-content: space-between;
    .stat-item

{
    text-align: center;
    .stat-label

{
    display: block;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.stat-value[b-p598ye1lug] {
    display: block;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
}
}
}

.member-actions[b-p598ye1lug] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    .btn

{
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    &.btn-edit

{
    background: var(--mud-palette-info);
    color: white;
    &:hover

{
    background: var(--mud-palette-info-darken);
}
}

&.btn-remove[b-p598ye1lug] {
    background: var(--mud-palette-error);
    color: white;
    &:hover

{
    background: var(--mud-palette-error-darken);
}
}
}
}
}
}
}
}

/* Mobile-specific overrides */
@@media (max-width: 768px) {
    .profile-management[b-p598ye1lug] {
        .profile-navigation .nav-tabs

{
    flex-direction: column;
    .nav-tab

{
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
}

.tab-content .tab-header[b-p598ye1lug] {
    flex-direction: column;
    gap: 1rem;
    .tab-actions

{
    width: 100%;
    flex-direction: column;
    .search-container .search-input

{
    min-width: 100%;
}
}
}

.members-grid[b-p598ye1lug] {
    grid-template-columns: 1fr;
}
}
}

@keyframes spin-b-p598ye1lug {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}