/* /Components/Admin/CreatePollWorkerModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-ti8mgsgeic] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

/* Modal Container */
.modal-container[b-ti8mgsgeic] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1100px;
    max-height: 95vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal Header */
.modal-header[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: white;
    border-bottom: none;
}

.modal-header h3[b-ti8mgsgeic] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h3 .material-icons[b-ti8mgsgeic] {
    font-size: 1.5rem;
}

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

.btn-close-modal:hover[b-ti8mgsgeic] {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal Content */
.modal-content[b-ti8mgsgeic] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #f8f9fa;
}

/* Loading Overlay */
.loading-overlay[b-ti8mgsgeic] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.loading-overlay p[b-ti8mgsgeic] {
    color: #666;
    margin: 0;
}

/* Success Container */
.success-container[b-ti8mgsgeic] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.success-container .material-icons[b-ti8mgsgeic] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-container h4[b-ti8mgsgeic] {
    margin: 0 0 0.5rem 0;
    color: #2e7d32;
}

.success-container p[b-ti8mgsgeic] {
    color: #666;
    margin-bottom: 1.5rem;
}

.success-actions[b-ti8mgsgeic] {
    display: flex;
    gap: 1rem;
}

/* Search Panel */
.search-panel h4[b-ti8mgsgeic] {
    margin: 0 0 0.25rem 0;
    color: #333;
}

.search-panel > p[b-ti8mgsgeic] {
    margin-bottom: 1.5rem;
}

.search-form[b-ti8mgsgeic] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.search-form .form-group[b-ti8mgsgeic] {
    margin-bottom: 1rem;
}

.search-form label[b-ti8mgsgeic] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #555;
}

.search-form .form-control[b-ti8mgsgeic] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-form .form-control:focus[b-ti8mgsgeic] {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
    outline: none;
}

.search-actions[b-ti8mgsgeic] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.search-actions .btn[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Search Results */
.search-results[b-ti8mgsgeic] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-results h5[b-ti8mgsgeic] {
    margin: 0 0 1rem 0;
    color: #333;
}

.no-results[b-ti8mgsgeic] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #666;
}

.no-results .material-icons[b-ti8mgsgeic] {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 0.5rem;
}

.results-grid[b-ti8mgsgeic] {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}

.results-grid table[b-ti8mgsgeic] {
    margin-bottom: 0;
}

.results-grid thead[b-ti8mgsgeic] {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
}

.results-grid th[b-ti8mgsgeic] {
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem;
}

.results-grid td[b-ti8mgsgeic] {
    padding: 0.75rem;
    vertical-align: middle;
}

.results-grid tr.has-record[b-ti8mgsgeic] {
    background-color: #f0f7ff;
}

.results-grid .badge[b-ti8mgsgeic] {
    font-size: 0.75rem;
}

.search-results .alert[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Creation Panel */
.creation-panel[b-ti8mgsgeic] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.selected-voter-info h5[b-ti8mgsgeic] {
    margin: 0 0 0.75rem 0;
    color: #333;
}

.voter-card[b-ti8mgsgeic] {
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.voter-details[b-ti8mgsgeic] {
    display: flex;
    flex-direction: column;
}

.voter-details strong[b-ti8mgsgeic] {
    font-size: 1.1rem;
    color: #333;
}

.voter-details .vsn[b-ti8mgsgeic] {
    font-size: 0.85rem;
    color: #666;
}

.voter-address[b-ti8mgsgeic] {
    flex: 1;
    color: #555;
    font-size: 0.9rem;
}

.voter-card .btn[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Creation Form */
.creation-form[b-ti8mgsgeic] {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.creation-form h5[b-ti8mgsgeic] {
    margin: 0 0 1rem 0;
    color: #333;
}

.creation-form .form-group[b-ti8mgsgeic] {
    margin-bottom: 1rem;
}

.creation-form label[b-ti8mgsgeic] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #555;
}

.creation-form .form-control[b-ti8mgsgeic] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.creation-form .form-control:focus[b-ti8mgsgeic] {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
    outline: none;
}

.creation-form small[b-ti8mgsgeic] {
    display: block;
    margin-top: 0.25rem;
}

.creation-form .form-check[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.creation-form .form-check-input[b-ti8mgsgeic] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.creation-form .alert[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.creation-actions[b-ti8mgsgeic] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.creation-actions .btn[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Application Upload Section */
.application-upload-section[b-ti8mgsgeic] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

.application-upload-section h6[b-ti8mgsgeic] {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-weight: 600;
}

.upload-area[b-ti8mgsgeic] {
    margin-top: 0.5rem;
}

.upload-area .form-control[b-ti8mgsgeic] {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
}

.upload-area .form-control:focus[b-ti8mgsgeic] {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.selected-file[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-file .badge[b-ti8mgsgeic] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.selected-file .btn-link[b-ti8mgsgeic] {
    padding: 0.25rem;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-ti8mgsgeic] {
        max-height: 95vh;
        margin: 0.5rem;
    }

    .modal-content[b-ti8mgsgeic] {
        padding: 1rem;
    }

    .voter-card[b-ti8mgsgeic] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .creation-actions[b-ti8mgsgeic] {
        flex-direction: column;
    }

    .creation-actions .btn[b-ti8mgsgeic] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Admin/PathwayPreviewModal.razor.rz.scp.css */
/* Preview Modal Overlay */
.preview-modal-overlay[b-vdg8o0s0ln] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

/* Modal Container */
.preview-modal-container[b-vdg8o0s0ln] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Header */
.preview-modal-header[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: white;
    flex-shrink: 0;
}

.preview-mode-badge[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.preview-mode-badge i[b-vdg8o0s0ln] {
    font-size: 0.9rem;
}

.preview-modal-header h3[b-vdg8o0s0ln] {
    margin: 0;
    flex-grow: 1;
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-controls-inline[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.progress-presets[b-vdg8o0s0ln] {
    display: flex;
    gap: 0.25rem;
}

.preset-btn[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    transition: all 0.2s ease;
    min-width: 40px;
}

.preset-btn:hover[b-vdg8o0s0ln] {
    background: rgba(255, 255, 255, 0.2);
}

.preset-btn.active[b-vdg8o0s0ln] {
    background: white;
    color: #1976d2;
    border-color: white;
}

.btn-close-preview[b-vdg8o0s0ln] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.btn-close-preview:hover[b-vdg8o0s0ln] {
    background: rgba(255, 255, 255, 0.3);
}

/* Content Wrapper */
.preview-content-wrapper[b-vdg8o0s0ln] {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.loading-overlay[b-vdg8o0s0ln],
.error-container[b-vdg8o0s0ln],
.no-step-selected[b-vdg8o0s0ln] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    background: #f5f5f5;
}

.loading-overlay p[b-vdg8o0s0ln],
.error-container p[b-vdg8o0s0ln],
.no-step-selected p[b-vdg8o0s0ln] {
    color: #666;
    max-width: 400px;
    margin: 0;
}

.error-container i[b-vdg8o0s0ln],
.no-step-selected i[b-vdg8o0s0ln] {
    font-size: 4rem;
    color: #9e9e9e;
}

/* Sidebar */
.preview-sidebar[b-vdg8o0s0ln] {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
}

.sidebar-header[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: white;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.close-sidebar-btn[b-vdg8o0s0ln] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
}

.close-sidebar-btn:hover[b-vdg8o0s0ln] {
    background: #e0e0e0;
}

.rail-header-progress[b-vdg8o0s0ln] {
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.overall-progress[b-vdg8o0s0ln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-bar[b-vdg8o0s0ln] {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-vdg8o0s0ln] {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-vdg8o0s0ln] {
    font-size: 0.75rem;
    color: #666;
}

.rail-content[b-vdg8o0s0ln] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.milestone-item[b-vdg8o0s0ln] {
    margin-bottom: 0.25rem;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s;
}

.milestone-item:hover[b-vdg8o0s0ln] {
    background: #e8e8e8;
}

.milestone-item.current[b-vdg8o0s0ln] {
    background: #e3f2fd;
}

.milestone-header[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.5rem;
}

.milestone-icon[b-vdg8o0s0ln] {
    flex-shrink: 0;
}

.milestone-icon i[b-vdg8o0s0ln] {
    font-size: 1.25rem;
}

.milestone-item.completed .milestone-icon i[b-vdg8o0s0ln] {
    color: #4caf50;
}

.milestone-item.in-progress .milestone-icon i[b-vdg8o0s0ln] {
    color: #2196f3;
}

.milestone-item.pending .milestone-icon i[b-vdg8o0s0ln] {
    color: #9e9e9e;
}

.milestone-info[b-vdg8o0s0ln] {
    flex: 1;
    min-width: 0;
}

.milestone-phase[b-vdg8o0s0ln] {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.milestone-title[b-vdg8o0s0ln] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milestone-expand i[b-vdg8o0s0ln] {
    color: #666;
    font-size: 1.25rem;
}

.steps-list[b-vdg8o0s0ln] {
    padding: 0 0.5rem 0.5rem 2.5rem;
}

.step-item[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    gap: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.step-item:hover[b-vdg8o0s0ln] {
    background: rgba(0, 0, 0, 0.05);
}

.step-item.current[b-vdg8o0s0ln] {
    background: #bbdefb;
}

.step-icon[b-vdg8o0s0ln] {
    flex-shrink: 0;
}

.step-icon i[b-vdg8o0s0ln] {
    font-size: 1rem;
}

.step-item.completed .step-icon i[b-vdg8o0s0ln] {
    color: #4caf50;
}

.step-item.current .step-icon i[b-vdg8o0s0ln] {
    color: #2196f3;
}

.step-item.pending .step-icon i[b-vdg8o0s0ln] {
    color: #bdbdbd;
    font-size: 0.5rem;
}

.step-title[b-vdg8o0s0ln] {
    flex: 1;
    font-size: 0.75rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-item.current .step-title[b-vdg8o0s0ln] {
    font-weight: 500;
    color: #1565c0;
}

.optional-badge[b-vdg8o0s0ln] {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    background: #fff3e0;
    color: #e65100;
    border-radius: 3px;
    flex-shrink: 0;
}

.rail-footer[b-vdg8o0s0ln] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e0e0e0;
    background: white;
}

.preview-info-small[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #666;
}

.preview-info-small i[b-vdg8o0s0ln] {
    font-size: 1rem;
    color: #1976d2;
}

/* Sidebar Overlay */
.sidebar-overlay[b-vdg8o0s0ln] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Main Step Content */
.step-main-content[b-vdg8o0s0ln] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f5f5f5;
}

.step-header[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.step-header-left[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.menu-toggle-btn[b-vdg8o0s0ln] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
}

.menu-toggle-btn:hover[b-vdg8o0s0ln] {
    background: #e0e0e0;
}

.step-breadcrumb[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #666;
    min-width: 0;
}

.step-breadcrumb .milestone-name[b-vdg8o0s0ln] {
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-breadcrumb .step-name[b-vdg8o0s0ln] {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-breadcrumb i[b-vdg8o0s0ln] {
    font-size: 1rem;
    color: #ccc;
    flex-shrink: 0;
}

.step-progress-indicator[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #666;
    flex-shrink: 0;
}

/* Step Content Area */
.step-content-area[b-vdg8o0s0ln] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.step-info-content[b-vdg8o0s0ln] {
    max-width: 700px;
    margin: 0 auto;
}

.step-title-section[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.step-title-section h2[b-vdg8o0s0ln] {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.step-status[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.step-status.completed[b-vdg8o0s0ln] {
    background: #e8f5e9;
    color: #2e7d32;
}

.step-status.auto-track[b-vdg8o0s0ln] {
    background: #e3f2fd;
    color: #1565c0;
}

.step-status i[b-vdg8o0s0ln] {
    font-size: 1rem;
}

.step-description[b-vdg8o0s0ln] {
    margin-bottom: 1.5rem;
}

.step-description p[b-vdg8o0s0ln] {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Embedded Component Preview */
.embedded-component-preview[b-vdg8o0s0ln] {
    margin: 1.5rem 0;
}

.component-placeholder[b-vdg8o0s0ln] {
    background: #f0f4f8;
    border: 2px dashed #90caf9;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.component-placeholder i[b-vdg8o0s0ln] {
    font-size: 3rem;
    color: #1976d2;
    margin-bottom: 1rem;
}

.component-placeholder h4[b-vdg8o0s0ln] {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.component-placeholder p[b-vdg8o0s0ln] {
    margin: 0;
    font-size: 0.9rem;
}

/* Resources */
.step-resources[b-vdg8o0s0ln] {
    margin: 1.5rem 0;
}

.step-resources h5[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.step-resources h5 i[b-vdg8o0s0ln] {
    color: #666;
}

.resources-grid[b-vdg8o0s0ln] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-card[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.resource-icon[b-vdg8o0s0ln] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
}

.resource-icon i[b-vdg8o0s0ln] {
    color: #666;
}

.resource-info[b-vdg8o0s0ln] {
    flex: 1;
    min-width: 0;
}

.resource-title[b-vdg8o0s0ln] {
    font-size: 0.9rem;
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-action[b-vdg8o0s0ln] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: not-allowed;
    color: #999;
    border-radius: 4px;
}

/* Action Links */
.step-action-link[b-vdg8o0s0ln],
.step-complete-action[b-vdg8o0s0ln] {
    margin: 1.5rem 0;
}

.step-complete-action .btn[b-vdg8o0s0ln] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-note[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #666;
}

.preview-note i[b-vdg8o0s0ln] {
    font-size: 1rem;
    color: #1976d2;
}

/* Step Footer */
.step-footer[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: white;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.footer-left[b-vdg8o0s0ln],
.footer-right[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-center[b-vdg8o0s0ln] {
    font-size: 0.85rem;
    color: #666;
}

.step-footer .btn[b-vdg8o0s0ln] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.step-footer .btn i[b-vdg8o0s0ln] {
    font-size: 1.1rem;
}

.pathway-end-badge[b-vdg8o0s0ln] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

.pathway-end-badge i[b-vdg8o0s0ln] {
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .preview-modal-container[b-vdg8o0s0ln] {
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .preview-modal-header[b-vdg8o0s0ln] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .preview-modal-header h3[b-vdg8o0s0ln] {
        order: 1;
        width: 100%;
        font-size: 1rem;
    }

    .preview-mode-badge[b-vdg8o0s0ln] {
        order: 0;
    }

    .preview-controls-inline[b-vdg8o0s0ln] {
        order: 2;
        flex: 1;
    }

    .btn-close-preview[b-vdg8o0s0ln] {
        order: 3;
    }

    .preset-btn[b-vdg8o0s0ln] {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
        min-width: 32px;
    }

    .preview-sidebar[b-vdg8o0s0ln] {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 20;
        transform: translateX(-100%);
    }

    .preview-sidebar.open[b-vdg8o0s0ln] {
        transform: translateX(0);
    }

    .step-header[b-vdg8o0s0ln] {
        padding: 0.5rem 1rem;
    }

    .step-content-area[b-vdg8o0s0ln] {
        padding: 1rem;
    }

    .step-title-section h2[b-vdg8o0s0ln] {
        font-size: 1.25rem;
    }

    .step-footer[b-vdg8o0s0ln] {
        padding: 0.5rem 1rem;
    }

    .btn-text[b-vdg8o0s0ln] {
        display: none;
    }
}

@media (min-width: 769px) {
    .menu-toggle-btn[b-vdg8o0s0ln] {
        display: none;
    }
}
/* /Components/Admin/Settings/AdminSettings.razor.rz.scp.css */
/* Admin Settings Container */
.admin-settings-container[b-pdgo2uh25e] {
    min-height: 100vh;
    background: #f5f5f5;
}

.loading-container[b-pdgo2uh25e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 50vh;
}

/* Header */
.page-header[b-pdgo2uh25e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content[b-pdgo2uh25e] {
    flex: 1;
}

.page-header h1[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.page-header h1 i[b-pdgo2uh25e] {
    color: #5c6bc0;
    font-size: 2rem;
}

.subtitle[b-pdgo2uh25e] {
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}

.header-actions[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions .btn[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-actions .btn i[b-pdgo2uh25e] {
    font-size: 1.25rem;
}

.search-box[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box:focus-within[b-pdgo2uh25e] {
    border-color: #5c6bc0;
    box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
}

.search-box i[b-pdgo2uh25e] {
    color: #9ca3af;
    margin-right: 0.5rem;
}

.search-box input[b-pdgo2uh25e] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: #374151;
    width: 200px;
}

.search-box input[b-pdgo2uh25e]::placeholder {
    color: #9ca3af;
}

.clear-search[b-pdgo2uh25e] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.clear-search:hover[b-pdgo2uh25e] {
    opacity: 1;
}

.header-actions .btn[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.header-actions .btn i[b-pdgo2uh25e] {
    font-size: 1.1rem;
}

/* Main Layout */
.admin-settings-layout[b-pdgo2uh25e] {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: calc(100vh - 120px);
}

/* Sidebar */
.settings-sidebar[b-pdgo2uh25e] {
    background: white;
    border-right: 1px solid #e0e0e0;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar-nav[b-pdgo2uh25e] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav li[b-pdgo2uh25e] {
    margin: 0;
}

.sidebar-nav li.sidebar-group-header[b-pdgo2uh25e] {
    padding: 0.5rem 1.25rem 0.25rem;
    margin-top: 0.5rem;
}

.sidebar-nav li.sidebar-group-header:first-child[b-pdgo2uh25e] {
    margin-top: 0;
}

.sidebar-nav li.sidebar-group-header span[b-pdgo2uh25e] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

.sidebar-nav li.sidebar-divider[b-pdgo2uh25e] {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 1.25rem;
}

.sidebar-nav li a[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-nav li a:hover[b-pdgo2uh25e] {
    background: #f5f5f5;
    color: #333;
}

.sidebar-nav li.active a[b-pdgo2uh25e] {
    background: linear-gradient(90deg, rgba(92, 107, 192, 0.1), transparent);
    color: #5c6bc0;
    border-left-color: #5c6bc0;
    font-weight: 600;
}

.sidebar-nav li a i[b-pdgo2uh25e] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.sidebar-nav li.active a i[b-pdgo2uh25e] {
    opacity: 1;
}

.nav-badge[b-pdgo2uh25e] {
    margin-left: auto;
    background: #5c6bc0;
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Main Content */
.settings-content[b-pdgo2uh25e] {
    background: #f5f5f5;
    min-height: 100%;
}

.unsaved-changes-banner[b-pdgo2uh25e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #ff9800, #ffa726);
    color: white;
    font-weight: 500;
}

.unsaved-changes-banner i[b-pdgo2uh25e] {
    font-size: 1.25rem;
}

.unsaved-changes-banner span[b-pdgo2uh25e] {
    flex: 1;
}

.banner-actions[b-pdgo2uh25e] {
    display: flex;
    gap: 0.5rem;
}

.section-container[b-pdgo2uh25e] {
    padding: 1.5rem;
}

.empty-section[b-pdgo2uh25e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #999;
    text-align: center;
}

.empty-section i[b-pdgo2uh25e] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-section p[b-pdgo2uh25e] {
    font-size: 1.1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .admin-settings-layout[b-pdgo2uh25e] {
        grid-template-columns: 1fr;
    }

    .settings-sidebar[b-pdgo2uh25e] {
        position: relative;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .sidebar-nav[b-pdgo2uh25e] {
        display: flex;
        flex-wrap: wrap;
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .sidebar-nav li.sidebar-group-header[b-pdgo2uh25e] {
        display: none;
    }

    .sidebar-nav li.sidebar-divider[b-pdgo2uh25e] {
        display: none;
    }

    .sidebar-nav li a[b-pdgo2uh25e] {
        padding: 0.5rem 1rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 4px;
    }

    .sidebar-nav li.active a[b-pdgo2uh25e] {
        background: rgba(92, 107, 192, 0.1);
        border-left: none;
        border-bottom-color: #5c6bc0;
    }
}

@media (max-width: 768px) {
    .admin-settings-header[b-pdgo2uh25e] {
        padding: 1rem;
    }

    .header-content[b-pdgo2uh25e] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-pdgo2uh25e] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-pdgo2uh25e] {
        width: 100%;
    }

    .search-box input[b-pdgo2uh25e] {
        width: 100%;
    }

    .section-container[b-pdgo2uh25e] {
        padding: 1rem;
    }
}
/* /Components/Admin/Settings/UserRoleAssignment.razor.rz.scp.css */
/* Role Assignment Page Styles */
.role-assignment-page[b-o8l1z65unn] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Page Header */
.page-header[b-o8l1z65unn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.header-content h1[b-o8l1z65unn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    color: #1e3a5f;
}

.header-content h1 i[b-o8l1z65unn] {
    font-size: 2rem;
}

.header-content .description[b-o8l1z65unn] {
    margin: 0;
    color: #666;
}

/* View Toggle */
.view-toggle[b-o8l1z65unn] {
    margin-bottom: 1.5rem;
}

.toggle-buttons[b-o8l1z65unn] {
    display: flex;
    gap: 0.5rem;
    background: #f5f5f5;
    padding: 0.25rem;
    border-radius: 8px;
    width: fit-content;
}

.toggle-btn[b-o8l1z65unn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.2s ease;
}

.toggle-btn:hover[b-o8l1z65unn] {
    background: rgba(255, 255, 255, 0.5);
}

.toggle-btn.active[b-o8l1z65unn] {
    background: white;
    color: #1e3a5f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-btn i[b-o8l1z65unn] {
    font-size: 1.25rem;
}

/* Loading Container */
.loading-container[b-o8l1z65unn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: #666;
}

/* Role Selector */
.role-selector[b-o8l1z65unn] {
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.role-selector .form-label[b-o8l1z65unn] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

/* Role Info Card */
.role-info-card[b-o8l1z65unn] {
    background: linear-gradient(135deg, #5c6bc0, #7986cb);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    margin-bottom: 1.5rem;
}

.role-details h4[b-o8l1z65unn] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.role-details .description[b-o8l1z65unn] {
    opacity: 0.9;
    margin-bottom: 1rem;
}

.role-meta[b-o8l1z65unn] {
    display: flex;
    gap: 1.5rem;
}

.meta-item[b-o8l1z65unn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.meta-item i[b-o8l1z65unn] {
    font-size: 1.1rem;
}

/* Workers Section */
.workers-section[b-o8l1z65unn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.section-header[b-o8l1z65unn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.section-header h5[b-o8l1z65unn] {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.section-actions[b-o8l1z65unn] {
    display: flex;
    gap: 0.5rem;
}

/* Workers Table */
.workers-table[b-o8l1z65unn] {
    overflow-x: auto;
}

.workers-table .table[b-o8l1z65unn] {
    margin: 0;
}

.workers-table th[b-o8l1z65unn] {
    background: #fafafa;
    font-weight: 600;
    color: #555;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.workers-table td[b-o8l1z65unn] {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.checkbox-col[b-o8l1z65unn] {
    width: 40px;
    text-align: center;
}

.worker-name[b-o8l1z65unn] {
    font-weight: 500;
    color: #333;
}

.worker-id[b-o8l1z65unn] {
    font-size: 0.8rem;
    color: #999;
}

.expired-row[b-o8l1z65unn] {
    background: #fff8f8;
}

.expiring-row[b-o8l1z65unn] {
    background: #fffde7;
}

.action-buttons[b-o8l1z65unn] {
    display: flex;
    gap: 0.25rem;
}

.action-buttons .btn[b-o8l1z65unn] {
    padding: 0.25rem 0.5rem;
}

.action-buttons .btn i[b-o8l1z65unn] {
    font-size: 1rem;
}

/* Status Badge */
.status-badge[b-o8l1z65unn] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-active[b-o8l1z65unn] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.status-pending[b-o8l1z65unn] {
    background: #fff3e0;
    color: #ef6c00;
}

.status-badge.status-inactive[b-o8l1z65unn] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-badge.status-unknown[b-o8l1z65unn] {
    background: #f5f5f5;
    color: #757575;
}

/* Empty State */
.empty-state[b-o8l1z65unn] {
    text-align: center;
    padding: 3rem;
    color: #999;
}

.empty-state i[b-o8l1z65unn] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-o8l1z65unn] {
    margin: 0;
    font-size: 1.1rem;
}

/* Search Section */
.search-section[b-o8l1z65unn] {
    margin-bottom: 1.5rem;
}

.search-box[b-o8l1z65unn] {
    position: relative;
    max-width: 400px;
}

.search-box i[b-o8l1z65unn] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.search-box input[b-o8l1z65unn] {
    padding-left: 2.75rem;
}

/* Workers Grid */
.workers-grid[b-o8l1z65unn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.worker-card[b-o8l1z65unn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.worker-header[b-o8l1z65unn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.worker-avatar[b-o8l1z65unn] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #5c6bc0, #7986cb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.worker-info[b-o8l1z65unn] {
    flex: 1;
}

.worker-info .worker-name[b-o8l1z65unn] {
    font-weight: 600;
    color: #333;
}

.worker-info .worker-id[b-o8l1z65unn] {
    font-size: 0.8rem;
    color: #999;
}

.worker-roles[b-o8l1z65unn] {
    padding: 1rem;
}

.roles-header[b-o8l1z65unn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

.roles-header .btn-link[b-o8l1z65unn] {
    padding: 0;
    font-size: 0.85rem;
}

.no-roles[b-o8l1z65unn] {
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
}

.role-tags[b-o8l1z65unn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-tag[b-o8l1z65unn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.role-tag.expired[b-o8l1z65unn] {
    background: #ffebee;
    color: #c62828;
}

.role-tag i[b-o8l1z65unn] {
    font-size: 0.9rem;
}

.more-results[b-o8l1z65unn] {
    text-align: center;
    padding: 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* Modal Styles */
.modal-backdrop[b-o8l1z65unn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal[b-o8l1z65unn] {
    z-index: 1050;
}

.modal-header i[b-o8l1z65unn] {
    margin-right: 0.5rem;
}

.modal-header.bg-danger[b-o8l1z65unn] {
    background: #dc3545;
    color: white;
}

/* Bulk Worker List */
.bulk-worker-list[b-o8l1z65unn] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.bulk-worker-item[b-o8l1z65unn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.bulk-worker-item:last-child[b-o8l1z65unn] {
    border-bottom: none;
}

.bulk-worker-item:hover:not(.disabled)[b-o8l1z65unn] {
    background: #f5f5f5;
}

.bulk-worker-item.selected[b-o8l1z65unn] {
    background: #e8f5e9;
}

.bulk-worker-item.disabled[b-o8l1z65unn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulk-worker-item .worker-name[b-o8l1z65unn] {
    flex: 1;
    font-weight: 500;
}

.bulk-worker-item .worker-id[b-o8l1z65unn] {
    color: #999;
    font-size: 0.85rem;
}

.bulk-worker-item .already-assigned[b-o8l1z65unn] {
    color: #4caf50;
    font-size: 0.8rem;
    font-style: italic;
}

.selection-summary[b-o8l1z65unn] {
    padding: 0.75rem;
    background: #e3f2fd;
    border-radius: 6px;
    text-align: center;
    color: #1565c0;
}

/* Button Styles */
.btn[b-o8l1z65unn] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn i[b-o8l1z65unn] {
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-o8l1z65unn] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .toggle-buttons[b-o8l1z65unn] {
        width: 100%;
    }
    
    .toggle-btn[b-o8l1z65unn] {
        flex: 1;
        justify-content: center;
    }
    
    .section-header[b-o8l1z65unn] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .workers-grid[b-o8l1z65unn] {
        grid-template-columns: 1fr;
    }
    
    .role-meta[b-o8l1z65unn] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Access Denied */
.access-denied-container[b-o8l1z65unn] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.access-denied-card[b-o8l1z65unn] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 400px;
}

.access-denied-card i[b-o8l1z65unn] {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.access-denied-card h2[b-o8l1z65unn] {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.access-denied-card p[b-o8l1z65unn] {
    margin: 0 0 1.5rem 0;
    color: #666;
}

.access-denied-card .btn i[b-o8l1z65unn] {
    font-size: 1.1rem;
    margin-right: 0.25rem;
}
/* /Components/Communications/CommunicationsDashboard.razor.rz.scp.css */
/* Communications Command Center — Sidebar Layout */

.comms-command-center[b-4yxonkq5dx] {
    min-height: calc(100vh - 120px);
}

.comms-layout[b-4yxonkq5dx] {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 120px);
}

/* === SIDEBAR === */

.comms-sidebar[b-4yxonkq5dx] {
    width: 220px;
    min-width: 220px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comms-new-message-btn[b-4yxonkq5dx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: #607D8B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.comms-new-message-btn:hover[b-4yxonkq5dx] {
    background: #455A64;
}

.comms-sidebar-divider[b-4yxonkq5dx] {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0 8px;
}

.comms-sidebar-item[b-4yxonkq5dx] {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}

.comms-sidebar-item:hover[b-4yxonkq5dx] {
    background: #f5f5f5;
    color: #333;
}

.comms-sidebar-item.active[b-4yxonkq5dx] {
    background: #ECEFF1;
    color: #455A64;
    font-weight: 600;
    border-left: 3px solid #607D8B;
    padding-left: 11px;
}

.comms-sidebar-item i[b-4yxonkq5dx] {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* === CONTENT AREA === */

.comms-content[b-4yxonkq5dx] {
    flex: 1;
    padding: 24px;
    background: #fafafa;
    overflow-y: auto;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
    .comms-layout[b-4yxonkq5dx] {
        flex-direction: column;
    }

    .comms-sidebar[b-4yxonkq5dx] {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        gap: 4px;
    }

    .comms-new-message-btn[b-4yxonkq5dx] {
        margin-bottom: 0;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }

    .comms-sidebar-divider[b-4yxonkq5dx] {
        width: 1px;
        height: auto;
        margin: 0 4px;
    }

    .comms-sidebar-item[b-4yxonkq5dx] {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }

    .comms-sidebar-item span[b-4yxonkq5dx] {
        display: inline;
    }

    .comms-sidebar-item.active[b-4yxonkq5dx] {
        border-left: none;
        border-bottom: 2px solid #607D8B;
        padding-left: 12px;
    }

    .comms-content[b-4yxonkq5dx] {
        padding: 16px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-wqys3sppvk] {
    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-wqys3sppvk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/ComponentShowcase.razor.rz.scp.css */
/* Component Showcase Styles */

.component-showcase[b-sl79vsht0a] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

/* Header */
.showcase-header[b-sl79vsht0a] {
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
    color: white;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.showcase-header h1[b-sl79vsht0a] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.showcase-header h1 i[b-sl79vsht0a] {
    font-size: 2rem;
    opacity: 0.9;
}

.showcase-header .subtitle[b-sl79vsht0a] {
    margin: 0.5rem 0 0 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

.demo-mode-indicator[b-sl79vsht0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.demo-mode-indicator i[b-sl79vsht0a] {
    font-size: 1.1rem;
}

/* Demo Message Banner */
.demo-message-banner[b-sl79vsht0a] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #2196f3;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1565c0;
}

.demo-message-banner i[b-sl79vsht0a] {
    font-size: 1.25rem;
}

.demo-message-banner span[b-sl79vsht0a] {
    flex: 1;
    font-weight: 500;
}

.btn-close-message[b-sl79vsht0a] {
    background: none;
    border: none;
    color: #1565c0;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-close-message:hover[b-sl79vsht0a] {
    background: rgba(21, 101, 192, 0.1);
}

/* Main Content Layout */
.showcase-content[b-sl79vsht0a] {
    display: flex;
    min-height: calc(100vh - 120px);
}

/* Sidebar */
.component-sidebar[b-sl79vsht0a] {
    width: 320px;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header[b-sl79vsht0a] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.sidebar-header h3[b-sl79vsht0a] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.component-count[b-sl79vsht0a] {
    font-size: 0.8rem;
    color: #666;
    background: #f5f5f5;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

/* Phase Groups */
.phase-group[b-sl79vsht0a] {
    border-bottom: 1px solid #f0f0f0;
}

.phase-header[b-sl79vsht0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #fafafa;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.phase-header i[b-sl79vsht0a] {
    font-size: 1rem;
    color: #888;
}

.phase-components[b-sl79vsht0a] {
    padding: 0.5rem;
}

/* Component Items */
.component-item[b-sl79vsht0a] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.component-item:hover[b-sl79vsht0a] {
    background: #f5f7fa;
}

.component-item.selected[b-sl79vsht0a] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.component-item.selected .component-icon[b-sl79vsht0a] {
    background: #1976d2;
    color: white;
}

.component-icon[b-sl79vsht0a] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.component-icon i[b-sl79vsht0a] {
    font-size: 1.25rem;
    color: #666;
}

.component-item.selected .component-icon i[b-sl79vsht0a] {
    color: white;
}

.component-info[b-sl79vsht0a] {
    flex: 1;
    min-width: 0;
}

.component-name[b-sl79vsht0a] {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.25rem;
}

.component-desc[b-sl79vsht0a] {
    display: block;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Preview Area */
.component-preview-area[b-sl79vsht0a] {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

/* No Selection State */
.no-selection[b-sl79vsht0a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: #666;
}

.no-selection i[b-sl79vsht0a] {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.no-selection h3[b-sl79vsht0a] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #333;
}

.no-selection p[b-sl79vsht0a] {
    margin: 0;
    font-size: 1rem;
}

/* Preview Container */
.preview-container[b-sl79vsht0a] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Preview Header */
.preview-header[b-sl79vsht0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.preview-title[b-sl79vsht0a] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.preview-title i[b-sl79vsht0a] {
    font-size: 2.5rem;
    color: #1976d2;
    background: #e3f2fd;
    padding: 0.75rem;
    border-radius: 12px;
}

.preview-title h2[b-sl79vsht0a] {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.preview-title p[b-sl79vsht0a] {
    margin: 0.25rem 0 0 0;
    color: #666;
    font-size: 0.95rem;
}

.preview-meta[b-sl79vsht0a] {
    display: flex;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.meta-item[b-sl79vsht0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.meta-item i[b-sl79vsht0a] {
    font-size: 1rem;
    color: #888;
}

/* Preview Content */
.preview-content[b-sl79vsht0a] {
    margin-bottom: 1.5rem;
}

.preview-frame[b-sl79vsht0a] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.frame-header[b-sl79vsht0a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%);
    border-bottom: 1px solid #e0e0e0;
}

.frame-title[b-sl79vsht0a] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
}

.frame-badge[b-sl79vsht0a] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1976d2;
    background: #e3f2fd;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.frame-body[b-sl79vsht0a] {
    padding: 1.5rem;
    min-height: 300px;
    background: #fafafa;
}

/* Component Not Available */
.component-not-available[b-sl79vsht0a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: #666;
}

.component-not-available i[b-sl79vsht0a] {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.component-not-available p[b-sl79vsht0a] {
    margin: 0;
    font-size: 1rem;
}

/* Preview Details */
.preview-details[b-sl79vsht0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.detail-card[b-sl79vsht0a] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.detail-card h4[b-sl79vsht0a] {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-card h4 i[b-sl79vsht0a] {
    font-size: 1.1rem;
    color: #1976d2;
}

.detail-card p[b-sl79vsht0a] {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.detail-card p.text-muted[b-sl79vsht0a] {
    color: #888;
    font-style: italic;
}

.detail-card ul[b-sl79vsht0a] {
    margin: 0;
    padding-left: 1.25rem;
}

.detail-card li[b-sl79vsht0a] {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.detail-card li:last-child[b-sl79vsht0a] {
    margin-bottom: 0;
}

/* Component Demo Placeholder */
.component-demo-placeholder[b-sl79vsht0a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%);
    border-radius: 12px;
    min-height: 300px;
}

.component-demo-placeholder .placeholder-icon[b-sl79vsht0a] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.component-demo-placeholder .placeholder-icon i[b-sl79vsht0a] {
    font-size: 2.5rem;
    color: #1976d2;
}

.component-demo-placeholder h4[b-sl79vsht0a] {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    color: #333;
}

.component-demo-placeholder p[b-sl79vsht0a] {
    margin: 0 0 1.5rem 0;
    color: #666;
    max-width: 500px;
    line-height: 1.6;
}

.component-demo-placeholder .placeholder-features[b-sl79vsht0a] {
    text-align: left;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.component-demo-placeholder .placeholder-features h5[b-sl79vsht0a] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: #333;
}

.component-demo-placeholder .placeholder-features ul[b-sl79vsht0a] {
    margin: 0;
    padding-left: 1.25rem;
}

.component-demo-placeholder .placeholder-features li[b-sl79vsht0a] {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .showcase-content[b-sl79vsht0a] {
        flex-direction: column;
    }
    
    .component-sidebar[b-sl79vsht0a] {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .phase-components[b-sl79vsht0a] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .component-item[b-sl79vsht0a] {
        width: auto;
        flex: 0 0 auto;
    }
    
    .component-desc[b-sl79vsht0a] {
        display: none;
    }
}

@media (max-width: 768px) {
    .showcase-header[b-sl79vsht0a] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .preview-meta[b-sl79vsht0a] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .preview-details[b-sl79vsht0a] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pollworker/ActivitiesPanel.razor.rz.scp.css */
/* Activities Panel Styles */
.activities-panel[b-umsaucwse0] {
    max-width: 100%;
}

.panel-header[b-umsaucwse0] {
    margin-bottom: 1.5rem;
}

.panel-header h4[b-umsaucwse0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

.panel-header h4 i[b-umsaucwse0] {
    font-size: 1.5rem;
}

.panel-header .description[b-umsaucwse0] {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Loading Container */
.loading-container[b-umsaucwse0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Activity Filters */
.activity-filters[b-umsaucwse0] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-umsaucwse0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.filter-group label[b-umsaucwse0] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

/* Activity Stats */
.activity-stats[b-umsaucwse0] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-item[b-umsaucwse0] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value[b-umsaucwse0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a5f;
}

.stat-label[b-umsaucwse0] {
    font-size: 0.8rem;
    color: #666;
}

/* Activity Timeline */
.activity-timeline[b-umsaucwse0] {
    margin-bottom: 1.5rem;
}

.no-activities[b-umsaucwse0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    text-align: center;
    color: #999;
}

.no-activities i[b-umsaucwse0] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* Date Group */
.date-group[b-umsaucwse0] {
    margin-bottom: 1.5rem;
}

.date-header[b-umsaucwse0] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.date-label[b-umsaucwse0] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

/* Activity Item */
.activity-item[b-umsaucwse0] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    border-left: 3px solid #607d8b;
    transition: all 0.2s;
}

.activity-item:hover[b-umsaucwse0] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Activity type colors */
.activity-item.login[b-umsaucwse0] { border-left-color: #4caf50; }
.activity-item.profile-update[b-umsaucwse0] { border-left-color: #2196f3; }
.activity-item.training[b-umsaucwse0] { border-left-color: #9c27b0; }
.activity-item.assignment[b-umsaucwse0] { border-left-color: #ff9800; }
.activity-item.availability[b-umsaucwse0] { border-left-color: #00bcd4; }
.activity-item.message[b-umsaucwse0] { border-left-color: #3f51b5; }
.activity-item.note[b-umsaucwse0] { border-left-color: #795548; }
.activity-item.phone-call[b-umsaucwse0] { border-left-color: #009688; }
.activity-item.follow-up[b-umsaucwse0] { border-left-color: #f44336; }
.activity-item.issue[b-umsaucwse0] { border-left-color: #e91e63; }
.activity-item.commendation[b-umsaucwse0] { border-left-color: #ffc107; }
.activity-item.system[b-umsaucwse0] { border-left-color: #9e9e9e; }

.activity-icon[b-umsaucwse0] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-icon i[b-umsaucwse0] {
    font-size: 1.1rem;
    color: #607d8b;
}

.activity-item.login .activity-icon i[b-umsaucwse0] { color: #4caf50; }
.activity-item.profile-update .activity-icon i[b-umsaucwse0] { color: #2196f3; }
.activity-item.training .activity-icon i[b-umsaucwse0] { color: #9c27b0; }
.activity-item.assignment .activity-icon i[b-umsaucwse0] { color: #ff9800; }
.activity-item.availability .activity-icon i[b-umsaucwse0] { color: #00bcd4; }
.activity-item.message .activity-icon i[b-umsaucwse0] { color: #3f51b5; }
.activity-item.note .activity-icon i[b-umsaucwse0] { color: #795548; }
.activity-item.phone-call .activity-icon i[b-umsaucwse0] { color: #009688; }
.activity-item.follow-up .activity-icon i[b-umsaucwse0] { color: #f44336; }
.activity-item.issue .activity-icon i[b-umsaucwse0] { color: #e91e63; }
.activity-item.commendation .activity-icon i[b-umsaucwse0] { color: #ffc107; }
.activity-item.system .activity-icon i[b-umsaucwse0] { color: #9e9e9e; }

.activity-content[b-umsaucwse0] {
    flex: 1;
    min-width: 0;
}

.activity-header[b-umsaucwse0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.activity-type[b-umsaucwse0] {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.activity-time[b-umsaucwse0] {
    font-size: 0.8rem;
    color: #999;
}

.activity-description[b-umsaucwse0] {
    margin: 0 0 0.35rem 0;
    font-size: 0.9rem;
    color: #555;
}

.activity-details[b-umsaucwse0] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 0.35rem;
}

.activity-details i[b-umsaucwse0] {
    font-size: 0.9rem;
    color: #9e9e9e;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.activity-details span[b-umsaucwse0] {
    font-size: 0.85rem;
    color: #666;
}

.activity-performer[b-umsaucwse0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #999;
}

.activity-performer i[b-umsaucwse0] {
    font-size: 0.9rem;
}

/* Load More */
.load-more[b-umsaucwse0] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Add Activity Section */
.add-activity-section[b-umsaucwse0] {
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.add-activity-section h5[b-umsaucwse0] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.add-activity-form[b-umsaucwse0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row[b-umsaucwse0] {
    width: 100%;
}

.form-actions[b-umsaucwse0] {
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-filters[b-umsaucwse0] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-umsaucwse0] {
        width: 100%;
    }
    
    .activity-stats[b-umsaucwse0] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .activity-item[b-umsaucwse0] {
        flex-direction: column;
    }
    
    .activity-icon[b-umsaucwse0] {
        align-self: flex-start;
    }
    
    .activity-header[b-umsaucwse0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* /Components/Pollworker/AssignmentsPanel.razor.rz.scp.css */
/* Assignments Panel Styles */
.assignments-panel[b-wrtbb8sx75] {
    max-width: 100%;
}

.panel-header[b-wrtbb8sx75] {
    margin-bottom: 1.5rem;
}

.panel-header h4[b-wrtbb8sx75] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

.panel-header h4 i[b-wrtbb8sx75] {
    font-size: 1.5rem;
}

.panel-header .description[b-wrtbb8sx75] {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Loading Container */
.loading-container[b-wrtbb8sx75] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Assignment Summary */
.assignment-summary[b-wrtbb8sx75] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-stat[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.stat-value[b-wrtbb8sx75] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e3a5f;
}

.stat-label[b-wrtbb8sx75] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
}

/* Filter Tabs */
.filter-tabs[b-wrtbb8sx75] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.filter-tab[b-wrtbb8sx75] {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.2s;
}

.filter-tab:hover[b-wrtbb8sx75] {
    background: #f0f0f0;
}

.filter-tab.active[b-wrtbb8sx75] {
    background: #1e3a5f;
    color: white;
}

/* No Assignments */
.no-assignments[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    text-align: center;
    color: #999;
}

.no-assignments i[b-wrtbb8sx75] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Assignments List */
.assignments-list[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assignment-card[b-wrtbb8sx75] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
}

.assignment-card:hover[b-wrtbb8sx75] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.assignment-card.election-day[b-wrtbb8sx75] {
    border-left: 4px solid #1e3a5f;
}

.assignment-card.early-voting[b-wrtbb8sx75] {
    border-left: 4px solid #0288d1;
}

.assignment-card.past[b-wrtbb8sx75] {
    border-left: 4px solid #9e9e9e;
    opacity: 0.8;
}

/* Assignment Date */
.assignment-date[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.assignment-date .day[b-wrtbb8sx75] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
}

.assignment-date .month[b-wrtbb8sx75] {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
}

.assignment-date .year[b-wrtbb8sx75] {
    font-size: 0.75rem;
    color: #999;
}

.ev-badge[b-wrtbb8sx75] {
    margin-top: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: #0288d1;
    color: white;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Assignment Details */
.assignment-details[b-wrtbb8sx75] {
    flex: 1;
    min-width: 0;
}

.assignment-header[b-wrtbb8sx75] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.pollsite-name[b-wrtbb8sx75] {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.status-badge[b-wrtbb8sx75] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.assigned[b-wrtbb8sx75] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-badge.completed[b-wrtbb8sx75] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.cancelled[b-wrtbb8sx75] {
    background: #ffebee;
    color: #c62828;
}

/* Assignment Info */
.assignment-info[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.info-row[b-wrtbb8sx75] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.info-row i[b-wrtbb8sx75] {
    font-size: 1rem;
    color: #607d8b;
    flex-shrink: 0;
}

.info-row.roles[b-wrtbb8sx75] {
    align-items: flex-start;
}

.role-tags[b-wrtbb8sx75] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.role-tag[b-wrtbb8sx75] {
    padding: 0.15rem 0.4rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 0.75rem;
}

.directions-link[b-wrtbb8sx75] {
    color: #1976d2;
    margin-left: 0.25rem;
}

.directions-link:hover[b-wrtbb8sx75] {
    color: #1565c0;
}

/* Assignment Actions */
.assignment-actions[b-wrtbb8sx75] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .assignment-card[b-wrtbb8sx75] {
        flex-direction: column;
    }
    
    .assignment-date[b-wrtbb8sx75] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        min-width: auto;
    }
    
    .assignment-actions[b-wrtbb8sx75] {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .assignment-header[b-wrtbb8sx75] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pollworker/RatingsPanel.razor.rz.scp.css */
/* Ratings Panel Styles */
.ratings-panel[b-qgn1gv8grs] {
    max-width: 100%;
}

.panel-header[b-qgn1gv8grs] {
    margin-bottom: 1.5rem;
}

.panel-header h4[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

.panel-header h4 i[b-qgn1gv8grs] {
    font-size: 1.5rem;
    color: #ffc107;
}

.panel-header .description[b-qgn1gv8grs] {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Loading Container */
.loading-container[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Rating Overview */
.rating-overview[b-qgn1gv8grs] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.overall-rating[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rating-circle[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.rating-value[b-qgn1gv8grs] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.rating-max[b-qgn1gv8grs] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.rating-stars[b-qgn1gv8grs] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.rating-stars .star[b-qgn1gv8grs] {
    font-size: 1.5rem;
}

.rating-stars .star.filled[b-qgn1gv8grs] {
    color: #ffc107;
}

.rating-stars .star.half[b-qgn1gv8grs] {
    color: #ffc107;
}

.rating-stars .star.empty[b-qgn1gv8grs] {
    color: #e0e0e0;
}

.rating-count[b-qgn1gv8grs] {
    font-size: 0.85rem;
    color: #666;
}

/* Rating Breakdown */
.rating-breakdown[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
}

.rating-breakdown h5[b-qgn1gv8grs] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.breakdown-row[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.star-label[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 40px;
    font-size: 0.9rem;
    color: #666;
}

.star-label i[b-qgn1gv8grs] {
    font-size: 1rem;
    color: #ffc107;
}

.progress-bar[b-qgn1gv8grs] {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-qgn1gv8grs] {
    height: 100%;
    background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breakdown-row .count[b-qgn1gv8grs] {
    min-width: 24px;
    font-size: 0.85rem;
    color: #666;
    text-align: right;
}

/* Rating Categories */
.rating-categories[b-qgn1gv8grs] {
    margin-bottom: 2rem;
}

.rating-categories h5[b-qgn1gv8grs] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.category-grid[b-qgn1gv8grs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.category-card[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.category-card i[b-qgn1gv8grs] {
    font-size: 1.75rem;
    color: #1e3a5f;
    margin-bottom: 0.5rem;
}

.category-name[b-qgn1gv8grs] {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.category-rating[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-rating .value[b-qgn1gv8grs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a5f;
}

.mini-stars[b-qgn1gv8grs] {
    display: flex;
    gap: 0.1rem;
}

.mini-stars i[b-qgn1gv8grs] {
    font-size: 0.9rem;
    color: #e0e0e0;
    margin: 0;
}

.mini-stars i.filled[b-qgn1gv8grs] {
    color: #ffc107;
}

/* Individual Ratings */
.individual-ratings[b-qgn1gv8grs] {
    margin-bottom: 2rem;
}

.individual-ratings h5[b-qgn1gv8grs] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.no-ratings[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
    color: #999;
}

.no-ratings i[b-qgn1gv8grs] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.ratings-list[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-card[b-qgn1gv8grs] {
    padding: 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

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

.rating-stars-display[b-qgn1gv8grs] {
    display: flex;
    gap: 0.15rem;
}

.rating-stars-display i[b-qgn1gv8grs] {
    font-size: 1.25rem;
    color: #e0e0e0;
}

.rating-stars-display i.filled[b-qgn1gv8grs] {
    color: #ffc107;
}

.rating-date[b-qgn1gv8grs] {
    font-size: 0.85rem;
    color: #999;
}

.rating-context[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.separator[b-qgn1gv8grs] {
    color: #ccc;
}

.rating-notes[b-qgn1gv8grs] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.rating-notes i[b-qgn1gv8grs] {
    color: #9e9e9e;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.rating-notes p[b-qgn1gv8grs] {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
}

.rating-footer[b-qgn1gv8grs] {
    display: flex;
    justify-content: flex-end;
}

.rated-by[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #999;
}

.rated-by i[b-qgn1gv8grs] {
    font-size: 1rem;
}

/* Achievements Section */
.achievements-section[b-qgn1gv8grs] {
    margin-bottom: 1rem;
}

.achievements-section h5[b-qgn1gv8grs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.achievements-section h5 i[b-qgn1gv8grs] {
    color: #ffc107;
}

.achievements-grid[b-qgn1gv8grs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.achievement-badge[b-qgn1gv8grs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    text-align: center;
    opacity: 0.6;
}

.achievement-badge.earned[b-qgn1gv8grs] {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 2px solid #ffc107;
    opacity: 1;
}

.achievement-badge i[b-qgn1gv8grs] {
    font-size: 2rem;
    color: #9e9e9e;
    margin-bottom: 0.5rem;
}

.achievement-badge.earned i[b-qgn1gv8grs] {
    color: #ffc107;
}

.badge-name[b-qgn1gv8grs] {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.badge-desc[b-qgn1gv8grs] {
    font-size: 0.8rem;
    color: #666;
}

.badge-progress[b-qgn1gv8grs] {
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #e0e0e0;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .rating-overview[b-qgn1gv8grs] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .category-grid[b-qgn1gv8grs] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .achievements-grid[b-qgn1gv8grs] {
        grid-template-columns: 1fr;
    }
    
    .rating-header[b-qgn1gv8grs] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .rating-context[b-qgn1gv8grs] {
        flex-wrap: wrap;
    }
}
/* /Components/Pollworker/RolesStatusPanel.razor.rz.scp.css */
/* Roles & Status Panel Styles */
.roles-status-panel[b-qz8s9vqt6z] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Panel Sections */
.panel-section[b-qz8s9vqt6z] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.25rem;
}

.panel-section.collapsible[b-qz8s9vqt6z] {
    cursor: default;
}

.section-header[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header.clickable[b-qz8s9vqt6z] {
    cursor: pointer;
}

.section-header.clickable:hover[b-qz8s9vqt6z] {
    opacity: 0.8;
}

.section-header h5[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a5f;
}

.section-header h5 i[b-qz8s9vqt6z] {
    font-size: 1.25rem;
}

.toggle-hint[b-qz8s9vqt6z] {
    font-size: 0.75rem;
    color: #999;
}

/* Status Section */
.current-status[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge[b-qz8s9vqt6z] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-badge.status-active[b-qz8s9vqt6z] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.status-pending[b-qz8s9vqt6z] {
    background: #fff3e0;
    color: #ef6c00;
}

.status-badge.status-inactive[b-qz8s9vqt6z] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-badge.status-removed[b-qz8s9vqt6z] {
    background: #fce4ec;
    color: #c62828;
}

.status-badge.status-dismissed[b-qz8s9vqt6z] {
    background: #ffebee;
    color: #b71c1c;
}

.status-badge.status-unknown[b-qz8s9vqt6z] {
    background: #f5f5f5;
    color: #757575;
}

.status-category[b-qz8s9vqt6z] {
    font-size: 0.85rem;
    color: #666;
}

.status-edit-form[b-qz8s9vqt6z] {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.status-edit-form .form-group[b-qz8s9vqt6z] {
    margin-bottom: 1rem;
}

.status-edit-form label[b-qz8s9vqt6z] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

.status-edit-form .form-actions[b-qz8s9vqt6z] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Roles List */
.roles-list[b-qz8s9vqt6z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-card[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.role-card:hover[b-qz8s9vqt6z] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.role-card.expired[b-qz8s9vqt6z] {
    background: #fff8f8;
    border-color: #ffcdd2;
}

.role-card.expiring-soon[b-qz8s9vqt6z] {
    background: #fffde7;
    border-color: #fff59d;
}

.role-info[b-qz8s9vqt6z] {
    flex: 1;
}

.role-name[b-qz8s9vqt6z] {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.role-meta[b-qz8s9vqt6z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: #666;
}

.role-meta .expiration[b-qz8s9vqt6z],
.role-meta .assigned-by[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.role-meta .expiration i[b-qz8s9vqt6z],
.role-meta .assigned-by i[b-qz8s9vqt6z] {
    font-size: 0.9rem;
}

.role-meta .expiration.expired[b-qz8s9vqt6z] {
    color: #c62828;
}

.role-meta .expiration.warning[b-qz8s9vqt6z] {
    color: #ef6c00;
}

.role-meta .expiration.never[b-qz8s9vqt6z] {
    color: #4caf50;
}

.role-actions[b-qz8s9vqt6z] {
    display: flex;
    gap: 0.5rem;
}

.role-actions .btn[b-qz8s9vqt6z] {
    padding: 0.35rem 0.5rem;
}

.role-actions .btn i[b-qz8s9vqt6z] {
    font-size: 1.1rem;
}

/* Empty State */
.empty-state[b-qz8s9vqt6z] {
    text-align: center;
    padding: 2rem;
    color: #999;
}

.empty-state i[b-qz8s9vqt6z] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.empty-state p[b-qz8s9vqt6z] {
    margin: 0;
}

/* Loading Indicator */
.loading-indicator[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #666;
}

/* Role History */
.role-history[b-qz8s9vqt6z] {
    padding-top: 0.5rem;
}

.history-timeline[b-qz8s9vqt6z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 2px solid #e0e0e0;
}

.history-entry[b-qz8s9vqt6z] {
    display: flex;
    gap: 0.75rem;
    position: relative;
}

.history-icon[b-qz8s9vqt6z] {
    position: absolute;
    left: -1.5rem;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-icon i[b-qz8s9vqt6z] {
    font-size: 0.9rem;
    color: #666;
}

.history-content[b-qz8s9vqt6z] {
    padding-left: 0.5rem;
}

.history-title[b-qz8s9vqt6z] {
    font-weight: 500;
    color: #333;
}

.history-date[b-qz8s9vqt6z] {
    font-size: 0.8rem;
    color: #999;
}

.history-notes[b-qz8s9vqt6z] {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Modal Styles */
.modal-backdrop[b-qz8s9vqt6z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal[b-qz8s9vqt6z] {
    z-index: 1050;
}

.modal-header[b-qz8s9vqt6z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header i[b-qz8s9vqt6z] {
    font-size: 1.25rem;
}

.modal-header.bg-danger[b-qz8s9vqt6z] {
    background: #dc3545;
}

.modal-header.bg-danger .modal-title[b-qz8s9vqt6z] {
    color: white;
}

/* Role Preview in Modal */
.role-preview[b-qz8s9vqt6z] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-item[b-qz8s9vqt6z] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.preview-item:last-child[b-qz8s9vqt6z] {
    margin-bottom: 0;
}

.preview-item .label[b-qz8s9vqt6z] {
    font-weight: 500;
    color: #555;
    min-width: 120px;
}

.preview-item .value[b-qz8s9vqt6z] {
    color: #333;
}

.preview-item.expiration-preview[b-qz8s9vqt6z] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fff3e0;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #e65100;
}

.preview-item.expiration-preview i[b-qz8s9vqt6z] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Button Styles */
.btn[b-qz8s9vqt6z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn i[b-qz8s9vqt6z] {
    font-size: 1rem;
}

.btn-outline-primary[b-qz8s9vqt6z] {
    border-color: #1e3a5f;
    color: #1e3a5f;
}

.btn-outline-primary:hover[b-qz8s9vqt6z] {
    background: #1e3a5f;
    color: white;
}

.btn-outline-success[b-qz8s9vqt6z] {
    border-color: #4caf50;
    color: #4caf50;
}

.btn-outline-success:hover[b-qz8s9vqt6z] {
    background: #4caf50;
    color: white;
}

.btn-outline-danger[b-qz8s9vqt6z] {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover[b-qz8s9vqt6z] {
    background: #dc3545;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .role-card[b-qz8s9vqt6z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .role-actions[b-qz8s9vqt6z] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .role-meta[b-qz8s9vqt6z] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .current-status[b-qz8s9vqt6z] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pollworker/SendMessagePanel.razor.rz.scp.css */
/* Send Message Panel Styles */
.send-message-panel[b-0nfgkreygp] {
    max-width: 100%;
}

.message-header[b-0nfgkreygp] {
    margin-bottom: 1.5rem;
}

.message-header h4[b-0nfgkreygp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

.message-header h4 i[b-0nfgkreygp] {
    font-size: 1.5rem;
}

.message-header .description[b-0nfgkreygp] {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Channel Selection */
.channel-selection[b-0nfgkreygp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.channel-option[b-0nfgkreygp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.channel-option:hover:not(.disabled)[b-0nfgkreygp] {
    background: #e3f2fd;
    border-color: #90caf9;
}

.channel-option.selected[b-0nfgkreygp] {
    background: #e3f2fd;
    border-color: #1976d2;
}

.channel-option.disabled[b-0nfgkreygp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.channel-icon[b-0nfgkreygp] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.channel-icon i[b-0nfgkreygp] {
    font-size: 1.5rem;
    color: #1976d2;
}

.channel-info[b-0nfgkreygp] {
    flex: 1;
}

.channel-name[b-0nfgkreygp] {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.channel-detail[b-0nfgkreygp] {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

.check-icon[b-0nfgkreygp] {
    color: #4caf50;
    font-size: 1.5rem;
}

/* Message Compose */
.message-compose[b-0nfgkreygp] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.message-compose .form-group[b-0nfgkreygp] {
    margin-bottom: 1rem;
}

.message-compose .form-group label[b-0nfgkreygp] {
    display: block;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

.char-count[b-0nfgkreygp] {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
}

.char-count.warning[b-0nfgkreygp] {
    color: #f57c00;
}

/* Quick Templates */
.quick-templates[b-0nfgkreygp] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.template-label[b-0nfgkreygp] {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.template-buttons[b-0nfgkreygp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.message-actions[b-0nfgkreygp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Phone Call Section */
.phone-call-section[b-0nfgkreygp] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.phone-numbers[b-0nfgkreygp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.phone-number-card[b-0nfgkreygp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.phone-number-card i[b-0nfgkreygp] {
    font-size: 1.5rem;
    color: #1976d2;
}

.phone-info[b-0nfgkreygp] {
    flex: 1;
}

.phone-label[b-0nfgkreygp] {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

.phone-link[b-0nfgkreygp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1976d2;
    text-decoration: none;
}

.phone-link:hover[b-0nfgkreygp] {
    text-decoration: underline;
}

.call-notes h5[b-0nfgkreygp] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #333;
}

.notes-actions[b-0nfgkreygp] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* Message History */
.message-history[b-0nfgkreygp] {
    margin-top: 2rem;
}

.message-history h5[b-0nfgkreygp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.history-list[b-0nfgkreygp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-item[b-0nfgkreygp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.history-icon[b-0nfgkreygp] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    flex-shrink: 0;
}

.history-icon i[b-0nfgkreygp] {
    font-size: 1.1rem;
    color: #607d8b;
}

.history-content[b-0nfgkreygp] {
    flex: 1;
    min-width: 0;
}

.history-header[b-0nfgkreygp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.history-channel[b-0nfgkreygp] {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.history-date[b-0nfgkreygp] {
    font-size: 0.8rem;
    color: #999;
}

.history-preview[b-0nfgkreygp] {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-status[b-0nfgkreygp] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
}

.history-status.delivered[b-0nfgkreygp] {
    background: #e8f5e9;
    color: #2e7d32;
}

.history-status.sent[b-0nfgkreygp] {
    background: #e3f2fd;
    color: #1565c0;
}

.history-status.read[b-0nfgkreygp] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.history-status.logged[b-0nfgkreygp] {
    background: #fff3e0;
    color: #e65100;
}

.no-history[b-0nfgkreygp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #999;
}

.no-history i[b-0nfgkreygp] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .channel-selection[b-0nfgkreygp] {
        grid-template-columns: 1fr;
    }
    
    .history-item[b-0nfgkreygp] {
        flex-direction: column;
    }
    
    .history-status[b-0nfgkreygp] {
        align-self: flex-start;
    }
}
/* /Components/Pollworker/UserManagement.razor.rz.scp.css */
/* User Management Container */
.user-management-container[b-pnxf47yhlc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* User Profile Header */
.user-profile-header[b-pnxf47yhlc] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    border-radius: 12px;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Back Button */
.back-button[b-pnxf47yhlc] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    align-self: center;
}

.back-button:hover[b-pnxf47yhlc] {
    background: rgba(255, 255, 255, 0.25);
}

.back-button i[b-pnxf47yhlc] {
    font-size: 24px;
    color: white;
}

.profile-avatar[b-pnxf47yhlc] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-avatar i[b-pnxf47yhlc] {
    font-size: 48px;
    color: white;
}

.profile-info[b-pnxf47yhlc] {
    flex: 1;
}

.profile-name-row[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.profile-name[b-pnxf47yhlc] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.role-badge[b-pnxf47yhlc] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.role-badge.active[b-pnxf47yhlc] {
    background: #4caf50;
}

.profile-id[b-pnxf47yhlc] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.profile-id .label[b-pnxf47yhlc] {
    opacity: 0.8;
}

.profile-id .separator[b-pnxf47yhlc] {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.profile-address[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.profile-address i[b-pnxf47yhlc] {
    font-size: 1.1rem;
}

.profile-status[b-pnxf47yhlc] {
    flex-shrink: 0;
}

.status-badge[b-pnxf47yhlc] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-active[b-pnxf47yhlc] {
    background: #4caf50;
    color: white;
}

.status-badge.status-inactive[b-pnxf47yhlc] {
    background: #f44336;
    color: white;
}

.status-badge.status-pending[b-pnxf47yhlc] {
    background: #ff9800;
    color: white;
}

.status-badge.status-unknown[b-pnxf47yhlc] {
    background: #9e9e9e;
    color: white;
}

.status-badge.status-removed[b-pnxf47yhlc] {
    background: #dc3545;
    color: white;
}

.status-badge.status-dismissed[b-pnxf47yhlc] {
    background: #6c757d;
    color: white;
}

/* Status & Roles Row - Side by Side Layout */
.status-roles-row[b-pnxf47yhlc] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.status-roles-row .contact-info-section[b-pnxf47yhlc] {
    margin-bottom: 0;
}

.status-roles-row .status-section[b-pnxf47yhlc] {
    flex: 1;
    min-width: 0;
}

.status-roles-row .roles-section[b-pnxf47yhlc] {
    flex: 1;
    min-width: 0;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 768px) {
    .status-roles-row[b-pnxf47yhlc] {
        flex-direction: column;
    }
    
    .status-roles-row .status-section[b-pnxf47yhlc],
    .status-roles-row .roles-section[b-pnxf47yhlc] {
        flex: 1;
        min-width: auto;
    }
}

/* Contact Info Section */
.contact-info-section[b-pnxf47yhlc] {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header h4[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.section-header h4 i[b-pnxf47yhlc] {
    color: #1e3a5f;
}

.contact-display[b-pnxf47yhlc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.contact-item[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.contact-item i[b-pnxf47yhlc] {
    color: #607d8b;
    font-size: 1.25rem;
}

.contact-item .label[b-pnxf47yhlc] {
    color: #666;
    font-size: 0.85rem;
}

.contact-item .value[b-pnxf47yhlc] {
    color: #333;
    font-weight: 500;
}

.contact-edit-form[b-pnxf47yhlc] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.form-row[b-pnxf47yhlc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-pnxf47yhlc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-pnxf47yhlc] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.form-actions[b-pnxf47yhlc] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Tabs Section */
.tabs-section[b-pnxf47yhlc] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.tab-content[b-pnxf47yhlc] {
    padding: 1.5rem;
    min-height: 400px;
}

/* Common Panel Styles */
[b-pnxf47yhlc] .panel-header,
[b-pnxf47yhlc] .showcase-header,
[b-pnxf47yhlc] .message-header {
    margin-bottom: 1.5rem;
}

[b-pnxf47yhlc] .panel-header h4,
[b-pnxf47yhlc] .showcase-header h4,
[b-pnxf47yhlc] .message-header h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

[b-pnxf47yhlc] .panel-header h4 i,
[b-pnxf47yhlc] .showcase-header h4 i,
[b-pnxf47yhlc] .message-header h4 i {
    font-size: 1.5rem;
}

[b-pnxf47yhlc] .description {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Loading Container */
[b-pnxf47yhlc] .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Summary Cards */
[b-pnxf47yhlc] .assignment-summary,
[b-pnxf47yhlc] .career-summary,
[b-pnxf47yhlc] .availability-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

[b-pnxf47yhlc] .summary-stat,
[b-pnxf47yhlc] .summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

[b-pnxf47yhlc] .summary-card {
    flex-direction: row;
    gap: 1rem;
}

[b-pnxf47yhlc] .summary-card i {
    font-size: 2rem;
    color: #1e3a5f;
}

[b-pnxf47yhlc] .summary-card.available i { color: #4caf50; }
[b-pnxf47yhlc] .summary-card.unavailable i { color: #f44336; }
[b-pnxf47yhlc] .summary-card.pending i { color: #ff9800; }

[b-pnxf47yhlc] .stat-value,
[b-pnxf47yhlc] .summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e3a5f;
}

[b-pnxf47yhlc] .stat-label,
[b-pnxf47yhlc] .summary-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
}

/* Filter Tabs */
[b-pnxf47yhlc] .filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

[b-pnxf47yhlc] .filter-tab {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.2s;
}

[b-pnxf47yhlc] .filter-tab:hover {
    background: #f0f0f0;
}

[b-pnxf47yhlc] .filter-tab.active {
    background: #1e3a5f;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .user-profile-header[b-pnxf47yhlc] {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-name-row[b-pnxf47yhlc] {
        flex-direction: column;
    }
    
    .profile-status[b-pnxf47yhlc] {
        margin-top: 1rem;
    }
    
    .contact-display[b-pnxf47yhlc] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-pnxf47yhlc] {
        grid-template-columns: 1fr;
    }
}

/* Status Pill Styles */
.status-pill[b-pnxf47yhlc] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-pill-active[b-pnxf47yhlc] {
    background: #d4edda;
    color: #155724;
}

.status-pill-pending[b-pnxf47yhlc] {
    background: #fff3cd;
    color: #856404;
}

.status-pill-inactive[b-pnxf47yhlc] {
    background: #f8d7da;
    color: #721c24;
}

.status-pill-removed[b-pnxf47yhlc] {
    background: #f8d7da;
    color: #721c24;
}

.status-pill-dismissed[b-pnxf47yhlc] {
    background: #e2e3e5;
    color: #383d41;
}

.status-pill-unknown[b-pnxf47yhlc] {
    background: #e2e3e5;
    color: #6c757d;
}

.status-description[b-pnxf47yhlc] {
    margin-left: 0.75rem;
    color: #666;
    font-size: 0.9rem;
}

/* Roles Display */
.roles-display[b-pnxf47yhlc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-item[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.role-info[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.role-name[b-pnxf47yhlc] {
    font-weight: 500;
    color: #333;
}

.role-expiration[b-pnxf47yhlc] {
    font-size: 0.8rem;
    color: #666;
}

.role-expiration.expired[b-pnxf47yhlc] {
    color: #dc3545;
    font-weight: 500;
}

.role-expiration.expiring[b-pnxf47yhlc] {
    color: #fd7e14;
    font-weight: 500;
}

.role-expiration.never[b-pnxf47yhlc] {
    color: #28a745;
}

.btn-icon-small[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #999;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-small:hover[b-pnxf47yhlc] {
    background: #f8d7da;
    color: #dc3545;
}

.btn-icon-small i[b-pnxf47yhlc] {
    font-size: 1rem;
}

.no-roles-message[b-pnxf47yhlc] {
    padding: 1rem;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Modal Styles */
.modal-backdrop[b-pnxf47yhlc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal[b-pnxf47yhlc] {
    z-index: 1050;
}

.modal-title[b-pnxf47yhlc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-title i[b-pnxf47yhlc] {
    font-size: 1.25rem;
}
/* /Components/Pollworker/WorkHistoryPanel.razor.rz.scp.css */
/* Work History Panel Styles */
.work-history-panel[b-lh6z3ya136] {
    max-width: 100%;
}

.panel-header[b-lh6z3ya136] {
    margin-bottom: 1.5rem;
}

.panel-header h4[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #1e3a5f;
}

.panel-header h4 i[b-lh6z3ya136] {
    font-size: 1.5rem;
}

.panel-header .description[b-lh6z3ya136] {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Loading Container */
.loading-container[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Career Summary */
.career-summary[b-lh6z3ya136] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.summary-card i[b-lh6z3ya136] {
    font-size: 2rem;
    color: #1e3a5f;
}

.summary-card.total-elections i[b-lh6z3ya136] { color: #1e3a5f; }
.summary-card.total-hours i[b-lh6z3ya136] { color: #0288d1; }
.summary-card.total-days i[b-lh6z3ya136] { color: #7b1fa2; }
.summary-card.years-service i[b-lh6z3ya136] { color: #ffc107; }

.summary-content[b-lh6z3ya136] {
    display: flex;
    flex-direction: column;
}

.summary-value[b-lh6z3ya136] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a5f;
}

.summary-label[b-lh6z3ya136] {
    font-size: 0.8rem;
    color: #666;
}

/* History by Year */
.history-by-year[b-lh6z3ya136] {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.history-by-year h5[b-lh6z3ya136] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.year-chart[b-lh6z3ya136] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.year-row[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.year-label[b-lh6z3ya136] {
    min-width: 50px;
    font-weight: 600;
    color: #333;
}

.year-bar-container[b-lh6z3ya136] {
    flex: 1;
    height: 28px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.year-bar[b-lh6z3ya136] {
    height: 100%;
    background: linear-gradient(90deg, #1e3a5f 0%, #2d5a87 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-width: fit-content;
}

.bar-label[b-lh6z3ya136] {
    font-size: 0.8rem;
    color: white;
    white-space: nowrap;
}

/* Detailed History */
.detailed-history[b-lh6z3ya136] {
    margin-bottom: 2rem;
}

.detailed-history h5[b-lh6z3ya136] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.history-timeline[b-lh6z3ya136] {
    position: relative;
    padding-left: 2rem;
}

.history-timeline[b-lh6z3ya136]::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item[b-lh6z3ya136] {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child[b-lh6z3ya136] {
    padding-bottom: 0;
}

.timeline-marker[b-lh6z3ya136] {
    position: absolute;
    left: -2rem;
    top: 0;
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #1e3a5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-marker i[b-lh6z3ya136] {
    font-size: 1rem;
    color: #1e3a5f;
}

.timeline-content[b-lh6z3ya136] {
    padding: 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-left: 0.5rem;
}

.timeline-header[b-lh6z3ya136] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.timeline-header h6[b-lh6z3ya136] {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.timeline-date[b-lh6z3ya136] {
    font-size: 0.85rem;
    color: #999;
    white-space: nowrap;
}

.timeline-details[b-lh6z3ya136] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.detail-row[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

.detail-row i[b-lh6z3ya136] {
    font-size: 1rem;
    color: #607d8b;
    flex-shrink: 0;
}

.timeline-footer[b-lh6z3ya136] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-display[b-lh6z3ya136] {
    display: flex;
    gap: 0.1rem;
}

.rating-display i[b-lh6z3ya136] {
    font-size: 1rem;
    color: #e0e0e0;
}

.rating-display i.filled[b-lh6z3ya136] {
    color: #ffc107;
}

.status-badge[b-lh6z3ya136] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.completed[b-lh6z3ya136] {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Positions Summary */
.positions-summary[b-lh6z3ya136] {
    margin-bottom: 2rem;
}

.positions-summary h5[b-lh6z3ya136] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.positions-grid[b-lh6z3ya136] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.position-card[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #e3f2fd;
    border-radius: 20px;
}

.position-name[b-lh6z3ya136] {
    font-weight: 500;
    color: #1565c0;
}

.position-count[b-lh6z3ya136] {
    font-size: 0.8rem;
    color: #1976d2;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

/* Pollsites Summary */
.pollsites-summary[b-lh6z3ya136] {
    margin-bottom: 1rem;
}

.pollsites-summary h5[b-lh6z3ya136] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #333;
}

.pollsites-list[b-lh6z3ya136] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pollsite-row[b-lh6z3ya136] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.pollsite-row i[b-lh6z3ya136] {
    color: #607d8b;
}

.pollsite-name[b-lh6z3ya136] {
    flex: 1;
    color: #333;
}

.pollsite-count[b-lh6z3ya136] {
    font-size: 0.85rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .career-summary[b-lh6z3ya136] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .year-row[b-lh6z3ya136] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .year-bar-container[b-lh6z3ya136] {
        width: 100%;
    }
    
    .timeline-header[b-lh6z3ya136] {
        flex-direction: column;
    }
    
    .timeline-footer[b-lh6z3ya136] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .positions-grid[b-lh6z3ya136] {
        flex-direction: column;
    }
    
    .position-card[b-lh6z3ya136] {
        justify-content: space-between;
    }
}
/* /Components/Shared/ErrorDisplay.razor.rz.scp.css */
/* Dev-mode error display — detailed, screenshot-friendly */
.error-display--dev[b-nhfziueawi] {
    background-color: #1e1e2e;
    color: #cdd6f4;
    border: 2px solid #f38ba8;
    border-radius: 8px;
    margin: 12px 0;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    overflow: hidden;
}

.error-display__header[b-nhfziueawi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f38ba8;
    color: #1e1e2e;
    padding: 8px 12px;
    font-weight: 600;
}

.error-display__source[b-nhfziueawi] {
    font-weight: 400;
    opacity: 0.8;
}

.error-display__message[b-nhfziueawi] {
    padding: 10px 12px;
    background-color: #313244;
    color: #fab387;
    font-weight: 500;
    border-bottom: 1px solid #45475a;
}

.error-display__details[b-nhfziueawi] {
    padding: 10px 12px;
}

.error-display__type[b-nhfziueawi] {
    color: #89b4fa;
    margin-bottom: 4px;
}

.error-display__exception[b-nhfziueawi] {
    color: #f38ba8;
    margin-bottom: 6px;
}

.error-display__inner[b-nhfziueawi] {
    color: #a6adc8;
    margin-bottom: 6px;
    padding-left: 12px;
    border-left: 2px solid #45475a;
}

.error-display__stack[b-nhfziueawi] {
    background-color: #11111b;
    color: #a6adc8;
    padding: 10px;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 6px;
}

details summary[b-nhfziueawi] {
    color: #89b4fa;
    cursor: pointer;
    user-select: none;
}

details summary:hover[b-nhfziueawi] {
    color: #74c7ec;
}
/* /Components/Shared/GlobalErrorBoundary.razor.rz.scp.css */
/* Global Error Boundary Styles */

/* Dev mode - dark theme error overlay */
.global-error-boundary--dev[b-gp3k9ut35o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 17, 27, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.global-error-boundary--dev .global-error-boundary__content[b-gp3k9ut35o] {
    background-color: #1e1e2e;
    border: 2px solid #f38ba8;
    border-radius: 12px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    color: #cdd6f4;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

.global-error-boundary--dev .global-error-boundary__icon[b-gp3k9ut35o] {
    font-size: 48px;
    color: #f38ba8;
    margin-bottom: 12px;
}

.global-error-boundary--dev h2[b-gp3k9ut35o] {
    color: #f38ba8;
    margin-bottom: 16px;
}

.global-error-boundary__type[b-gp3k9ut35o] {
    color: #89b4fa;
    font-weight: 600;
    font-size: 1.1rem;
}

.global-error-boundary__message[b-gp3k9ut35o] {
    color: #fab387;
    font-size: 1rem;
    margin-bottom: 8px;
}

.global-error-boundary__inner[b-gp3k9ut35o] {
    color: #a6adc8;
    padding-left: 12px;
    border-left: 2px solid #45475a;
    margin-bottom: 12px;
}

.global-error-boundary__stack[b-gp3k9ut35o] {
    background-color: #11111b;
    color: #a6adc8;
    padding: 12px;
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}

.global-error-boundary__actions[b-gp3k9ut35o] {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

/* Prod mode - friendly error page */
.global-error-boundary--prod[b-gp3k9ut35o] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.global-error-boundary--prod .global-error-boundary__content[b-gp3k9ut35o] {
    max-width: 500px;
}

.global-error-boundary__icon-prod[b-gp3k9ut35o] {
    font-size: 56px;
    color: #6c757d;
    margin-bottom: 20px;
}

.global-error-boundary--prod h2[b-gp3k9ut35o] {
    color: #333;
    margin-bottom: 12px;
    font-weight: 400;
}